/* Self-contained site header/footer for the Antora manual pages.
   No Tailwind / Preflight — everything is scoped under .vv-chrome so it
   neither leaks into Antora's doc body nor is disturbed by Antora's CSS.
   Mirrors src/components/Header.astro + Footer.astro.

   Sizes are in px (not rem) on purpose: Antora enlarges the root font
   (html{font-size:1.125em}), so rem here would scale the chrome ~12%
   bigger than the Astro site. The site renders its rem at the 16px
   root, so these px values (rem*16) make the chrome pixel-identical to
   the site regardless of Antora's root. */

/* Self-host Inter so doc pages render the SAME font as the Astro site.
   The site loads it via `@import '@fontsource-variable/inter'`; that
   @font-face does not exist on Antora pages, so without this the chrome
   silently fell back to system-ui — same computed CSS, different glyphs
   and metrics (looked smaller / wrong shape). url() is relative to this
   file (served at /en/doc/_/site-chrome/), keeping the chrome
   self-contained and independent of the deploy root. latin + latin-ext
   cover the menu, footer and the language-switcher labels (CJK names
   fall back, exactly as on the Astro site). Declarations copied verbatim
   from @fontsource-variable/inter/wght.css so they match pixel-for-pixel. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Antora reserves space for its own (now-removed) fixed navbar via
   body{margin-top:1rem}, body{padding-top:3.5rem} (site.css),
   body{padding-top:var(--vvv-navbar-height)} (vvv-brand.css) and an
   inline style="padding-top:var(--vvv-navbar-height)" on <body>.
   A stylesheet !important beats the non-important inline style, so this
   one rule neutralises all of them and the header sits flush.
   (chrome.css is only loaded on /en/doc pages — safely targeted.) */
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.vv-chrome li {
  display: block;
  margin: 0;
}
.vv-chrome a {
  text-decoration: none;
}

.vv-chrome {
  --color-header: #345275;
  --color-header-dark: #2a4260;
  --color-menu: #ffffff;
  --color-menu-dim: #dedede;
  --color-accent: #780e0c;
  --color-accent-hover: #560c0a;
  --color-line: #e2e5ea;
  --color-surface: #ffffff;
  --color-surface-2: #f5f6f8;
  --color-muted: #69727e;
  --color-ink: #15181c;
  --vv-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  font-family: var(--vv-font);
  font-size: 16px; /* fixed base; chrome metrics are px (see header note) */
  box-sizing: border-box;
}
.vv-chrome *,
.vv-chrome *::before,
.vv-chrome *::after {
  box-sizing: border-box;
}

/* ── Header shell ───────────────────────────────────────────────────── */
.vv-header {
  position: sticky; /* stays put on scroll, like docs.antora.org */
  top: 0;
  z-index: 10; /* the active-item underline (-2px) paints over Antora content */
  background: var(--color-header);
  color: var(--color-menu);
  width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Antora's breadcrumb toolbar and left sidebar are sticky at a literal
   top:3.5rem (sized for its old fixed navbar). Re-point them to our
   56px sticky header so they pin directly beneath it instead of
   floating. Desktop only — Antora's mobile nav is a separate overlay. */
@media (min-width: 1024px) {
  .toolbar {
    top: 56px !important;
  }
  .nav {
    top: 56px !important;
    height: calc(100vh - 56px) !important;
  }
  .nav-container {
    top: 56px !important;
  }
}
.vv-header .vv-bar {
  margin: 0 auto;
  display: flex;
  min-height: 56px;
  width: 100%;
  max-width: 1152px;
  align-items: stretch;
  gap: 24px;
  padding: 0 24px;
}
.vv-header .vv-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.vv-header .vv-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.vv-chrome .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vv-chrome .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4.8px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-menu-dim);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.vv-chrome .nav-link:hover,
.vv-chrome .nav-link:focus-visible,
.vv-chrome .nav-link[data-active='true'] {
  color: var(--color-menu);
}
.vv-chrome .caret {
  width: 11.2px;
  height: 11.2px;
  opacity: 0.7;
  transition: transform 0.3s ease-in-out;
}

/* Second-level submenu trigger (only the Manual menu carries one today):
   label left, chevron pinned to the right edge. The compound selector
   outranks `.vv-chrome .sub-link { display: block }` in the desktop media
   query, so the flex layout takes effect. */
.vv-chrome .sub-link.sub-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vv-chrome .caret-sub {
  width: 9.6px;
  height: 9.6px;
  flex: none;
  opacity: 0.7;
  transition: transform 0.3s ease-in-out;
}
.vv-chrome .menu-fx {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out;
}
.vv-chrome .nav-item:hover > .nav-link > .menu-fx,
.vv-chrome .nav-link:focus-visible > .menu-fx,
.vv-chrome .nav-link[data-active='true'] > .menu-fx {
  opacity: 1;
  visibility: visible;
}

