/* Burger menu — extracted from style.css for use on (site) pages */
/* ============================================================
   Slide-out burger menu (homepage, top-right)
   One white circle: morphs burger ⇄ X and slides across, with the dark
   pill revealing the links exactly in its wake (reverses on close).
   ============================================================ */
.hb-menu {
  position: fixed;
  top: 90px;                          /* centres the 60px bar on the 200px-wide logo (95px tall, centre ≈ 119.5px) */
  right: clamp(1.5rem, 5vw, 4.5rem);  /* align with the header's right padding */
  z-index: 3000;
  height: 60px;
  pointer-events: none;               /* only the circle / open bar are interactive */
}
/* dark pill: closed it is a 52px circle hidden behind the toggle; it grows
   leftward (and gains its 60px height) to reveal the links, its left edge
   tracking the sliding circle exactly */
.hb-menu__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;                 /* closed = circle footprint; required so width can
                                  animate (auto can't be transitioned) */
  height: 60px;
  overflow: hidden;
  background: transparent;      /* transparent when closed → no dark ring behind the circle */
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1), background 0.3s ease;
}
.hb-menu.is-open .hb-menu__bar {
  width: var(--hb-full, 600px);
  background: #14141b;
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1), background 0s;  /* dark instantly on open */
}
.hb-menu__inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  padding: 0 8px 0 0;
  white-space: nowrap;
  visibility: hidden;                 /* nothing peeks behind the circle when fully closed */
  transition: visibility 0s 0.5s;     /* stays visible through the close animation, hides at the end */
}
.hb-menu.is-open .hb-menu__inner {
  visibility: visible;
  transition: visibility 0s 0s;       /* visible immediately on open */
}
.hb-menu__slot { flex: none; width: 60px; height: 60px; }
/* seat the circle lands on */

