/* ROOT VARIABLES */
:root {
    --color-primary: #0D47A1; /* Blue - Used in HTML for cookie button */
    --color-primary-dark: #0A3A82;
    --color-secondary: #FF6D00; /* Orange - Used in HTML for cookie border */
    --color-secondary-dark: #E66000;
    --color-accent: #FFD600; /* Yellow - Used in HTML for cookie link */
    --color-accent-dark: #E6C000;
    --color-tertiary: #2E7D32; /* Green - Fourth color for Tetrad */
    --color-tertiary-dark: #1E5923;

    --color-background-light: #F8F9FA;
    --color-background-section-dark: #2C2C2C; /* For darker sections if needed, not black */
    --color-header-footer-bg: #141414; /* Very Dark Grey / Almost Black */
    --color-text-light: #FFFFFF;
    --color-text-dark: #212529;
    --color-text-darker: #111111;
    --color-text-muted: #6c757d;
    --color-text-on-dark: #E0E0E0; /* Slightly off-white for better readability on dark */

    --color-border: #495057;
    --color-border-light: #dee2e6;
    --color-border-brutal: #000000;
    --color-border-brutal-alt: #333333;

    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Source Sans Pro', sans-serif;

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    --border-radius-sharp: 0px; /* Brutalism */
    --border-radius-slight: 4px; /* For some interactive elements if needed */

    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-brutal-offset: 4px 4px 0px var(--color-border-brutal);
}

/* BASE STYLES */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size for rem units */
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

main {
    padding-top: 70px; /* Adjust if header height changes, for sticky header */
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text-darker); /* Ensure high contrast for titles */
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.section-title { /* Applied to H2 in sections */
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem); /* Adaptive typography */
    text-align: center;
    margin-bottom: 2rem !important; /* Bootstrap override for consistency */
    color: var(--color-text-darker);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.hero-title { /* Specific for Hero H1 */
    font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
    color: var(--color-text-light) !important; /* STROGO: white text */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7) !important; /* Ensure readability on image */
}

.hero-subtitle {
    font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    color: var(--color-text-light) !important; /* STROGO: white text */
    margin-bottom: 2rem;
    font-weight: 400;
}

p {
    margin-bottom: 1rem;
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* UTILITY CLASSES */
.section-bg-light {
    background-color: var(--color-background-light);
}
.section-bg-dark { /* If you need a dark section */
    background-color: var(--color-background-section-dark);
    color: var(--color-text-on-dark);
}
.section-bg-dark .section-title,
.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4, .section-bg-dark h5, .section-bg-dark h6 {
    color: var(--color-text-light);
}
.section-bg-dark p {
    color: var(--color-text-on-dark);
}

.brutal-border {
    border: 2px solid var(--color-border-brutal);
    padding: 1.5rem;
}

/* GLOBAL COMPONENT STYLES */
/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-sharp);
    transition: all var(--transition-speed-normal) var(--transition-elastic);
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-brutal-offset);
    position: relative; /* For pseudo-elements or transforms */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--color-border-brutal);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}


.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-border-brutal);
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    border-color: var(--color-border-brutal);
}

.btn-secondary { /* Example for another button type */
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-border-brutal);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-text-light);
    border-color: var(--color-border-brutal);
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none; /* Outline buttons might not have the offset shadow */
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    transform: none;
    box-shadow: none;
}


.cta-button { /* Hero button, inherits .btn, .btn-primary */
    padding: 1rem 2rem;
    font-size: 1.1rem;
    background-color: var(--color-secondary); /* Different color for emphasis */
}
.cta-button:hover {
    background-color: var(--color-secondary-dark);
}


/* Forms */
.form-control {
    border-radius: var(--border-radius-sharp);
    border: 2px solid var(--color-border);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-speed-fast) ease-in-out, box-shadow var(--transition-speed-fast) ease-in-out;
}
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25); /* Bootstrap's focus, adapt color */
    box-shadow: none; /* Brutalist preference */
    outline: 2px solid var(--color-primary);
}
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.brutal-form .form-control {
    border: 2px solid var(--color-border-brutal);
    box-shadow: 2px 2px 0px var(--color-border-brutal-alt);
}
.brutal-form .form-control:focus {
    outline: none;
    box-shadow: 2px 2px 0px var(--color-primary);
    border-color: var(--color-primary);
}


