/* style.css */

:root {
    /* Monochromatic Color Scheme - Retro Inspired with a Modern Accent */
    --color-primary-dark: #1a1a1a; /* Deepest grey, almost black */
    --color-primary: #2c3e50;    /* Dark Slate Blue/Grey - Main Text, Accents */
    --color-secondary: #555555;  /* Medium Grey - Subdued Text, Borders */
    --color-background-dark: #181818; /* Very Dark Grey - Dark Sections, Footer */
    --color-background-light: #f9f9f9; /* Off-White - Light Sections */
    --color-background-alt: #f0f0f0; /* Slightly darker off-white for alternating sections */
    --color-text-light: #ffffff;
    --color-text-dark: #222222; /* Primary text on light backgrounds */
    --color-text-muted: #767676; /* Muted text */
    
    /* Accent Color - Choose one or define more for specific uses */
    --color-accent: #007bff; /* Bright Blue - Modern, high contrast */
    /* --color-accent-retro: #e7a040; /* Muted Orange/Mustard for a retro touch */
    --color-accent-darker: #0056b3; /* Darker accent for hover states */

    --color-border: #dcdcdc; /* Light border color */
    --color-success: #28a745;
    --color-error: #dc3545;

    /* Typography */
    --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.5rem;   /* 24px */
    --font-size-h1: 2.8rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;

    --line-height-base: 1.7;
    --line-height-heading: 1.3;

    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2.5rem;  /* 40px */
    --spacing-xxl: 4rem;   /* 64px */

    /* Borders & Shadows */
    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.07);
    --box-shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-strong: 0 8px 25px rgba(0,0,0,0.12);
    --text-shadow-subtle: 1px 1px 3px rgba(0,0,0,0.2);

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease-in-out;

    /* Header Height */
    --header-height: 80px;
    --header-height-mobile: 65px;

    /* Container Max Width */
    --container-max-width: 1200px;
}

/* 1. Global Resets & Base Styles
---------------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* 2. Typography
---------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    text-shadow: var(--text-shadow-subtle) /* if light text on light bg, otherwise remove for dark text */;
}
h1.hero-title, h2.section-title { /* Section titles are centered via HTML */
    color: var(--color-primary-dark); /* Ensure high contrast for titles */
    text-shadow: none; /* Already dark enough */
}
h1.hero-title { color: var(--color-text-light); text-shadow: 2px 2px 4px rgba(0,0,0,0.7); } /* Hero specific as per prompt */


h1 { font-size: var(--font-size-h1); margin-bottom: var(--spacing-lg); }
h2 { font-size: var(--font-size-h2); margin-bottom: var(--spacing-lg); }
h3 { font-size: var(--font-size-h3); margin-bottom: var(--spacing-sm); }
h4 { font-size: var(--font-size-h4); margin-bottom: var(--spacing-sm); }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark); /* Ensure good contrast */
}
p.hero-subtitle { color: var(--color-text-light); text-shadow: 1px 1px 3px rgba(0,0,0,0.6); } /* Hero specific */
p.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--color-accent-darker);
    text-decoration: underline;
}

ul, ol {
    list-style-position: inside;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-md); /* Indent list items */
}
ul.styled-list {
    list-style: none;
    padding-left: 0;
}
ul.styled-list li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: var(--spacing-sm);
}
ul.styled-list li::before {
    content: '✓'; /* Or any retro/modern icon */
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm); /* Subtle rounded corners for images */
}

/* 3. Layout (Container, Columns)
---------------------------------------------------------------------------------------------------- */
.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.content-section {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}
.section-bg-alt {
    background-color: var(--color-background-alt);
}

.columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg); /* Modern gap property */
}
.column {
    flex: 1 1 0px; /* Default to equal width, shrink if needed */
    min-width: 280px; /* Minimum width before wrapping/stacking */
}
.column.is-two-thirds {
    flex-grow: 2; /* Takes up 2/3 if there's a 1/3 sibling */
    flex-basis: 60%; /* Approximate, flex handles distribution */
}
.column.is-one-third {
    flex-grow: 1;
    flex-basis: 30%;
}
/* For more precise control when needed, but flex distribution is often better */
@media (min-width: 769px) {
    .column.is-fixed-two-thirds {
        flex: 0 0 66.666%;
        width: 66.666%;
    }
    .column.is-fixed-one-third {
        flex: 0 0 33.333%;
        width: 33.333%;
    }
}


