/* Bear Park — shared site chrome: top bar + floating pill nav + menu sheet.
   One component on every page (landing, centres, blog, depth pages).
   Extracted from the landing (site-v2.css) with the July 2026 decisions applied:
   labels in Neue Haas (not Inter), square action button, static page label.
   Vanilla only — no GSAP dependency; the menu animates with CSS transitions. */

:root { --nav-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---------- primitives ---------- */
.link-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size:var(--t-eyebrow); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
  opacity: .85; transition: opacity .2s;
}
.link-line:hover { opacity: 1; }

/* ---------- top bar (absolute, over the page hero) ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px clamp(15px, 2.625vw, 48px);
  color: #f2eee3;
}
.topbar .word { grid-column: 2; height: 34px; width: auto; }
.topbar .wordlink { grid-column: 2; justify-self: center; display: inline-flex; }
.topbar .wordlink .word { grid-column: auto; }
.topbar .right { grid-column: 3; justify-self: end; }
/* topbar CTA: plain text, no paw glyph (the editorial-system .link-line adds one; Josh
   wants the top-right CTA clean), reveals a solid button on hover (square) */
.topbar .link-line::before { content: none; display: none; }
.topbar .link-line {
  border: 1px solid transparent;
  padding: 9px 16px;
  opacity: 1;
  transition: border-color .28s var(--nav-ease), background .28s var(--nav-ease), color .28s var(--nav-ease);
}
.topbar .link-line:hover {
  border-color: #c94e1d;
  background: #c94e1d;
  color: #fff;
}

