/* Homepage only: the theme header is transparent over the hero (like the prototype), dark navy once the page
   scrolls while still over the hero, and the normal white header past it. header.js keeps the body classes
   current: shx-nav-over-hero, shx-nav-scrolled. Hovering, keyboard focus or an open menu always shows the white
   header, so the mega menus look as they do on every other page. The theme's header rules use !important. */
.shx-homepage #main{margin-top:0}
.shx-homepage .secondary-navbar-spacer{display:none}
/* Until header.js measures it, the hero pads for the theme header's own height at each width (58/62/65/70px),
   so the headline doesn't jump when the measurement lands. */
.shx-homepage{--shx-nav-fallback:58px}
@media (min-width:576px){.shx-homepage{--shx-nav-fallback:62px}}
@media (min-width:1200px){.shx-homepage{--shx-nav-fallback:65px}}
@media (min-width:1400px){.shx-homepage{--shx-nav-fallback:70px}}
.shx-homepage .shx-home{--header-height:var(--shx-nav-h,var(--shx-nav-fallback))}
html{scroll-padding-top:calc(var(--shx-nav-h,70px) + 24px)}

/* Text first paints in Arial resized to Inter's measurements (regular and bold separately), so lines don't rewrap
   and push the page down when the Inter web font arrives. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:100 549;size-adjust:107.1%;ascent-override:90.4%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 1000;size-adjust:102.8%;ascent-override:94.2%;descent-override:23.6%;line-gap-override:0%}
.shx-homepage .shx-home{font-family:Inter,"Inter Fallback","Inter Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}

/* The hero headline and description fade in when Mida's #abhide comes off, instead of popping in. */
@media (prefers-reduced-motion:no-preference){.shx-home .hero h1,.shx-home .hero .hero-description{transition:opacity .25s ease-out}}

.shx-homepage header.nav-fixed nav.navbar.navbar-white-custom{transition:background-color .2s,box-shadow .2s}
.shx-homepage header.nav-fixed .header-logo{transition:opacity .15s}

/* Transparent state */
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) nav.navbar.navbar-white-custom{background:transparent none!important;box-shadow:none!important}
html.shx-nav-js body.shx-nav-over-hero.shx-nav-scrolled header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) nav.navbar.navbar-white-custom{background:rgba(12,25,58,.94) none!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.08)!important}
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) .navbar-brand{background:url(img/skyhigh-logo-on-dark.webp) left center/contain no-repeat}
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) .header-logo{opacity:0}
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) .navbar-white-custom .nav-link,
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) .navbar-white-custom .fa-search{color:#e6edff!important}
html.shx-nav-js body.shx-nav-over-hero header.nav-fixed:not(:hover):not(:focus-within):not(:has(.show,.collapsing)) .navbar-white-custom .navbar-toggler-icon{filter:invert(1) brightness(1.6)}