/* 4. Utility Classes
---------------------------------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.margin-bottom-md { margin-bottom: var(--spacing-md); }
.margin-top-md { margin-top: var(--spacing-md); }

.section-title {
    font-size: var(--font-size-h2);
    text-align: center;
    margin-bottom: var(--spacing-sm); /* Reduced margin before subtitle */
    color: var(--color-primary-dark);
    font-weight: 900; /* Bolder titles */
}
.section-subtitle {
    margin-bottom: var(--spacing-xl);
}

.read-more-link {
    display: inline-block;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    position: relative;
    transition: color var(--transition-smooth);
}
.read-more-link::after {
    content: '→';
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-smooth);
    display: inline-block;
}
.read-more-link:hover {
    color: var(--color-accent-darker);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}

/* For images that need to be centered within their column or container */
.image-container {
    text-align: center; /* Centers inline-block images */
    margin-bottom: var(--spacing-md);
}
.image-container img {
    margin-left: auto;
    margin-right: auto; /* Centers block images */
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
}


/* 5. Header & Navigation
---------------------------------------------------------------------------------------------------- */
.site-header {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white for a modern feel */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--spacing-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--box-shadow-light);
    height: var(--header-height);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary-dark);
    text-decoration: none;
}
.logo .logo-accent {
    color: var(--color-accent);
}

.main-navigation .nav-menu {
    list-style: none;
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
}
.main-navigation .nav-menu li {
    margin-left: var(--spacing-lg);
}
.main-navigation .nav-menu a {
    font-family: var(--font-heading);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu a:focus,
.main-navigation .nav-menu a.active { /* Add .active class via JS for current page/section */
    color: var(--color-accent);
    background-color: rgba(0, 123, 255, 0.05);
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
}
.menu-toggle .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    position: relative;
    transition: all var(--transition-smooth);
}
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    transition: all var(--transition-smooth);
}
.menu-toggle .hamburger::before { top: -8px; }
.menu-toggle .hamburger::after { bottom: -8px; }

/* Mobile Menu Open State */
.menu-toggle.active .hamburger { background-color: transparent; }
.menu-toggle.active .hamburger::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active .hamburger::after { transform: translateY(-8px) rotate(-45deg); }


/* 6. Global Button Styles
---------------------------------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-base);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    border: 2px solid transparent;
    transition: all var(--transition-smooth);
    white-space: nowrap;
    line-height: 1.2; /* Ensure text is vertically centered */
}

.button-primary,
button.button-primary,
input[type="submit"].button-primary {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border-color: var(--color-accent);
}
.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.button-secondary,
button.button-secondary,
input[type="submit"].button-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.button-secondary:hover,
button.button-secondary:hover,
input[type="submit"].button-secondary:hover {
    background-color: rgba(0, 123, 255, 0.08);
    color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
}


/* 7. Global Form Styles
---------------------------------------------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--spacing-lg);
}
.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
textarea {
    min-height: 120px;
    resize: vertical;
}
.checkbox-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.checkbox-label input[type="checkbox"] {
    margin-right: var(--spacing-sm);
    width: auto; /* Override 100% width for checkboxes */
    accent-color: var(--color-accent); /* Modern checkbox color */
}

/* 8. Global Card Styles
---------------------------------------------------------------------------------------------------- */
.card {
    background-color: var(--color-text-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
    padding: var(--spacing-lg);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
    /* align-items: center; /* This can be too restrictive. Content will be centered. */
    text-align: center; /* Center text content and inline-block children */
    overflow: hidden; /* Ensure content respects border radius */
    height: 100%; /* Make cards in a row equal height if needed with flex */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-strong);
}