/* HEADER & NAVIGATION */
.bg-dark-brutal { /* Used by header and footer in HTML */
    background-color: var(--color-header-footer-bg) !important; /* Override Bootstrap */
}
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-brutal);
}
.navbar-brand {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    color: var(--color-text-light) !important;
}
.navbar-nav .nav-link {
    color: var(--color-text-on-dark) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: var(--border-radius-sharp);
    transition: background-color var(--transition-speed-fast), color var(--transition-speed-fast);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { /* Assuming .active is added by JS or Bootstrap */
    color: var(--color-accent) !important;
    background-color: rgba(255, 255, 255, 0.05);
}
.navbar-toggler {
    border: 2px solid var(--color-text-on-dark);
    border-radius: var(--border-radius-sharp);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* HERO SECTION */
.hero-section {
    min-height: 80vh; /* Use vh for hero, but not fixed px */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For overlay */
}
/* Overlay is applied inline via linear-gradient in HTML style attribute */


/* PROGRAM SECTION (Accordion) */
.accordion-item {
    background-color: var(--color-background-light);
    border: 2px solid var(--color-border-brutal);
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sharp) !important; /* Override Bootstrap */
}
.accordion-header {
    border-bottom: 2px solid var(--color-border-brutal);
}
.accordion-button {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-darker);
    background-color: transparent;
    border-radius: var(--border-radius-sharp) !important;
    box-shadow: none !important; /* Override Bootstrap */
}
.accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb, 13, 71, 161), 0.1); /* Use RGB version of primary if possible for opacity */
}
.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}
.accordion-button::after { /* Style Bootstrap's arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%0D47A1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Primary color when open */
  transform: rotate(-180deg);
}
.accordion-body {
    padding: 1.5rem;
    font-size: 1rem;
}


/* CARDS (Workshops, Success Stories, etc.) */
.brutal-card, .card { /* Global card styling for brutalism */
    background-color: var(--color-text-light);
    border: 2px solid var(--color-border-brutal);
    border-radius: var(--border-radius-sharp);
    box-shadow: var(--shadow-brutal-offset);
    display: flex;
    flex-direction: column;
    /* align-items: center; /* This centers content globally, may not be desired for all card text */
    text-align: left; /* Default text align, can be overridden */
    transition: transform var(--transition-speed-normal) var(--transition-elastic), box-shadow var(--transition-speed-normal) var(--transition-elastic);
    overflow: hidden; /* Ensure content respects borders */
}
.brutal-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--color-border-brutal);
}

.card-image { /* Container for the image */
    width: 100%;
    height: 250px; /* Fixed height for consistency */
    overflow: hidden; /* Ensures image respects this container */
    display: flex; /* For centering image inside if not 100% width/height */
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--color-border-brutal);
}
.card-image img.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 0; /* Sharp corners */
}
.card-content, .card-body { /* Use .card-body if Bootstrap structure */
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space if card heights vary */
    display: flex;
    flex-direction: column;
}
.card-title {
    font-size: 1.5rem;
    color: var(--color-text-darker);
}
.card-text {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1; /* Pushes button to bottom if card is in flex column */
}
.card .btn { /* Button inside a card */
    margin-top: auto; /* Pushes button to the bottom of card-content */
    align-self: flex-start; /* Align button to the start if text is centered */
}