/* Search slot (Antora's lunr search input lives here on doc pages). */
/* `li.vv-search` (specificity beats the desktop .nav-item stretch rule)
   keeps the field a fixed, vertically-centred size instead of being
   stretched to the full 56px header height. */
.vv-chrome li.vv-search {
  display: flex;
  align-items: center;
}
.vv-chrome .vv-search .field {
  display: flex;
  align-items: center;
  position: relative;
}
.vv-chrome .vv-search input {
  font: inherit;
  font-size: 13px;
  height: 30px;
  line-height: 1;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-header-dark);
  border-radius: 4px;
  padding: 0 10px;
  width: 200px;
  max-width: 40vw;
}
.vv-chrome .vv-search input::placeholder {
  color: var(--color-muted);
}

/* Hamburger → X */
.vv-chrome .nav-burger {
  margin-left: auto;
  display: inline-flex;
  height: 56px;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-menu);
  background: none;
  border: 0;
  cursor: pointer;
}
.vv-chrome .burger-box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.vv-chrome .burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.2s ease-in-out,
    top 0.3s ease-in-out;
}
.vv-chrome .burger-line:nth-child(1) {
  top: 0;
}
.vv-chrome .burger-line:nth-child(2) {
  top: 7px;
}
.vv-chrome .burger-line:nth-child(3) {
  top: 14px;
}
.vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(2) {
  opacity: 0;
}
.vv-chrome .nav-burger[aria-expanded='true'] .burger-line:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

html.nav-no-anim .vv-chrome .sub-menu,
html.nav-no-anim .vv-chrome .menu-fx,
html.nav-no-anim .vv-chrome .primary-nav,
html.nav-no-anim .vv-chrome .burger-line {
  transition: none !important;
}

/* ── Desktop (lg+) ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .vv-chrome .nav-burger,
  .vv-chrome .nav-backdrop {
    display: none;
  }
  .vv-header .primary-nav {
    margin-left: auto;
  }
  /* Full-height link chain: the bar stretches its children, so each
     nav-link fills the 56px bar and centres its own text — and the
     active underline (.menu-fx, bottom:-2px) lands exactly on the
     header's bottom edge, like the Astro site. */
  .vv-chrome .primary-nav,
  .vv-chrome .nav-list,
  .vv-chrome .nav-item {
    display: flex;
    align-items: stretch;
  }
  .vv-chrome .nav-list {
    gap: 4px;
  }
  .vv-chrome .has-children {
    position: relative;
  }
  .vv-chrome .nav-link {
    padding: 0 13.6px;
    transition:
      color 0.4s ease-in-out,
      background-color 0.4s ease-in-out;
  }
  .vv-chrome .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 208px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-header);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 8px 15px rgb(0 0 0 / 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
      opacity 0.4s ease-in-out,
      visibility 0.4s ease-in-out,
      transform 0.4s ease-in-out;
    z-index: 20;
  }
  /* The last nav item sits at the right edge of the bar; open its
     dropdown leftward so it doesn't overflow the viewport (the lang
     switcher used to be the last item and absorbed this). */
  .vv-chrome .nav-list > .nav-item:last-child > .sub-menu {
    left: auto;
    right: 0;
  }
  .vv-chrome .has-children:hover > .sub-menu,
  .vv-chrome .has-children:focus-within > .sub-menu,
  .vv-chrome .has-children[data-submenu='open'] > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .vv-chrome .sub-link {
    display: block;
    padding: 9.6px 16px;
    font-size: 14px;
    color: var(--color-menu-dim);
    text-decoration: none;
    transition:
      background-color 0.25s ease-in-out,
      color 0.25s ease-in-out;
  }
  .vv-chrome .sub-link:hover,
  .vv-chrome .sub-link:focus-visible,
  .vv-chrome .sub-link[aria-current='page'] {
    background: var(--color-header-dark);
    color: var(--color-menu);
  }

  /* Second-level flyout. The Manual menu sits on the right of the bar, so
     the panel opens to the LEFT of its parent row (rightward would overflow
     the viewport). The rest of its look is inherited from .sub-menu above. */
  .vv-chrome .sub-menu .has-children {
    position: relative;
  }
  .vv-chrome .sub-menu--l2 {
    top: -2px;
    left: auto;
    right: 100%;
    min-width: 240px;
  }
}