.card-image { /* Container for the image, ensures it's centered if card uses align-items:center */
    width: 100%; /* Takes full width of card unless constrained */
    max-width: 300px; /* Example max width for images within cards, adjust as needed */
    height: 200px; /* Fixed height as requested for image containers */
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    margin-left: auto; /* Center the container if its max-width is less than card width */
    margin-right: auto;
    border-radius: var(--border-radius-sm); /* Rounded corners for the image container */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the container */
    display: block;
    border-radius: 0; /* Image itself doesn't need radius if container has it and overflow:hidden */
}
.card-content {
    flex-grow: 1; /* Allows content to fill remaining space if card has fixed height */
    /* text-align will be inherited from .card or can be set here */
}
.card-content h3, .card-content h4, .card-content h5 {
    color: var(--color-primary);
    margin-top: 0; /* Remove top margin if image is directly above */
}
.card-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Specific Card types (testimonial, benefit-card, etc. will inherit from .card) */
.testimonial .testimonial-img {
    width: 100px; /* Example size */
    height: 100px;
    border-radius: 50%; /* Circular images */
    object-fit: cover;
    margin-bottom: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
    border: 3px solid var(--color-accent);
}
.testimonial blockquote p {
    font-style: italic;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}
.testimonial blockquote footer {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: bold;
}
.press-logo {
    max-height: 60px; /* Adjust as needed */
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
}

/* 9. UI Components (Accordion, Progress, Switch)
---------------------------------------------------------------------------------------------------- */
/* Accordion */
.accordion-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: var(--spacing-md) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    font-weight: 600;
}
.accordion-header::after {
    content: '+'; /* Collapsed state */
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: var(--color-accent);
    transition: transform var(--transition-fast);
}
.accordion-header[aria-expanded="true"]::after {
    content: '–'; /* Expanded state */
    transform: translateY(-50%) rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-smooth), padding var(--transition-smooth);
    padding: 0 var(--spacing-sm);
}
.accordion-content p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}
.accordion-header[aria-expanded="true"] + .accordion-content {
    /* max-height will be set by JS */
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
}

/* Progress Indicator */
.progress-indicator-container {
    margin-bottom: var(--spacing-md);
}
.progress-indicator-container label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
progress {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    overflow: hidden; /* For Safari/iOS to respect border-radius */
    border: none; /* Remove default border */
}
progress::-webkit-progress-bar {
    background-color: #e0e0e0; /* Light grey track */
    border-radius: 6px;
}
progress::-webkit-progress-value {
    background-color: var(--color-accent); /* Accent color for progress */
    border-radius: 6px;
    transition: width var(--transition-smooth);
}
progress::-moz-progress-bar { /* Firefox */
    background-color: var(--color-accent);
    border-radius: 6px;
    transition: width var(--transition-smooth);
}

/* Toggle Switch */
.toggle-switch-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}
.toggle-switch-container label:first-of-type { /* Text label */
    margin-right: var(--spacing-md);
    color: var(--color-text-dark);
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--color-accent);
}
input:checked + .slider:before {
    transform: translateX(24px);
}


/* 10. Section Specific Styles
---------------------------------------------------------------------------------------------------- */
/* Hero Section */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80vh; /* Make hero substantial, but not fixed 400px */
    padding: var(--spacing-xxl) 0; /* Vertical padding */
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero-title {
    font-size: 3.2rem; /* Larger for hero */
    font-weight: 900;
    color: var(--color-text-light); /* Enforced white text */
    margin-bottom: var(--spacing-md);
}
.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light); /* Enforced white text */
    margin-bottom: var(--spacing-xl);
    opacity: 0.9;
}

/* External Resources Section */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.resource-item.card h4 a {
    color: var(--color-primary);
    font-size: 1.1em;
}
.resource-item.card h4 a:hover {
    color: var(--color-accent);
}

/* Events Calendar */
.events-list .event-item.card {
    margin-bottom: var(--spacing-lg);
    text-align: left; /* Override card's text-align center for more content */
}
.events-list .event-item.card h4 {
    color: var(--color-accent);
}

/* Accolades Section */
.accolades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
.accolade-item.card .card-image img {
    width: 80px; /* Smaller images for accolades */
    height: 80px;
    object-fit: contain; /* For logos/seals */
}

/* Course Benefits in Course Details */
.course-benefits h4 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-h3);
}
.benefit-card .card-image img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}


