/* ================================================================
   Menu styles (Branding → Navigation Style) — rebuilt 2026-10-07.
   Audit: scratchpad/audits/nav.md · plan §3.6.

   Loaded AFTER the template skin (like scroll_effects.css) so equal-
   specificity rules here win. The rule that fixes most of the audit:

   A STYLE OWNS ITS SURFACE AND THE COLOURS ON IT.
   - Every bar/panel sets --ns-surface (its background as a plain colour)
     and gets --ns-on = black or white, whichever reads on it (relative
     colour syntax; browsers without it get a fixed/owner fallback).
   - The owner's menu colours (--nav-text-set, --nav-hover-set,
     --nav-active-set, --burger-set, --logo-set, emitted by base.html only
     when they read against the surface the current style paints) win
     over the derived colour. The plain names (--nav-text, --nav-hover-
     color, --nav-active-color, --burger-color, --logo-color) are
     REDEFINED on the bar, so every skin rule that reads them follows.
   - The Bar's Dark / Light tints paint their own bar and use the owner's
     bar colour only when the owner chose one (--nav-bg-custom); the
     template's default bar colour is not "the owner's choice".
   - Six styles: Bar (nav-solid + sub-option classes nav-dark / nav-light /
     nav-glass / nav-floating / nav-centered / nav-minimal), Transparent,
     Capsule, Split centre, Full-screen menu (overlay), Dock.
   - Panels that sit over page content (phone menu, full-screen overlay,
     dock side panel) derive their own text colour from
     their own background.
   - Transparent / Dock float over a photo only on pages whose
     FIRST section is a hero (same rule as scroll_effects.css), with a
     soft dark scrim under white text; everywhere else they are a normal
     bar in the template colour.
   ================================================================ */

