.nav{position:relative;z-index:6}
/* Standalone site header for inner pages (sticky, glass) — applies on every page
   that renders template-parts/header/site-header.php. Moved here from work.css
   so the blog archive (is_home, no work.css) gets the same chrome.

   Glass is on a ::before pseudo with its own GPU layer (translateZ + isolation),
   so child :hover state changes (nav links, CTA, search) don't trigger backdrop
   repaints. Without this, Chromium leaves blur-trails as the cursor moves. */
.site-header{position:sticky;top:0;z-index:50;padding:0 15px;border-bottom:1px solid var(--line);isolation:isolate}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(7,7,16,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateZ(0);will-change:transform;
  pointer-events:none;
}
/* Same isolation trick for the front-page in-hero nav (background gets the blur
   via the .nav-inner wrap further down) — not needed there because that nav
   isn't sticky and doesn't slide over scrolling content. */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.nav-inner > .brand{justify-self:start}
.nav-inner > .nav-actions{justify-self:end}
/* Force burger to the right edge — on mobile .nav-links + .nav-actions
   become display:none, otherwise the burger would auto-place in the
   middle "auto" grid column. */
.nav-inner > .nav-burger{justify-self:end;grid-column:-1}
/* Align header content with .sec-footer / .sec-cta card edges at all viewport widths:
   site-header gets the 15px outer gutter (matches .sec-footer / .sec-cta padding),
   wrap.nav-inner gets the 40px inner gutter (matches .footer / .cta-card padding). */
.site-header > .wrap.nav-inner{padding:0 40px}
@media (max-width:1100px){.site-header > .wrap.nav-inner{padding:0 28px}}
@media (max-width:600px){.site-header{padding:0 8px}.site-header > .wrap.nav-inner{padding:0 22px}}
@media (max-width:380px){.site-header > .wrap.nav-inner{padding:0 18px}}
/* Selector specificity ≥ 0,2,0 to beat WooCommerce's `.woocommerce-page img{height:auto}`
   on cart/checkout/my-account pages. Without this, the logo stretches to container width. */
.site-header .brand-logo,.brand .brand-logo{height:38px;width:auto;max-width:none;display:block;filter:drop-shadow(0 0 14px rgba(251,121,50,.35))}
.nav-links{font-size:15px;color:var(--muted);align-self:stretch;display:flex;align-items:stretch}
.nav-links > ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;align-items:stretch}
.nav-links li{list-style:none;margin:0;padding:0}
.nav-links a:hover{color:var(--text)}

/* Active top-level item — gradient underline anchored to bottom of header bar (tab indicator) */
.nav-links > ul > li{position:relative;display:flex;align-items:center}
.nav-links > ul > li > a{display:flex;align-items:center;color:var(--muted);transition:color .18s ease}
.nav-links > ul > li.is-active > a{color:var(--text)}
.nav-links > ul > li.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--magenta),var(--amber));
  border-radius:2px 2px 0 0;
}
/* When the active item has a caret (▾), the <li> width includes 6px gap + 10px caret on the right.
   Pull the underline back so it sits under the text only. */
.nav-links > ul > li.nav-has-sub.is-active::after{right:16px}

/* Top-level items with sub-menu — hover dropdown */
.nav-links .nav-has-sub{position:relative}
.nav-links .nav-has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav-links .nav-caret{transition:transform .25s ease;opacity:.7;flex-shrink:0}
.nav-links .nav-has-sub:hover > a .nav-caret,
.nav-links .nav-has-sub:focus-within > a .nav-caret{transform:rotate(180deg);opacity:1}

