/* Mobile / tablet header + menu. Desktop (≥1150px) nav markup is unchanged. */

#siteNav {
    z-index: 40;
}

@media (max-width: 1149px) {
    #siteNav {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    #siteNav > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0;
        max-width: none;
    }

    #desktopLogo {
        display: none !important;
    }

    #desktopNav,
    #desktopActions {
        display: none !important;
    }

    #mobileActions {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0;
        min-height: 48px;
    }

    .sys-mobile-logo {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .sys-mobile-logo img {
        display: block;
        width: 150px;
        max-width: 42vw;
        height: auto;
        object-fit: contain;
    }

    .sys-mobile-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        flex: 0 0 auto;
        margin-left: auto;
    }

    #languageDropdownButtonMobile {
        min-height: 44px;
        padding: 0.4rem 0.85rem;
        font-size: 0.85rem;
    }

    #mobileMenuButton {
        position: relative;
        z-index: 70;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: #0b2e1a;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
        backdrop-filter: none;
    }

    #mobileMenuButton:hover,
    #mobileMenuButton:focus-visible {
        background: #14532d;
        color: #fff;
        outline: 2px solid rgba(255, 255, 255, 0.55);
        outline-offset: 2px;
    }

    #mobileMenuButton svg {
        width: 1.35rem;
        height: 1.35rem;
        stroke: #fff;
        color: #fff;
    }

    #mobileMenu.sys-mobile-drawer {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 210;
        background: #ffffff;
        color: #1f2937;
        color-scheme: light;
        forced-color-adjust: none;
    }

    #mobileMenuPanel.sys-mobile-drawer__panel {
        background: #ffffff;
        color: #1f2937;
        color-scheme: light;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* CLOSURE-86D.2: the flat, uniform gap here used to be the ONLY spacing
       rule between every drawer child regardless of whether they were two
       closely-related nav links or two entirely different sections — removed
       in favour of each group (.sys-mobile-drawer__nav, __section, __auth)
       owning its own internal rhythm and its own gap before/after itself, so
       primary nav reads as one tight group and the utility sections below it
       read as clearly separate. */
    .sys-mobile-menu-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 100%;
        min-width: 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .sys-mobile-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background: #ffffff;
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .sys-mobile-drawer__logo {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
        color: inherit;
    }

    /* CLOSURE-86D.2: box re-tuned for the new drawer-only asset
       (images/logo/sys-logo.png, a tight ~141x124 square mark) — the old
       150x52vw-wide / 48px-tall box was sized for the desktop header's wide,
       mostly-blank-canvas file and left this asset looking tiny and
       dead-space-padded. A roughly-square box lets the real mark render at
       its intended ~80-100px visual footprint on phone. */
    .sys-mobile-drawer__logo img {
        display: block;
        width: min(88px, 26vw);
        max-width: 100%;
        height: auto;
        max-height: 72px;
        object-fit: contain;
        object-position: left center;
    }

    .sys-mobile-drawer__close {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid #2d5016;
        background: #0b2e1a;
        color: #ffffff;
        cursor: pointer;
    }

    .sys-mobile-drawer__close svg {
        width: 1.35rem;
        height: 1.35rem;
        stroke: #ffffff;
        color: #ffffff;
    }

    .sys-mobile-drawer__link,
    .sys-mobile-drawer__sublink,
    .sys-mobile-drawer__section-label,
    .sys-mobile-drawer__chip,
    .sys-mobile-drawer__action {
        color: #1f2937;
        -webkit-text-fill-color: #1f2937;
    }

    /* CLOSURE-86D.2 (Part G): primary nav as its own group — a tight internal
       gap between links, with a clear, intentional gap before the first
       utility section (Language) supplied by that section's own existing
       divider/padding below (no doubling-up: flex items' margins do not
       collapse, so only ONE side of this boundary should own the gap). */
    .sys-mobile-drawer__nav {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        margin-bottom: 0.5rem;
    }

    /* CLOSURE-86D.2 (Part F): 1.5rem/24px read as visually heavy for a list of
       7 primary links with min comfortable tap height already covered by the
       padding below — 1.125rem keeps the hierarchy (still clearly the largest,
       boldest text in the drawer) while reading as considerably cleaner.
       Padding kept generous enough that each row's own tap target comfortably
       clears 44px (1.125rem line-height + 2×0.625rem padding ≈ 44px). */
    .sys-mobile-drawer__link {
        display: block;
        font-weight: 600;
        font-size: 1.125rem;
        line-height: 1.3;
        padding: 0.625rem 0;
        text-decoration: none;
    }

    .sys-mobile-drawer__link:hover,
    .sys-mobile-drawer__link:focus-visible,
    .sys-mobile-drawer__sublink:hover,
    .sys-mobile-drawer__sublink:focus-visible {
        color: #2d5016;
        -webkit-text-fill-color: #2d5016;
    }

    /* CLOSURE-86D.2 (Part H): submenu must read as CHILD navigation, clearly
       smaller/lighter than its 1.125rem parent link — kept at a distinctly
       smaller scale plus its own indent/rule, replacing the raw utility
       classes previously inlined in the Blade with one named, reusable rule. */
    .sys-mobile-drawer__submenu {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        margin: 0.125rem 0 0.5rem 0.5rem;
        padding-left: 0.75rem;
        border-left: 2px solid #d1fae5;
    }

    .sys-mobile-drawer__sublink {
        display: block;
        font-size: 0.9375rem;
        padding: 0.5rem 0;
        color: #4b5563;
        -webkit-text-fill-color: #4b5563;
        text-decoration: none;
    }

    .sys-mobile-drawer__icon-btn {
        appearance: none;
        -webkit-appearance: none;
        padding: 0.5rem;
        background: transparent;
        border: 0;
        color: #4b5563;
        cursor: pointer;
    }

    .sys-mobile-drawer__icon-btn svg {
        stroke: #4b5563;
        color: #4b5563;
    }

    .sys-mobile-drawer__section {
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid #d1d5db;
    }

    .sys-mobile-drawer__section-label {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.8rem;
        color: #4b5563;
        -webkit-text-fill-color: #4b5563;
        margin-bottom: 0.5rem;
    }

    /* CLOSURE-86D.2 (Part K): base chip — currently used AS-IS by the Currency
       row ("LKR (Rs.)" / "USD ($)"), whose labels genuinely need this width.
       Padding trimmed slightly (1rem → 0.85rem horizontal) for a marginally
       more compact feel without affecting the ≥44px touch height. */
    .sys-mobile-drawer__chip {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 5.5rem;
        min-width: 5.5rem;
        text-align: center;
        padding: 0.7rem 0.85rem;
        border-radius: 999px;
        border: 0.5px solid #2d5016;
        background: #ffffff;
        color: #2d5016 !important;
        -webkit-text-fill-color: #2d5016 !important;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        min-height: 44px;
    }

    /* CLOSURE-86D.2 (Part J): language chips only ever show a 2-character code
       (EN/SI/TA) — the shared 5.5rem minimum left them heavy with dead space.
       A smaller, dedicated min-width lets three chips sit comfortably in one
       row on ordinary phone widths while keeping a full 44px touch height. */
    .sys-mobile-drawer__chip--lang {
        flex: 0 1 3.75rem;
        min-width: 3.5rem;
        padding: 0.65rem 0.8rem;
    }

    .sys-mobile-drawer__chip.is-active,
    .sys-mobile-drawer__chip.bg-\[\#2d5016\],
    #mobileMenu .currency-option.bg-\[\#2d5016\] {
        background: #2d5016 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .sys-mobile-drawer__auth {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1.5rem;
        margin-top: auto;
        border-top: 1px solid #d1d5db;
    }

    /* CLOSURE-86D.2 (Part L): presentation-only refinement — padding/font
       trimmed from 1rem/1.125rem to 0.75rem/1rem; min-height keeps every
       action a comfortable ≥44px tap target regardless of the smaller
       padding. No route/label/auth behavior touched. */
    .sys-mobile-drawer__action {
        appearance: none;
        -webkit-appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: 0.75rem 1rem;
        border-radius: 999px;
        border: 0.5px solid #2d5016;
        background: #f5f5dc;
        color: #2d5016 !important;
        -webkit-text-fill-color: #2d5016 !important;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        cursor: pointer;
    }

    .sys-mobile-drawer__action--primary {
        background: #2d5016;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .sys-mobile-drawer__action:hover,
    .sys-mobile-drawer__action:focus-visible {
        background: #2d5016;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

@media (min-width: 768px) and (max-width: 1149px) {
    .sys-mobile-logo img {
        width: 175px;
        max-width: 38vw;
    }

    /* CLOSURE-86D.2 (Part M): tablet has far more available width/height than
       phone — reusing phone-exact sizing left the tablet drawer looking
       sparse/disproportionate (per the 86D.1 audit). Rather than "just make
       everything bigger," a controlled content measure (max-width on the
       inner column) keeps line lengths and full-width controls (chips,
       action buttons) from stretching awkwardly across a much wider screen,
       while the full-viewport circular reveal overlay itself is untouched. */
    .sys-mobile-menu-inner {
        max-width: 28rem;
    }

    .sys-mobile-drawer__logo img {
        width: min(112px, 14vw);
        max-height: 96px;
    }

    .sys-mobile-drawer__link {
        font-size: 1.25rem;
        padding: 0.75rem 0;
    }

    .sys-mobile-drawer__sublink {
        font-size: 1rem;
    }

    .sys-mobile-drawer__chip {
        padding: 0.8rem 1rem;
    }

    .sys-mobile-drawer__action {
        min-height: 48px;
        font-size: 1.0625rem;
    }
}

@media (min-width: 1150px) {
    #mobileActions,
    #mobileMenu {
        display: none !important;
    }

    /*
     * Desktop EN / LKR glass — Home source of truth.
     * Home previously got blur/translucent fill only because
     * educational-programme.blade.php injects a page-local .glass-effect rule.
     * Inner pages never load that rule, so controls looked like empty green outlines.
     * Scope: #desktopActions language/currency only (not mobile drawer, not Profile).
     */
    #desktopActions #languageDropdownButton.glass-effect,
    #desktopActions #currencyDropdownButton.glass-effect {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

body.mobile-nav-open #siteNav {
    z-index: 200;
}

body.mobile-nav-open #bird {
    visibility: hidden;
}

/* Decorative hero rocks/trees never steal clicks or cover nav */
.sys-hero-deco,
.sys-hero-deco img {
    pointer-events: none;
}