/* Pixorizon shared navigation — compact (hamburger) layout that can also be switched on by site-nav.js when the
   desktop navigation no longer fits (large text, narrow window). Mirrors the existing mobile menu exactly. */

/* Desktop: keep each link on one line so "does it fit?" is a meaningful question. No visual change when it fits. */
@media(min-width:961px){html:not(.nav-compact) .nav-links a{white-space:nowrap}}

html.nav-compact .hamburger{display:flex}
html.nav-compact .nav-backdrop{display:block}
html.nav-compact .nav-links{
  display:flex;flex-direction:column;align-items:stretch;position:absolute;top:70px;left:0;width:100%;
  background:#fff;gap:0;margin-left:0;padding:0 0 1.3rem;
  border-top:2px solid var(--blue);border-bottom:1px solid var(--border);
  box-shadow:0 12px 36px rgba(31,60,136,0.09),0 3px 10px rgba(0,0,0,0.04);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .26s ease,visibility 0s linear .32s;z-index:999;
}
html.nav-compact .nav-links.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .26s ease,visibility 0s linear 0s;
}
html.nav-compact .nav-links li{width:100%;border-bottom:1px solid var(--border-light)}
html.nav-compact .nav-links li:last-child{border-bottom:none;padding:1rem 5% 0}
html.nav-compact .nav-links li a:not(.nav-cta){
  display:block;padding:1.15rem 5%;font-size:.97rem;font-weight:500;color:var(--text);letter-spacing:.01em;
  text-decoration:none;white-space:normal;transition:color .15s ease,background .15s ease;
}
html.nav-compact .nav-links li a:not(.nav-cta):focus-visible{color:var(--blue);background:var(--blue-light);outline:none}
html.nav-compact .nav-links .nav-review{color:var(--blue)!important;font-weight:600!important}
html.nav-compact .nav-links .nav-cta{
  display:block!important;padding:.95rem 1.5rem!important;text-align:center!important;border-radius:8px!important;
  width:100%!important;font-size:.95rem!important;letter-spacing:.01em;
}
/* The mobile-only items (Google Review Setup, Missed-Call Text Back) belong to the compact menu */
html.nav-compact .nav-mobile-only{display:list-item}
@media(hover:hover) and (pointer:fine){
  html.nav-compact .nav-links li a:not(.nav-cta):hover{color:var(--blue);background:var(--blue-light)}
}

/* The open menu must always fit the visible viewport below the header and scroll inside itself when it is taller
   (short landscape screens, small phones, very large text). The page behind stays locked while it is open. */
@media(max-width:960px){
  .nav-links{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(1.3rem + env(safe-area-inset-bottom,0px))}
}
html.nav-compact .nav-links{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(1.3rem + env(safe-area-inset-bottom,0px))}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Pass-06 — header polish
   1) Logo: tight-cropped artwork files (pixorizon-logo-header*.svg — identical paths, built-in clear space trimmed) so the mark and
      wordmark read larger at the same header height. The logo itself is unchanged.
   2) Dark header (nav.nav--dark / .site-nav.nav--dark) for pages whose first screen is a navy hero: it starts as the hero's own
      colour (no seam) and becomes a blurred ink bar once the page is scrolled. Light pages (Privacy, Terms) keep the white header.
   3) Current-page / current-section state, set by site-nav.js (aria-current).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
nav .site-logo,.site-nav .site-logo{height:34px;width:auto;aspect-ratio:989/236.5}
@media(max-width:600px){nav .site-logo,.site-nav .site-logo{height:30px}}
@media(max-width:359px){nav .site-logo,.site-nav .site-logo{height:26px}}
nav .logo,.site-nav .logo{min-height:44px;padding-right:.5rem}

