/* ══════════════════════════════════════
   DOCK — primary nav (all sizes)
   Transparent glass pill (matches the site's glass system).
   Active state is off-white; no chromatic accent.
   The TOP dock is the site header everywhere; the bottom dock is its
   mobile twin shown once you scroll down (never rendered on desktop).
   ══════════════════════════════════════ */

.bottom-dock {
  /* off-white active / brighter idle (legible over busy photos) */
  --text:   #F2F0EC;
  --text-2: #C7C3BB;
  --text-3: #ABA69E;

  position: fixed;
  /* center without transform so the hide animation can own transform */
  top: auto;
  left: 0;
  right: 0;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  width: calc(100% - 16px); /* wide bar, 8px side margins */
  z-index: var(--z-dock);

  /* a COLUMN of rows inside one glass slab: the bar row (.dock-row) and,
     when open, the submenu row (see section-menu.css) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 9px;

  /* same glass as the old header bar */
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md); /* slightly squared */
  box-shadow: var(--elev-2);

  /* let the dock own horizontal drags (don't scroll the page) */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 320ms ease, opacity 320ms ease;
}

/* iOS would otherwise "lift" a pressed link into a native drag preview
   (and cancel our pointer drag) — the dock owns its drags. Also no
   long-press callout/preview on the tabs. */
.bottom-dock a,
.dock-brand-logo {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.bottom-dock.dock-hidden {
  transform: translateY(240px); /* same distance as its companion layers — lockstep */
  opacity: 0;
  pointer-events: none;
}

/* Top dock — the header. Identical pill anchored under the status bar;
   it hides UPWARD (on mobile the bottom dock takes over when you scroll). */
.bottom-dock.dock-top {
  /* pages with the fixed admin bar set --dock-top-offset to sit below it */
  top: var(--dock-top-offset, calc(10px + env(safe-area-inset-top, 0px)));
  bottom: auto;
}
.bottom-dock.dock-top.dock-hidden { transform: translateY(-240px); }

/* Brand — logo + name, left of the tabs (prominent) */
.dock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
  margin-right: 4px;
  text-decoration: none;
  flex: 0 0 auto;
}
.dock-brand-logo { height: 30px; width: auto; object-fit: contain; cursor: pointer; }
.dock-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  line-height: 1;
}

/* The bar row: brand left, tabs to the right — items SHRINK to fit,
   they never wrap. Anchors the sliding pill. */
.dock-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

/* Instagram-style sliding pill behind the active tab */
.dock-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 58px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.3, 0.7, 0.25, 1), width 320ms ease, opacity 200ms ease;
}
.dock-pill.no-anim { transition: none; }

.dock-tab {
  position: relative;
  z-index: 1; /* above the sliding pill */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 30px; /* tightly squeezed icon-only tabs */
  /* FIXED height (room for icon + label): expanding a tab may only
     change its WIDTH — the bar's height is identical whether zero, one,
     or two tabs show their name */
  height: 44px;
  padding: 6px 2px 5px;
  border-radius: var(--radius-md);
  color: var(--text-3);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

.dock-icon { display: flex; }
.dock-icon svg { display: block; width: 20px; height: 20px; }

/* icon-only when idle — only the selected tab shows its name.
   Labels get a soft shadow so they read over glass/photos at any size. */
.dock-label {
  display: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* the selected tab takes the room it needs — its neighbors stay compact and
   the whole row redistributes (fit-content dock re-centers itself) */
.dock-tab.is-active { padding: 6px 8px 5px; min-width: 0; flex-shrink: 0; /* its label must never be squeezed into overflowing */ }
.dock-tab.is-active .dock-label { display: block; }

.dock-tab.is-active {
  color: var(--text); /* off-white fill — never a colored accent */
}

/* hovering any tab shows a highlight box AND its name (hover-capable
   pointers only — iOS sticks :hover to the last-tapped tab, painting stray
   boxes). Same treatment as the submenu preview tint (see .dock-shell-hi),
   so every tab hover looks alike whether or not it has a second level. */
@media (hover: hover) {
  .dock-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.13);
    padding: 6px 8px 5px;
    min-width: 0;
  }
  .dock-tab:hover .dock-label { display: block; }
  /* the sliding pill already boxes the active tab — no second layer */
  .dock-tab.is-active:hover { background: none; }
  /* hovering ANY other tab tucks the active one back to icon-only — same
     as the submenu preview (.is-hover below): one expanded tab at a time.
     Width-only: the fixed tab height keeps the bar steady. */
  .bottom-dock:has(.dock-tab:hover) .dock-tab.is-active:not(:hover) { padding: 6px 2px 5px; min-width: 30px; }
  .bottom-dock:has(.dock-tab:hover) .dock-tab.is-active:not(:hover) .dock-label { display: none; }
  /* ...and the active pill lets go too, handing the highlight to the
     hovered tab (the submenu preview already does this via the tint).
     !important because JS positions the pill with inline opacity; not
     while dragging — the drag needs the pill under the finger. */
  .bottom-dock:not(.is-dragging):has(.dock-tab:hover:not(.is-active)) .dock-pill { opacity: 0 !important; }
}

