/* ============================================================================
   Navbar — "The Lit Vitrine" shell
   ----------------------------------------------------------------------------
   Markup: /components/navbar.html, injected by inject.js into #navbar on every
   page. It binds the same inject.js ids as the bar it replaced, so no JS changes.

   The new markup puts BOTH classes on one element (<header class="header nav">),
   while the production navbar nests .header > .nav. That means `.header.nav`
   (0,2,0) matches only the new bar and outranks production's `.header` (0,1,0),
   so this file can sit alongside styles.css without a rule-by-rule teardown.

   Loaded after styles.css so same-specificity rules (.nav-link, .nav-actions)
   resolve to this file.
   ========================================================================== */

/* ── Root-size independence ─────────────────────────────────────────────────
   home.css sets `html { font-size: 112.5% }` (18px) because the homepage's rems
   are drawn against that root; every other page runs at the browser default of
   16px. This file is now loaded by both, so rem-based type made the same bar
   render ~11% smaller off the homepage — it read like the page was zoomed to
   90%. The bar's box model was already px throughout, so its type is px too:
   the values below are the design's rem figures resolved at 18px. Change them
   as px, not rem, or the two-root split comes back. */

#navbar,
#navbar .header.nav {
  --ink:        #16140f;   /* warm near-black, body text on light */
  --teal:       #0d5c63;   /* Vitrine Teal — framing color for dark fields */
  --teal-deep:  #0a4a50;   /* teal hover fill */
  --teal-dark:  #073338;   /* deepest section ground */
  --coral:      #ff7a59;   /* Signal Coral — the single accent */
  --coral-deep: #f2613f;   /* coral hover/pressed */
  /* Signal Coral measures 2.99:1 as text on the teal field, a hair under the 3:1
     large-text bar, so coral TEXT on a dark field uses this one step lighter
     (3.45:1 on teal, 6.8:1 on ink). Coral FILLS still use --coral: contrast there
     is carried by the ink text sitting on top of it. */
  --coral-light:#ff8f70;
  --cream:      #f1ede3;   /* reading color on dark fields */
  --paper:      #f7f5f0;   /* light-field background + card surface */
  --paper-line: rgba(22,20,15,.10);
  --dim-on-dark:rgba(244,241,232,.78);
  --dim:        #6d6452;

  /* state colors — feedback only, never decorative (per DESIGN.md).
     These were declared as `--cancel: var(--cancel)`, which is a self-reference:
     the spec makes such a declaration invalid at computed-value time, so every
     `color: var(--cancel)` in this sheet fell back to `inherit` and every
     `background: var(--validate)` to transparent. Error text across the preview
     (upload failures, verify verdicts, the account danger zone) rendered in
     plain ink and read as ordinary copy. Literal values, per DESIGN.md. */
  --cancel:     #8a2a1f;   /* invalid / error / destructive */
  --validate:   #2f5d3d;   /* verified / success */

  /* Lit-vitrine type system: one sans, three jobs -- Montserrat ExtraBold/Bold for
     display, the same face at 500/600 for body, mono for artifact strings. */
  --display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --sans:  'Montserrat', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* measured heights of the two fixed bands above the fold, so the hero can size
     itself to "hero + trust strip = one viewport" without magic numbers */
  --nav: 77px;
  --strip: 134px;
  --trust-gutter: clamp(26px, 3vw, 44px);

  /* spacing scale from DESIGN.md — section furniture uses these, never ad-hoc px */
  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  28px;
  --s-xl:  44px;
  --s-2xl: 76px;
  --s-3xl: 96px;

  --sh-1: 0 1px 2px rgba(7,51,56,.06), 0 2px 6px rgba(7,51,56,.05);
  --sh-2: 0 2px 4px rgba(7,51,56,.05), 0 8px 22px rgba(7,51,56,.08);
  --ring: 0 0 0 3px rgba(13,92,99,.18);

  /* fractal noise, ~tiny tile, used as overlay on dark fields */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* premium elevation: paired shadow (cast) + ambient, ink-tinted */
  /* top highlight edge (light catching the upper rim) */

  --coral-face:    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(140,44,20,.16));
  --coral-face-hi: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%, rgba(140,44,20,.16));
  --coral-edge:    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,38,18,.24);
  --coral-lift:    0 1px 2px rgba(22,20,15,.2), 0 8px 18px -6px rgba(191,64,36,.55);
  --coral-lift-hi: 0 2px 4px rgba(22,20,15,.22), 0 14px 26px -8px rgba(191,64,36,.6);
  --coral-press:   inset 0 1px 3px rgba(120,38,18,.32), 0 1px 2px rgba(22,20,15,.2);
}