/* 11. Footer
---------------------------------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-background-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-xl) 0 var(--spacing-md);
    font-size: var(--font-size-sm);
}
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.footer-column {
    flex: 1 1 200px; /* Min width for columns before stacking */
}
.footer-column h4 {
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}
.footer-column ul {
    list-style: none;
    padding-left: 0;
}
.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}
.footer-column ul a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.footer-column ul a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}
.social-links-text li a { /* Styles for text-based social links */
    font-weight: 500;
}
.social-links-text li a:hover {
    color: var(--color-accent); /* Make social links stand out more on hover */
}
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* 12. Specific Page Styles (Success, Legal)
---------------------------------------------------------------------------------------------------- */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-background-light);
}
.success-page-container .card {
    max-width: 500px;
    width: 90%;
}
.success-page-container h1 {
    color: var(--color-success);
}

/* For privacy.html, terms.html */
.legal-page-content {
    padding-top: calc(var(--header-height) + var(--spacing-xxl)); /* Header height + extra space */
    padding-bottom: var(--spacing-xxl);
}
.legal-page-content .container h1 {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}
.legal-page-content .container h2 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

/* 13. Animations & Effects (Particle container, Parallax base)
---------------------------------------------------------------------------------------------------- */
#particle-container {
    position: fixed; /* Or absolute within a specific section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all content */
    pointer-events: none; /* Allow clicks to pass through */
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    /* GSAP will control transforms */
}

/* Glassmorphism utility (use sparingly) */
.glassmorphism-effect {
    background: rgba(230, 230, 230, 0.2); /* Light background for the glass */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 14. Media Queries (Responsiveness)
---------------------------------------------------------------------------------------------------- */
@media (max-width: 992px) {
    :root {
        --font-size-h1: 2.2rem;
        --font-size-h2: 1.8rem;
    }
    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .site-header {
        height: var(--header-height-mobile);
        padding: 0; /* Let container handle padding */
    }
    .header-container {
        height: var(--header-height-mobile);
    }
    .main-navigation .nav-menu {
        display: none; /* Hidden by default */
        flex-direction: column;
        position: absolute;
        top: var(--header-height-mobile);
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: var(--box-shadow-medium);
        padding: var(--spacing-md) 0;
        border-top: 1px solid var(--color-border);
    }
    .main-navigation .nav-menu.active {
        display: flex; /* Shown when active */
    }
    .main-navigation .nav-menu li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-menu a {
        display: block;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--color-border);
    }
    .main-navigation .nav-menu li:last-child a {
        border-bottom: none;
    }
    .menu-toggle {
        display: block; /* Show hamburger */
        z-index: 1001; /* Above nav menu if it overlaps */
    }

    .columns {
        flex-direction: column;
        gap: var(--spacing-md); /* Adjust gap for stacked columns */
    }
    .column,
    .column.is-two-thirds,
    .column.is-one-third,
    .column.is-fixed-two-thirds, /* Reset fixed widths for mobile */
    .column.is-fixed-one-third {
        width: 100%;
        flex-basis: auto; /* Reset flex-basis for stacked columns */
        margin-bottom: var(--spacing-lg); /* Add margin between stacked columns */
    }
    .column:last-child {
        margin-bottom: 0;
    }

    .hero-section {
        min-height: 70vh;
        padding: var(--spacing-xl) 0;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .content-section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .section-title {
        font-size: var(--font-size-h2); /* Adjust for smaller screens */
    }
    .section-subtitle {
        font-size: var(--font-size-base);
    }

    .footer-columns {
        flex-direction: column;
        text-align: center;
    }
    .footer-column {
        margin-bottom: var(--spacing-lg);
    }

    .legal-page-content {
        padding-top: calc(var(--header-height-mobile) + var(--spacing-xl));
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 0.95rem;
        --font-size-h1: 1.8rem;
        --font-size-h2: 1.5rem;
    }
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-subtitle {
        font-size: 0.9rem;
    }
    .button, button, input[type="submit"], input[type="button"] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }
    input[type="text"], input[type="email"], textarea {
        padding: var(--spacing-sm);
    }
}

/* Background image default styles (can be overridden per section) */
[style*="background-image"] {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}