/* — dark header — */
nav.nav--dark,.site-nav.nav--dark{
  background:rgba(6,17,43,.92);
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
nav.nav--dark.scrolled,.site-nav.nav--dark.scrolled{
  background:rgba(6,17,43,.9);border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 10px 34px rgba(2,8,26,.45);
}
nav.nav--dark .nav-links a:not(.nav-cta),.site-nav.nav--dark .nav-links a:not(.nav-cta){color:rgba(255,255,255,.8)}
nav.nav--dark .nav-links .nav-review,.site-nav.nav--dark .nav-links .nav-review{color:#a9ccff!important}
nav.nav--dark .nav-links a[aria-current],.site-nav.nav--dark .nav-links a[aria-current]{color:#fff}
nav.nav--dark .nav-links a:not(.nav-cta)::after,.site-nav.nav--dark .nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:.15rem;right:.15rem;bottom:.5rem;height:2px;border-radius:2px;background:var(--blue-cta);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav.nav--dark .nav-links a:not(.nav-cta),.site-nav.nav--dark .nav-links a:not(.nav-cta){position:relative}
nav.nav--dark .nav-links a[aria-current]::after,.site-nav.nav--dark .nav-links a[aria-current]::after{transform:scaleX(1)}
nav.nav--dark .nav-links .nav-cta,.site-nav.nav--dark .nav-links .nav-cta{background:#fff!important;color:#0f2468!important;box-shadow:0 6px 20px rgba(2,8,26,.35)}
nav.nav--dark .nav-links a:focus-visible,.site-nav.nav--dark .nav-links a:focus-visible,
nav.nav--dark .logo:focus-visible,.site-nav.nav--dark .logo:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px rgba(47,128,255,.7)}
nav.nav--dark .hamburger span,.site-nav.nav--dark .hamburger span{background:#fff}
nav.nav--dark .hamburger.open span,.site-nav.nav--dark .hamburger.open span{background:#fff}
nav.nav--dark .hamburger:focus-visible,.site-nav.nav--dark .hamburger:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(47,128,255,.7)}
@media(hover:hover) and (pointer:fine){
  nav.nav--dark .nav-links a:not(.nav-cta):hover,.site-nav.nav--dark .nav-links a:not(.nav-cta):hover{color:#fff}
  nav.nav--dark .nav-links a:not(.nav-cta):hover::after,.site-nav.nav--dark .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
  nav.nav--dark .nav-links .nav-cta:hover,.site-nav.nav--dark .nav-links .nav-cta:hover{background:#eaf1ff!important}
  nav.nav--dark .hamburger:hover,.site-nav.nav--dark .hamburger:hover{background:rgba(255,255,255,.1)}
}

/* — dark dropdown menu (phones, and any width where site-nav.js switches to the compact layout) — */
@media(max-width:960px){
  nav.nav--dark .nav-links,.site-nav.nav--dark .nav-links{background:#071635;border-top:2px solid var(--blue-cta);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px rgba(2,8,26,.55)}
  nav.nav--dark .nav-links li,.site-nav.nav--dark .nav-links li{border-bottom-color:rgba(255,255,255,.09)}
  nav.nav--dark .nav-links li a:not(.nav-cta),.site-nav.nav--dark .nav-links li a:not(.nav-cta){color:#fff}
  nav.nav--dark .nav-links li a:not(.nav-cta):focus-visible,.site-nav.nav--dark .nav-links li a:not(.nav-cta):focus-visible{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--sky);outline:none}
  nav.nav--dark .nav-links li a:not(.nav-cta)::after,.site-nav.nav--dark .nav-links li a:not(.nav-cta)::after{display:none}
  nav.nav--dark .nav-links li a[aria-current],.site-nav.nav--dark .nav-links li a[aria-current]{box-shadow:inset 3px 0 0 var(--blue-cta);background:rgba(255,255,255,.05)}
  nav.nav--dark .nav-links .nav-review,.site-nav.nav--dark .nav-links .nav-review{color:#a9ccff!important}
  nav.nav--dark .nav-links .nav-mobile-only a,.site-nav.nav--dark .nav-links .nav-mobile-only a{padding-left:calc(5% + 1.1rem);font-weight:500;font-size:.94rem;color:rgba(255,255,255,.78)}
  nav.nav--dark ~ .nav-backdrop{background:rgba(2,8,26,.6)}
}
@media(max-width:960px) and (hover:hover) and (pointer:fine){
  nav.nav--dark .nav-links li a:not(.nav-cta):hover,.site-nav.nav--dark .nav-links li a:not(.nav-cta):hover{color:#fff;background:rgba(255,255,255,.07)}
}
html.nav-compact nav.nav--dark .nav-links,html.nav-compact .site-nav.nav--dark .nav-links{background:#071635;border-top:2px solid var(--blue-cta);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px rgba(2,8,26,.55)}
html.nav-compact nav.nav--dark .nav-links li,html.nav-compact .site-nav.nav--dark .nav-links li{border-bottom-color:rgba(255,255,255,.09)}
html.nav-compact nav.nav--dark .nav-links li a:not(.nav-cta),html.nav-compact .site-nav.nav--dark .nav-links li a:not(.nav-cta){color:#fff}
html.nav-compact nav.nav--dark .nav-links li a:not(.nav-cta):focus-visible,html.nav-compact .site-nav.nav--dark .nav-links li a:not(.nav-cta):focus-visible{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--sky);outline:none}
html.nav-compact nav.nav--dark .nav-links li a:not(.nav-cta)::after,html.nav-compact .site-nav.nav--dark .nav-links li a:not(.nav-cta)::after{display:none}
html.nav-compact nav.nav--dark .nav-links li a[aria-current],html.nav-compact .site-nav.nav--dark .nav-links li a[aria-current]{box-shadow:inset 3px 0 0 var(--blue-cta);background:rgba(255,255,255,.05)}
html.nav-compact nav.nav--dark .nav-links .nav-review,html.nav-compact .site-nav.nav--dark .nav-links .nav-review{color:#a9ccff!important}
html.nav-compact nav.nav--dark .nav-links .nav-mobile-only a,html.nav-compact .site-nav.nav--dark .nav-links .nav-mobile-only a{padding-left:calc(5% + 1.1rem);font-weight:500;font-size:.94rem;color:rgba(255,255,255,.78)}
html.nav-compact nav.nav--dark ~ .nav-backdrop{background:rgba(2,8,26,.6)}
@media(hover:hover) and (pointer:fine){
  html.nav-compact nav.nav--dark .nav-links li a:not(.nav-cta):hover,html.nav-compact .site-nav.nav--dark .nav-links li a:not(.nav-cta):hover{color:#fff;background:rgba(255,255,255,.07)}
}

/* — light header: current-page marker only (colour is already the brand blue) — */
nav:not(.nav--dark) .nav-links a[aria-current]{color:var(--blue)}
@media(prefers-reduced-motion:reduce){
  nav.nav--dark,.site-nav.nav--dark,nav.nav--dark .nav-links a::after,.site-nav.nav--dark .nav-links a::after{transition-duration:.01ms!important}
}
/* No JavaScript (noscript block in each page): links are inline in the bar, so keep them on one dark band */

/* Pass-06: seven first-level links (incl. Brochures & Catalogs) share one row. At 1440–1920 px the bar's content box is only 968 px
   (container padding is 5% of the viewport), so the desktop link gap is tightened a little; the fit check still falls back to the
   hamburger whenever the row cannot fit (narrow windows, enlarged text). */
@media(min-width:961px){
  html:not(.nav-compact) nav .nav-links,html:not(.nav-compact) .site-nav .nav-links{gap:1.1rem;margin-left:1rem}
}

/* While the script measures which layout fits, nothing in the bar may be mid-transition. */
nav.nav-measuring,nav.nav-measuring *,.site-nav.nav-measuring,.site-nav.nav-measuring *{transition:none!important}
/* Wide screens: the bar's side padding stops growing at 4.5rem (5% of a 1920 px window is 96 px and would squeeze the links). */
nav .container,.site-nav .container{padding-left:min(5%,4.5rem);padding-right:min(5%,4.5rem)}