#navbar .header.nav {
  position: static; z-index: 60;
  background: var(--teal);
  /* extend the bar's background up into the status-bar / notch area so there's
     no empty strip above it (needs viewport-fit=cover on the viewport meta) */
  padding-top: env(safe-area-inset-top);
  /* No resting border: the faint translucent-white line showed as a seam
     between the teal nav and the ink trust bar on initial (un-scrolled) load.
     The border only appears once .scrolled (over page content) below. */
  border-bottom: 1px solid transparent;
  /* styles.css puts backdrop-filter: blur(8px) on .header for the old bar. Behind
     an opaque teal fill it renders nothing at all, while still forcing the
     expensive backdrop path on a fixed element — which is what smears page
     content through the bar while scrolling on iOS. .nav.scrolled re-enables it
     below, where the background really is translucent. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
#navbar .nav.scrolled {
  background: oklch(0.42 0.06 195 / 0.86);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(6,40,43,.28);
}
#navbar .nav-inner {
  display: flex; align-items: center; gap: 22px; height: 76px; color: var(--cream);
  width: 100%; max-width: none; margin-inline: 0;
  padding-inline: clamp(20px, 2.2vw, 44px);
}
#navbar .nav-logo { display: inline-flex; align-items: center; flex: none; }
#navbar .nav-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); transition: opacity .18s var(--ease); }
#navbar .nav-logo:hover img { opacity: .85; }
#navbar .nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
#navbar .nav-link {
  position: relative; font-size: 16.56px; font-weight: 500; color: rgba(244,241,232,.82);
  padding: 9px 14px; border-radius: 8px; transition: color .18s var(--ease), background .18s var(--ease);
}
#navbar .nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--coral); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
#navbar .nav-link:hover { color: var(--cream); }
#navbar .nav-link:hover::after { transform: scaleX(1); }
#navbar .nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
#navbar .nav-dd { position: relative; display: flex; }
#navbar .nav-icbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0; border-radius: 8px;
  color: rgba(244,241,232,.82); font-weight: 600; font-size: 16.2px;
  height: 38px; padding: 0 8px;
  transition: color .18s var(--ease);
}
#navbar .nav-icbtn:hover { color: var(--cream); }
#navbar .nav-dd.open .nav-icbtn { color: var(--cream); }
#navbar .nav-icbtn--user { padding: 0 6px; }
#navbar .nav-icbtn--user svg { width: 24px; height: 24px; }
#navbar .nav-caret { width: 13px; height: 13px; opacity: .75; transition: transform .2s var(--ease); }
#navbar .nav-dd.open .nav-caret { transform: rotate(180deg); }
#navbar .nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral); color: var(--ink); font-weight: 700; font-size: 15.84px;
  height: 40px; padding: 0 18px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(7,51,56,.28);
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
#navbar .nav-cta:hover { transform: translateY(-1px); background: var(--coral-deep); box-shadow: 0 6px 16px rgba(7,51,56,.36); }
#navbar .nav-cta::after { content: '→'; font-weight: 700; }
#navbar .nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 70;
  min-width: 190px; padding: 7px;
  background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(22,20,15,.4);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
#navbar .nav-menu--right { left: auto; right: 0; }
#navbar .nav-dd.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
#navbar .nav-menu a {
  font-size: 15.84px; font-weight: 500; color: rgba(244,241,232,.8);
  padding: 9px 12px; border-radius: 7px; transition: background .15s var(--ease), color .15s var(--ease);
}
#navbar .nav-menu a:hover { background: rgba(255,255,255,.08); color: var(--cream); }
#navbar .nav-menu a[aria-current="true"],
#navbar .nav-menu a.is-active { color: var(--coral); }
#navbar .nav-menu__sep { height: 1px; background: rgba(255,255,255,.12); margin: 5px 4px; }
#navbar .nav-burger {
  display: none; flex: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 0; border-radius: 9px;
  position: relative; margin-left: 2px;
}
#navbar .nav-burger span {
  position: absolute; left: 11px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--cream); transition: transform .26s var(--ease), opacity .2s var(--ease), top .26s var(--ease);
}
#navbar .nav-burger span:nth-child(1) { top: 14px; }
#navbar .nav-burger span:nth-child(2) { top: 20px; }
#navbar .nav-burger span:nth-child(3) { top: 26px; }
#navbar .nav-burger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
#navbar .nav-burger.is-open span:nth-child(2) { opacity: 0; }
#navbar .nav-burger.is-open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
#navbar .nav-burger span { transition: none; }
}
@media (max-width: 768px) {
#navbar .nav-links { display: none; }
#navbar .nav-burger { display: block; }
#navbar .nav-cta { display: none; }
#navbar .nav-inner { gap: 12px; }
#navbar .nav-logo { order: 0; margin-right: auto; }
#navbar .nav-actions { order: 1; margin-left: 0; }
#navbar .nav-burger { order: 2; margin-left: 0; }
#navbar #langDropdown { display: none; }
#navbar #userDropdown { position: static; }
/* The preview hid the account icon on mobile because its burger opened a
   slide-out sheet carrying everything (its CSS is gone — nothing ever built
   the markup). Production's inject.js instead turns the
   burger into a Back arrow on every page except the homepage, so hiding this
   left inner pages with no way into the menu at all. Keep it visible. */