/* ── 0. Tokens ──────────────────────────────────────────────────── */
:where(.pub-header, .pub-overlay-menu, .pub-dock-panel) {
    --ns-surface: var(--nav-bg-solid, var(--bg, #ffffff));
    /* fallback without relative colour syntax: the owner's / template's text */
    --ns-on: var(--nav-text-set, var(--text, #1a1a1a));
    --ns-on-primary: #ffffff;
    --ns-panel-solid: var(--mobile-nav-bg-solid, var(--ns-surface));
    --ns-panel-on: var(--ns-on);
}
:where(.pub-header.nav-dark) { --ns-on: #f1f5f9; }
:where(.pub-header.nav-light) { --ns-on: #1a1a1a; }
:where(.pub-overlay-menu, .pub-dock-panel) { --ns-on: #ffffff; }
@supports (color: oklch(from red l c h)) {
    .pub-header, .pub-overlay-menu, .pub-dock-panel {
        --ns-on: oklch(from var(--ns-surface) clamp(0, (0.68 - l) * 1000, 1) 0 0);
        --ns-on-primary: oklch(from var(--primary, #2563eb) clamp(0, (0.68 - l) * 1000, 1) 0 0);
        --ns-panel-on: oklch(from var(--ns-panel-solid) clamp(0, (0.68 - l) * 1000, 1) 0 0);
    }
}
.pub-header, .pub-overlay-menu, .pub-dock-panel {
    /* the colours everything in the bar reads */
    --nav-text: var(--nav-text-set, var(--ns-on));
    --ns-text: var(--nav-text);
    --nav-hover-color: var(--nav-hover-set, var(--ns-text));
    --nav-active-color: var(--nav-active-set, var(--ns-text));
    --burger-color: var(--burger-set, var(--ns-text));
    --logo-color: var(--logo-set, var(--ns-text));
    --ns-line: color-mix(in srgb, var(--ns-on) 16%, transparent);
    --ns-line-strong: color-mix(in srgb, var(--ns-on) 34%, transparent);
    --ns-tint: color-mix(in srgb, var(--ns-on) 8%, transparent);
    --ns-tint-strong: color-mix(in srgb, var(--ns-on) 15%, transparent);
    --ns-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%);
}

/* ── 1. Shared: the template bar styles (solid, centered, minimal,
      floating, split, capsule) only get COLOURS from the tokens.
      Low specificity on purpose: a skin's own hover/active rule wins. ── */
.pub-header :where(.pub-container) { color: var(--ns-text); }
.pub-header :where(.pub-container) .pub-logo,
.pub-header :where(.pub-container) .pub-logo-text { color: var(--logo-color); }
.pub-header :where(.pub-nav) a:where(:not(.pub-nav-admin-btn)),
.pub-header :where(.pub-nav) .pub-nav-dropdown-trigger { color: var(--ns-text); white-space: nowrap; }
/* Resting links: the base 0.7 fade took dark-on-light links under 4.5:1 (e.g. Alpine 3.9:1) */
.pub-header :where(.pub-nav) a:where(:not(.pub-nav-admin-btn)) { opacity: 0.85; }
.pub-header :where(.pub-nav) a:where(:not(.pub-nav-admin-btn)):hover { color: var(--nav-hover-color); }
.pub-header :where(.pub-nav) a:where(:not(.pub-nav-admin-btn)).active { color: var(--nav-active-color); opacity: 1; }
.pub-header :where(.pub-nav) .pub-nav-contact-link { color: var(--ns-text); }
.pub-header :where(.pub-nav) .pub-nav-contact { border-left-color: var(--ns-line); }
.pub-header .pub-nav-toggle { color: var(--burger-color); }
/* Login / Dashboard button: the owner's colours, else a tint of the bar's text */
.pub-header :where(.pub-nav) .pub-nav-admin-btn {
    background: var(--login-btn-bg, var(--ns-tint));
    color: var(--login-btn-color, var(--ns-text));
    border-color: var(--login-btn-border, var(--ns-line-strong));
    opacity: 1;
}
/* Desktop dropdown panels take the bar's colour (they were white with the bar's text) */
.pub-header .pub-nav-dropdown-menu { background: var(--nav-bg-opaque, var(--ns-surface)); border-color: var(--ns-line); }
.pub-header .pub-nav-dropdown-menu a:hover { background: var(--ns-tint); }
/* Hover effects that painted a grey tint were invisible on dark bars */
.pub-header.navlink-highlight :where(.pub-nav) a:not(.pub-nav-admin-btn):hover,
.pub-header.navlink-highlight :where(.pub-nav) .pub-nav-dropdown-trigger:hover { background: var(--ns-tint); }
.pub-header.navlink-highlight :where(.pub-nav) a:not(.pub-nav-admin-btn).active { background: var(--ns-tint-strong); }
/* Keyboard focus is visible in every style */
.pub-header :is(.pub-nav a, .pub-logo, .pub-nav-toggle, .pub-dock-link, .pub-nav-dropdown-trigger):focus-visible,
:is(.pub-overlay-menu, .pub-dock-panel) :is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ── 2. Layout: long names, many pages, the burger ──────────────── */
/* The logo may shrink and ellipsise; the links and the ☰ never leave the screen */
.pub-header :where(.pub-container) .pub-logo { max-width: min(46%, 440px); }
.pub-header .pub-logo img { max-width: 100%; }
.pub-header .pub-nav-toggle, .pub-header .pub-overlay-trigger { flex-shrink: 0; }
@media (min-width: 769px) {
    /* many pages: the links wrap into a second row instead of overflowing sideways */
    .pub-header :where(.pub-container) > .pub-nav { flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
    .pub-header.nav-split :where(.pub-nav-left, .pub-nav-right) { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
    .pub-header.nav-split :where(.pub-container) .pub-logo { max-width: 40vw; margin: 0 24px; }
}
@media (max-width: 768px) {
    .pub-header :where(.pub-container) .pub-logo { max-width: calc(100% - 64px); }
    .pub-header.nav-split :where(.pub-container) .pub-logo { max-width: calc(100% - 64px); }
}

/* ── 3. Current page marker (always visible) ────────────────────── */
.pub-header:not(.navlink-underline):not(.navlink-highlight) :where(.nav-minimal-marker, .pub-nav) a.active:not(.pub-nav-admin-btn) { opacity: 1; }
.pub-header.nav-minimal:not(.navlink-underline):not(.navlink-highlight) :where(.pub-nav) a.active:not(.pub-nav-admin-btn),
.pub-header:is(.nav-dark, .nav-light):not(.navlink-underline):not(.navlink-highlight) :where(.pub-nav) a.active:not(.pub-nav-admin-btn),
.pub-header.nav-glass:not(.navlink-underline):not(.navlink-highlight) :where(.pub-nav) a.active:not(.pub-nav-admin-btn) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--nav-underline-color, currentColor);
}
/* ...and the skin's own active bar is hidden there, so it is never underlined twice */
.pub-header:is(.nav-minimal, .nav-dark, .nav-light, .nav-glass):not(.navlink-underline):not(.navlink-highlight) .pub-nav a.active:not(.pub-nav-admin-btn)::after { display: none; }
.pub-header:is(.nav-minimal, .nav-dark, .nav-light, .nav-glass):not(.navlink-underline):not(.navlink-highlight) .pub-nav a.active:not(.pub-nav-admin-btn) { border-bottom-color: transparent; box-shadow: none; }

/* ── 4. Bar tints: Dark (really dark, light text) and Light, on every template ── */
.pub-header.nav-light {
    --ns-surface: var(--nav-bg-custom-solid, #ffffff);
    --nav-bg: var(--nav-bg-custom, #ffffff);
    --nav-bg-opaque: var(--nav-bg-custom-opaque, #ffffff);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--ns-line);
}
.pub-header.nav-dark {
    --ns-surface: var(--nav-bg-custom-solid, #0f172a);
    --nav-bg: var(--nav-bg-custom, #0f172a);
    --nav-bg-opaque: var(--nav-bg-custom-opaque, #0f172a);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--ns-line);
}
.pub-header:is(.nav-dark, .nav-light) .pub-container .pub-logo,
.pub-header:is(.nav-dark, .nav-light) .pub-container .pub-logo-text { color: var(--logo-color); text-shadow: none; }
.pub-header:is(.nav-dark, .nav-light) .pub-nav a:not(.pub-nav-admin-btn),
.pub-header:is(.nav-dark, .nav-light) .pub-nav .pub-nav-dropdown-trigger { color: var(--ns-text); opacity: 0.78; text-shadow: none; }
.pub-header:is(.nav-dark, .nav-light) .pub-nav a:not(.pub-nav-admin-btn):hover,
.pub-header:is(.nav-dark, .nav-light) .pub-nav .pub-nav-dropdown-trigger:hover { color: var(--nav-hover-color); opacity: 1; }
.pub-header:is(.nav-dark, .nav-light) .pub-nav a:not(.pub-nav-admin-btn).active { color: var(--nav-active-color); opacity: 1; }
.pub-header:is(.nav-dark, .nav-light) .pub-nav .pub-nav-admin-btn {
    background: var(--login-btn-bg, var(--ns-tint));
    color: var(--login-btn-color, var(--ns-text));
    border-color: var(--login-btn-border, var(--ns-line-strong));
    opacity: 1;
}
.pub-header:is(.nav-dark, .nav-light) .pub-nav-toggle { color: var(--burger-color); }
.pub-header:is(.nav-dark, .nav-light)::after { opacity: 0; }

/* ── 5. Frosted Glass: see-through bar in the menu colour ───────── */
.pub-header.nav-glass {
    --nav-bg: color-mix(in srgb, var(--ns-surface) 86%, transparent);
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--ns-line);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.pub-header.nav-glass.scrolled { --nav-bg: color-mix(in srgb, var(--ns-surface) 94%, transparent); }
.pub-header.nav-glass .pub-container .pub-logo,
.pub-header.nav-glass .pub-container .pub-logo-text { color: var(--logo-color); }
.pub-header.nav-glass .pub-nav a:not(.pub-nav-admin-btn),
.pub-header.nav-glass .pub-nav .pub-nav-dropdown-trigger { color: var(--ns-text); opacity: 0.9; }
.pub-header.nav-glass .pub-nav .pub-nav-admin-btn { opacity: 1; }
.pub-header.nav-glass .pub-nav a:not(.pub-nav-admin-btn):hover { color: var(--nav-hover-color); }
.pub-header.nav-glass .pub-nav a:not(.pub-nav-admin-btn).active { color: var(--nav-active-color); }
.pub-header.nav-glass .pub-nav-dropdown-menu { background: color-mix(in srgb, var(--ns-surface) 92%, transparent); }

/* ── 7. Capsule: template bar in a capsule, dark/light CTA pill that always reads ── */
.pub-header.nav-capsule .pub-container { border-color: var(--ns-line); }
.pub-header.nav-capsule .pub-nav a:not(.pub-nav-admin-btn) { padding: 8px 16px; border-radius: 9999px; color: var(--ns-text); white-space: nowrap; }
.pub-header.nav-capsule .pub-nav a:not(.pub-nav-admin-btn):hover { background: var(--ns-tint); color: var(--nav-hover-color); }
.pub-header.nav-capsule .pub-nav a:not(.pub-nav-admin-btn).active { background: var(--ns-tint-strong); color: var(--nav-active-color); font-weight: 600; }
.pub-header.nav-capsule .pub-nav .pub-nav-admin-btn {
    background: var(--login-btn-bg, var(--ns-text)) !important;
    color: var(--login-btn-color, var(--ns-surface)) !important;
    border: 1px solid var(--login-btn-border, transparent) !important;
    padding: 10px 24px !important;
}
.pub-header.nav-capsule .pub-nav .pub-nav-admin-btn:hover { background: var(--login-btn-bg, var(--primary, #2563eb)) !important; color: var(--login-btn-color, var(--ns-on-primary)) !important; }
.pub-header.nav-capsule .pub-nav-dropdown-menu { background: var(--nav-bg-opaque, var(--ns-surface)); }
@media (min-width: 769px) {
    /* room for the usual 6-8 pages on one line (the 960px pill made the Login button wrap) */
    .pub-header.nav-capsule .pub-container { max-width: min(1180px, calc(100% - 32px)); }
    .pub-header.nav-capsule .pub-nav { gap: 2px; }
    .pub-header.nav-capsule .pub-nav a:not(.pub-nav-admin-btn) { padding: 8px 12px; }
}

/* ── 9. Transparent: over a page-opening hero only ───────────────── */
/* Normal bar on every other page (sub-pages have no photo behind the menu) */
.pub-header.nav-transparent {
    position: sticky;
    top: calc(var(--announcement-height, 0px) - 2px);
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: 1px solid var(--ns-line);
    box-shadow: none;
}
.pub-header.nav-transparent .pub-container .pub-logo,
.pub-header.nav-transparent .pub-container .pub-logo-text { color: var(--logo-color); text-shadow: none; }
.pub-header.nav-transparent .pub-nav a:not(.pub-nav-admin-btn),
.pub-header.nav-transparent .pub-nav .pub-nav-dropdown-trigger,
.pub-header.nav-transparent .pub-nav .pub-nav-contact-link { color: var(--ns-text); text-shadow: none; }
.pub-header.nav-transparent .pub-nav a:not(.pub-nav-admin-btn):hover { color: var(--nav-hover-color); }
.pub-header.nav-transparent .pub-nav a:not(.pub-nav-admin-btn).active { color: var(--nav-active-color); }
.pub-header.nav-transparent .pub-nav .pub-nav-admin-btn {
    background: var(--login-btn-bg, var(--ns-tint));
    color: var(--login-btn-color, var(--ns-text));
    border-color: var(--login-btn-border, var(--ns-line-strong));
}
.pub-header.nav-transparent .pub-nav-toggle { color: var(--burger-color); }
.pub-header.nav-transparent .pub-nav .pub-nav-contact { border-left-color: var(--ns-line); }
/* no page-opening hero: nothing floats, so no space is reserved for it */
body:not(:has(#main-content > .pub-section-hero:first-child)) .pub-header.nav-transparent ~ main .pub-hero { padding-top: 0; }
/* over the hero: floating, see-through with a soft scrim, white text */
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) {
    --nav-text: #ffffff;
    --ns-text: #ffffff;
    --nav-hover-color: #ffffff;
    --nav-active-color: #ffffff;
    --burger-color: #ffffff;
    --logo-color: #ffffff;
    --ns-line: rgba(255, 255, 255, 0.28);
    --ns-line-strong: rgba(255, 255, 255, 0.5);
    --ns-tint: rgba(255, 255, 255, 0.14);
    --ns-tint-strong: rgba(255, 255, 255, 0.24);
    background: var(--ns-scrim) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) :is(.pub-container .pub-logo, .pub-container .pub-logo-text, .pub-nav a:not(.pub-nav-admin-btn), .pub-nav .pub-nav-dropdown-trigger, .pub-nav .pub-nav-contact-link, .pub-nav-toggle) {
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) .pub-nav a:not(.pub-nav-admin-btn) { opacity: 0.92; }
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) .pub-nav .pub-nav-admin-btn {
    background: var(--login-btn-bg, rgba(255, 255, 255, 0.16));
    color: var(--login-btn-color, #ffffff);
    border-color: var(--login-btn-border, rgba(255, 255, 255, 0.45));
    opacity: 1;
}
body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) .pub-nav-dropdown-menu { background: rgba(15, 23, 42, 0.92); --nav-text: #fff; }

/* ── 10. Fullscreen Overlay: header in the template bar colour, panel derives its own ── */
.pub-header.nav-overlay { background: var(--nav-bg, var(--bg, #fff)); }
.pub-header.nav-overlay .pub-overlay-trigger span { background: var(--burger-color); }
body.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-overlay.pub-nav-hero-transparent:not(.pub-nav-scrolled) .pub-overlay-trigger span { background: #fff; }
.pub-overlay-menu {
    --ns-surface: var(--nav-bg-solid, var(--text, #1a1a1a));
    background: var(--nav-bg-opaque, var(--text, #1a1a1a));
}
.pub-overlay-menu .pub-overlay-close { color: var(--ns-on); opacity: 0.7; }
.pub-overlay-menu .pub-overlay-close:hover { color: var(--ns-on); opacity: 1; }
.pub-overlay-menu .pub-overlay-nav a,
.pub-overlay-menu .pub-overlay-dropdown-trigger { color: var(--ns-on); }
.pub-overlay-menu.open .pub-overlay-nav a,
.pub-overlay-menu.open .pub-overlay-dropdown-trigger { opacity: 0.72; }
.pub-overlay-menu.open .pub-overlay-nav a:hover,
.pub-overlay-menu.open .pub-overlay-dropdown-trigger:hover { color: var(--ns-on); opacity: 1; }
.pub-overlay-menu.open .pub-overlay-nav a.active {
    color: var(--ns-on);
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
    text-decoration-color: var(--nav-underline-color, var(--accent, var(--primary, #2563eb)));
}
.pub-overlay-menu .pub-overlay-dropdown-children a { color: var(--ns-on) !important; opacity: 0.72; }
.pub-overlay-menu .pub-overlay-dropdown-children a:hover,
.pub-overlay-menu .pub-overlay-dropdown-children a.active { color: var(--ns-on) !important; opacity: 1; }
.pub-overlay-menu .pub-nav-contact { border-top-color: var(--ns-line); }
.pub-overlay-menu .pub-nav-contact-link { color: var(--ns-on); }
.pub-overlay-menu .pub-overlay-cta {
    color: var(--login-btn-color, var(--ns-on)) !important;
    border-color: var(--login-btn-border, var(--ns-line-strong));
    background: var(--login-btn-bg, transparent);
}
.pub-overlay-menu .pub-overlay-cta:hover { background: var(--login-btn-bg, var(--ns-tint)); border-color: var(--login-btn-border, var(--ns-on)); }
.pub-overlay-menu .pub-overlay-logout button { color: var(--login-btn-color, var(--ns-on)); border-color: var(--login-btn-border, var(--ns-line-strong)); }
.navlink-highlight.pub-overlay-menu.open .pub-overlay-nav a:hover,
.navlink-highlight.pub-overlay-menu .pub-overlay-nav a.active { background: var(--ns-tint-strong); }

/* ── 12. Dock Bar: links pill in the menu colour, side panel derives its own ── */
.pub-header.nav-dock .pub-container .pub-logo,
.pub-header.nav-dock .pub-container .pub-logo-text { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.pub-header.nav-dock .pub-dock-burger { color: #ffffff; }
/* a soft scrim under the floating logo so it reads over any photo or page hero */
.pub-header.nav-dock:not(.scrolled)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ns-scrim);
    z-index: -1;
    pointer-events: none;
}
/* scrolled: the header stays see-through (the floating dock look), but the
   page under the logo can be any colour, so the logo and the ☰ get their own
   small pill in the menu colour and take its readable text colour */
.pub-header.nav-dock.scrolled .pub-container .pub-logo,
.pub-header.nav-dock.scrolled .pub-dock-burger {
    background: var(--nav-bg-opaque, var(--ns-surface));
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.pub-header.nav-dock.scrolled .pub-container .pub-logo { padding: 8px 16px; transform: none; }
.pub-header.nav-dock.scrolled .pub-container .pub-logo,
.pub-header.nav-dock.scrolled .pub-container .pub-logo-text { color: var(--logo-color); text-shadow: none; }
.pub-header.nav-dock.scrolled .pub-dock-burger { color: var(--burger-color); padding: 8px; }
.pub-header.nav-dock .pub-dock-bar { border-color: var(--ns-line); }
.pub-header.nav-dock .pub-dock-link { color: var(--ns-text); }
.pub-header.nav-dock .pub-dock-link:hover { color: var(--nav-hover-color); background: var(--ns-tint); }
.pub-header.nav-dock .pub-dock-link.active { color: var(--nav-active-color); background: var(--ns-tint-strong); }
.pub-header.nav-dock .pub-dock-cta {
    background: var(--login-btn-bg, var(--ns-text));
    color: var(--login-btn-color, var(--ns-surface));
    border-color: var(--login-btn-border, transparent);
}
.pub-header.nav-dock .pub-nav-dropdown-menu { background: var(--nav-bg-opaque, var(--ns-surface)); border-color: var(--ns-line); }
.pub-header.nav-dock .pub-nav-dropdown-menu a { color: var(--ns-text); }
.pub-header.nav-dock .pub-nav-dropdown-menu a:hover,
.pub-header.nav-dock .pub-nav-dropdown-menu a.active { color: var(--nav-active-color); background: var(--ns-tint-strong); }
.pub-dock-panel {
    --ns-surface: var(--mobile-nav-bg-solid, var(--nav-bg-solid, #0f0f0f));
    background: var(--mobile-nav-bg, var(--nav-bg-opaque, rgba(15, 15, 15, 0.97)));
}
.pub-dock-panel .pub-dock-panel-header { border-bottom-color: var(--ns-line); }
.pub-dock-panel .pub-logo,
.pub-dock-panel .pub-logo-text { color: var(--ns-on); }
.pub-dock-panel .pub-dock-panel-close { color: var(--ns-on); opacity: 0.7; }
.pub-dock-panel .pub-dock-panel-close:hover { color: var(--ns-on); opacity: 1; background: var(--ns-tint); }
.pub-dock-panel .pub-dock-panel-nav a,
.pub-dock-panel .pub-dock-panel-parent { color: var(--ns-on); opacity: 0.8; }
.pub-dock-panel .pub-dock-panel-nav a:hover,
.pub-dock-panel .pub-dock-panel-parent:hover { color: var(--ns-on); opacity: 1; background: var(--ns-tint); }
.pub-dock-panel .pub-dock-panel-nav a.active { color: var(--ns-on); opacity: 1; background: var(--ns-tint-strong); font-weight: 600; }
.pub-dock-panel .pub-dock-panel-contact .pub-nav-contact-link { color: var(--ns-on); opacity: 0.7; }
.pub-dock-panel .pub-dock-panel-contact .pub-nav-contact-link:hover { color: var(--ns-on); opacity: 1; }
.pub-dock-panel .pub-dock-panel-footer { border-top-color: var(--ns-line); }
.pub-dock-panel .pub-dock-panel-btn {
    background: var(--login-btn-bg, var(--ns-on));
    color: var(--login-btn-color, var(--ns-surface));
    border-color: var(--login-btn-border, transparent);
}
.pub-dock-panel .pub-dock-panel-btn:hover { background: var(--login-btn-bg, var(--ns-on)); opacity: 0.9; }

/* ── 13. Phones: the open menu panel ─────────────────────────────── */
@media (max-width: 768px) {
    /* The panel starts where the bar really ends (top: 100%, base.css) and
       takes its text colour from ITS background (owner's phone-menu colour,
       else the style's bar), never from the desktop bar. */
    .pub-header :where(.pub-container) .pub-nav {
        --nav-text: var(--ns-panel-on);
        --ns-text: var(--ns-panel-on);
        --nav-hover-color: var(--nav-hover-set, var(--ns-panel-on));
        --nav-active-color: var(--nav-active-set, var(--ns-panel-on));
        --ns-line: color-mix(in srgb, var(--ns-panel-on) 16%, transparent);
        --ns-line-strong: color-mix(in srgb, var(--ns-panel-on) 34%, transparent);
        --ns-tint: color-mix(in srgb, var(--ns-panel-on) 8%, transparent);
        --ns-tint-strong: color-mix(in srgb, var(--ns-panel-on) 15%, transparent);
        background: var(--mobile-nav-bg, var(--nav-bg-opaque, var(--bg, #fff)));
        color: var(--ns-panel-on);
        border-bottom: 1px solid var(--ns-line);
        text-shadow: none;
    }
    .pub-header :where(.pub-container) .pub-nav :is(a:not(.pub-nav-admin-btn), .pub-nav-dropdown-trigger, .pub-nav-contact-link) { color: var(--ns-text); text-shadow: none; }
    .pub-header :where(.pub-container) .pub-nav a:not(.pub-nav-admin-btn):hover { color: var(--nav-hover-color); }
    .pub-header :where(.pub-container) .pub-nav a:not(.pub-nav-admin-btn).active { color: var(--nav-active-color); opacity: 1; }
    .pub-header :where(.pub-container) .pub-nav > a { padding: 6px 0; } /* tap targets */
    .pub-header :where(.pub-container) .pub-nav .pub-nav-contact { border-top-color: var(--ns-line); }
    .pub-header :where(.pub-container) .pub-nav .pub-nav-admin-btn {
        background: var(--login-btn-bg, var(--ns-tint));
        color: var(--login-btn-color, var(--ns-text));
        border-color: var(--login-btn-border, var(--ns-line-strong));
        opacity: 1;
    }
    .pub-header.nav-capsule :where(.pub-container) .pub-nav .pub-nav-admin-btn { align-self: center; }
    .pub-header :where(.pub-container) .pub-nav .pub-nav-dropdown-menu { background: var(--ns-tint) !important; border-left-color: var(--ns-line-strong) !important; }
    .pub-header :where(.pub-container) .pub-nav .pub-nav-dropdown-menu a { color: var(--ns-text) !important; }
    /* Dark / Light tint: the tint continues into the panel (unless the owner set a phone-menu colour) */
    .pub-header.nav-dark :where(.pub-container) .pub-nav,
    .pub-header.nav-light :where(.pub-container) .pub-nav { background: var(--mobile-nav-bg, var(--nav-bg-opaque)); }
    /* The OPEN phone panel is always solid, on every style and template: it sits
       over the page's headline and buttons, so anything see-through (glass
       tint, skins that reuse a see-through --nav-bg) makes the links unreadable. */
    .pub-header .pub-container > .pub-nav.open {
        background: var(--mobile-nav-bg, var(--nav-bg-opaque, var(--ns-surface))) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }
    /* Glass: the panel must not be see-through over the page */
    .pub-header.nav-glass :where(.pub-container) .pub-nav { background: var(--mobile-nav-bg, color-mix(in srgb, var(--ns-surface) 94%, transparent)); }
    /* Transparent over the hero: the open panel is a solid bar in the template colour */
    body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) :where(.pub-container) .pub-nav :is(a:not(.pub-nav-admin-btn), .pub-nav-dropdown-trigger, .pub-nav-contact-link) { color: var(--ns-text); text-shadow: none; }
    body:has(#main-content > .pub-section-hero:first-child) .pub-header.nav-transparent:not(.scrolled) :where(.pub-container) .pub-nav .pub-nav-admin-btn { background: var(--login-btn-bg, var(--ns-tint)); color: var(--login-btn-color, var(--ns-text)); border-color: var(--login-btn-border, var(--ns-line-strong)); }
    /* Split Center: ONE list with every page (the two desktop halves stay hidden) */
    .pub-header.nav-split .pub-nav-left,
    .pub-header.nav-split .pub-nav-right { display: none !important; }
    .pub-header.nav-split .pub-nav.pub-nav-all { display: none; position: absolute; top: 100%; left: var(--mobile-nav-inset, 0px); right: var(--mobile-nav-inset, 0px); }
    .pub-header.nav-split .pub-nav.pub-nav-all.open { display: flex; }
    .pub-header.nav-split .pub-nav-all > a { font-size: 15px; width: 100%; text-align: center; opacity: 1; }
    .pub-header.nav-split .pub-nav-toggle { display: block; }
    .pub-header.nav-dock .pub-container { gap: 12px; }
}

/* ── 14. Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub-header { transition: none; }
}