/* ==========================================================================
   GLOBAL BRAND TYPOGRAPHY DEFINITION
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cambria&display=swap');

/* ==========================================================================
   1. INLINE TAILWIND INTEGRATION LAYER & SITE TOKENS
   ========================================================================== */
@layer base {
    :root {
        /* Premium Light Mode Architecture Foundations (Clean Canvas) */
        --color-void-950: #FFFFFF;
        /* Primary Background Surface */
        --color-void-900: #F8FAFC;
        /* Secondary Card & Block Contrast Surface */
        --color-void-800: #F1F5F9;
        /* Subtle Component Alignment Borders */

        /* High-Contrast Core Typographic Hierarchy */
        --color-text-slate-primary: #0F172A;
        /* Deep Charcoal for Strong Contrast Headers */
        --color-text-slate-muted: #475569;
        /* Stable Muted Text for Body & Paragraph Copy */
        --color-text-slate-mobile: #1E293B;
        /* Ultra-Deep Slate for Small Touchscreens */

        /* Brand Identity Chromatic Matrix */
        --color-logo-flame: #A855F7;
        /* Supreme Vibrant Flame Accent */
        --color-logo-purple: #8A2BE2;
        --color-logo-gold: #FFBF00;
        --color-logo-emerald: #00A86B;
        --color-logo-teal: #008080;
        --color-logo-ocean: #004F7A;

        /* Precision Micro-Interaction Easing Curves */
        --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
        --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    html {
        scroll-behavior: smooth;
        background-color: var(--color-void-950);
        color: var(--color-text-slate-muted);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
    }

    body {
        background-color: var(--color-void-950);
        color: var(--color-text-slate-muted);
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
    }

    /* Automated Typography Color Protectors (Ensures text remains readable on Light Canvas) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--color-text-slate-primary) !important;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
    }

    p,
    li,
    label,
    time,
    span:not([class*="gradient"]):not([class*="text-logo"]):not([class*="text-white"]):not([class*="text-slate"]) {
        color: var(--color-text-slate-muted) !important;
    }

    /* Overwrite dark-mode fallback classes from HTML markup to align with your Light Mode system */
    .text-white,
    .text-gray-100,
    .text-gray-200,
    .text-gray-300,
    .text-slate-700 {
        color: var(--color-text-slate-primary) !important;
    }

    /* Enforce deep contrast for structural headers */
    .text-white.font-black,
    h1.text-white,
    h2.text-white,
    h3.text-white {
        color: var(--color-text-slate-primary) !important;
    }

    /* Prevent mobile input system background overrides */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--color-text-slate-primary) !important;
        -webkit-box-shadow: 0 0 0px 1000px var(--color-void-950) inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }
}

/* ==========================================================================
   2. GLOBAL UI/UX PLATFORM SCROLLBARS
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-void-950);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
            var(--color-logo-purple),
            var(--color-logo-gold),
            var(--color-logo-emerald),
            var(--color-logo-ocean));
    border-radius: 4px;
}

/* Selection Highlight Color */
::selection {
    background-color: rgba(138, 43, 226, 0.12);
    color: var(--color-logo-purple);
}

/* ==========================================================================
   3. SPECIALIZED LOGO TYPOGRAPHY & IDENTITY GRADIENTS
   ========================================================================== */