.nav-submenu{
  position:absolute;top:100%;left:-18px;z-index:9;
  margin:0;padding:10px;
  min-width:280px;
  list-style:none;
  background:linear-gradient(180deg,#0f0f22 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 48px rgba(0,0,0,.55),0 0 0 1px rgba(168,59,207,.15),0 0 32px rgba(251,121,50,.08);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,visibility .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
/* Invisible bridge so cursor can travel from trigger to dropdown without losing :hover */
.nav-has-sub::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
}
.nav-links .nav-has-sub:hover > .nav-submenu,
.nav-links .nav-has-sub:focus-within > .nav-submenu{opacity:1;visibility:visible;transform:none}

.nav-submenu li{display:block}
.nav-submenu a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:9px;
  color:var(--text);font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  transition:background .18s ease,color .18s ease;
  white-space:nowrap;
}
.nav-submenu a:hover{background:rgba(244,242,239,.06);color:var(--text)}
.nav-submenu li.is-active > a{
  background:linear-gradient(135deg,rgba(168,59,207,.14),rgba(251,121,50,.14));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(251,121,50,.22);
}
.nav-submenu__count{
  font-size:12px;font-weight:600;color:var(--muted);
  padding:1px 8px;border-radius:999px;
  background:rgba(244,242,239,.06);
  min-width:22px;text-align:center;
}
.nav-submenu a:hover .nav-submenu__count{color:var(--amber);background:rgba(251,121,50,.12)}
.nav-submenu li.is-active > a .nav-submenu__count{color:var(--amber);background:rgba(251,121,50,.16)}
.nav-submenu__all > a{font-weight:600}
.nav-submenu__all{margin-bottom:8px;padding-bottom:8px;position:relative}
.nav-submenu__all::after{
  content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,242,239,.28),transparent);
}

/* Mobile sub-items in nav-panel: indented links, no extra heading */
.np-sub{display:flex;flex-direction:column;gap:2px;padding:0 0 4px 12px;margin-top:-4px;border-left:2px solid rgba(244,242,239,.08);margin-left:16px}
.np-sub a{padding:10px 14px;font-size:14.5px;color:var(--muted);font-weight:500}
.np-sub a:hover{color:var(--text)}
.np-sub a.is-active{color:var(--text);background:linear-gradient(135deg,rgba(168,59,207,.12),rgba(251,121,50,.12))}