/* SUSTAINABILITY SECTION (Stat Widgets) */
.stat-widget {
    background-color: var(--color-background-light);
    /* border: 2px solid var(--color-border-brutal); in HTML */
    border-radius: var(--border-radius-sharp);
    text-align: center;
    /* padding: 1.5rem; in HTML */
}
.stat-number {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.stat-description {
    font-size: 1rem;
    color: var(--color-text-muted);
}


/* TESTIMONIALS SECTION */
.testimonial-card {
    background-color: var(--color-text-light);
    /* border: 2px solid var(--color-border-brutal); in HTML */
    border-radius: var(--border-radius-sharp);
    /* padding: 2rem; in HTML */
    text-align: center;
    min-height: 300px; /* Ensure consistent height for carousel items */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.testimonial-card img.rounded-circle {
    border: 3px solid var(--color-secondary);
    margin-bottom: 1.5rem !important; /* Override Bootstrap */
    width: 100px; /* Fixed size */
    height: 100px; /* Fixed size */
    object-fit: cover;
}
.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}
.testimonial-author {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 700;
}
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
    background-color: var(--color-border-brutal); /* Brutalist controls */
    border-radius: var(--border-radius-sharp);
    padding: 10px; /* Make icon more visible */
    width: 40px;
    height: 40px;
}
#testimonialCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#testimonialCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/* EXTERNAL RESOURCES (List Group) */
.list-group-item {
    background-color: var(--color-text-light);
    border: 2px solid var(--color-border-light);
    margin-bottom: 0.5rem; /* Space between items */
    border-radius: var(--border-radius-sharp);
    transition: background-color var(--transition-speed-fast) ease-in-out, border-color var(--transition-speed-fast) ease-in-out;
}
.list-group-item:hover {
    background-color: #e9ecef; /* Slightly darker on hover */
    border-left: 4px solid var(--color-primary); /* Brutalist touch */
    color: var(--color-text-darker);
}
.list-group-item h5 {
    color: var(--color-primary);
}
.list-group-item p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}


/* FOOTER */
footer.bg-dark-brutal {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    color: var(--color-text-on-dark);
    border-top: 2px solid var(--color-border-brutal);
}
footer h5 {
    font-family: var(--font-primary);
    color: var(--color-text-light);
    margin-bottom: 1rem;
}
footer p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.footer-links li, .footer-social-links li {
    margin-bottom: 0.5rem;
}
.footer-links a, .footer-social-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out, padding-left var(--transition-speed-fast) ease-in-out;
}
.footer-links a:hover, .footer-social-links a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    padding-left: 5px; /* Slight indent on hover */
}
hr.footer-hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}


/* SPECIFIC PAGE STYLES */
/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 70px); /* Full viewport height minus header */
    text-align: center;
    padding: 2rem;
}
.success-page-container h1 {
    font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
    color: var(--color-tertiary); /* Green for success */
}
.success-page-container p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
}

/* privacy.html, terms.html */
.legal-page-content {
    padding-top: 100px; /* As per STROGO for header overlap */
    padding-bottom: 3rem;
}
.legal-page-content .container h1 {
    margin-bottom: 2rem;
}
.legal-page-content .container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

/* Cookie Consent Popup (Minimal style, mostly inline in HTML) */
#cookieConsentPopup {
    border-top: 3px solid var(--color-secondary); /* Using variable from HTML */
}
#cookieConsentPopup p a {
    color: var(--color-accent); /* Using variable from HTML */
}
#cookieConsentPopup button {
    background-color: var(--color-primary); /* Using variable from HTML */
    border-radius: var(--border-radius-slight); /* Softer than global buttons for this UI */
    box-shadow: none;
    transform: none;
    padding: 0.5rem 1rem;
    text-transform: none;
    letter-spacing: normal;
}
#cookieConsentPopup button:hover {
    background-color: var(--color-primary-dark);
    transform: none;
    box-shadow: none;
}


/* ANIMATIONS & TRANSITIONS (ScrollReveal will handle reveal animations) */
/* Basic hover transitions are already applied to elements like buttons, links */
/* Example of an element that might "bounce" slightly on reveal if not using JS for it */
.reveal-elastic {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.6s var(--transition-elastic), transform 0.6s var(--transition-elastic);
}
.reveal-elastic.is-visible { /* Class added by ScrollReveal or other JS */
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* MEDIA QUERIES */
@media (max-width: 768px) {
    .section-title {
        font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
    }
    .hero-title {
        font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    }
    .hero-subtitle {
        font-size: clamp(0.9rem, 0.7rem + 0.8vw, 1.2rem);
    }
    main {
        padding-top: 60px; /* Adjust if mobile header is smaller */
    }
    .navbar-nav .nav-link {
        margin-left: 0;
        margin-right: 0;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    .footer-social-links, .footer-links {
        text-align: center; /* Center footer links on mobile */
    }
    footer .col-md-4 {
        text-align: center;
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 576px) {
    .btn, button, input[type="submit"], input[type="button"] {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}