/* CenterWay funnel-network navigation (component recipe `nav` in the canon
   token chain: primitive -> semantic alias -> per-landing override -> recipe).
   Scoped to `.cwn` — safe to load next to any landing dialect (funnel --cw-*,
   way21/reset-day local vars). Burger below 760px, topbar at 760px+. */

.cwn {
  /* Component tokens (--cw-nav-*): text/ink dialect, overridden per landing.
     The glass material itself (tint/blur/stroke/shadow) comes from the shared
     --cw-net-mat-* recipe in network-tokens.css — the same one the platform
     shell's own topbar uses — so this reads as one material, not a
     landing-specific invention. */
  --cw-nav-ink: #22352e;
  /* Full strength, not a muted grey — see the tint note on .cwn::before. The
     active item is still distinguished by --cw-nav-accent plus its border, so
     the hierarchy survives without leaning on a lighter inactive colour. */
  --cw-nav-text: #22352e;
  --cw-nav-accent: #264e44;
  /* The active/hover label colour, held apart from --cw-nav-accent on purpose.
     Accent still marks the brand and the focus ring, where it sits on its own
     backing; a nav marker has to clear 3:1 against the bar's own glass, and on
     the thinned chrome material the gold night-tone accent does not (it
     measured 1.05–2.34 on the platform bar, which is why the platform's active
     marker carries weight instead of colour). On the light tone the two are the
     same value — there is nothing to fix there. */
  --cw-nav-active-ink: #1f2e24;
  --cw-nav-active-bg: #f0ece2;
  --cw-nav-border: var(--cw-net-mat-stroke, rgb(34 53 46 / 0.12));
  --cw-nav-panel: #fff8ef;
  --cw-nav-shadow: var(--cw-net-mat-shadow-raised, 0 18px 48px rgb(23 38 31 / 0.14));
  --cw-nav-radius: 1.6rem;

  position: fixed;
  top: 0.95rem;
  right: 0;
  left: 0;
  z-index: 60;
  width: min(100% - 2 * var(--cw-bar-inset), calc(var(--maxw, 1160px) + 2 * var(--cw-bar-pad)));
  margin-inline: auto;
  border-radius: var(--cw-nav-radius);
  /* No CSS border here. An absolutely positioned pseudo insets against the
     PADDING box, so a 1px border on .cwn left a ring the glass layer never
     covered: over a light page it was invisible, over a dark hero it read as a
     hairline slit around the bar. The stroke moved onto .cwn::before as an
     inset shadow, i.e. onto the same painted layer as the tint and the blur. */
  border: 0;
  /* The drop shadow lives on ::before with the tint and the stroke, not here:
     while the mobile drawer is open ::before is the whole sheet, and a shadow
     on .cwn would draw a hard edge straight across the middle of it. */
  box-shadow: none;
  font-size: 0.95rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  visibility: hidden;
  transition: transform 220ms ease-out, opacity 180ms ease-out, visibility 0s linear 220ms;
}

/* Blur lives on its own layer, not on .cwn: backdrop-filter makes an element a
   containing block for fixed-position descendants, and putting it directly on
   the header would trap the mobile dropdown to the pill's own height instead
   of letting it sit below at its intended position. The grain texture rides
   in the same layer so the glass stays matte, not plastic. */
.cwn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* One material for the bar and the drawer it opens into — they used to run
     two tints (chrome 55% on the bar, 84% on the panel) and read as two glasses
     stacked the moment the menu opened. Both sit on the chrome tint: see-through
     enough that the page reads underneath, dense enough (with the blur) that ink
     labels stay legible. That transparency is only affordable because the bar's
     backdrop here is bounded — it steps aside over a photo hero, and anything
     else that is not the light canvas declares itself with data-cw-nav-dark and
     flips the whole bar to the night tone. */
  background-color: var(--cw-net-mat-tint-chrome, rgb(250 247 240 / 0.55));
  background-image: var(--cw-net-mat-grain);
  backdrop-filter: var(--cw-net-mat-filter, blur(20px) saturate(1.08));
  -webkit-backdrop-filter: var(--cw-net-mat-filter, blur(20px) saturate(1.08));
  box-shadow:
    inset 0 0 0 1px var(--cw-nav-border),
    var(--cw-net-mat-shadow-chrome, 0 1px 2px rgb(23 38 31 / 0.06), 0 14px 34px rgb(23 38 31 / 0.10));
  /* Grows downward to cover the open drawer — see the single-sheet rule in the
     mobile block. 0px while closed, so this is inert at every other moment. */
  bottom: calc(-1 * var(--cwn-sheet-h, 0px));
  transition: bottom 40ms linear;
}