/* links */
.hb-menu__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-menu__links a {
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  top: -2px;                 /* match the contact text's ~2px upward nudge */
  transition: color 0.2s ease;
}
.hb-menu__links a:hover { color: #ff4844; }
/* contact pill */
.hb-menu__contact {
  flex: none;
  background: #ff4844;
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.575rem 1.6rem 0.825rem;  /* text nudged ~2px up; box height unchanged */
  border-radius: 999px;
  margin-left: 0.3rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hb-menu__contact:hover { background: #e63c38; transform: translateY(-1px); }
/* the one circle: burger ⇄ X, slides right→left leading the reveal */
.hb-menu__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: auto;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.hb-menu.is-open .hb-menu__toggle {
  transform: translateX(calc(-1 * (var(--hb-full, 600px) - 60px)));
}
.hb-menu__toggle:focus-visible { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); }
/* icon: two red bars that morph into an X */
.hb-menu__icon { position: relative; width: 28px; height: 15px; }
.hb-menu__icon span {
  position: absolute;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #ff4844;
  transition: transform 0.3s ease, top 0.3s ease;
}
.hb-menu__icon span:nth-child(1) { top: 0; }
.hb-menu__icon span:nth-child(2) { top: 10px; }
.hb-menu.is-open .hb-menu__icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hb-menu.is-open .hb-menu__icon span:nth-child(2) { top: 6px; transform: rotate(-45deg); }

/* ---- utility bar: two dropdowns (Choose Site + language) on a dark pill,
   sitting left of the circle. The burger panel opens over the top of them. ---- */
.hb-menu__util {
  position: absolute;
  top: 0;
  right: 72px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  background: #14141b;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  color: #fff;
  white-space: nowrap;
  z-index: 1;
  /* opacity / pointer-events / transition are driven inline by SiteMenu:
     burger open = instant hide, burger close = delayed fade-in, scroll = slow fade */
}
.hb-menu__util-sep { flex: none; width: 1px; height: 22px; background: rgba(255, 255, 255, 0.28); }
.hb-menu__dd { position: relative; display: flex; align-items: center; }
.hb-menu__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: color 0.2s ease;
}
.hb-menu__dd-btn:hover { color: #ff4844; }
.hb-menu__globe { flex: none; }
.hb-menu__chev { flex: none; transition: transform 0.25s ease; }
.hb-menu__dd.is-open .hb-menu__chev { transform: rotate(180deg); }
.hb-menu__dd-panel {
  position: absolute;
  top: 100%;
  margin-top: 14px;
  left: 0;
  min-width: 180px;
  background: #14141b;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  z-index: 5;
}
.hb-menu__dd--lang .hb-menu__dd-panel { left: auto; right: 0; }
.hb-menu__dd.is-open .hb-menu__dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
}
.hb-menu__dd-panel a,
.hb-menu__dd-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.hb-menu__dd-panel a:hover,
.hb-menu__dd-panel button:hover { background: rgba(255, 255, 255, 0.02); color: #ff4844; }
.hb-menu__dd-panel a.is-active,
.hb-menu__dd-panel button.is-active { color: #ff4844; }
.hb-menu__dd-code { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; font-weight: 600; }
/* Choose Site links: Greycliff, normal case */
.hb-menu__dd--sites .hb-menu__dd-panel { min-width: 220px; }
.hb-menu__dd--sites .hb-menu__dd-panel a {
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.02rem;
}
.hb-menu__bar { z-index: 2; }
.hb-menu__toggle { z-index: 3; }
@media (max-width: 760px) { .hb-menu__util { display: none; } }

@media (max-width: 760px) {
  .hb-menu.is-open .hb-menu__bar { max-width: calc(100vw - 24px); }
}

/* A menu restored from the previous page is already open, so paint it that way
   rather than replaying the opening animation on every navigation. The class is
   set for one frame on restore, then dropped so the user's own close animates.
   Matches horrible-global, which does the same. */
.hb-menu.is-noanim .hb-menu__bar,
.hb-menu.is-noanim .hb-menu__inner,
.hb-menu.is-noanim .hb-menu__toggle,
.hb-menu.is-noanim .hb-menu__icon span,
.hb-menu.is-noanim .hb-menu__links li,
.hb-menu.is-noanim .hb-menu__contact,
.hb-menu.is-noanim .hb-menu__tier {
  transition: none !important;
}

/* current page's nav link */
.hb-menu__links a.is-current,
.hb-menu__dd-panel a.is-current { color: #ff4844; }

@media (prefers-reduced-motion: reduce) {
  .hb-menu { transition: none; }
}

/* ============================================================
   Mobile (<=760px): full-screen overlay sheet
   The desktop pill animates its width open leftward; a phone has no
   room for that horizontal row, so the same markup is re-laid-out as
   a full-viewport sheet that fades in with the links stacked large.
   ============================================================ */
@media (max-width: 760px) {
  /* the utility pill has no room on the bar — its Choose Site / language
     options are re-rendered inside the sheet as .hb-menu__tier instead */
  .hb-menu__util { display: none; }

  /* the sheet is full-bleed, so it has to clear the sticky promo bar
     (z-index 4000), which otherwise shows through along the top edge */
  .hb-menu.is-open { z-index: 5000; }

  /* keep the logo in front of the open sheet. .site-header is absolute at
     top:32px, so it has to go fixed too — otherwise, with the page scrolled,
     it sits off-screen above the viewport-fixed sheet. Its only visible child
     at this width is the logo; the rest of the header is display:none.
     Two selectors because the layouts differ: (frontend) renders
     .site-header, the (site) pages render .wk-top. */
  html.hb-menu-locked .site-header,
  html.hb-menu-locked .wk-top {
    position: fixed;
    z-index: 5001;
  }

  /* panel fills the viewport rather than growing leftward. position:fixed
     escapes .hb-menu's 60px box (no transformed ancestor, so it anchors
     to the viewport) */
  .hb-menu__bar {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
    background: #14141b;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s 0.28s;
  }
  .hb-menu.is-open .hb-menu__bar {
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transition: opacity 0.28s ease, visibility 0s 0s;
  }

  /* the row becomes a column; the panel scrolls if the content is taller
     than the screen (small phones, landscape) */
  .hb-menu__inner {
    position: static;
    width: auto;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    white-space: normal;
    padding: 8.5rem clamp(1.5rem, 7vw, 2.5rem) 3rem;
    visibility: inherit;          /* the sheet's own visibility drives it */
    transition: none;
  }
  .hb-menu__slot { display: none; }   /* no circle seat in the column */

  /* primary links: large, stacked, hairline-separated */
  .hb-menu__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hb-menu__links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .hb-menu__links a {
    display: block;
    top: 0;                        /* drop the desktop 2px optical nudge */
    padding: 0.5em 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0em;
  }

  /* nothing slides on mobile — the circle stays on the bar as the X */
  .hb-menu.is-open .hb-menu__toggle { transform: translateX(0); }

  /* contact: half-width pill under the links. The sheet stretches its column,
     so the pill needs a width and an align-self of its own to sit at the
     links' left edge rather than spanning the sheet. */
  .hb-menu__contact {
    /* half the sheet, with a floor: at 50% of a 320-360px screen the label
       wraps to two lines, and 9.5rem is the width that holds "Get In Touch"
       on one. It only bites below ~390px; from there up the pill is exactly
       half. Side padding is trimmed from 1.6rem for the same reason. */
    width: max(50%, 9.5rem);
    align-self: flex-start;
    margin: 2rem 0 0;
    text-align: center;
    font-size: 1.15rem;
    padding: 0.9rem 1.1rem 1.05rem;
  }

  /* secondary tier: the utility bar's options, reachable on a phone */
  .hb-menu__tier { display: block; margin-top: 2.5rem; }
  .hb-menu__tier-label {
    display: block;
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'greycliff-cf', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hb-menu__tier-sites {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
  }
  .hb-menu__tier-sites a {
    display: block;
    padding: 0.4rem 0;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: 'greycliff-cf', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    transition: color 0.2s ease;
  }
  .hb-menu__tier-sites a:hover,
  .hb-menu__tier-sites a.is-active { color: #ff4844; }
  .hb-menu__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .hb-menu__lang {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    font-family: 'greycliff-cf', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .hb-menu__lang.is-active {
    background: #ff4844;
    border-color: #ff4844;
    color: #fff;
  }

  /* staggered rise: each row trails the sheet's fade by a beat */
  .hb-menu__links li,
  .hb-menu__contact,
  .hb-menu__tier {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.38s ease, transform 0.38s ease;
  }
  .hb-menu.is-open .hb-menu__links li,
  .hb-menu.is-open .hb-menu__contact,
  .hb-menu.is-open .hb-menu__tier {
    opacity: 1;
    transform: translateY(0);
  }
  .hb-menu.is-open .hb-menu__links li:nth-child(1) { transition-delay: 0.10s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(2) { transition-delay: 0.15s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(3) { transition-delay: 0.20s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(4) { transition-delay: 0.25s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(5) { transition-delay: 0.30s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(6) { transition-delay: 0.35s; }
  .hb-menu.is-open .hb-menu__contact { transition-delay: 0.40s; }
  .hb-menu.is-open .hb-menu__tier { transition-delay: 0.45s; }

  /* While the sheet is up the page behind it must not scroll. iOS ignores
     overflow:hidden here, so the body is pinned as well; JS holds the offset
     it is pinned at so nothing jumps when the sheet closes. */
  html.hb-menu-locked,
  html.hb-menu-locked body { overflow: hidden; }
  html.hb-menu-locked body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* the sheet still fades, but nothing travels */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hb-menu__links li,
  .hb-menu__contact,
  .hb-menu__tier {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* the secondary tier belongs to the mobile sheet only */
@media (min-width: 761px) {
  .hb-menu__tier { display: none; }
}

/* The burger's scroll lift moves `top` rather than transforming: a transform
   on the sheet's parent would make that parent the containing block and
   strand the viewport-fixed sheet inside it. */
@media (max-width: 760px) {
  /* The burger goes to the top of the screen as soon as the page moves and
     comes back down when it returns to the top. The open sheet follows the
     same two states, so tapping the burger never moves it: the X appears
     exactly where the circle was. */
  .hb-menu { transition: top 0.25s ease; }
  /* At rest the burger sits at 40px; once the page moves it drops back to
     where it sits on desktop. Both states are spelled out against
     promo-dismissed too, which otherwise wins on specificity when the bar has
     been closed. */
  .hb-menu,
  html.promo-dismissed .hb-menu { top: 4.5rem; }
  html.is-scrolled .hb-menu,
  html.is-scrolled.promo-dismissed .hb-menu { top: 0; }

  /* Logo and X both sit near the top edge while the sheet is up. The logo is
     moved by the header's own padding rather than by `top`, which several
     other rules already lay claim to. */
  /* The two layouts mark this header up differently and size their logo
     differently, which is why the sheet kept looking unalike from page to
     page. While the sheet is up, both are pinned to the same numbers. */
  html.hb-menu-locked .site-header,
  html.hb-menu-locked .wk-top {
    /* Opening the sheet must not move the logo: it keeps the `top` and padding
       it already has, and only the positioning scheme changes (absolute ->
       fixed, above, so it holds still while the body is pinned). The two
       layouts therefore stay at their own heights, as they are when closed.
       promo.css transitions `top` over 0.35s for both; nothing should slide. */
    transition: none;
  }
  html.hb-menu-locked .logo-img,
  html.hb-menu-locked .wk-top__logo img {
    display: block;
    /* the size it is with the sheet closed — opening the menu should not
       resize the wordmark */
    width: 180px;
    height: auto;
    max-width: none;
  }
  html.hb-menu-locked .hb-menu { transition: none; }
  /* the header band is full width and above the sheet, so it would swallow
     taps meant for the X; only the logo inside it needs to be clickable */
  html.hb-menu-locked .site-header,
  html.hb-menu-locked .wk-top { pointer-events: none; }
  html.hb-menu-locked .site-header .logo,
  html.hb-menu-locked .wk-top__logo { pointer-events: auto; }

  /* The links start below the logo instead of running straight into it. The
     logo now stays at its closed position (bottom edge ~150px at 390px) rather
     than lifting to the top of the screen, so this clears that, not the old
     116px. */
  .hb-menu__inner {
    padding-top: 12.5rem;
    padding-bottom: 2rem;
  }
  /* everything is sized to fit the screen without the sheet having to scroll */
  .hb-menu__links a { padding: 0.32em 0; }
  .hb-menu__contact { margin-top: 1.5rem; }
  .hb-menu__tier { margin-top: 3rem; }

  /* The sheet is the height of what is actually visible. 100vh on iOS is the
     taller viewport behind the browser chrome, which pushed the last rows out
     of sight and left the sheet scrolling to reach them. */
  /* dvh, not svh: svh is the viewport with the browser bars showing, so once
     they retract the sheet came up short and the page showed underneath. The
     contents are sized to fit svh, and dvh is never smaller. */
  .hb-menu.is-open .hb-menu__bar { height: 100dvh; }

  /* The finger fills the corner under the list. It is a pseudo-element rather
     than a background because a background cannot be rotated, and it rocks the
     way the rabbit on the hero does. */
  .hb-menu.is-open .hb-menu__bar::after {
    content: '';
    position: absolute;
    right: 3.5rem;
    bottom: 1rem;
    width: 40vw;
    max-width: 190px;
    aspect-ratio: 203.7 / 233;
    background: url('/img/horrible-finger.svg') no-repeat right bottom / contain;
    transform-origin: 50% 90%;
    animation: fingerRock 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes fingerRock {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hb-menu.is-open .hb-menu__bar::after { animation: none; }
  }

  /* the separators sit between the links, so the last one has nothing to
     divide from */
  .hb-menu__links li:last-child { border-bottom: 0; }

  /* the site you are on is the only one in colour */
  .hb-menu__tier-sites a { color: rgba(255, 255, 255, 0.45); }
  .hb-menu__tier-sites a:hover,
  .hb-menu__tier-sites a.is-active { color: #ff4844; }

  /* the sites read as one list, not five separate rows */
  .hb-menu__tier-sites { gap: 0; }
  .hb-menu__tier-sites a { padding: 0.15rem 0; }
}

/* Moved out of style.css so this component lives in one file. */
.site-header, .hb-menu, .wk-top { transition: top 0.35s ease; }
html.promo-dismissed .hb-menu { top: 58px; }