@layer components {
    .text-gradient-logo {
        background: linear-gradient(135deg,
                var(--color-logo-gold) 0%,
                var(--color-logo-emerald) 50%,
                var(--color-logo-teal) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
    }

    .logo-gradient-text {
        background: linear-gradient(135deg, #FFBF00 10%, #00A86B 50%, #008080 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .flame-gradient-text {
        background: linear-gradient(135deg, var(--color-logo-flame) 0%, #8A2BE2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .premium-shimmer {
        position: relative;
        overflow: hidden;
    }

    .premium-shimmer::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -150%;
        width: 50%;
        height: 200%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
        transform: rotate(30deg);
    }

    .premium-shimmer:hover::after {
        left: 150%;
        transition: left 0.9s ease-in-out;
    }
}

/* ==========================================================================
   4. COLOR MATRIX & STRUCTURAL UTILITIES
   ========================================================================== */
@layer utilities {
    .border-gray-850 {
        border-color: rgba(15, 23, 42, 0.08) !important;
    }

    .border-gray-900,
    .border-gray-800 {
        border-color: rgba(15, 23, 42, 0.06) !important;
    }

    .text-logo-flame {
        color: var(--color-logo-flame) !important;
    }

    .text-logo-purple {
        color: var(--color-logo-purple) !important;
    }

    .text-logo-gold {
        color: var(--color-logo-gold) !important;
    }

    .text-logo-emerald {
        color: var(--color-logo-emerald) !important;
    }

    .text-logo-teal {
        color: var(--color-logo-teal) !important;
    }

    .text-logo-ocean {
        color: var(--color-logo-ocean) !important;
    }

    .bg-logo-purple\/10 {
        background-color: rgba(138, 43, 226, 0.07) !important;
    }

    .bg-logo-gold\/10 {
        background-color: rgba(255, 191, 0, 0.08) !important;
    }

    .bg-logo-emerald\/10 {
        background-color: rgba(0, 168, 107, 0.07) !important;
    }

    .bg-logo-teal\/10 {
        background-color: rgba(0, 128, 128, 0.07) !important;
    }

    /* Transparent Floating Blur Alpha Adapter for Navigation Bar */
    .bg-void-950\/90 {
        background-color: rgba(255, 255, 255, 0.92) !important;
    }
}

/* ==========================================================================
   5. ADVANCED INTERACTION & PHYSICAL MOTION HANDLING
   ========================================================================== */
.interactive-card,
.grid>div:not([class*="grid-cols"]):not([class*="md:"]):not([class*="lg:"]),
.bg-void-900,
.bg-void-950,
button,
a {
    transition: transform 0.4s var(--ease-smooth),
        border-color 0.3s var(--ease-smooth),
        box-shadow 0.3s var(--ease-smooth),
        background-color 0.3s var(--ease-smooth);
    will-change: transform, border-color, box-shadow;
}

.bg-void-950 {
    background-color: var(--color-void-950) !important;
}

.bg-void-900 {
    background-color: var(--color-void-900) !important;
}

button:active,
a:active {
    transform: scale(0.98);
    transition: transform 0.1s var(--ease-smooth);
}

/* ==========================================================================
   6. RESPONSIVE ENGINE & MOBILE BREAKPOINT OPTIMIZATION
   ========================================================================== */

/* --- ULTRA-WIDESCREENS (1400px and above) --- */
@media (min-width: 87.5em) {
    .max-w-7xl {
        max-width: 1360px !important;
        margin: 0 auto !important;
    }

    .grid {
        gap: 2rem !important;
    }
}

/* --- SMARTPHONES & PORTABLE TOUCH DEVICES (Under 640px) --- */
@media (max-width: 40em) {
    html {
        /* Scaled up from 14px to 16px to enlarge default font sizes, characters and mobile touch layout boundaries */
        font-size: 16px !important;
    }

    /* Contain viewports rigidly to remove side-scrolling system failure */
    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
    }

    /* Added body padding-top to prevent the fixed-top header layout from covering landing content elements */
    body {
        padding-top: 64px !important;
    }

    /* Core Layout Brake: Collapse grids and multi-column rows into clean single stacks */
    .grid,
    [class*="grid-cols-"],
    .flex:not(.keep-flex):not([class*="items-center"]) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* Force full-width blocks on structural containers */
    .grid>*,
    .flex:not(.keep-flex):not([class*="items-center"])>* {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Prevent long words or custom phrases from overflowing text boundaries */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Higher contrast readability configuration for mobile devices & boosted mobile baseline text scaling */
    p,
    li,
    label,
    span:not([class*="gradient"]):not([class*="text-logo"]) {
        color: var(--color-text-slate-mobile) !important;
        font-size: 1.05rem !important;
        /* Forces copy, lists and labels to appear visibly larger on phones */
    }

    /* Fluid Typographic Downscaling across headers - enhanced with comfortable legibility limits */
    h1,
    .text-4xl,
    .text-6xl {
        font-size: clamp(2.2rem, 8vw, 2.8rem) !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
    }

    h2,
    .text-3xl {
        font-size: clamp(1.65rem, 6vw, 2.0rem) !important;
        line-height: 1.35 !important;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    /* Dynamically adjust Hero action buttons to stack elegantly */
    header .flex-col.sm\252 flex-row {
        flex-direction: column !important;
        gap: 0.85rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem;
    }

    header a {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 1.1rem !important;
        /* Enlarged touch targeting path padding */
        padding-bottom: 1.1rem !important;
        font-size: 1.1rem !important;
        /* Boldly highlights actions for phone displays */
    }

    /* Dynamic Grid Adjustment for the Header Features Grid (6 items to 2 columns on mobile) */
    header .mt-16.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        display: grid !important;
        flex-direction: unset !important;
        gap: 0.75rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    header .mt-16.grid>div {
        width: 100% !important;
        padding: 1rem 0.5rem !important;
    }

    /* Layout Padding Optimization: Reduce spacing to save screen estate */
    .p-8,
    .p-16,
    .py-16,
    .py-20 {
        padding: 2.5rem 1rem !important;
    }

    .px-4,
    .px-6,
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ==========================================================================
       7. HARD-HARDENED MOBILE NAVIGATION MECHANICS & CONTRAST
       ========================================================================== */
    /* Enforces fixed top functionality for global headers/navigation panels on mobile viewports */
    nav,
    header>nav,
    .fixed-header-target {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        z-index: 9999 !important;
        background-color: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid var(--color-void-800) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }

    /* Enforce rigid layout boundaries on the navbar bar row */
    nav .flex.items-center.justify-between {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 64px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Force layout alignment inside the Brand Identity component container */
    nav .flex.items-center.gap-3 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        min-w-0 !important;
        flex-shrink: 1 !important;
    }

    /* Prevent the sub-slogan from appearing and causing cross-wrapping layouts on screens under 450px */
    nav span.text-\[10px\] {
        display: none !important;
    }

    /* Shrink the brand heading text slightly to prevent layout displacement near the menu icon */
    nav span.text-lg {
        font-size: 1.25rem !important;
        /* Slightly optimized for higher dynamic mobile presence */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--color-text-slate-primary) !important;
        display: block !important;
        font-weight: bold !important;
    }

    /* Enforce safe physical touch boundaries for the hamburger navigation menu icon toggle */
    #menuBtn {
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-text-slate-primary) !important;
        /* Forces menu bar icon color visibility */
        font-size: 1.6rem !important;
        background-color: var(--color-void-900) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        margin-right: -4px !important;
        flex-shrink: 0 !important;
    }

    #menuBtn:active {
        background-color: var(--color-void-800) !important;
    }

    /* Mobile Menu Overlay Dropdown Panel Design Optimization */
    #mobileMenu {
        position: fixed !important;
        /* Changed to fixed position to follow navigation architecture */
        top: 64px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
        background-color: #FFFFFF !important;
        border-bottom: 2px solid var(--color-void-800) !important;
        box-shadow: 0 15px 30px -10px rgba(15, 23, 42, 0.1) !important;
        z-index: 9998 !important;
    }

    #mobileMenu .px-4.py-6 {
        padding: 2rem 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Format explicit navigation item blocks within the mobile dropdown overlay list */
    #mobileMenu a.mobile-nav-link {
        width: 100% !important;
        color: var(--color-text-slate-primary) !important;
        font-weight: 600 !important;
        font-size: 1.2rem !important;
        /* Characters enlarged for natural touchscreen choice selections */
        padding: 1.1rem 1.25rem !important;
        background-color: var(--color-void-900) !important;
        border-radius: 10px !important;
        display: block !important;
        box-sizing: border-box !important;
        border-left: 4px solid transparent;
    }

    #mobileMenu a.mobile-nav-link:active {
        background-color: rgba(138, 43, 226, 0.05) !important;
        color: var(--color-logo-purple) !important;
        border-left-color: var(--color-logo-purple) !important;
    }

    /* Force the Call-to-Action item to fit seamlessly inside the stack container block layout */
    #mobileMenu a[href="#join"] {
        background: linear-gradient(to right, var(--color-logo-gold), var(--color-logo-emerald)) !important;
        color: #FFFFFF !important;
        text-align: center !important;
        margin-top: 1rem !important;
        padding: 1.2rem !important;
        font-size: 1.25rem !important;
    }
}