/* hover/drag/tap preview (set by section-pager): the tab whose group is
   being previewed keeps the active treatment while its submenu is showing
   — even after the pointer travels into the labels, and on touch where
   there's no :hover. Same highlight box as the active pill so the tapped
   tab reads as selected. flex-shrink:0 so its label is never squeezed. */
.dock-tab.is-hover {
  padding: 6px 8px 5px;
  min-width: 0;
  flex-shrink: 0;
  color: var(--text);
  background: rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
}
.dock-tab.is-hover .dock-label { display: block; }

/* only ONE tab expands at a time: while another tab is being previewed,
   the page's active tab tucks back to icon-only — two open labels on a
   narrow dock would shrink the tabs and collide. Width-only tuck. */
.bottom-dock:has(.dock-tab.is-hover) .dock-tab.is-active:not(.is-hover) { padding: 6px 2px 5px; min-width: 30px; }
.bottom-dock:has(.dock-tab.is-hover) .dock-tab.is-active:not(.is-hover) .dock-label { display: none; }

/* While dragging the pill, every tab holds its icon-only width — no label
   expands. This keeps the tab centers fixed so the "nearest tab under the
   pill" never flips (expanding a tab shifts its center, which used to make
   the scrub jump between groups and show the wrong submenu). The pill and
   the live submenu row indicate the selection during the drag. */
.bottom-dock.is-dragging .dock-tab,
.bottom-dock.is-dragging .dock-tab.is-active,
.bottom-dock.is-dragging .dock-tab.is-hover {
  padding: 6px 2px 5px;
  min-width: 30px;
  background: none;
}
.bottom-dock.is-dragging .dock-tab .dock-label { display: none; }

.dock-tab:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ── Desktop: the top dock IS the header — full-bleed glass bar ── */
@media (min-width: 769px) {
  .bottom-dock:not(.dock-top) { display: none; } /* no second dock here */
  /* the glass runs edge to edge, flush with the top; the side padding
     matches the old content-width bar's insets (gutter + 9px inner
     padding) so the brand and tabs stay exactly where they were.
     Brand left, tabs clustered on the right. */
  .bottom-dock.dock-top {
    top: var(--dock-top-offset, env(safe-area-inset-top, 0px));
    width: 100%;
    padding: 6px calc(var(--section-padding) + 9px);
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .bottom-dock.dock-top .dock-row {
    justify-content: flex-end;
    gap: 22px;
  }
  .bottom-dock.dock-top .dock-brand { margin-right: auto; }
}

/* ── Mobile: the page clears the fixed dock. Brand keeps logo + name;
   tabs stay icon-only with the label appearing on the tapped (active)
   tab — the base rules above already do that. ── */
@media (max-width: 768px) {
  /* the fixed bottom dock overlays the page — reserve room so the last
     content and footer are never hidden behind it */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* phones are tight: slightly slimmer brand + idle tabs so the one
     expanded tab's full label always fits without squeezing or clipping.
     A previewed group tab DOES show its name (that's the tapped tab's
     "main menu text") — the active tab tucks to icon-only meanwhile, so
     only one label is ever open at a time (see the tuck rules above). */
  .dock-brand-name { font-size: 16px; }
  .dock-brand-logo { height: 26px; }
  .dock-tab { min-width: 28px; }
}

/* touch preview: the active pill lets go while another group's submenu
   is showing (same as the desktop hover rule — but is-hover is class-
   driven, so it needs its own non-:hover variant) */
.bottom-dock:not(.is-dragging):has(.dock-tab.is-hover:not(.is-active)) .dock-pill { opacity: 0 !important; }

/* Reduced motion: no translate/slide animations, instant state changes */
@media (prefers-reduced-motion: reduce) {
  .bottom-dock,
  .dock-pill { transition: none; }
}