#navbar #userDropdown #dropdownToggle { display: inline-flex !important; }
#navbar .nav.scrolled {
    background: var(--teal);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media (max-width: 600px) {
#navbar .nav-inner { height: 72px; }
#navbar .nav-logo img { height: 38px; }
}
#navbar .nav-cta {
  background-image: var(--coral-face);
  box-shadow: var(--coral-edge), var(--coral-lift);
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .22s var(--ease);
}
#navbar .nav-cta:hover {
  background-color: var(--coral-deep);
  background-image: var(--coral-face-hi);
  box-shadow: var(--coral-edge), var(--coral-lift-hi);
}
#navbar .nav-cta:active { transform: translateY(1px); box-shadow: var(--coral-press); }
#navbar .header.nav { width: 100%; }
/* Production's layout model is a fixed header with a matching body padding-top;
   the top promo banner pins itself under it and every page's spacing assumes it.
   Keep that model rather than the preview's sticky bar, so only the bar's looks
   change and no page has to be re-spaced. */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}
#navbar .account-icon { width: 22px; height: 22px; }
#navbar .account-label { font-weight: 600; font-size: 16.2px; }
#navbar #dropdownMenu a,
#navbar #dropdownMenu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 16.2px; color: rgba(244,241,232,.82);
  background: transparent; border: 0; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
#navbar #dropdownMenu a:hover,
#navbar #dropdownMenu button:hover { background: rgba(255,255,255,.08); color: var(--cream); }
#navbar #adminMenuSlot .nav-icbtn { color: rgba(244,241,232,.82); }
#navbar [data-nav-role="resources-reminder"],
#navbar [data-nav-role="resources-link"],
#navbar a[href="/contact"],
#navbar a[href$="/contact"] { display: none !important; }
#navbar a[href="/contact"] + span { display: none !important; }
#navbar .notification-dropdown,
#navbar #notificationDropdown { display: none !important; }
#navbar .nav-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#navbar #dropdownToggle { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
#navbar .nav-profile-pic {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(244,241,232,.55); flex: none; display: block;
}
#navbar .nav-profile-pic.initials-avatar,
#navbar .initials-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--cream); font-weight: 700; font-size: 15.48px;
  text-transform: uppercase; border: 1.5px solid rgba(244,241,232,.28);
}
#navbar .greet-caret { font-size: 14.4px; opacity: .75; color: rgba(244,241,232,.82); }
#navbar #dropdownMenu.show,
#navbar #dropdownToggle.is-open + #dropdownMenu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
#navbar #dropdownMenu .account-menu { min-width: 260px; padding: 6px; position: relative; }
#navbar #dropdownMenu .account-menu__mobile-only { display: none; }
@media (max-width: 768px) {
#navbar #dropdownMenu.account-dropdown,
#navbar #dropdownMenu.show {
    position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
    width: min(92vw, 420px); max-height: calc(100dvh - 92px); overflow: hidden;
    padding: 14px; border-radius: 22px;
    background: var(--ink); border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
  }
