/* =====================================================================
   App-owned CSS — everything this Laravel build needs on top of the
   designer's css/style.css.

   style.css is a verbatim copy of the delivered static build and gets
   overwritten wholesale on every handoff, so nothing of ours may live in it.
   This file loads after it (see web/layouts/includes/styles.blade.php) and
   wins on source order at equal specificity.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Sticky header — stays pinned to the top of the viewport on scroll.
   style.css ships `.site-header{position:relative}`; only `position`/`top`
   are overridden here (z-index/background stay as style.css set them),
   winning on source order since app.css loads after style.css.
   --------------------------------------------------------------------- */
.site-header{position:sticky;top:0}


/* ---------------------------------------------------------------------
   Hero banner image — same box as .hero-video, so an image slide fills
   the header exactly like a video slide does.
   --------------------------------------------------------------------- */
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity .5s ease}


/* ---------------------------------------------------------------------
   Multi-level navigation
   -----------------------------------------------------------------------
   The static build ships the third level twice — once inline in index.html
   scoped to `.p-index .hero-head`, and once injected by js/site.js scoped to
   `.site-header`. We render both headers server-side from one Blade partial
   and never load site.js, so the rules are unified here against both header
   scopes and without the per-page body class.

   Level 1 (.subnav) already ships unscoped in style.css. What follows is the
   homepage scope for level 1, plus level 2/3 for both scopes.
   --------------------------------------------------------------------- */

/* --- homepage: open the first-level panel (style.css only scopes this to
       .site-header, i.e. the inner-page header) --- */
.hero-head .nav-main ul{overflow:visible}
.hero-head .nav-main li{position:relative;display:flex;align-items:center}
.hero-head .nav-main li.has-sub:hover > .subnav,
.hero-head .nav-main li.has-sub:focus-within > .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,6px)}

/* --- a row that itself has children --- */
.hero-head .nav-main .subnav,
.site-header .nav-main .subnav{text-align:left}
.hero-head .nav-main .sub-item,
.site-header .nav-main .sub-item{position:relative}
.hero-head .nav-main .sub-item > a,
.site-header .nav-main .sub-item > a{display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero-head .nav-main .sub-item > a > i,
.site-header .nav-main .sub-item > a > i{font-size:10px;opacity:.5;flex:none}
.hero-head .nav-main .sub-item:hover > a,
.site-header .nav-main .sub-item:hover > a{background:var(--pink-bg);color:var(--red)}
.hero-head .nav-main .sub-item:hover > a > i,
.site-header .nav-main .sub-item:hover > a > i{opacity:1}

/* --- third level: opens sideways off its parent row, not centred under it --- */
.hero-head .nav-main .subnav-2,
.site-header .nav-main .subnav-2{top:-12px;left:100%;transform:translate(20px,0);min-width:212px}
.hero-head .nav-main .subnav-2::before,
.site-header .nav-main .subnav-2::before{top:0;bottom:0;left:-22px;right:auto;width:24px;height:auto}


.hero-head .nav-main .subnav .sub-item.has-sub:hover > .subnav-2,
.hero-head .nav-main .subnav .sub-item.has-sub:focus-within > .subnav-2,
.site-header .nav-main .subnav .sub-item.has-sub:hover > .subnav-2,
.site-header .nav-main .subnav .sub-item.has-sub:focus-within > .subnav-2{opacity:1;visibility:visible;pointer-events:auto;transform:translate(14px,0)}

/* Below 992px the whole horizontal bar is hidden and the burger drawer takes over. */
@media(max-width:992px){
  .hero-head .nav-main .subnav,.hero-head .nav-main .subnav-2,
  .site-header .nav-main .subnav,.site-header .nav-main .subnav-2{display:none}
}

/* --- grouped drawer: style.css styles `.drawer-group a` but never makes it
       block, and those <a>s are no longer flex children of .drawer-nav —
       without this every group collapses onto one run-on line. --- */
.drawer-nav .drawer-group a{display:block}