/* ZOE 2026 — sitewide: base, fixed bar, footer, buttons, shared utilities.
   Class names mirror the mockup with a zoe- prefix; the scene/atmosphere
   layers live in front-page.css (video walk) and subpage.css (still). */

html { scroll-behavior: smooth; }
/* iOS Safari inflates text in landscape ("text autosizing") unless opted out —
   it widened glued lines past their measured width and forced mid-segment
   wraps (dangling separator dots). Lock text to authored sizes. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The hero title art scales past the viewport (transform overflow extends the
   scroll area); body{overflow-x:hidden} propagates to the viewport but iOS
   Safari still lets you pan into it. clip on html removes the scrollable
   overflow entirely — the art still bleeds to the screen edges. */
html { overflow-x: hidden; overflow-x: clip; }
/* No -webkit-font-smoothing here: the mockup renders with macOS default
   smoothing, and `antialiased` visibly thins the display headings. */
body {
  background: var(--zoe-black);
  color: var(--zoe-cream);
  font-family: var(--zoe-body);
  line-height: 1.62;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2 { text-wrap: balance; }
p, cite { text-wrap: pretty; }

/* Content rides above the fixed scene. */
.zoe-main { position: relative; z-index: 2; }
.zoe-main .wp-block-post-content { padding: 0; }

/* Base fixed scene container — variants layer on top of this. */
#zoe-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background-color: var(--zoe-black);
  background-size: cover; background-position: center;
}

/* ═══ TOP BAR ═══ */
.zoe-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 34px; margin: 0 !important;
  background: linear-gradient(rgba(6,12,5,.55), transparent);
  transition: background .5s;
}
body.admin-bar .zoe-bar { top: 32px; }
.zoe-bar.scrolled { background: linear-gradient(rgba(6,12,5,.88), rgba(6,12,5,0)); }
/* Subpages keep the solid bar from the mockup's interior pages. */
body:not(.home) .zoe-bar {
  padding: 16px 40px;
  background: rgba(6,12,5,.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(231,205,142,.28);
}

.zoe-crest {
  display: block; height: 118px; width: 103px;
  background: url('../img/z-goldthread.png') center/contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(6,12,5,.7));
}
.zoe-bar-right { display: flex; align-items: center; gap: 22px; }

/* Nav links (core/navigation) */
.zoe-bar-links .wp-block-navigation-item__content,
.zoe-side-nav a,
.zoe-foot-links a {
  font-family: var(--zoe-serif); font-weight: 600; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--zoe-cream); opacity: .82; transition: .3s;
  text-decoration: none;
}
.zoe-bar-links .wp-block-navigation-item__content:hover,
.zoe-bar-links .current .wp-block-navigation-item__content { color: var(--zoe-gold); opacity: 1; }

/* Register button in the bar */
.zoe-mini-btn .wp-block-button__link {
  font-family: var(--zoe-serif); font-weight: 600; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid var(--zoe-gold-hi); border-radius: 0;
  color: var(--zoe-gold-hi); background: transparent;
  padding: 9px 20px; transition: .35s;
}
.zoe-mini-btn .wp-block-button__link:hover { background: var(--zoe-gold); color: var(--zoe-cream); border-color: var(--zoe-gold); }

/* Mobile nav (core/navigation responsive container) — restyled below into the
   mockup's .bar-links.open band; toggle buttons stay gold at all widths. */
.zoe-bar-links .wp-block-navigation__responsive-container-open,
.zoe-bar-links .wp-block-navigation__responsive-container-close { color: var(--zoe-gold-hi); }

/* No sticky focus boxes on bar/menu controls after a click or tap (comms
   feedback, desktop + mobile) — deliberate trade against the keyboard ring;
   !important beats core nav's own focus styles. */
.zoe-bar a:focus, .zoe-bar a:focus-visible,
.zoe-bar button:focus, .zoe-bar button:focus-visible,
.zoe-bar-links .wp-block-navigation-item__content:focus,
.zoe-bar-links .wp-block-navigation-item__content:focus-visible { outline: none !important; }
.zoe-bar a, .zoe-bar button { -webkit-tap-highlight-color: transparent; }