/* Mobile top-level active */
.nav-panel > a.is-active{
  color:var(--text);
  background:linear-gradient(135deg,rgba(168,59,207,.14),rgba(251,121,50,.14));
  box-shadow:inset 0 0 0 1px rgba(251,121,50,.22);
}
/* Group: search icon + Зв'язатись sit visually paired */
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta{padding:12px 22px;background:var(--text);color:var(--bg);border-radius:999px;font-size:15px;font-weight:600;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.nav-cta:hover{opacity:.88}

/* Search: single icon button that expands leftward into a pill input
   (icon stays anchored, also serves as the submit when expanded). */
.nav-search-wrap{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:flex-end}

.nav-search-form{
  position:absolute;top:0;right:0;height:40px;
  display:flex;align-items:center;
  width:40px;
  background:transparent;
  border:0;
  border-radius:999px;
  transition:width .32s cubic-bezier(.2,.8,.2,1),
             background .22s ease,
             box-shadow .22s ease,
             backdrop-filter .22s ease;
  z-index:3;
}
.nav-search-form__input{
  flex:1;min-width:0;width:0;
  background:transparent;border:0;outline:0;
  color:var(--text);font-family:inherit;font-size:14.5px;
  height:100%;padding:0;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, padding .25s ease;
}
.nav-search-form__input::placeholder{color:rgba(244,242,239,.5)}
.nav-search-form__input::-webkit-search-cancel-button,
.nav-search-form__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.nav-search-form__input:focus,
.nav-search-form__input:focus-visible,
.nav-search-form__close:focus,
.nav-search-form__close:focus-visible,
.nav-search-form__trigger:focus,
.nav-search-form__trigger:focus-visible{outline:0}

.nav-search-form__close{
  width:0;height:32px;flex:0 0 0;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(244,242,239,.55);cursor:pointer;border-radius:999px;padding:0;
  opacity:0;pointer-events:none;overflow:hidden;
  transition:width .25s cubic-bezier(.2,.8,.2,1), flex-basis .25s cubic-bezier(.2,.8,.2,1), color .18s ease, background .18s ease, opacity .18s ease;
}
.nav-search-form__close:hover{color:var(--text);background:rgba(244,242,239,.08)}
.nav-search-form__close svg{width:16px;height:16px;flex-shrink:0}

.nav-search-form__trigger{
  width:40px;height:40px;flex:0 0 40px;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;border-radius:999px;padding:0;
  transition:color .18s ease, background .18s ease;
}
.nav-search-form__trigger:hover{color:var(--text);background:rgba(244,242,239,.06)}
.nav-search-form__trigger svg{width:20px;height:20px}

.nav-search-wrap.is-open .nav-search-form{
  width:300px;
  background:rgba(10,10,24,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 36px rgba(0,0,0,.55);
}
.nav-search-wrap.is-open .nav-search-form__input{
  opacity:1;pointer-events:auto;padding:0 4px 0 18px;
}
.nav-search-wrap.is-open .nav-search-form__close{
  width:32px;flex:0 0 32px;opacity:1;pointer-events:auto;
}
.nav-search-wrap.is-open .nav-search-form__trigger{color:var(--text)}
.nav-search-wrap.is-open .nav-search-form__trigger:hover{color:var(--amber);background:rgba(251,121,50,.10)}

/* AJAX results dropdown — sits beneath the pill */
.nav-search-results{
  position:absolute;top:calc(100% + 10px);right:0;
  width:420px;max-width:calc(100vw - 60px);
  background:rgba(10,10,24,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(244,242,239,.08);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px rgba(168,59,207,.10);
  padding:8px;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  z-index:4;
  max-height:min(70vh,560px);overflow:auto;
}
.nav-search-wrap.is-open .nav-search-results:not([hidden]){opacity:1;transform:none;pointer-events:auto}
.nav-search-results__status{
  padding:18px 16px;text-align:center;color:var(--muted);font-size:14px;
}
.nav-search-results__list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.nav-search-results__item{margin:0;padding:0}
.nav-search-results__link{
  display:flex;gap:12px;align-items:center;
  padding:10px 12px;border-radius:10px;
  color:var(--text);text-decoration:none;
  transition:background .18s ease;
}
.nav-search-results__link:hover,
.nav-search-results__link:focus-visible{background:rgba(244,242,239,.06)}
.nav-search-results__thumb{
  flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,rgba(168,59,207,.20),rgba(251,121,50,.18));
  display:flex;align-items:center;justify-content:center;
}
.nav-search-results__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nav-search-results__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nav-search-results__type{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);
}
.nav-search-results__title{
  font-size:14.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-search-results__excerpt{
  font-size:12.5px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.nav-search-results__viewall{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;padding:12px;
  border-top:1px solid rgba(244,242,239,.08);
  color:var(--text);font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;border-radius:10px;
  transition:background .18s ease,color .18s ease;
}
.nav-search-results__viewall:hover{background:rgba(244,242,239,.05);color:var(--amber)}
.nav-search-results__viewall svg{width:14px;height:14px}

/* Mobile search inside nav-panel */
.np-search{margin-bottom:6px}
.np-search .search-form{display:flex;gap:8px;margin:0;width:100%}
.np-search .search-form__input{
  flex:1;min-width:0;padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(244,242,239,.04);
  color:var(--text);font-family:inherit;font-size:15px;
  transition:border-color .18s ease,background .18s ease;
}
.np-search .search-form__input::placeholder{color:rgba(244,242,239,.36)}
.np-search .search-form__input:focus{outline:none;border-color:rgba(251,121,50,.55);background:rgba(244,242,239,.06)}
.np-search .search-form__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--magenta),var(--amber));
  color:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.005em;
  transition:transform .18s ease,box-shadow .18s ease;
}
.np-search .search-form__btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(168,59,207,.28)}
.np-search .search-form__btn svg{width:16px;height:16px}

/* Burger — 4 dots in 2×2 → 5-dot X on open (4 corners + center) */
.nav-burger{
  display:none;width:48px;height:48px;
  border:0;background:transparent;
  cursor:pointer;padding:0;position:relative;
  transition:transform .2s ease;
}
.nav-burger:active{transform:scale(.94)}
.nav-burger span{
  position:absolute;width:8px;height:8px;border-radius:50%;
  transition:top .35s cubic-bezier(.4,1.2,.5,1),left .35s cubic-bezier(.4,1.2,.5,1),background .25s ease,transform .35s cubic-bezier(.4,1.2,.5,1);
}
.nav-burger span:nth-child(1){top:14px;left:14px;background:var(--magenta)}
.nav-burger span:nth-child(2){top:14px;left:26px;background:var(--amber)}
.nav-burger span:nth-child(3){top:26px;left:14px;background:var(--amber)}
.nav-burger span:nth-child(4){top:26px;left:26px;background:var(--magenta)}
.nav-burger[aria-expanded="true"] span{background:var(--amber)}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:6px;left:20px}
.nav-burger[aria-expanded="true"] span:nth-child(2){top:20px;left:34px}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:20px;left:6px}
.nav-burger[aria-expanded="true"] span:nth-child(4){top:34px;left:20px}