/* Without a working backdrop-filter the tint is all there is, and at chrome
   density the page's own text reads straight through the bar and the drawer.
   Blur is missing in more places than old browsers — Firefox with the feature
   off, "reduce transparency" accessibility settings, some in-app webviews — so
   the fallback is not a nicety: it is what those users actually get. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .cwn::before {
    background-color: color-mix(in srgb, var(--cw-net-mat-surface, #fbf9f2) 94%, transparent);
  }
  .cwn[data-cw-nav-tone="dark"]::before {
    background-color: color-mix(in srgb, var(--cw-net-hero-scrim, #173027) 94%, transparent);
  }
  /* The drawer needs no fallback of its own: it stopped painting glass, and the
     bar's ::before — opaque here — is the sheet behind both. */
}

/* Temporary network pause: keep the common component in every landing, while
   removing it completely from the active interface and tab order. */
.cwn.cwn--suspended {
  display: none;
}

/* Anchored mode (way21 / reset-day): the bar carries in-page section links, so
   it has to be reachable from the first screen rather than appearing only on a
   scroll-up reversal — the same always-present header short/irem use. Landings
   that stay purely cross-network keep the floating behaviour below.
   `.cwn--anchored` also opts out of the scroll logic in network-nav.js. */
.cwn.cwn--anchored {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
  transition: none;
}

/* The bar is fixed, so anchor jumps would land the section heading underneath
   it; and the hero needs the same clearance since the bar no longer waits for a
   scroll-up to appear. 4.85rem is the bar's own footprint (0.95rem offset +
   3.9rem inner) — the rest is breathing room. */
.cwn--anchored ~ [id] {
  scroll-margin-top: 5.5rem;
}

.cwn--anchored ~ .hero {
  padding-top: 5.5rem;
}

@media (min-width: 881px) {
  .cwn--anchored ~ .hero {
    padding-top: max(5.5rem, var(--sp-sec));
  }
}

/* The sibling-landing exit used to carry a permanent outline to mark it as a
   different kind of destination. In the drawer it read as a stray boxed item
   rather than a distinction, so the outline is gone: the link's own wording
   ("Шлях 21", "Розвантажувальний день") already says it leaves the page. */

/* The first screen is entirely dedicated to the offer. Beyond its hero,
   navigation returns as a floating glass layer only while the visitor scrolls up. */
.cwn.cwn--floating {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition: transform 220ms ease-out, opacity 180ms ease-out, visibility 0s;
}