/* Side rail the nav settles into while walking (front page; injected chrome) */
.zoe-side-nav {
  position: fixed; left: 34px; top: 50%; z-index: 45;
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; pointer-events: none;
  transform: translateY(calc(-50% - 16px));
  transition: opacity .6s ease, transform .6s ease;
}
.zoe-side-nav.show { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.zoe-side-nav a { opacity: .85; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
.zoe-side-nav a:hover, .zoe-side-nav a.current { color: var(--zoe-gold); opacity: 1; }
@media (max-width: 760px) { .zoe-side-nav { display: none; } }

/* ═══ SHARED UTILITIES (used by patterns) ═══ */
.zoe-eyebrow {
  display: block; font-family: var(--zoe-serif); font-weight: 600;
  font-size: .84rem; letter-spacing: .44em; text-transform: uppercase;
  color: var(--zoe-gold-hi);
}
.zoe-nb { white-space: nowrap; }

/* Buttons in content */
.zoe-btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--zoe-serif); font-weight: 600; font-size: .86rem;
  letter-spacing: .28em; text-transform: uppercase;
  padding: 17px 44px; border: 1px solid var(--zoe-gold-hi); border-radius: 0;
  color: var(--zoe-gold-hi); background: transparent; transition: .4s;
}
.zoe-btn .wp-block-button__link:hover { background: var(--zoe-gold); color: var(--zoe-cream); border-color: var(--zoe-gold); }
.zoe-btn-solid .wp-block-button__link { background: var(--zoe-gold); color: var(--zoe-cream); border-color: var(--zoe-gold); }
.zoe-btn-solid .wp-block-button__link:hover { background: var(--zoe-gold-hi); border-color: var(--zoe-gold-hi); color: var(--zoe-ink); }

/* mobile-only line break helper (mirrors the mockup's .mbr/.dsk) */
.zoe-mbr { display: none; }
@media (max-width: 760px) {
  .zoe-mbr { display: inline; }
  .zoe-dsk { display: none; }
}
/* second break tier for long lines (finale date line): between 480–760px the
   mid-line dot stays inline; below 480 it hides and the line splits again —
   dots never dangle at a wrap at any width */
.zoe-mbr-sm { display: none; }
@media (max-width: 479px) {
  .zoe-mbr-sm { display: inline; }
  .zoe-dsk-sm { display: none; }
}

/* ═══ FOOTER ═══ */
.zoe-foot {
  position: relative; z-index: 2;
  background: linear-gradient(rgba(6,12,5,.72), rgba(4,8,4,.95));
  border-top: 1px solid rgba(231,205,142,.3);
  padding: 74px 24px 44px; text-align: center;
  margin-top: 0 !important;
}
.zoe-foot-crest {
  display: block; height: 75px; width: 145px; margin: 0 auto 20px;
  background: url('../img/zoe-goldthread.png') center/contain no-repeat;
}
.zoe-foot-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.zoe-foot-links a { color: var(--zoe-gold-hi); opacity: .85; }
.zoe-foot-links a:hover { opacity: 1; color: var(--zoe-cream); }
.zoe-foot-line { font-family: var(--zoe-serif); font-size: 1.08rem; color: var(--zoe-grain); opacity: .78; margin: 0 0 6px; }
.zoe-foot-mail { color: var(--zoe-gold-hi) !important; border-bottom: 1px solid rgba(231,205,142,.4); }
.zoe-foot-fine { margin-top: 24px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }

@media (max-width: 760px) {
  .zoe-bar { padding: 14px 20px; }
  .zoe-crest { height: 92px; width: 81px; }
  .zoe-foot-crest { height: 62px; width: 120px; }

  /* Register button sits before the hamburger, like the mockup */
  .zoe-bar-right { gap: 12px; }
  /* static so the open band's absolute inset anchors to the full-width
     fixed bar, not core's position:relative nav wrapper */
  .zoe-bar-right .zoe-bar-links { order: 2; position: static !important; }
  .zoe-bar-links .wp-block-navigation__responsive-container-open { padding: 12px 6px; }

  /* The open menu is the mockup's .bar-links.open: a solid band dropping
     below the fixed bar, not core's fullscreen white modal. !important
     beats core's fixed inset-0 overlay and its default light colors. */
  .zoe-bar-links .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute !important; inset: 100% 0 auto 0 !important;
    height: auto !important; min-height: 0;
    background: rgba(6,12,5,.97) !important; color: var(--zoe-cream) !important;
    padding: 16px 26px !important; overflow: visible;
    border-bottom: 1px solid rgba(231,205,142,.28);
  }
  .zoe-bar-links .is-menu-open .wp-block-navigation__responsive-dialog { padding: 0; }
  .zoe-bar-links .is-menu-open .wp-block-navigation__responsive-container-content,
  .zoe-bar-links .is-menu-open .wp-block-navigation__container {
    display: flex; flex-direction: column; align-items: center !important; gap: 2px; width: 100%; padding: 0;
  }
  .zoe-bar-links .is-menu-open .wp-block-navigation-item { justify-content: center; width: 100%; }
  .zoe-bar-links .is-menu-open .wp-block-navigation-item__content {
    color: var(--zoe-cream) !important; font-size: .72rem; padding: 12px 0; text-align: center;
    width: 100%; outline: none; /* micromodal auto-focuses the first link — no blue ring */
  }
  /* close X rides the band's top-right; the bar hamburger yields to it */
  .zoe-bar-links .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute; top: 10px; right: 16px; padding: 8px; color: var(--zoe-gold-hi);
  }
  .zoe-bar-links:has(.is-menu-open) .wp-block-navigation__responsive-container-open { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}