#navbar #dropdownMenu .account-menu__mobile-only { display: flex; }
#navbar #dropdownMenu .account-menu { gap: 8px; padding-top: 40px; }
#navbar #dropdownMenu .account-menu__close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; width: 34px; height: 34px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
    background: transparent; color: var(--cream); font-size: 20px; line-height: 1; padding: 0;
  }
#navbar #dropdownMenu .dropdown-profile-box {
    border: 1px solid rgba(77,141,246,.35); background: rgba(43,57,255,.14);
    border-radius: 16px; padding: 10px 12px; margin: 0;
  }
#navbar #dropdownMenu .account-menu__section { gap: 2px; }
#navbar #dropdownMenu .account-menu__nav a { padding: 8px 12px; }
#navbar #dropdownMenu .account-menu__nav a,
#navbar #dropdownMenu .account-menu__lang { color: rgba(244,241,232,.82); }
#navbar #dropdownMenu .account-menu__divider { margin: 4px 4px; }
#navbar #dropdownMenu .account-menu__cta { margin-top: 2px; }
#navbar #dropdownMenu .account-menu__cta .hero-btn,
#navbar #dropdownMenu .account-menu__cta .nav-upload-btn,
#navbar #dropdownMenu .account-menu__cta .nav-cta,
#navbar #dropdownMenu .account-menu__cta .btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 18px; border-radius: 12px;
    background-color: var(--coral); background-image: var(--coral-face);
    color: var(--ink); font-weight: 700; font-size: 17.64px;
    box-shadow: var(--coral-edge), var(--coral-lift);
  }
#navbar #dropdownMenu .account-menu__lang {
    flex-direction: row; align-items: center; gap: 10px;
  }
#navbar #dropdownMenu .account-menu__lang .account-menu__icon {
    flex: none; width: 20px; height: 20px; opacity: .85;
  }
#navbar #dropdownMenu .account-menu__lang .account-menu__icon svg {
    width: 20px; height: 20px; display: block;
  }
#navbar #dropdownMenu .mobile-lang-dropdown { position: relative; flex: 1 1 auto; }
#navbar #dropdownMenu .mobile-lang-toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; padding: 7px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
    color: var(--cream); font-weight: 600; font-size: 16.2px; line-height: 1.2; cursor: pointer;
  }
#navbar #dropdownMenu .mobile-lang-menu {
    display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 5;
    flex-direction: column; gap: 2px; padding: 6px; max-height: 220px; overflow-y: auto;
    border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: var(--ink);
    box-shadow: 0 -12px 30px rgba(0,0,0,.5);
  }
#navbar #dropdownMenu .mobile-lang-menu.open { display: flex; }
#navbar #dropdownMenu .mobile-lang-menu .mobile-lang-item {
    display: block; padding: 8px 12px; border-radius: 7px;
    font-size: 16.2px; color: rgba(244,241,232,.8);
  }