/* ---------- floating pill nav ---------- */
.pillnav {
  position: fixed; left: 50%; bottom: 28px; z-index: 70;
  transform: translateX(-50%);
  display: flex; align-items: stretch;
  background: rgba(28, 34, 27, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f2eee3;
  width: 216px; height: 46px;
  box-shadow: 0 10px 30px rgba(20, 26, 20, .35);
}
.pillnav .seg {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: inherit; cursor: pointer; padding: 0;
}
.pillnav .seg.logo { width: 52px; border-right: 1px solid rgba(242, 238, 227, .14); }
.pillnav .seg.logo img { height: 24px; width: auto; }
/* the label is static: it names the page you are on (set in markup, never scripted) */
.pillnav .seg.label {
  flex: 1;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.pillnav .seg.burger { width: 52px; border-left: 1px solid rgba(242, 238, 227, .14); flex-direction: column; gap: 4px; }
.pillnav .seg.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s var(--nav-ease), opacity .3s; }
.pillnav .seg.burger span:nth-child(2) { width: 12px; align-self: flex-start; margin-left: 17px; }
body.menu-open .pillnav .seg.burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .pillnav .seg.burger span:nth-child(2) { opacity: 0; }
body.menu-open .pillnav .seg.burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.pillnav .seg:focus-visible { outline: 1.5px solid #f2eee3; outline-offset: -4px; }

/* ---------- menu (windowed sheet, rises out of the pill) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 65;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s .5s;
}
body.menu-open .menu-overlay { visibility: visible; transition-delay: 0s; }
.menu-sheet {
  position: fixed; left: 50%; bottom: 76px;
  transform: translateX(-50%);
  transform-origin: bottom center;
  width: min(430px, 92vw);
  max-height: min(66vh, 560px);
  box-sizing: border-box;
  background: rgba(28, 34, 27, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #f2eee3;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(20, 26, 20, .45);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
  overflow: auto;
  pointer-events: auto;
  clip-path: inset(100% 0 0 0 round 20px);
  transition: clip-path .26s var(--nav-ease);
}
body.menu-open .menu-sheet { clip-path: inset(0% 0 0 0 round 20px); transition-duration: .38s; }
.menu-eyebrow {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; opacity: .5; margin-bottom: clamp(14px, 2vh, 22px);
}
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list a {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.18;
  color: #f2eee3; text-decoration: none; width: fit-content;
  white-space: nowrap;
  opacity: 0; transform: translateY(22px);
  transition: opacity .25s ease, transform .3s var(--nav-ease), color .25s ease;
}
body.menu-open .menu-list a { opacity: .94; transform: none; }
body.menu-open .menu-list a:nth-child(1) { transition-delay: .14s; }
body.menu-open .menu-list a:nth-child(2) { transition-delay: .18s; }
body.menu-open .menu-list a:nth-child(3) { transition-delay: .22s; }
body.menu-open .menu-list a:nth-child(4) { transition-delay: .26s; }
body.menu-open .menu-list a:nth-child(5) { transition-delay: .30s; }
body.menu-open .menu-list a:nth-child(6) { transition-delay: .34s; }
body.menu-open .menu-list a:nth-child(7) { transition-delay: .38s; }
/* hover accent is the brand orange (Josh, 10 Jul): action colour, not white */
.menu-list a:hover { opacity: 1 !important; color: #d8753d; transform: translateX(8px); transition-delay: 0s; }
.menu-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: clamp(20px, 2.8vh, 30px);
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 400; letter-spacing: .04em; line-height: 1.7;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .28s var(--nav-ease);
}
/* the parents guide rides the menu as a quiet row above the main action
   (10 Jul) - it opens the guide modal (site/guide-modal.js) */
.menu-guide {
  margin-top: clamp(14px, 2vh, 20px);
  display: inline-flex; align-items: baseline; gap: 8px; width: fit-content;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 238, 227, .62); text-decoration: none;
  border-bottom: 1px solid rgba(242, 238, 227, .3); padding-bottom: 3px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .28s var(--nav-ease), color .2s, border-color .2s;
}
body.menu-open .menu-guide { opacity: 1; transform: none; transition-delay: .32s; }
.menu-guide:hover { color: #d8753d; border-color: #d8753d; }

.menu-quote {
  margin-top: clamp(18px, 2.4vh, 28px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 24px;
  border: 1px solid rgba(245, 242, 234, .28); border-radius: 0;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: #f2eee3; text-decoration: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .28s var(--nav-ease), background .25s, color .25s, border-color .25s;
}
body.menu-open .menu-meta { opacity: .6; transform: none; transition-delay: .3s; }
body.menu-open .menu-quote { opacity: 1; transform: none; transition-delay: .34s; }
.menu-quote-arr { font-size:var(--t-ui-15); }
.menu-quote:hover { background: #c94e1d; color: #fff; border-color: #c94e1d; }
.menu-list a:focus-visible, .menu-quote:focus-visible { outline: 1.5px solid #f2eee3; outline-offset: 3px; }

@media (max-width: 520px) {
  .menu-meta { grid-template-columns: 1fr; }
  /* the centred wordmark and the Book a tour link meet on narrow screens;
     shrink both slightly to give them clearance */
  .topbar { padding-top: 20px; padding-bottom: 20px; }
  .topbar .word { height: 26px; }
  .topbar .link-line { padding: 7px 12px; font-size: 10.5px; }
}

/* ---------- mobile chrome (reworked 10 Jul, Josh: "the just-CTA pill is
   messy - give mobile the full site nav, keep the burger"): the floating
   pill keeps the full chrome on phones - bear logo, the Book a tour action
   as its own orange segment, and the burger. The old fixed corner burger
   and the CTA-only orange pill are retired. ---------- */
.topbar .mburger { display: none; }
.pillnav .pill-cta { display: none; }
@media (max-width: 820px) {
  .topbar .right { display: none; }
  /* phones get the burger back at the TOP RIGHT (Josh, 11 Jul) - it rides
     the topbar, inherits its ink/cream, and opens the same menu sheet;
     the pill's burger still serves mid-page */
  .topbar .mburger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px;
    grid-column: 3; justify-self: end;
    width: 44px; height: 44px; margin: -6px -8px -6px 0;
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  }
  .topbar .mburger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--nav-ease), opacity .3s; }
  .topbar .mburger span:nth-child(2) { width: 13px; align-self: flex-end; margin-right: 12px; }
  body.menu-open .topbar .mburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .topbar .mburger span:nth-child(2) { opacity: 0; }
  body.menu-open .topbar .mburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .pillnav { width: auto; height: 48px; }
  .pillnav .seg.label { display: none; } /* the page name yields to the action on small screens */
  .pillnav .seg.logo { width: 52px; border-right: 0; }
  .pillnav .seg.burger { width: 52px; border-left: 1px solid rgba(242, 238, 227, .14); }
  .pillnav .pill-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 22px; height: 100%;
    background: #c94e1d;
    font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
    font-size:var(--t-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: #fff; text-decoration: none; white-space: nowrap;
  }
  /* the sheet rises out of the pill, as on desktop, sized for a phone
     (10 Jul: the footer auto-open read too big) */
  .menu-sheet {
    width: min(400px, 92vw);
    max-height: min(58vh, 520px);
    padding: 22px 24px 24px;
  }
  .menu-list a { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .menu-quote { padding: 15px 20px; margin-top: 16px; }
  .menu-meta { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillnav { position: absolute; }
  .menu-sheet, .menu-list a, .menu-meta, .menu-quote, .pillnav .seg.burger span { transition: none; }
}