/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. Root Variables & Global Styles
2. Typography
3. Buttons & Forms
4. Header & Navigation
5. Page Transition
6. Hero Section
7. Card Component (General)
8. Section Specific Styles
    - Vision (#vision)
    - Methodology (#methodology)
    - Case Studies (#case-studies)
    - Success Stories (#success-stories)
    - Team (#team)
    - Gallery (#gallery)
    - Accolades (#accolades)
    - Press (#press)
    - Events Calendar (#events)
    - External Resources (#external-resources)
    - Contact (#contact)
9. Footer
10. Specific Page Styles (Success, Privacy, Terms)
11. Animations & Transitions (ScrollReveal setup)
12. Utility & Helper Classes
13. Responsive Adjustments (Primarily handled by Tailwind, but can add overrides)
-------------------------------------------------------------------*/

/* 1. Root Variables & Global Styles
-------------------------------------------------------------------*/
:root {
    --color-primary: #0A4D68; /* Dark Blue from Tailwind config */
    --color-accent1: #680A4D; /* Dark Magenta/Purple */
    --color-accent2: #4D680A; /* Dark Olive Green */
    --color-text-light: #FFFFFF;
    --color-text-dark: #333333;
    --color-text-heading-dark: #1A202C; /* Tailwind gray-800 */
    --color-bg-light: #F0F4F8; /* Very Light Blue/Gray */
    --color-bg-white: #FFFFFF;
    --color-border: #D1D5DB; /* gray-300 */

    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Lato', sans-serif;

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Selected text style */
::selection {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* 2. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-heading-dark);
    line-height: 1.3;
    margin-bottom: 0.75rem; /* Tailwind: mb-3 */
}

.section-title {
    color: var(--color-text-heading-dark); /* Ensure dark color for section titles */
    text-align: center;
    margin-bottom: 3rem; /* Tailwind: mb-12 */
    font-size: 2.25rem; /* Tailwind: text-3xl or text-4xl */
}
@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem; /* Tailwind: md:text-4xl */
    }
}


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

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

p {
    margin-bottom: 1rem; /* Tailwind: mb-4 */
    max-width: 75ch; /* Improve readability */
}
.text-center p {
    margin-left: auto;
    margin-right: auto;
}

/* 3. Buttons & Forms (Global Styles)
-------------------------------------------------------------------*/
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem; /* Tailwind: py-3 px-6 */
    font-size: 1rem; /* Tailwind: text-base */
    border-radius: 0.375rem; /* Tailwind: rounded-md */
    transition: all var(--transition-speed-normal) ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-primary,
button.btn-primary, /* For semantic buttons styled as primary */
input[type="submit"].btn-primary { /* For submit inputs styled as primary */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background-color: #083A52; /* Darker primary */
    border-color: #083A52;
}

.btn-secondary,
button.btn-secondary,
input[type="submit"].btn-secondary {
    background-color: var(--color-accent2);
    color: var(--color-text-light);
    border-color: var(--color-accent2);
}
.btn-secondary:hover {
    background-color: #3B5007; /* Darker accent2 */
    border-color: #3B5007;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    transition: border-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}
.form-input:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 77, 104, 0.2); /* Primary color focus ring */
    outline: none;
}
.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* 4. Header & Navigation
-------------------------------------------------------------------*/
/* Tailwind handles sticky, bg-white, shadow-md. This is for enhancements. */
header {
    /* Fixed navigation styling is handled by Tailwind's 'sticky top-0 z-50' */
}
header a.text-primary { /* Logo */
    font-size: 1.75rem; /* Tailwind: text-2xl */
}
#mobile-menu a:hover {
    background-color: var(--color-bg-light); /* Light hover for mobile menu items */
    color: var(--color-primary);
}

/* 5. Page Transition
-------------------------------------------------------------------*/
#page-transition-overlay {
    /* Styles are in HTML (fixed, inset-0, bg-primary, z-[9999], transition, opacity-0, pointer-events-none) */
    /* JS will toggle opacity */
}
body.page-loading #page-transition-overlay {
    opacity: 1;
    pointer-events: auto;
}


/* 6. Hero Section
-------------------------------------------------------------------*/
#hero {
    /* background-image, background-size, background-position, background-repeat are set inline or by Tailwind */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* min-height is set inline in HTML */
}
#hero h1 {
    color: var(--color-text-light); /* Enforce white text for hero heading */
    /* text-shadow for readability is in HTML's inline style .hero-text-overlay */
}
#hero p {
    color: var(--color-text-light); /* Enforce white text for hero paragraph */
     /* text-shadow for readability is in HTML's inline style .hero-text-overlay */
}


/* 7. Card Component (General)
-------------------------------------------------------------------*/
.card {
    background-color: var(--color-bg-white);
    border-radius: 0.5rem; /* Tailwind: rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind: shadow-lg */
    overflow: hidden;
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
    display: flex;
    flex-direction: column;
    /* align-items: center; /* This centers .card-image and .card-content blocks. If content inside .card-content needs specific alignment, style that class. */
    height: 100%; /* For equal height cards in a grid */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind: shadow-xl */
}

.card-image { /* Container for the image */
    width: 100%;
    /* aspect-ratio: 16 / 9; /* Defined inline */
    overflow: hidden; /* Ensures image respects container bounds */
    /* No fixed height here, aspect-ratio handles it. Or set height if needed */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    display: block; /* Remove bottom space */
    transition: transform var(--transition-speed-slow) ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on card hover */
}

.card-content {
    padding: 1.5rem; /* Tailwind: p-6 */
    flex-grow: 1; /* Allows content to take up space if card heights are unified */
    display: flex;
    flex-direction: column;
}
.card-content h3 {
    color: var(--color-primary);
}
.card-content p {
    font-size: 0.95rem; /* Slightly smaller text for cards */
    flex-grow: 1; /* Pushes links/buttons to bottom if card content is flex column */
}
.card-content a.text-accent2 { /* "Read more" style links */
    color: var(--color-accent2);
    font-weight: bold;
    display: inline-block;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 0.5rem;
}
.card-content a.text-accent2:hover {
    text-decoration: underline;
    color: #3B5007; /* Darker accent2 */
}

/* Specific card centering for sections like Team or Success Stories where content is centered */
.card.text-center .card-content,
.card.text-center {
    align-items: center; /* Centers flex items if .card is flex container */
    text-align: center; /* Centers inline/text content */
}
.card.text-center .card-image {
    /* If team member images should not span full card width, adjust here */
}
.card.text-center .card-content p {
    margin-left: auto;
    margin-right: auto;
}


/* 8. Section Specific Styles
-------------------------------------------------------------------*/

/* Padding for sections. Tailwind's py-16 md:py-24 is used in HTML. */
section {
    padding-top: 4rem; /* Tailwind: py-16 */
    padding-bottom: 4rem; /* Tailwind: py-16 */
}
@media (min-width: 768px) {
    section {
        padding-top: 6rem; /* Tailwind: md:py-24 */
        padding-bottom: 6rem; /* Tailwind: md:py-24 */
    }
}

/* Vision (#vision) */
#vision img {
    border: 5px solid var(--color-bg-white); /* Example of a subtle frame */
}

/* Methodology (#methodology) - Uses general card styles */

/* Case Studies (#case-studies) - Uses general card styles */
#case-studies .card-image {
    /* aspect-ratio: 16/9 is good. */
}