/* Per-landing semantic mapping — the funnel cw-pages expose --cw-*. */
[data-cw-landing="dosha"] .cwn,
[data-cw-landing="consult"] .cwn,
[data-cw-landing="herbs"] .cwn {
  --cw-nav-ink: var(--cw-ink);
  --cw-nav-text: var(--cw-ink);
  --cw-nav-accent: var(--cw-accent-strong);
  --cw-nav-active-bg: var(--cw-accent-soft);
  --cw-nav-border: color-mix(in srgb, var(--cw-accent) 16%, transparent);
  --cw-nav-panel: var(--cw-surface-strong, #ffffff);
  --cw-nav-shadow: var(--cw-shadow-card, 0 18px 48px rgb(23 38 31 / 0.14));
}

/* way21 / reset-day premium pattern exposes its own local vars. */
[data-cw-landing="way21"] .cwn,
[data-cw-landing="reset-day"] .cwn {
  --cw-nav-ink: var(--ink);
  --cw-nav-text: var(--ink);
  --cw-nav-accent: var(--indigo);
  --cw-nav-active-bg: var(--chip-soft);
  --cw-nav-border: var(--line);
  --cw-nav-panel: var(--surface, #ffffff);
  --cw-nav-shadow: var(--shadow-med, 0 18px 48px rgb(23 48 39 / 0.14));
}

/* The anchored bar never moves, so it carries `transition: none`. On a photo
   hero it does move — hidden over the hero, back afterwards — so the motion is
   handed back to it there. */
[data-cw-hero="photo"] .cwn.cwn--anchored {
  transition: transform 220ms ease-out, opacity 180ms ease-out, visibility 0s;
}

/* Over a photo hero the bar steps aside (see network-nav.js). It overrides the
   anchored mode's always-visible state, so it has to come after it in source
   order — which it does. */
.cwn.cwn--hero-hidden,
.cwn.cwn--anchored.cwn--hero-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  visibility: hidden;
  transition: transform 220ms ease-out, opacity 180ms ease-out, visibility 0s linear 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .cwn.cwn--hero-hidden,
  .cwn.cwn--anchored.cwn--hero-hidden { transition: none; }
}

/* Dark tone — the landing counterpart of the platform's [data-cw-header-tone].
   The platform samples the backdrop; a landing declares it instead: sections
   that are dark carry data-cw-nav-dark, and network-nav.js flips the tone while
   one of them is under the bar. The tint moves to the night side of the material
   and the labels invert. It can stay this transparent (42%) precisely because
   the backdrop is declared, not guessed: the worst ground a marked section can
   present is the lightest stop of a skin's dark gradient (#356152 on reset-day),
   and that is the pair asserted in scripts/guard-contrast.mjs. */
.cwn[data-cw-nav-tone="dark"] {
  --cw-nav-ink: var(--cw-net-hero-ink, #ffffff);
  --cw-nav-text: var(--cw-net-hero-ink-soft, #d7e0d2);
  --cw-nav-accent: var(--cw-net-hero-accent, #e5ae65);
  /* Full-strength ink, not the gold accent: see --cw-nav-active-ink above. */
  --cw-nav-active-ink: var(--cw-net-hero-ink, #ffffff);
  --cw-nav-active-bg: color-mix(in srgb, var(--cw-net-hero-ink, #fff) 12%, transparent);
  --cw-nav-border: color-mix(in srgb, var(--cw-net-hero-ink, #fff) 18%, transparent);
  --cw-nav-panel: color-mix(in srgb, var(--cw-net-hero-scrim, #173027) 52%, transparent);
}

.cwn[data-cw-nav-tone="dark"]::before {
  /* Same 30% the light tone runs, so the two tones are one material seen against
     two grounds rather than two densities. It survives the thinning because the
     dark backdrop is declared, not guessed — the worst ground a marked section
     can present is the lightest stop of a skin's dark gradient (#356152 on
     reset-day), which is the pair asserted in scripts/guard-contrast.mjs. */
  background-color: color-mix(in srgb, var(--cw-net-hero-scrim, #173027) 30%, transparent);
}

.cwn[data-cw-nav-tone="dark"] .cwn__brand img {
  /* The ink mark is drawn for light chrome; on the night tone it flips to the
     gold one the dark blocks already use. Both files are baked from the same
     viewBox (scripts/brand-mark-bake.mjs), so the swap is now a pure colour
     change — the box compensation the two old PNG crops needed is gone. */
  content: url("/shared/img/cw-mark-gold.svg");
}

/* The word does not follow the mark any more. The mark swaps to the gold file
   because the ink one is unreadable on a dark ground — a legibility swap, not a
   colour statement — but the word is live text, and on the thinned night sheet
   gold measures 4.46 against the worst declared dark ground: under the 4.5 it
   cleared at the old 42% tint. So it takes the hero ink, at 8.75. This is the
   same call the platform header made when its own glass was thinned: gold stays
   where it sits on its own dark backing (CTAs, the mark), not on glass. */
.cwn[data-cw-nav-tone="dark"] .cwn__brand {
  color: var(--cw-nav-ink);
}

/* Slim mode for paid-traffic sessions: brand only, no cross-node exits. */
.cwn--slim .cwn__menu,
.cwn--slim .cwn__toggle {
  display: none !important;
}

.cwn__in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.9rem;
  padding: 0.5rem var(--cw-bar-pad);
}

.cwn__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cw-nav-ink);
  text-decoration: none;
}

.cwn__brand img {
  display: block;
  width: var(--cw-net-brand-mark, 2.25rem);
  height: var(--cw-net-brand-mark, 2.25rem);
}

.cwn__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.cwn__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cw-nav-text);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.cwn__menu a:hover {
  color: var(--cw-nav-active-ink);
  border-color: var(--cw-nav-border);
}

.cwn__menu a:focus-visible,
.cwn__toggle:focus-visible {
  outline: 2px solid var(--cw-nav-accent);
  outline-offset: 2px;
}

.cwn__menu a[aria-current="page"] {
  color: var(--cw-nav-active-ink);
  background: var(--cw-nav-active-bg);
  border-color: color-mix(in srgb, var(--cw-nav-active-ink) 30%, transparent);
  font-weight: 700;
}

/* Burger toggle — hidden on topbar widths. */
.cwn__toggle {
  display: none;
  place-items: center;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  /* No outline: inside a glass bar the boxed icon read as a second control on
     top of a control. The 44px hit area stays, and focus-visible still draws a
     ring — the affordance that actually matters for keyboard users. */
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  cursor: pointer;
}

/* The burger is the sprite glyph, not three spans: it has to carry the same
   baked hand as every other icon in the bar, and at 32 its 1.5 stroke lands on
   the brand mark's weight instead of a heavier one of its own. Three rules and
   a core — the mark's grammar in the one control every page shows. */
.cwn__toggle-ico {
  grid-area: 1 / 1;
  color: var(--cw-nav-ink);
  transition: transform 200ms ease, opacity 160ms ease;
}

.cwn__toggle-ico--close,
.cwn__toggle[aria-expanded="true"] .cwn__toggle-ico {
  opacity: 0;
  transform: scale(0.88);
}

.cwn__toggle[aria-expanded="true"] .cwn__toggle-ico--close {
  opacity: 1;
  transform: none;
}

/* Symbol-only brand below the desktop topbar — the same call the platform
   header makes. The mark is a finished thing on its own; the word next to it is
   ~40% of a phone-width bar spent on something nobody taps for information, and
   the page it belongs to already names itself in the hero. The full lockup stays
   on the desktop bar and in the footer. */
@media (max-width: 979px) {
  .cwn__brand span { display: none; }
}

@media (max-width: 979px) and (min-width: 760px) {
  /* Tablet topbar: tighter link rhythm so all five hold one row. */
  .cwn__menu { gap: 0.25rem; }
  .cwn__menu a { padding: 0.45rem 0.65rem; font-size: 0.88rem; }
}

@media (max-width: 759px) {
  .cwn__toggle { display: grid; }

  /* The panel is the bar continued downward, not a second card floating under
     it: it starts at the bar's own bottom edge, drops its top corners and its
     top stroke, and the bar squares its bottom corners while open. The old
     `top: calc(100% + .5rem)` left a strip of hero visible between the two,
     which is what made it read as two objects. */
  .cwn__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0 0.5rem;
    /* The drawer paints nothing. Two adjacent backdrop-filter layers can never
       meet cleanly at their shared edge — each blurs its own slice of the page,
       so the join shows up as a step in Chrome and a hairline in Safari, and the
       two rounded corners underneath collect a dark wedge. Instead the bar's own
       ::before grows down over the drawer's measured height (--cwn-sheet-h, set
       by network-nav.js) and the whole thing is one rectangle, one blur, one
       radius. The platform header solves the same problem the same way. */
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    /* Closed state. max-height rather than display:none so the open is an
       animation; visibility keeps the links out of the tab order until then. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      max-height 280ms cubic-bezier(.2, .8, .2, 1),
      padding 280ms cubic-bezier(.2, .8, .2, 1),
      opacity 160ms ease,
      visibility 0s linear 280ms;
  }

  .cwn.is-open .cwn__menu {
    max-height: min(72svh, 34rem);
    overflow-y: auto;
    padding: 0.5rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      max-height 280ms cubic-bezier(.2, .8, .2, 1),
      padding 280ms cubic-bezier(.2, .8, .2, 1),
      opacity 160ms ease 40ms,
      visibility 0s;
  }

  /* Bar and panel are one silhouette while open — literally one box now. The
     sheet keeps its rounded bottom corners, they just sit at the drawer's foot
     instead of the bar's; .cwn itself squares off so nothing of its own box
     (focus rings, future borders) cuts across the middle of the sheet. */
  .cwn.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .cwn__menu,
    .cwn.is-open .cwn__menu { transition: none; }
  }

  .cwn__menu a {
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 1rem;
  }
}