.nav-panel{
  position:absolute;left:15px;right:15px;top:88px;z-index:8;
  background:linear-gradient(180deg,#0f0f22 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:18px;
  padding:18px;display:none;flex-direction:column;gap:6px;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(168,59,207,.15),0 0 40px rgba(251,121,50,.10);
  transform-origin:top right;
}
.nav-panel.open{display:flex;animation:np-in .22s cubic-bezier(.2,.8,.2,1)}
/* Pin the open panel to the viewport so it stays put even when the host header
   isn't sticky (front-page in-hero nav). Cap height so long submenus scroll
   inside the panel — overscroll-behavior keeps that scroll from bleeding into
   the body, which is locked by JS anyway as a belt-and-braces measure. */
.nav-panel.open{
  position:fixed;
  max-height:calc(100dvh - 96px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* iOS-safe scroll lock applied when the burger menu is open. Pure `overflow:hidden`
   on <body> doesn't stop the page behind from scrolling on iOS Safari — pinning
   <body> with position:fixed + negative top does. JS handles save/restore of
   scrollY so closing the menu returns the user to where they were. */
body.nav-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@keyframes np-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.nav-panel a{padding:14px 16px;border-radius:12px;color:var(--text);font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background .2s ease,color .2s ease;display:block}
.nav-panel a:hover{background:rgba(244,242,239,.06)}
.nav-panel .np-cta{margin-top:8px;background:linear-gradient(135deg,var(--magenta),var(--amber));color:#fff;text-align:center;box-shadow:0 10px 24px rgba(168,59,207,.28)}
.nav-panel .np-cta:hover{background:linear-gradient(135deg,var(--magenta),var(--amber));opacity:.92}

@media (max-width:960px){
  .nav-links,.nav-links ul{display:none}
  .nav-actions{display:none}
  .nav-burger{display:block}
}
@media (max-width:900px){
  .nav-inner{height:64px}
  .site-header .brand-logo,.brand .brand-logo{height:32px}
  .nav-cta{padding:10px 18px;font-size:14px}
  .nav-panel{top:64px;left:15px;right:15px}
}
@media (max-width:600px){
  .nav-inner{height:60px}
  .site-header .brand-logo,.brand .brand-logo{height:28px;filter:drop-shadow(0 0 8px rgba(251,121,50,.3))}
  .nav-cta{padding:9px 14px;font-size:13px}
  .nav-burger{width:44px;height:44px}
  .nav-burger span{width:7px;height:7px}
  .nav-burger span:nth-child(1){top:13px;left:13px}
  .nav-burger span:nth-child(2){top:13px;left:24px}
  .nav-burger span:nth-child(3){top:24px;left:13px}
  .nav-burger span:nth-child(4){top:24px;left:24px}
  .nav-burger[aria-expanded="true"] span:nth-child(1){top:5px;left:18px}
  .nav-burger[aria-expanded="true"] span:nth-child(2){top:18px;left:31px}
  .nav-burger[aria-expanded="true"] span:nth-child(3){top:18px;left:5px}
  .nav-burger[aria-expanded="true"] span:nth-child(4){top:31px;left:18px}
  .nav-panel{top:60px;left:8px;right:8px;border-radius:14px;padding:14px}
  .nav-panel a{padding:13px 14px;font-size:15.5px}
}
@media (max-width:380px){
  .nav-inner{height:54px}
  .site-header .brand-logo,.brand .brand-logo{height:24px}
  .nav-cta{padding:8px 12px;font-size:12.5px}
  .nav-panel{top:54px}
}
@media (max-width:320px){
  .site-header .brand-logo,.brand .brand-logo{height:22px}
  .nav-cta{padding:7px 10px;font-size:12px}
}