/* Success Stories (#success-stories) */
#success-stories .card {
    /* Specific styling for testimonial cards if needed */
    /* text-center class is used in HTML */
}
#success-stories img.rounded-full { /* Client image */
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 10px rgba(10, 77, 104, 0.3);
}
#success-stories .card p.italic {
    font-size: 1rem;
    color: var(--color-text-dark); /* Ensure good contrast for testimonial text */
}

/* Team (#team) */
#team .card {
    /* text-center class is used in HTML */
}
#team .card-image img {
    /* width/height set inline. object-fit: cover in global ensures it looks good */
}

/* Gallery (#gallery) */
#gallery .grid > div { /* Grid items */
    transition: transform var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}
#gallery .grid > div:hover {
    transform: scale(1.03);
    z-index: 10;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}
#gallery .grid img {
    /* transform hover:scale-110 is in Tailwind, this is fine */
}

/* Accolades (#accolades) */
#accolades .text-accent1 { /* Emoji/Icon color */
    font-size: 2.5rem; /* Tailwind: text-4xl */
}
#accolades .border {
    border-color: #e5e7eb; /* Tailwind: border-gray-200 */
    transition: border-color var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease;
}
#accolades .border:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

/* Press (#press) */
#press .card {
    /* Standard card styling applies */
}
#press .card a {
    font-weight: 600; /* Semibold */
}

/* Events Calendar (#events) */
#events .card {
    /* Standard card styling, but could have unique hover for buttons inside */
}
#events .card .btn-secondary {
    min-width: 120px; /* Ensure buttons have a decent size */
}

/* External Resources (#external-resources) */
#external-resources .card h3 a {
    color: var(--color-primary); /* Ensure title link is primary color */
}
#external-resources .card h3 a:hover {
    color: var(--color-accent1);
}

/* Contact (#contact) */
#contact .bg-gray-50 { /* Form background */
    background-color: #F9FAFB; /* Tailwind's gray-50 */
}
#contact .max-w-2xl { /* Form container */
    /* Add subtle inner shadow or border for more depth if desired */
    /* border: 1px solid #e0e0e0; */
}

/* 9. Footer
-------------------------------------------------------------------*/
footer {
    background-color: var(--color-text-heading-dark); /* Match HTML */
    color: var(--color-bg-light); /* Match HTML */
}
footer h3 {
    color: var(--color-text-light); /* White headings in footer */
}
footer a {
    color: #D1D5DB; /* Tailwind: text-gray-300 */
}
footer a:hover {
    color: var(--color-text-light); /* White on hover */
    text-decoration: underline;
}
footer .border-t {
    border-color: #4B5563; /* Tailwind: border-gray-700 */
}
footer .text-gray-400 {
    color: #9CA3AF;
}