#navbar #dropdownMenu .mobile-lang-menu .mobile-lang-item:hover,
#navbar #dropdownMenu .mobile-lang-menu .mobile-lang-item.active { color: var(--coral); }
#navbar #dropdownMenu .account-menu__nav a[data-i18n="nav.resources"],
#navbar #dropdownMenu .account-menu__nav a[data-i18n="nav.resources"] + span { display: none; }
#navbar #dropdownMenu { right: auto; }
}
#navbar #dropdownMenu .account-menu__close { display: none; cursor: pointer; }
#navbar #dropdownMenu .account-menu__close:hover { color: var(--cream); }
#navbar #dropdownMenu .account-menu__nav a[data-i18n="nav.resources"],
#navbar #dropdownMenu .account-menu__nav a[data-i18n="nav.resources"] + span { display: none !important; }
#navbar #dropdownMenu .account-menu { padding-top: 6px; }
#navbar #dropdownMenu .dropdown-profile-box {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 14px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 6px;
}
#navbar .dropdown-profile-box .avatar-wrap { position: relative; flex: 0 0 auto; }
#navbar .dropdown-profile-box .avatar-wrap img,
#navbar .dropdown-profile-box .avatar-wrap .initials-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(244,241,232,.5); font-size: 18px;
}
#navbar .dropdown-profile-box .avatar-wrap img { display: block; }
#navbar .dropdown-profile-box .avatar-wrap .initials-avatar {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
#navbar .dropdown-profile-box .info { min-width: 0; flex: 1 1 auto; text-align: left; }
#navbar .dropdown-profile-box .name { font-weight: 700; color: var(--cream); font-size: 17.1px; }
#navbar .dropdown-profile-box .email {
  font-size: 14.76px; color: rgba(244,241,232,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
#navbar .sub-plan {
  position: absolute; bottom: -4px; right: -4px; font-size: 10.44px; font-weight: 700;
  padding: 1px 5px; border-radius: 100px; background: var(--coral); color: var(--ink);
}
#navbar .account-menu__section { display: flex; flex-direction: column; }
#navbar .account-menu__divider { height: 1px; background: rgba(255,255,255,.12); margin: 6px 4px; }
#navbar .account-menu__link {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 16.2px; color: rgba(244,241,232,.82); border-radius: 8px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
#navbar .account-menu__link:hover { background: rgba(255,255,255,.08); color: var(--cream); }
#navbar .account-menu__link--danger { color: #ff8f7a; }
#navbar .account-menu__link--danger:hover { background: rgba(255,143,122,.12); color: #ffb3a3; }
#navbar .account-menu__icon { display: inline-flex; width: 18px; height: 18px; opacity: .85; }
#navbar .account-menu__icon svg { width: 18px; height: 18px; }


/* ── Layout model ───────────────────────────────────────────────────────────
   One source of truth for the chrome height. The bar is taller than the old
   64px header, so the body padding and the promo banner's offset both have to
   move with it — and the homepage hero sizes itself against the same numbers
   (home.css reads --navbar-h / --promo-h) so the dark field ends exactly at the
   fold. These are unscoped on purpose: this file is only loaded by pages that
   use the new bar, so they cannot reach any page still on the old one. */
:root {
  --navbar-h: 77px;
  --promo-h:  62px;
}

/* styles.css sets this as `html.has-top-promo-banner body` (0,1,2) with the
   class on <html>, not <body>. Match that selector exactly so load order
   decides, rather than losing on specificity. */
html body { padding-top: var(--navbar-h); }
html.has-top-promo-banner body,
body.has-top-promo-banner { padding-top: calc(var(--navbar-h) + var(--promo-h)); }
.top-promo-banner { top: var(--navbar-h); }

/* Every value here is the .nav-inner height plus the bar's 1px bottom border.
   When these drift apart the page either shows a strip of its own background
   under the bar (offset too big) or slides its first element beneath it (too
   small) — both were visible on phones. */
@media (max-width: 940px) {
  :root { --navbar-h: 77px; }
}
@media (max-width: 600px) {
  :root { --navbar-h: 73px; }
}

/* styles.css pins the mobile body offset to a literal 60px, measured off the
   old bar, with `html.has-top-promo-banner body`. Same specificity as this, so
   load order decides and navbar.css is second. home.css has its own homepage
   rule that already reads --navbar-h, so it is left alone. */
@media (max-width: 768px) {
  html.has-top-promo-banner body,
  html body { padding-top: var(--navbar-h); }
}

