/* ============================================================================
   ELEVATION — shared design-language foundation for A&J e-Edu Academy
   Loads AFTER main.css on every page. Strictly additive: it introduces design
   tokens + the topographic "contour" signature + small site-wide polish, and
   never restyles existing components, so it is safe to load everywhere.

   Signature: topographic contour lines (Baguio, 1,500 m — the path through
   English levels). Palette unchanged from the live site.
   Added 2026-07.
   ============================================================================ */

:root {
    --elev-sky:        #2986cc;
    --elev-sky-light:  #7ec8ff;
    --elev-slate:      #2d465e;
    --elev-slate-deep: #1f3446;

    /* Elevation depth scale — cards "rise a level" as they move up the scale. */
    --elev-1: 0 1px 2px rgba(31,52,66,.05), 0 3px 8px rgba(31,52,66,.05);
    --elev-2: 0 4px 10px rgba(31,52,66,.07), 0 14px 30px rgba(41,134,204,.10);
    --elev-3: 0 10px 22px rgba(31,52,66,.10), 0 26px 54px rgba(41,134,204,.18);

    --elev-contour: url(../img/elevate-contour.svg);
}

/* ---- Contour signature -------------------------------------------------------
   Drop <div class="elev-contour"></div> as the FIRST child of any
   position:relative container. It paints the faint mountain-map texture behind
   the content and never intercepts clicks. Use --soft over pale sections. */
.elev-contour {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--elev-contour) center / cover no-repeat;
    opacity: .55;
    z-index: 0;
}
.elev-contour--soft { opacity: .28; }
.elev-contour--faint { opacity: .16; }

/* ---- Site-wide polish (safe everywhere) ------------------------------------ */
/* Visible keyboard focus in the brand accent — accessibility + finish. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--elev-sky);
    outline-offset: 2px;
}
::selection { background: rgba(41,134,204,.22); }

/* ---- Universal signature placements (resolve correctly from this file) ------
   These hook shared components that appear site-wide, so a single rule here
   carries the contour identity onto every page without per-page markup. */

/* Footer — on every page, dark ground: the contour's home base.
   Uses the .elev-contour helper element (dropped in after <footer>), tuned
   down and faded so it never competes with the footer links. */
#footer .elev-contour {
    opacity: .2;
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
#footer .container { position: relative; z-index: 1; }

/* Interior page hero banners (about / team / why-choose / contact / courses /
   regulations / faq …). Many of these already use their own ::after tint from
   an earlier polish pass, so the contour rides on its own injected element
   (.elev-contour--hero, added by elevate.js) — no ::after collision. It etches
   into the dark photo with a soft screen blend, reading as topography. */
.page-title.dark-background { position: relative; }
.page-title.dark-background > .elev-contour--hero {
    mix-blend-mode: screen;
    opacity: .5;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000 100%);
            mask-image: linear-gradient(180deg, transparent, #000 42%, #000 100%);
}
.page-title.dark-background > .container { position: relative; z-index: 2; }

/* ---- Navigation (all 3 nav copies share these classes) --------------------
   Weaves the contour signature into the teal bar and turns the long Facilities
   dropdown into a scannable 2-column mega-panel. Contour is an injected element
   (elevate.js) so it never fights the nav's own ::after accent line. */
.eco-nav > .elev-contour--nav {
    opacity: .12;
    z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
            mask-image: linear-gradient(180deg, #000, transparent);
}
.eco-nav__bar { position: relative; z-index: 1; }

@media (min-width: 992px) {
    /* Dropdowns with many items (Facilities = 11) become two columns so the
       list is scannable instead of a tall scroll. Others stay single-column. */
    .eco-nav__has > .eco-nav__sub:has(> li:nth-child(9)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 6px;
        min-width: 448px;
    }
    /* Premium dropdown depth via the elevation scale. */
    .eco-nav__has > .eco-nav__sub { box-shadow: var(--elev-3); }

    /* Keep the parent item lit while you browse its dropdown (not just while the
       link itself is hovered) — the underline + tint persist across the menu. */
    .eco-nav__has:hover > a { background: rgba(255,255,255,.08); color: #fff; }
    .eco-nav__has:hover > a::after { transform: scaleX(1); }
}

/* Nav brand lockup — premium wordmark (CSS only, wording unchanged so i18n
   keeps matching). .eco-nav prefixes give this priority over the nav's own
   inline brand styles. Applies to all 3 nav copies. */
.eco-nav .eco-nav__brandtext {
    font-size: 21px;
    letter-spacing: .004em;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #cfe8ff 125%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.eco-nav .eco-nav__brandtext small {
    -webkit-text-fill-color: rgba(176, 223, 229, .95);
    color: rgba(176, 223, 229, .95);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    margin-top: 4px;
}
.eco-nav .eco-nav__brand img {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.30));
    transition: transform .25s ease, filter .25s ease;
}
.eco-nav .eco-nav__brand:hover img {
    filter: drop-shadow(0 3px 10px rgba(63,167,173,.55));
}

/* Mobile slide-out menu: carry the contour signature so phone users get the
   same language, plus a touch more depth. Desktop menu is unaffected. */
@media (max-width: 991px) {
    .eco-nav__menu::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--elev-contour) center / cover no-repeat;
        opacity: .14;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
                mask-image: linear-gradient(180deg, #000, transparent 72%);
    }
    .eco-nav__menu > .eco-nav__list { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
}