/*
Theme Name: Astra Child FLS
Theme URI: http://example.com/astra-child-fls/
Description: Swiss Design FLS Child Theme
Author: Your Name
Author URI: http://example.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Menu CTA Button */
.main-header-menu .menu-cta>a {
    background-color: var(--wp--preset--color--swiss-green) !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 9999px;
    font-weight: bold;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.main-header-menu .menu-cta>a:hover {
    background-color: var(--wp--preset--color--slate) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}


/* =========================================
   1. Operations & Variables
   ========================================= */

:root {
    /* Colors - Modern elegant palette */
    --color-swiss-green: #78906D;
    /* Corrected from Guidelines */
    /* Sage Green */
    --color-accent-sage: #A9B9A2;
    /* Soft Green */
    --color-accent-mist: #DEE5DF;
    /* Kept as useful utility */
    /* Mist White */
    --color-accent-blue: #90A8D4;
    /* Calm Blue */
    --color-accent-slate: #4A5568;
    /* Slate Gray */

    --color-neutral-100: #FFFFFF;
    --color-neutral-200: #F5F5F7;
    --color-neutral-300: #DEE5DF;
    --color-neutral-400: #E5E5E7;
    /* Additional neutral for borders */
    --color-neutral-600: #495057;
    /* Synced with slate */
    /* Secondary text */
    --color-neutral-800: #424245;
    /* Dark accents */
    --color-neutral-900: #1D1D1F;

    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: #6e6e73;

    /* Typography */
    --font-family-sans: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-family-serif: "Times New Roman", Times, serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4.5rem;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing (Grid System 8pt) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Layout */
    --container-width: 1200px;
    --container-padding: var(--space-4);
    --grid-columns: 12;
    --grid-gap: var(--space-6);

    /* Border Radius (Apple-style rounded corners) */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-2xl: 12px;
    --radius-3xl: 12px;

    /* Shadows - Apple-quality depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* Animation - Apple-style easing */
    --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-normal: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-slow: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   2. Reset
   ========================================= */

/* Modern CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}

/* =========================================
   3. Global Styles
   ========================================= */

body {
    font-family: var(--font-family-sans);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-neutral-100);
    padding-top: 0;
    /* Pages will handle their own padding if needed */
    font-size: var(--font-size-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.7;
}

/* Swiss Grid Utility */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

/* Utility Helpers */
.text-center {
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =========================================
   4. Theme Overrides
   ========================================= */

/* Remove Astra's default padding for Page Builder templates */
.ast-single-post.ast-page-builder-template .site-main>article,
.ast-page-builder-template .post-navigation,
.ast-page-builder-template .site-content>.ast-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Ensure site content stretches full width */
.site-content {
    padding: 0 !important;
}

/* =========================================
   5. Spacer Fixes
   ========================================= */

/* Fix top margin issues globally */
.site-content,
.ast-container,
.entry-content,
.entry-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specifically for Astra Separate Container Mode if active */
.ast-separate-container .site-main {
    margin-top: 0 !important;
}

/* Remove default article margins */
.ast-article-single {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   6. Header Configuration (Sticky & 3-Col Simulation)
   ========================================= */

/* =========================================
   CRITICAL: Force White Header Background
   ========================================= */

/* Wrapper for contained header */
.site-header {
    padding: var(--space-4) var(--space-4) 0 var(--space-4);
    background: transparent !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Main header bar with rounded edges and contained width */
.main-header-bar,
header.site-header .main-header-bar,
.ast-header-break-point .main-header-bar,
.ast-desktop .main-header-bar,
.ast-primary-header-bar {
    background-color: rgba(255, 255, 255, 1) !important;
    background-image: none !important;
    max-width: var(--container-width) !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Remove shadows from nested children to prevent double shadow */
.site-primary-header-wrap,
.ast-main-header-bar-alignment,
.ast-primary-header,
.main-header-container {
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Scrolled state - add transparency */
.site-header.scrolled .main-header-bar,
.scrolled .main-header-bar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Ensure nested elements don't get scrolled shadow */
.site-header.scrolled .site-primary-header-wrap,
.site-header.scrolled .ast-main-header-bar-alignment {
    box-shadow: none !important;
}

/* Target ALL header elements and containers */
.site-header .ast-container,
.main-header-bar .ast-container {
    max-width: 1200px !important;
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}

/* Remove any transparent overlays */
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .site-header {
    background-color: #ffffff !important;
}

/* Ensure header sits on top of content nicely */
.site-header.ast-primary-header-bar {
    border-bottom: none;
}

/* 3-Column Simulation for Menu */
/* Astra puts Logo left, Menu right. We want to simulate spacing between Menu/* 3-Column Simulation for Menu */
.main-header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* Removed CTA button styling per user request */

/* Footer Overrides (if needed to ensure full width) */
.footer-fls {
    width: 100%;
    max-width: 100%;
}

/* Hide Astra Copyright Footer */
.ast-footer-copyright,
.ast-small-footer,
.site-footer .ast-container,
.ast-small-footer-wrap {
    display: none !important;
}

/* Fix Scroll to Top Button */
#ast-scroll-top {
    background-color: #75916B !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    bottom: 30px !important;
    right: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: none !important;
    opacity: 0.9 !important;
}

#ast-scroll-top:hover {
    background-color: #8B9D83 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
}

#ast-scroll-top svg,
#ast-scroll-top .ast-icon {
    fill: white !important;
    width: 20px !important;
    height: 20px !important;
}


/* Remove WordPress Default Block Spacing */
:root :where(.is-layout-flow)>* {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* =========================================
   7. Custom Hero Section
   ========================================= */

.fls-custom-hero {
    min-height: 85vh;
    /* Taller hero for impact */
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;

    /* Rounded "Floating Card" Style */
    margin: var(--space-4) auto;
    /* Top/Bottom margin, centered horizontally */
    max-width: var(--container-width);
    /* Align with the global grid */
    width: calc(100% - var(--space-8));
    /* Ensure some side margin on smaller screens if container is wider */

    border-radius: 12px;
    /* User requested exactly 12px */
    overflow: hidden;
    /* Clips the background image */

    /* Text Alignment - Bottom Left */
    align-items: flex-end;
    /* Push content to bottom */
    justify-content: flex-start;
    /* Align content to left */
    padding-bottom: var(--space-8);
    /* Add padding at bottom */
}

/* Hero Button - Outlined Pill Style (Rhode style) */
.fls-custom-hero .wp-block-button__link {
    background-color: transparent !important;
    border: 1px solid white !important;
    color: white !important;
    padding: 8px 24px !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.fls-custom-hero .wp-block-button__link:hover {
    background-color: white !important;
    color: black !important;
}

/* Global Rounded Images */
.entry-content img,
.wp-block-image img,
.wp-block-cover,
.wp-block-gallery .blocks-gallery-item img,
.wp-block-post-featured-image img {
    border-radius: 12px;
    /* Consistent 12px radius */
}

/* =========================================
   10. Global Component Styling
   ========================================= */

/* Ensure Buttons are Visible and Premium */
.wp-block-button__link {
    background-color: var(--color-swiss-green) !important;
    color: white !important;
    border-radius: 9999px !important;
    /* Pill shape */
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(117, 145, 107, 0.3) !important;
    /* Sage shadow */
}

.wp-block-button__link:hover {
    background-color: var(--color-neutral-900) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Specific fix for Dark Cards (Upcoming Events) button */
.wp-block-group.bg-neutral-900 .wp-block-button__link,
.has-black-background-color .wp-block-button__link {
    background-color: var(--color-swiss-green) !important;
    color: white !important;
}

.wp-block-group.bg-neutral-900 .wp-block-button__link:hover {
    background-color: white !important;
    color: black !important;
}

/* Interactive Cards (Partner Value, Why Partner) */
/* Target groups inside grids that aren't the main section containers */
.wp-block-column .wp-block-group.bg-neutral-50,
.wp-block-column .wp-block-group.bg-\[\#F5F5F7\] {
    border-radius: 12px !important;
    /* Restore 24px for cards */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: default;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.wp-block-column .wp-block-group.bg-neutral-50:hover,
.wp-block-column .wp-block-group.bg-\[\#F5F5F7\]:hover {
    background-color: white !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .fls-custom-hero {
        min-height: 60vh;
        margin: var(--space-2);
        border-radius: var(--radius-xl);
    }

    .fls-custom-hero h1 {
        font-size: 2.5rem;
    }
}

/* =========================================
   8. Layout Safety Measures
   ========================================= */

/* Ensure hero sections are always full width within their container */


/* Force single-column layout in primary content area */
#primary.content-area {
    width: 100% !important;
    max-width: 100% !important;
}

/* Override any flex on ast-container when no sidebar */
.ast-no-sidebar .ast-container {
    display: block !important;
}

/* Ensure primary content doesn't get flex-shrunk */
#primary {
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
}

/* =========================================
   9. Homepage Section Backgrounds - Mist White & Rounded
   ========================================= */

/* Override grey backgrounds with mist white (#DEE5DF) and add circular/blended styling */
.wp-block-group.bg-\[\#F5F5F7\],
.wp-block-group.bg-neutral-50,
.wp-block-group.bg-neutral-200 {
    background-color: var(--color-accent-mist) !important;
    border-radius: 12px !important;
    /* Circle/Logo inspired rounding */
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    overflow: hidden !important;
    /* Keep content inside curves */
}

/* Ensure adjacent mist sections don't look weird (optional spacing adjustments) */
/* If sections are adjacent, you might want them to merge or stack. 
   With margins, they will look like separate floating cards. */

/* Override icon containers and cards within these sections to match or blend */
.wp-block-group.bg-\[\#F5F5F7\] .bg-\[\#F5F5F7\],
.wp-block-group.bg-neutral-50 .bg-neutral-50,
.wp-block-group.bg-neutral-200 .bg-neutral-200 {
    background-color: transparent !important;
    /* Let the parent color shine through */
    box-shadow: none !important;
}

/* Specific fix for "Become a Member" if it needs distinct spacing */
section#apply {
    margin-bottom: var(--space-8) !important;
}

/* =========================================
   11. Premium "Why Partner with FLS?" Section (Universities Page)
   Apple/Rhone-Inspired Redesign
   ========================================= */

/* Section Container - Generous Spacing */
.entry-content>.wp-block-group {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

/* Premium Benefit Cards (Lifelong Engagement, Leadership Development, Visibility) */
/* Target the grid containing the 3 benefit cards */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group {
    /* Reset background to pure white for premium feel */
    background-color: #ffffff !important;

    /* Elevated card with subtle border */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;

    /* Premium shadow - subtle but present */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03) !important;

    /* Generous padding for breathing room */
    padding: 40px 32px !important;

    /* Smooth transitions */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;

    /* Prepare for hover transform */
    transform: translateY(0) !important;

    /* Remove any conflicting backgrounds */
    background-image: none !important;

    /* Position for shine effect */
    position: relative;
    overflow: hidden;
}

/* Premium Hover Effect - Elevated Lift */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group:hover {
    /* Lift the card */
    transform: translateY(-12px) !important;

    /* Enhanced shadow on hover - Apple-quality depth */
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 0 1px rgba(0, 0, 0, 0.04) !important;

    /* Brighten slightly */
    background-color: #ffffff !important;

    /* Slightly darker border for definition */
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Card Headings - Premium Typography */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group h3 {
    /* Swiss Green - but richer */
    color: var(--color-swiss-green) !important;

    /* Better font weight */
    font-weight: 600 !important;

    /* Tighter letter spacing for premium feel */
    letter-spacing: -0.02em !important;

    /* Generous bottom margin */
    margin-bottom: 16px !important;

    /* Smooth transition for potential hover effects */
    transition: color 0.3s ease !important;
}

/* Card Descriptions - Refined Typography */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group p {
    /* Softer text color for hierarchy */
    color: #6e6e73 !important;

    /* Increased line height for readability */
    line-height: 1.7 !important;

    /* Better font size */
    font-size: 1rem !important;

    /* Remove default margins */
    margin: 0 !important;
}

/* Subtle shine effect on card hover */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3>.wp-block-group:hover::before {
    left: 100%;
}

/* CTA Cards Section (New here? / Upcoming Events) */
/* Target the mist background section containing the 2 CTA cards */
.entry-content .wp-block-group.bg-mist {
    /* Override the circular rounding - use subtle rounding */
    border-radius: 12px !important;

    /* Better padding */
    padding: var(--space-12) var(--space-8) !important;

    /* Gentle background - not too harsh */
    background-color: #F8F9FA !important;
}

/* Individual CTA Cards */
.entry-content .wp-block-group.bg-mist .wp-block-group.grid>.wp-block-group {
    /* Premium card styling */
    border-radius: 12px !important;
    padding: 48px 40px !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;

    /* Subtle shadow */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* White CTA Card (New here?) */
.entry-content .wp-block-group.bg-mist .wp-block-group.grid>.wp-block-group.bg-white {
    background-color: #ffffff !important;
}

.entry-content .wp-block-group.bg-mist .wp-block-group.grid>.wp-block-group.bg-white:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Dark CTA Card (Upcoming Events) */
.entry-content .wp-block-group.bg-mist .wp-block-group.grid>.wp-block-group.bg-neutral-900 {
    background: linear-gradient(135deg, #1D1D1F 0%, #2D2D2F 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    position: relative;
    overflow: hidden;
}

.entry-content .wp-block-group.bg-mist .wp-block-group.grid>.wp-block-group.bg-neutral-900:hover {
    transform: translateY(-8px) !important;
    background: linear-gradient(135deg, #2D2D2F 0%, #3D3D3F 100%) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* CTA Headings - Premium Typography */
.entry-content .wp-block-group.bg-mist .wp-block-group h3,
.entry-content .wp-block-group.bg-mist .wp-block-group h2 {
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 12px !important;
}

/* Ensure text in dark card is white */
.entry-content .wp-block-group.bg-neutral-900 h3,
.entry-content .wp-block-group.bg-neutral-900 h2,
.entry-content .wp-block-group.bg-neutral-900 p {
    color: #ffffff !important;
}

/* Premium Button Styling in CTA Cards */
.entry-content .wp-block-group.bg-mist .wp-block-button__link {
    /* Refined pill shape */
    border-radius: 12px !important;

    /* Better padding */
    padding: 14px 28px !important;

    /* Premium font styling */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em !important;

    /* Remove default shadow, we'll add on hover */
    box-shadow: none !important;

    /* Smooth transition */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Button hover in white card */
.entry-content .wp-block-group.bg-white .wp-block-button__link:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(117, 145, 107, 0.25) !important;
}

/* Button hover in dark card */
.entry-content .wp-block-group.bg-neutral-900 .wp-block-button__link:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(117, 145, 107, 0.4) !important;
}

/* Grid Gap Refinement for benefit cards */
.entry-content .wp-block-group.grid.grid-cols-1.md\:grid-cols-3 {
    gap: 32px !important;
    margin-bottom: 48px !important;
}

/* Grid Gap for CTA cards */
.entry-content .wp-block-group.bg-mist .wp-block-group.grid {
    gap: 32px !important;
}

/* =========================================
   12. Mission Section Redesign
   ========================================= */

.mission-video-container {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border: none;
    /* Removed white border */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.mission-video-container:hover {
    transform: scale(1.02);
}

/* Tabs Styling */
.mission-tab-trigger {
    background: none !important;
    border: none !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    padding: 0 0 16px 0 !important;
    margin-right: 0;
    /* Managed by flex gap */
}

/* Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mission-tab-trigger:focus,
.mission-tab-trigger:active,
.mission-tab-trigger:hover {
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.mission-tab-trigger.text-mission-blue {
    color: #90A8D4 !important;
    /* Calm Blue */
}

.mission-tab-trigger span.bg-mission-blue {
    background-color: #90A8D4 !important;
    height: 3px !important;
}

.mission-tab-panel p {
    font-size: 1.25rem;
    /* Slightly smaller for better balance */
    line-height: 1.6;
    color: #1a1a1a;
}

.mission-tabs-container {
    min-height: 100%;
}

/* Custom Scrollbar for iframe if scrolling is needed */
.mission-video-container iframe::-webkit-scrollbar {
    width: 6px;
}

.mission-video-container iframe::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mission-video-container iframe::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

@media (max-width: 1024px) {
    .mission-video-container {
        max-width: 320px;
        margin-bottom: 3rem;
    }

    .mission-tab-trigger {
        font-size: 1.25rem !important;
    }
}

/* Mobile Fix for Mission Tabs to prevent scrolling */
@media (max-width: 768px) {
    .mission-tab-trigger {
        font-size: 15px !important;
        /* Smaller font to fit all three */
        padding-bottom: 8px !important;
    }

    /* Target the container to reduce gap if possible - assumed class based on triggers */
    .flex.gap-8,
    .flex.gap-12,
    .flex.gap-16 {
        gap: 16px !important;
        /* Reduce gap between tabs */
    }

    /* Specific check if there's a known container class for these tabs */
    .mission-tabs-nav,
    .mission-section .flex {
        gap: 12px !important;
        justify-content: space-between !important;
    }
}

/* =========================================
   13. Mobile Background Fix
   ========================================= */

/* Remove Astra's default gray background on mobile */
@media (max-width: 921px) {

    .ast-plain-container,
    .ast-page-builder-template {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    .site-content {
        background-color: #ffffff !important;
    }

    /* Add "MENU" text to Burger Button */
    .ast-mobile-menu-trigger-minimal {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
        padding: 8px 12px !important;
    }

    .ast-mobile-menu-trigger-minimal:after {
        content: "MENU";
        font-family: var(--font-family-sans);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--color-swiss-green);
        text-transform: uppercase;
    }

    /* Style the actual burger lines */
    .ast-mobile-menu-trigger-minimal .ast-icon svg {
        fill: var(--color-swiss-green) !important;
        width: 22px !important;
        height: 22px !important;
    }

    /* Target the Mobile Menu Overlay / Drawer - Comprehensive Search */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer.ast-mobile-popup-active,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    .ast-mobile-popup-drawer .ast-mobile-popup-content,
    .ast-mobile-popup-drawer .ast-mobile-header-content,
    .ast-mobile-popup-drawer .ast-mobile-header-wrap,
    .ast-mobile-header-content,
    .ast-desktop-header-content,
    .ast-separate-container .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer[data-is-active="true"] .ast-mobile-popup-inner,
    .ast-builder-menu-mobile .main-navigation .main-header-menu,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
        background-color: #ffffff !important;
        background-image: none !important;
    }

    /* Target the list items background just in case */
    .ast-mobile-popup-drawer .main-header-menu,
    .ast-mobile-popup-drawer .main-header-menu .menu-item,
    .ast-mobile-popup-drawer .main-header-menu .menu-item a,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item>.menu-link {
        background-color: #ffffff !important;
    }

    /* Ensure menu item text is dark and legible on white background */
    .ast-mobile-popup-drawer .menu-item a,
    .ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu .menu-item a,
    .ast-mobile-popup-drawer .main-header-menu .menu-item>.menu-link,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item>.menu-link {
        color: var(--color-text-primary) !important;
        font-family: var(--font-family-sans);
        font-weight: 500;
        font-size: 15px !important;
        /* Slightly smaller to fit everything */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
        background-color: #ffffff !important;
        display: block !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Remove vertical margins from menu items to tighten layout */
    .ast-mobile-popup-drawer .menu-item,
    .ast-builder-menu-mobile .main-navigation .menu-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-width: 0 !important;
    }

    /* Reduce padding on the container itself */
    .ast-mobile-popup-drawer .ast-mobile-popup-content,
    .ast-mobile-header-content {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Override the specific Astra selectors causing the gray text/issue */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item>.menu-link,
    .ast-builder-menu-mobile .main-navigation .main-header-menu,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
        color: var(--color-text-primary) !important;
        background-color: #ffffff !important;
    }

    /* Remove the bottom border from the last item */
    .ast-mobile-popup-drawer .menu-item:last-child a {
        border-bottom: none;
    }
}