/* Pulling the page down past the top (rubber-band / overscroll) exposes
   whatever is behind the document, which was white. The bar is fixed, so a
   tall block hung off its top edge travels with it and keeps that strip in the
   bar's own colour. Scoped to the top only, so the footer end is untouched. */
#navbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 100vh;
  background: var(--teal);
  pointer-events: none;
}

/* Give the fixed bar its own compositor layer. Without it iOS re-rasterises the
   bar against the scrolling content during momentum scrolling and page pixels
   bleed through the top of it — the bar is opaque, so this is a paint artefact
   rather than anything a hit test can see, which is why it reproduces on a
   phone and not in a headless viewport. Nothing inside #navbar is
   position:fixed, so becoming a containing block changes no layout. */
#navbar {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* ── Resets against the old nav's rules ─────────────────────────────────────
   styles.css styles the OLD navbar, whose markup nests .header > .nav > …, and
   it repairs its own absolute-positioned link group with `.header .nav
   .nav-links`. The new bar puts BOTH classes on one element, so that repair
   selector never matches while the bare `.nav-links { position: absolute }`
   still does — the link group dropped out of the flex row and #navActions
   overlapped it ("Новини" sat under the language toggle). Undo the old rules
   for the new bar explicitly. */
#navbar .header.nav .nav-links {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  background: none;
  flex-direction: row;
  min-width: 0;
}

#navbar .header.nav .nav-actions { margin-left: 0; }

/* The CTA carries .hero-btn for inject.js's sake; styles.css gives that class a
   24px top margin and its own gradient, which the coral pill does not want. */
#navbar .header.nav .nav-cta {
  margin-top: 0;
  background: var(--coral);
  color: var(--ink);
}


/* styles.css pads the OLD bar (`.nav { padding: 0 0 0 18px }` and
   `.header .nav { padding: 10px 16px ... }`). The new bar carries both classes,
   so the bare .nav rule lands on it and made the bar 89px instead of the 77px
   the design uses — and those 12px are exactly what forced the homepage hero to
   shrink to keep the dark field at the fold. The .nav-inner does the padding. */
#navbar .header.nav { padding: 0; }

/* ── Mobile: give the bar a way in ──────────────────────────────────────────
   The block at (max-width: 768px) above hides the links, the CTA and the
   language switcher because this design puts them behind the burger. But
   styles.css carries `.nav .nav-toggle { display: none !important }` for the
   OLD bar, where the account icon opened the mobile menu instead — so the
   burger never rendered and the bar was reduced to a logo.

   Forcing the burger back is the wrong fix: inject.js turns it into a Back
   arrow on every page but the homepage, and next to the account button it just
   reads as a second hamburger. Production's own entry point is the account
   toggle, so that is what gets restored (above) — leaving styles.css to keep
   owning .nav-toggle: hidden on the homepage, Back arrow elsewhere.

   inject.js already fills #dropdownMenu with the whole mobile menu (login,
   signup, the nav links, the language list, the CTA). As a right-anchored
   desktop dropdown it hung ~165px off the right edge at 390px wide; anchoring
   it to #navbar (which is position:fixed) makes it a full-width sheet that
   sits under the bar at any bar height. */
@media (max-width: 768px) {
  /* No Back arrow. styles.css turns .nav-toggle into one on every page but the
     homepage (body.has-mobile-back) and shows it again whenever the menu is
     open (body.mobile-menu-open) — which is where the ✕-beside-← pairing came
     from. Both of those rules carry !important, so this needs the id to win.
     The account button's dropdown is the whole mobile menu. */
  #navbar .nav-toggle { display: none !important; }

  /* styles.css draws the mobile menu button as a light card (surface fill,
     border, shadow) with its hamburger/✕ glyph painted in
     --color-surface-darker — all of it near-invisible on the teal bar. Every
     one of those values comes from a custom property read ON this element, so
     rebinding the three here restyles the button without touching the rules
     themselves, and without leaking into the menu panel below it. */
  #navbar #dropdownToggle {
    --color-surface: transparent;
    --color-surface-darker: var(--cream);
    --color-border-light: transparent;
    box-shadow: none;
  }

  #navbar #dropdownMenu.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    border-radius: 0;
    transform: none;
  }
}