@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

/* --- Theme Variables --- */
:root {
    /* --- Brand Design Tokens --- */
    --onest-primary: #735c00;          /* Unified Deep Gold */
    --onest-primary-light: #facc15;    /* Vibrant Accent Yellow */
    --onest-primary-dark: #574500;     /* Darker Gold for Hover */
    --onest-secondary: #111111;        /* Charcoal Black */
    --onest-accent: #FF6B9D;           /* Pre-primary Pink Accent */

    /* --- Backgrounds --- */
    --onest-bg: #fbf8ff;               /* Cool White/Cream */
    --onest-bg-alt: #f4f2fd;           /* Soft tint background */
    --onest-bg-card: #ffffff;

    /* --- Text Colors --- */
    --onest-text: #1a1b22;             /* Off-black for premium contrast */
    --onest-text-muted: #4d4632;       /* Slate/Golden muted text */
    --onest-text-light: #ffffff;       /* Light text overlay */

    /* --- Borders & Shadows --- */
    --onest-border: #e5e7eb;
    --onest-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --onest-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --onest-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --onest-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* --- Typography --- */
    --onest-font-heading: 'Libre Caslon Text', serif;
    --onest-font: 'Hanken Grotesk', sans-serif;
    
    /* --- Layout & Utilities --- */
    --onest-radius: 16px;
    --onest-radius-sm: 8px;
    --onest-radius-lg: 24px;
    --onest-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   UNIFIED DARK MODE VARIABLES (Golden Theme Mode)
   ========================================================================== */
.onest-dark-mode {
    --onest-bg: #FFF9D9;               /* Golden Vanilla Background */
    --onest-bg-alt: #FFF3B0;           /* Section BG */
    --onest-bg-card: #FFF3B0;          /* Card BG */

    --onest-text: #000000;             /* Pure black text for contrast */
    --onest-text-muted: #333333;       /* Dark Gray */
    --onest-text-light: #000000;       /* Black text on light backgrounds */

    --onest-border: rgba(232, 185, 35, 0.2);
    --onest-shadow: 0 4px 12px rgba(232, 185, 35, 0.25);
    --onest-shadow-lg: 0 10px 15px -3px rgba(232, 185, 35, 0.3);

    /* Brand adaptation in dark mode */
    --onest-primary-dark: #E8B923;
    --onest-secondary: #FFEBA1;
}

/* ==========================================================================
   GLOBAL UTILITIES / PERFORMANCE ENHANCEMENT
   ========================================================================== */
.backdrop-blur-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Global headings font override */
h1, h2, h3, h4, h5, h6, [class*="-title"], [class*="-heading"] {
    font-family: var(--onest-font-heading) !important;
}

/* Global Ambient Background Gradients (Optimized for Scroll Performance via GPU Composition) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
    background: radial-gradient(circle at 10% 15%, rgba(250, 204, 21, 0.06) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(0, 33, 71, 0.04) 0%, transparent 50%),
                linear-gradient(135deg, #fdfbf7 0%, #f6f8fc 100%) !important;
    background-size: cover !important;
    pointer-events: none;
    transition: background 0.3s ease;
}

body, 
.onest-home-wrapper, 
.onest-student-life-wrapper, 
.onest-about-wrapper, 
.onest-admissions-wrapper, 
.onest-campus-wrapper, 
.onest-contact-wrapper, 
.onest-preprimary-wrapper {
    background: transparent !important;
}

/* Dark Mode Gradient Override */
.onest-dark-mode::before, 
.onest-home-dark-mode::before, 
.onest-student-life-dark-mode::before, 
.onest-about-dark-mode::before, 
.onest-admissions-dark-mode::before, 
.onest-campus-dark-mode::before, 
.onest-contact-dark-mode::before, 
.onest-preprimary-dark-mode::before {
    background: radial-gradient(circle at 15% 15%, rgba(115, 92, 0, 0.08) 0%, transparent 45%),
                linear-gradient(135deg, #FFF9D9 0%, #FFF3B0 100%) !important;
}

.onest-dark-mode, 
.onest-home-dark-mode, 
.onest-student-life-dark-mode, 
.onest-about-dark-mode, 
.onest-admissions-dark-mode, 
.onest-campus-dark-mode, 
.onest-contact-dark-mode, 
.onest-preprimary-dark-mode {
    background: transparent !important;
}

/* Sticky Header Glassmorphism styling */
.glass-nav {
    background: rgba(253, 251, 247, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Global Mobile Navbar Height & Logo Scaling Safe-Guards */
@media (max-width: 768px) {
    header.glass-nav {
        height: 72px !important;
    }
    header.glass-nav img[src*="onest.svg"] {
        height: 54px !important;
        min-width: 42px !important;
        object-fit: contain;
    }
}

/* ==========================================================================
   BRANDED PRELOADER
   ========================================================================== */
#onest-preloader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #fdfbf7;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;
    pointer-events: auto;
}

#onest-preloader.onest-preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.onest-dark-mode #onest-preloader,
.onest-home-dark-mode #onest-preloader {
    background: #FFF9D9;
}

.onest-preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 24px;
}

.onest-preloader-logo-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onest-preloader-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid rgba(115, 92, 0, 0.12);
    border-top-color: #735c00;
    border-right-color: #facc15;
    animation: onestPreloaderSpin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

.onest-preloader-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    animation: onestPreloaderPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(115, 92, 0, 0.15));
}