/* ── Mobile (< lg): right-side slide-in drawer ──────────────────────── */
@media (max-width: 1023px) {
  .vv-chrome .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 50;
  }
  .vv-chrome .nav-backdrop:not([hidden]) {
    opacity: 1;
  }
  .vv-chrome .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--color-header);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    z-index: 60;
    padding-top: 64px;
  }
  .vv-chrome .primary-nav[data-open='true'] {
    transform: translateX(0);
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.3);
  }
  .vv-chrome .nav-burger {
    z-index: 70;
  }
  .vv-chrome .nav-list {
    display: block;
    padding: 8px 0 24px;
  }
  .vv-chrome .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 13.6px 24px;
    transition: color 0.4s ease-in-out;
  }
  .vv-chrome .menu-fx {
    display: none;
  }
  .vv-chrome .nav-link[data-active='true'] {
    box-shadow: inset 3px 0 0 var(--color-accent);
  }
  .vv-chrome .vv-search {
    padding: 12px 24px;
  }
  .vv-chrome .vv-search input {
    width: 100%;
    max-width: none;
  }
  .vv-chrome .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--color-header-dark);
    transition: max-height 0.3s ease-in-out;
  }
  .vv-chrome .has-children[data-submenu='open'] > .sub-menu {
    max-height: 640px;
  }
  .vv-chrome .has-children[data-submenu='open'] .caret {
    transform: rotate(180deg);
  }
  .vv-chrome .sub-link {
    display: block;
    padding: 11.2px 36px;
    font-size: 14.4px;
    color: var(--color-menu-dim);
    text-decoration: none;
  }
  .vv-chrome .sub-link[aria-current='page'] {
    color: var(--color-menu);
    font-weight: 600;
  }

  /* Second level = a nested accordion: indent deeper, and give the
     top-level Manual list extra room so an expanded sub-list (Theory has 13
     entries) isn't clipped by the parent's max-height/overflow. */
  .vv-chrome .sub-menu--l2 .sub-link {
    padding-left: 52px;
    font-size: 13.6px;
  }
  .vv-chrome .nav-item.has-children[data-submenu='open'] > .sub-menu {
    max-height: 960px;
  }
  .vv-chrome .has-children[data-submenu='open'] > .sub-parent .caret-sub {
    transform: rotate(90deg);
  }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.vv-footer {
  margin-top: 64px;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-family: var(--vv-font);
  font-size: 14px;
  width: 100%;
  flex: 0 0 auto;
}
.vv-footer .vv-foot-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1152px;
  padding: 24px;
}
.vv-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Top row: site links (left) and the social icons (right), mirroring
   the Astro Footer.astro layout. */
.vv-footer .vv-foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.vv-footer .vv-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.vv-footer a {
  color: var(--color-muted);
  text-decoration: none;
}
.vv-footer a:hover {
  color: var(--color-accent);
}
/* Bottom row: copyright (left) + language selector (right). */
.vv-footer .vv-foot-bottom {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
}
.vv-footer .vv-foot-bottom p {
  margin: 0;
}

/* Language selector — a native <details> disclosure that opens UPWARD
   (it sits at the very bottom of the page), right-aligned. Selecting a
   language navigates away, so no JS is needed. Mirrors Footer.astro. */
.vv-footer .vv-lang {
  position: relative;
  margin-left: auto;
}
.vv-footer .vv-lang > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--color-muted);
}
.vv-footer .vv-lang > summary::-webkit-details-marker {
  display: none;
}
.vv-footer .vv-lang > summary:hover {
  color: var(--color-accent);
}
.vv-footer .vv-lang-globe {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.vv-footer .vv-lang-caret {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease-in-out;
}
.vv-footer .vv-lang[open] > summary .vv-lang-caret {
  transform: rotate(180deg);
}
.vv-footer .vv-lang-name {
  font-weight: 600;
}
.vv-footer .vv-lang-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin: 0 0 8px;
  min-width: 192px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  box-shadow: 0 8px 15px rgb(0 0 0 / 0.18);
  padding: 4px 0;
  z-index: 20;
}
.vv-footer .vv-lang-menu a {
  display: block;
  padding: 6px 16px;
  color: var(--color-muted);
  text-decoration: none;
}
.vv-footer .vv-lang-menu a:hover {
  background: var(--color-surface-2);
  color: var(--color-accent);
}
.vv-footer .vv-lang-menu a[aria-current='page'] {
  font-weight: 600;
  color: var(--color-accent);
}
.vv-footer .vv-social {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Right-align within .vv-foot-top even if the row wraps (space-between
     only right-aligns on a single line). Mirrors Footer.astro. */
  margin-left: auto;
}
.vv-footer .vv-social a {
  display: block;
}
.vv-footer .vv-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}