/* Footer social media text links */
footer ul li a { /* Targeting all links in footer lists */
    /* Add any specific styling if needed, e.g., icons via ::before, but prompt said text only */
    padding: 0.25rem 0; /* Small padding for easier clicking */
    display: inline-block;
}

/* 10. Specific Page Styles
-------------------------------------------------------------------*/
/* Success Page Styling (success.html) */
body.success-page { /* Add class="success-page" to body of success.html */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    background-color: var(--color-bg-light);
    padding: 2rem;
}
.success-page .success-container {
    background-color: var(--color-bg-white);
    padding: 2rem 3rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.success-page .success-container h1 {
    color: var(--color-accent2); /* Greenish for success */
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.success-page .success-container p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Privacy & Terms Pages (privacy.html, terms.html) */
/* Assuming these pages have a main content area. Add class="page-content-container" to their main wrapping div after header */
.page-content-container {
    padding-top: 100px; /* Avoid overlap with fixed header */
    padding-bottom: 3rem; /* Space at bottom */
}
.page-content-container h1 {
    margin-bottom: 2rem;
    font-size: 2.5rem;
}
.page-content-container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    color: var(--color-primary);
}
.page-content-container p,
.page-content-container ul,
.page-content-container ol {
    margin-bottom: 1rem;
    line-height: 1.7;
}
.page-content-container ul,
.page-content-container ol {
    padding-left: 2rem;
}


/* 11. Animations & Transitions (ScrollReveal setup)
-------------------------------------------------------------------*/
/* ScrollReveal uses JS to add classes/styles. Transitions make them smooth. */
[data-scroll-reveal] {
    visibility: hidden; /* Hidden by default, ScrollReveal makes it visible */
}
/* Example transition for elements revealed by ScrollReveal */
/* Add this to elements you want to animate with ScrollReveal in your JS setup */
.sr-item-fade-up {
    transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
    opacity: 0;
    transform: translateY(30px);
}
.sr-item-fade-up.is-visible { /* Class added by ScrollReveal */
    opacity: 1;
    transform: translateY(0);
}

/* Simple fade in */
.sr-item-fade {
    transition: opacity 0.8s ease-in-out;
    opacity: 0;
}
.sr-item-fade.is-visible {
    opacity: 1;
}

/* 12. Utility & Helper Classes (Beyond Tailwind)
-------------------------------------------------------------------*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Container class if not using Tailwind's `container mx-auto px-4` directly in HTML for some custom blocks */
.custom-container {
    width: 100%;
    max-width: 1200px; /* Example max-width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Text on background image helper */
.text-on-image-overlay {
    position: relative;
    color: var(--color-text-light); /* Default text color for overlays */
}
.text-on-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Dark overlay */
    z-index: 1;
}
.text-on-image-overlay > * { /* Content should be above the overlay */
    position: relative;
    z-index: 2;
}


/* 13. Responsive Adjustments
-------------------------------------------------------------------*/
/* Tailwind is mobile-first and handles most responsiveness with its utility classes (e.g., md:, lg:). */
/* Add specific overrides or complex responsive behaviors here if needed. */

@media (max-width: 767px) { /* Mobile specific styles */
    .section-title {
        font-size: 1.875rem; /* Tailwind: text-3xl */
        margin-bottom: 2rem;
    }

    #hero h1 {
        font-size: 2.25rem; /* Tailwind: text-4xl or sm:text-5xl */
    }
    #hero p {
        font-size: 1rem; /* Tailwind: text-lg */
    }

    .card-content {
        padding: 1rem;
    }

    /* Adjust grid columns for cards on mobile if not handled by Tailwind */
    /* Example: Force 1 column for card grids */
    /* #methodology .grid, #team .grid, etc. {
        grid-template-columns: 1fr;
    } */
    /* Tailwind's `grid md:grid-cols-3` already handles this. */

    .page-content-container {
        padding-top: 80px; /* Adjust for smaller header height if any */
    }
}

/* Cookie Consent Popup - Minimal styles as requested, mainly handled inline */
#cookieConsentPopup {
    /* Styles are primarily inline in HTML for simplicity as requested */
    /* Ensure it's above other content */
    /* z-index: 9999; is in HTML */
}
#cookieConsentPopup p {
    color: var(--color-text-light); /* Explicitly set white text */
    margin-bottom: 0.75rem; /* Consistent spacing */
}
#cookieConsentPopup button {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    /* padding, border, border-radius are inline */
}
#cookieConsentPopup button:hover {
    background-color: #083A52; /* Darker primary */
}

/* Fix for main content not being overlapped by sticky header, if not using a specific class like .page-content-container */
body > main {
    /* If the header height is known and fixed, e.g., 80px */
    /* padding-top: 80px; */
    /* This is generally better handled per-page or by structure if header height varies */
}