.onest-preloader-brand {
    font-family: var(--onest-font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #735c00;
    text-transform: uppercase;
}

.onest-preloader-bar {
    width: 110px;
    height: 3px;
    background: rgba(115, 92, 0, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.onest-preloader-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, #735c00, #facc15);
    border-radius: 999px;
    animation: onestPreloaderBar 1.2s ease-in-out infinite;
}

@keyframes onestPreloaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes onestPreloaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.96); opacity: 0.9; }
}

@keyframes onestPreloaderBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .onest-preloader-ring,
    .onest-preloader-logo,
    .onest-preloader-progress {
        animation: none !important;
    }
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIVE REFINEMENTS & TOUCH ACCESSIBILITY
   ========================================================================== */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

/* Touch Targets: ensure interactive controls have comfortable tap zones (min 44px) */
@media (max-width: 768px) {
    button,
    [role="button"],
    a.bg-primary,
    a.bg-\[\#facc15\],
    a[class*="btn"],
    .onest-home-btn,
    .onest-admissions-btn-primary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Form input zoom prevention on iOS (forces >= 16px font-size) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 46px;
    }

    /* Prevent fixed widths on mobile flex items */
    [style*="min-width: 250px"],
    [style*="min-width: 200px"] {
        min-width: 100% !important;
    }

    /* Image responsiveness safety guard */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Responsive typography clamps on mobile */
    h1, .hero-title, [class*="-hero-title"] {
        font-size: clamp(1.85rem, 5.5vw, 3.25rem) !important;
        line-height: 1.2 !important;
    }

    h2, .section-title, [class*="-section-title"] {
        font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
        line-height: 1.25 !important;
    }

    /* Mobile drawer menu touch and scrolling safety */
    #onest-home-mobile-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: max(2rem, env(safe-area-inset-top));
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    #onest-home-mobile-menu .onest-home-mobile-list li a,
    #onest-home-mobile-menu ul li a {
        padding: 10px 16px;
        display: inline-block;
        min-height: 44px;
        line-height: 24px;
    }

    /* Floating action buttons spacing for mobile */
    #onest-chatbot-bubble {
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
        left: 16px !important;
    }
}

/* ==========================================================================
   GLOBAL SCROLLING MARQUEE ANNOUNCEMENT TICKER
   ========================================================================== */
#onest-emergency-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 38px;
    z-index: 60;
    display: flex;
    align-items: center;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.onest-marquee-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

.onest-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.onest-marquee-track:hover {
    animation-play-state: paused !important;
}

.onest-marquee-track.direction-ltr {
    animation: onestMarqueeLTR 28s linear infinite;
}

.onest-marquee-track.direction-rtl {
    animation: onestMarqueeRTL 28s linear infinite;
}

@keyframes onestMarqueeLTR {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes onestMarqueeRTL {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.onest-marquee-item {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Theme color variations */
#onest-emergency-banner.theme-gold {
    background: linear-gradient(90deg, #735c00 0%, #9e7f00 50%, #735c00 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(250, 204, 21, 0.4);
}

#onest-emergency-banner.theme-navy {
    background: linear-gradient(90deg, #001f3f 0%, #002b5b 50%, #001f3f 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#onest-emergency-banner.theme-warning {
    background: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #ea580c 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#onest-emergency-banner.theme-critical {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#onest-emergency-banner.theme-green {
    background: linear-gradient(90deg, #065f46 0%, #059669 50%, #065f46 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   REFINED HERO ANNOUNCEMENT PANEL (Warm Ivory Semi-Transparent Overlay)
   ========================================================================== */
.hero-announcement-panel {
    background: radial-gradient(135% 125% at 50% 40%, rgba(255, 253, 248, 0.88) 0%, rgba(254, 250, 242, 0.74) 68%, rgba(250, 245, 233, 0.42) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(115, 92, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-announcement-panel:hover {
    box-shadow: 0 24px 50px -15px rgba(115, 92, 0, 0.18), 0 0 0 1px rgba(115, 92, 0, 0.14);
}

.hero-announcement-item {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(115, 92, 0, 0.12);
    transition: all 0.25s ease;
}

.hero-announcement-item:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(115, 92, 0, 0.24);
    transform: translateY(-1px);
}

.hero-announcement-item.is-pinned {
    background: rgba(255, 251, 238, 0.82);
    border: 1px solid rgba(202, 138, 4, 0.26);
    box-shadow: 0 2px 8px -2px rgba(202, 138, 4, 0.08);
}

.hero-announcement-item.is-pinned:hover {
    background: rgba(255, 252, 242, 0.95);
    border-color: rgba(202, 138, 4, 0.38);
}

/* Dark Mode Adaptation */
.onest-dark-mode .hero-announcement-panel {
    background: radial-gradient(135% 125% at 50% 40%, rgba(28, 26, 22, 0.90) 0%, rgba(22, 21, 18, 0.78) 68%, rgba(18, 17, 14, 0.45) 100%);
    border: 1px solid rgba(250, 204, 21, 0.15);
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.45);
}

.onest-dark-mode .hero-announcement-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.onest-dark-mode .hero-announcement-item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(250, 204, 21, 0.25);
}

.onest-dark-mode .hero-announcement-item.is-pinned {
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.22);
}