/*
 * Run Fit Well V2 — site shell
 * ---------------------------------------------------------------------------
 * Owns: header, brand lockup, primary nav, NESTED DROPDOWNS, breadcrumb bar,
 * footer. Colours come from tokens.css only.
 *
 * Header/footer values reproduce design-reference/Corporate Wellness-Final-
 * Design.html exactly. The dropdown block is NEW WORK (plan.md §15.0) — no
 * design contains a dropdown — and is built entirely from existing tokens so it
 * sits inside the same visual system.
 */

/* ================================================================== *
 * HEADER  — frozen, as designed
 * ================================================================== */
.rfw-site-header {
  position: relative;
  z-index: 80;
  background: var(--rfw-header-bg);
  color: var(--rfw-on-dark);
  border-bottom: 1px solid var(--rfw-line-header);
}

.rfw-nav {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* ------------------------------------------------------------------ *
 * Brand lockup
 * ------------------------------------------------------------------ */
.rfw-logo-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: max-content;
}

.rfw-logo-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: contain;
  display: block;
}

/*
 * The wordmark leans, as it does in the logo artwork.
 *
 * 16deg is measured, not chosen: the wordmark in the supplied logo was
 * thresholded and sheared through a range of angles, and 16deg from vertical
 * is where its letter stems stand upright — the point where the column
 * profile is sharpest. skewX is negative because the CSS y-axis points down,
 * so a negative shear is the one that carries the top of a glyph to the right.
 *
 * A skew rather than `font-style: italic` because Manrope ships no italic at
 * all. Asking for one would leave the browser to synthesise an oblique at an
 * angle it picks itself, which varies between browsers and is nowhere near
 * the artwork's lean. Transforms do not affect layout, so nothing around the
 * lockup moves.
 *
 * Weight 800 is Manrope's ExtraBold, already in the enqueued font URL, and is
 * the heaviest weight this project loads.
 */
.rfw-logo-word strong {
  display: block;
  color: var(--rfw-on-dark);
  font-family: Manrope, sans-serif;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.1;
  transform: skewX(-16deg);
  transform-origin: left center;
}

.rfw-logo-word small {
  display: block;
  margin-top: 4px;
  color: var(--rfw-accent-on-dark);
  font-size: .56rem;
  letter-spacing: .20em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Nav links — the design's direct-child selector.
 * ------------------------------------------------------------------ */
.rfw-nav-links {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: .9rem;
}

.rfw-nav-links > a:not(.rfw-btn) {
  color: var(--rfw-nav-link);
}

/* Hover/open colour changes were instant. A short transition is the whole
   "premium" difference here — no movement, no scale, nothing that could shift
   layout or distract. Colour and background only, so these stay
   compositor-cheap and are neutralised wholesale by the global
   prefers-reduced-motion rule in base.css. */
.rfw-nav-links > a:not(.rfw-btn),
.rfw-nav-item > a,
.rfw-sub-toggle,
.rfw-sub a {
  transition: color .2s ease, background-color .2s ease;
}

.rfw-nav-links > a:not(.rfw-btn):hover,
.rfw-nav-links > a.active {
  color: var(--rfw-on-dark);
}

.rfw-menu-btn {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rfw-line-btn-dark);
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  transition: background-color .2s ease, border-color .2s ease;
}

/* The three bars are absolutely positioned rather than stacked with margins,
   so opening only changes `transform`. A position change cannot be animated —
   stacked bars would snap to the centre and then rotate. This way the
   hamburger morphs into the X in one continuous movement.

   Offsets are from the button's centre: -7 / -1 / +5 puts the bar centres 6px
   apart, matching the original stacked spacing. */
.rfw-menu-btn span,
.rfw-menu-btn::before,
.rfw-menu-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin: 0;
  background: var(--rfw-on-dark);
  transition:
    transform .24s cubic-bezier(.22, .61, .36, 1),
    opacity .16s ease;
}

.rfw-menu-btn::before {
  transform: translate(-50%, -7px);
}

.rfw-menu-btn span {
  transform: translate(-50%, -1px);
}

.rfw-menu-btn::after {
  transform: translate(-50%, 5px);
}

/* Open: the outer bars cross, the middle one fades out. Driven by the same
   `rfw-menu-open` body class that shows the drawer, so the icon and the drawer
   can never disagree about which state they are in. */
.rfw-menu-open .rfw-menu-btn::before {
  transform: translate(-50%, -1px) rotate(45deg);
}

.rfw-menu-open .rfw-menu-btn span {
  opacity: 0;
  transform: translate(-50%, -1px) scaleX(.3);
}

.rfw-menu-open .rfw-menu-btn::after {
  transform: translate(-50%, -1px) rotate(-45deg);
}

.rfw-menu-open .rfw-menu-btn {
  border-color: var(--rfw-on-dark);
}

/* ================================================================== *
 * DROPDOWNS — new work (plan.md §15.0, §15.6)
 * ================================================================== */
.rfw-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Matches `.rfw-nav-links > a` exactly, so a toggle is indistinguishable
   from a link until it is opened. */
.rfw-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .9rem;
  line-height: inherit;
  color: var(--rfw-nav-link);
}

.rfw-nav-item > a {
  color: var(--rfw-nav-link);
}

.rfw-nav-item > a:hover,
.rfw-nav-item > a.active,
.rfw-sub-toggle:hover,
.rfw-nav-item.is-open > .rfw-sub-toggle {
  color: var(--rfw-on-dark);
}

.rfw-sub-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}

.rfw-nav-item.is-open > .rfw-sub-toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* ------------------------------------------------------------------ *
 * Desktop panel
 * ------------------------------------------------------------------ */
.rfw-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 90;
  display: none;
  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--rfw-line-header);
  border-radius: 18px;
  background: var(--rfw-ink-2);
  box-shadow: var(--rfw-shadow);
}

.rfw-nav-item.is-open > .rfw-sub,
.rfw-nav-item:hover > .rfw-sub {
  display: block;
  animation: rfw-sub-in .16s ease both;
}

/* Opening animates; closing stays instant, which reads as responsive rather
   than sluggish. An animation is used rather than switching to
   opacity/visibility because `linksIn()` in theme.js filters candidates on
   `offsetParent !== null` — visibility:hidden keeps that non-null and would
   silently break keyboard navigation. Keeping `display` toggling avoids it.

   prefers-reduced-motion is already handled globally in base.css, which
   forces animation-duration to .01ms on every element. */
@keyframes rfw-sub-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The level-2 panel flies out sideways, so it slides in on the same axis. */
@keyframes rfw-sub-in-side {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rfw-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--rfw-nav-link);
  font-size: .88rem;
  white-space: nowrap;
}

.rfw-sub a.active {
  background: var(--rfw-fill-subtle);
  color: var(--rfw-on-dark);
}

/* Touch devices report hover unreliably and often leave it stuck after a tap,
   so the hover styling is gated to pointers that genuinely hover. The tap and
   focus states below cover touch instead. */
@media (hover: hover) {
  .rfw-sub a:hover {
    background: var(--rfw-fill-subtle);
    color: var(--rfw-on-dark);
  }
}

/* Nested item inside a panel: row with its own toggle. */
.rfw-sub .rfw-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rfw-sub .rfw-nav-item > a {
  flex: 1 1 auto;
}

.rfw-sub .rfw-sub-toggle {
  padding: 9px 12px;
  font-size: .88rem;
}

/* Level-2 flyout, to the side.
   `left:100%` is measured from the nested item, which sits inside the parent
   panel's 10px padding — so the offset must clear that padding plus the gap,
   or the two panels overlap. */
.rfw-sub--level-2 {
  top: -10px;
  left: 100%;
  margin-left: 16px;
}

.rfw-nav-item.is-open > .rfw-sub--level-2,
.rfw-nav-item:hover > .rfw-sub--level-2 {
  animation-name: rfw-sub-in-side;
}

/* Hover bridge.
   Measured: 5px of genuinely empty space sits between the level-1 panel's
   right edge and this panel's left edge (the 16px margin, less the parent's
   10px padding and 1px border). Crossing it leaves the cursor over neither
   element, so :hover drops and mouseleave fires — the panel disappears just
   as the user reaches for it.

   This transparent strip spans that gap so the hover chain never breaks. It
   is hit area only: no background, no visual change, and it sits behind the
   panel's own content. */
.rfw-sub--level-2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 22px;
  z-index: -1;
}

/* ================================================================== *
 * FOOTER — frozen, as designed. Flat, no dropdowns.
 * ================================================================== */
.rfw-footer {
  background: var(--rfw-footer-bg);
  color: var(--rfw-footer-text);
  padding: 54px 0 28px;
}

.rfw-footer-grid {
  display: grid;
  /* Brand, then one track per link column.
     The count comes from footer.php as --rfw-footer-cols, because two
     columns are conditional: Corporate Wellness is dropped when no menu is
     assigned, Contact when no details are filled in. A hard-coded
     repeat() would leave a dead 1fr track behind whichever is absent and
     open a gap at the right edge. The fallback, 4, is the Services /
     Corporate Wellness / Locations / Company & Legal set. */
  grid-template-columns: 1.35fr repeat(var(--rfw-footer-cols, 4), 1fr);

  /*
   * The row gap is fixed; the column gap tightens as columns are added.
   *
   * At the original four link columns the tracks are ~200px and the longest
   * footer link fits on one line. Each extra column costs every track about
   * 38px, and by six the tracks are ~134px and almost everything wraps. The
   * container cannot grow (--rfw-max is the site's measure) and the type must
   * not shrink, so the only slack left is the gutter. Six pixels per column
   * buys back roughly a word per line and bottoms out at 22px, which is still
   * a clear gutter rather than a seam.
   *
   * The subtraction is zero at four columns, so a footer that has not gained a
   * column keeps the original 42px exactly.
   */
  row-gap: 42px;
  column-gap: clamp(22px, calc(42px - (var(--rfw-footer-cols, 4) - 4) * 6px), 42px);
}

/* Contact lines. Long addresses and international numbers must wrap rather
   than push the grid wide. */
.rfw-footer-contact a,
.rfw-footer-contact p {
  display: block;
  margin: 0 0 5px;
  padding: 5px 0;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.rfw-footer-contact a:hover {
  color: var(--rfw-on-dark);
}

.rfw-footer-brand p {
  max-width: 330px;
}

.rfw-footer-col strong {
  display: block;
  margin-bottom: 12px;
  color: var(--rfw-on-dark);
  font-family: Manrope, sans-serif;
}

.rfw-footer-col a {
  display: block;
  padding: 5px 0;
  font-size: .9rem;
}

.rfw-footer-col a:hover {
  color: var(--rfw-on-dark);
}

/* Wide desktop: menu links stay on one line. Each 1fr track's minimum is its
   content, so the column holding the longest link ("Employee Wellness
   Workshops", ~206px) takes the few px it needs from the others. Below
   1200px links wrap as before, so a narrow viewport can never overflow.
   Contact is excluded: an email address must stay free to wrap. */
@media (min-width: 1200px) {
  .rfw-footer-col:not(.rfw-footer-contact) a {
    white-space: nowrap;
  }
}

/* The legal links moved into a column of their own, so this row now carries
   the copyright alone. space-between is kept rather than removed: it is inert
   with a single child, and it is what keeps the row correct if anything is
   ever added beside the copyright again. */
.rfw-footer-bottom {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--rfw-line-on-dark);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .8rem;
}

/* ------------------------------------------------------------------ *
 * Social icons
 *
 * Rendered only for platforms with a configured URL (see
 * rfw_social_links()), so this block styles whatever is present and
 * never reserves space for a platform that is absent.
 * ------------------------------------------------------------------ */
.rfw-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.rfw-footer-social a {
  /* 44x44 meets the WCAG 2.5.8 target size while the mark stays 20x20. */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border-radius: 50%;
  color: var(--rfw-footer-text);
  transition: color .2s ease, background .2s ease;
}

.rfw-footer-social li:not(:first-child) a {
  margin-left: 0;
}

.rfw-footer-social a:hover {
  color: var(--rfw-on-dark);
  background: var(--rfw-fill-subtle);
}

.rfw-footer-social svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------------ *
 * Legal links
 * ------------------------------------------------------------------ */
.rfw-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.rfw-footer-legal a {
  color: var(--rfw-footer-text);
}

.rfw-footer-legal a:hover {
  color: var(--rfw-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================================================================== *
 * RESPONSIVE — the design's two breakpoints, unchanged.
 * ================================================================== */
@media (max-width: 1020px) {
  .rfw-nav-links {
    display: none;
    position: fixed;
    inset: 94px 0 0;
    /*
     * The offset above measures from the top of the VIEWPORT, which assumes
     * the header starts at y=0. When a logged-in user has the WordPress admin
     * bar, `html { margin-top }` pushes the document down but this fixed
     * offset does not follow — so the drawer was painting over the bottom of
     * the header and cutting the close button in half. What survived was the
     * top arc of the circle and the top tips of the X strokes, which is what
     * read as stray dots.
     *
     * Core declares --wp-admin--admin-bar--height on <html> (32px, and 46px
     * below 782px) and only ships that stylesheet when the bar actually
     * renders, so the 0px fallback makes this an exact no-op for logged-out
     * visitors while covering both bar sizes on its own.
     */
    top: calc(94px + var(--wp-admin--admin-bar--height, 0px));
    z-index: 100;
    padding: 34px 24px;
    background: var(--rfw-header-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 1.1rem;
    overflow-y: auto;
  }

  .rfw-menu-open .rfw-nav-links {
    display: flex;
  }

  /* The arithmetic above positions the drawer correctly; this is the
     guarantee. The drawer is z-index 100 and the header 80, so without this
     any future mismatch would hide the close button again. The header has its
     own opaque background, so the drawer simply slides underneath it.

     Scoped to the open state, so normal header stacking is untouched. */
  .rfw-menu-open .rfw-site-header {
    z-index: 110;
  }

  .rfw-menu-btn {
    display: block;
  }

  /* Dropdowns become inline expandable blocks, not overlays. */
  .rfw-nav-item {
    display: block;
    width: 100%;
  }

  .rfw-nav-item > a,
  .rfw-sub-toggle {
    padding: 8px 0;
    font-size: 1.1rem;
  }

  .rfw-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .rfw-sub {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0 0 6px 14px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--rfw-line-on-dark);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Hover must not open panels on touch. */
  .rfw-nav-item:hover > .rfw-sub {
    display: none;
  }

  .rfw-nav-item.is-open > .rfw-sub {
    display: block;
  }

  .rfw-sub a {
    white-space: normal;
    font-size: 1rem;
  }

  .rfw-sub--level-2 {
    top: auto;
    left: auto;
    margin-left: 14px;
  }

  /* ---------------------------------------------------------------- *
   * Drawer rows — consistent height, real tap targets, tap feedback.
   *
   * Measured before this change: the toggle rows (Services, Locations) were
   * 45px tall but the plain top-level links (About Us, Contact Us, Blog) were
   * only 29px, because the padding rule above covers `.rfw-nav-item > a` and
   * `.rfw-sub-toggle` but not a bare `.rfw-nav-links > a`. That read as
   * uneven spacing and left three links below the 44px minimum touch target
   * (WCAG 2.5.8).
   *
   * The `padding-inline` / negative `margin-inline` pair is what lets the tap
   * highlight extend past the text without moving it: the two cancel out, so
   * every label stays on the drawer's 24px left edge exactly as before.
   * ---------------------------------------------------------------- */
  .rfw-nav-links > a:not(.rfw-btn) {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    font-size: 1.1rem;
  }

  .rfw-nav-links > a:not(.rfw-btn),
  .rfw-nav-links > .rfw-nav-item > a,
  .rfw-nav-links > .rfw-nav-item > .rfw-sub-toggle,
  .rfw-sub a {
    min-height: 44px;
    padding-inline: 10px;
    margin-inline: -10px;
    border-radius: 10px;
  }

  /* Touch feedback. `:active` fires on tap on every mobile browser, unlike
     `:hover`, so this is what actually gives the press its response. */
  .rfw-nav-links a:not(.rfw-btn):active,
  .rfw-sub-toggle:active {
    background: var(--rfw-fill-subtle);
    color: var(--rfw-on-dark);
  }

  /* Open state, made obvious without adding a new colour: the parent brightens
     and its panel's existing left rule picks up the accent. */
  .rfw-nav-item.is-open > .rfw-sub-toggle,
  .rfw-nav-item.is-open > a {
    color: var(--rfw-on-dark);
  }

  .rfw-nav-item.is-open > .rfw-sub {
    border-left-color: var(--rfw-accent);
  }

  /* A parent that is also a real page renders link + separate toggle. The
     toggle was 31x25px — far too small to hit reliably. */
  .rfw-sub .rfw-sub-toggle,
  .rfw-nav-links > .rfw-nav-item > .rfw-sub-toggle {
    min-width: 44px;
    justify-content: center;
  }

  .rfw-sub .rfw-sub-toggle {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 1.1rem;
  }

  /* ---------------------------------------------------------------- *
   * Drawer CTA.
   *
   * It already sat on the 24px container edge; what was wrong was the
   * spacing. The drawer's `gap` is 6px, so the button sat 6px under "Blog"
   * while the drawer's own bottom padding left 34px beneath it — visibly
   * lopsided. 28px of margin brings the gap above to 34px, matching.
   *
   * Size, colour, radius and typography are untouched.
   * ---------------------------------------------------------------- */
  .rfw-nav-links > .rfw-btn {
    align-self: flex-start;
    margin-top: 28px;
  }

  /* No lift on touch: the global .rfw-btn--primary:hover translate would stick
     after a tap on mobile browsers. Scoped to the drawer, so the desktop
     header CTA keeps its hover exactly as designed. */
  .rfw-nav-links > .rfw-btn--primary:hover {
    transform: none;
  }

  .rfw-nav-links > .rfw-btn:active {
    transform: scale(.985);
  }

  .rfw-nav-links > .rfw-btn:focus-visible {
    outline: 2px solid var(--rfw-accent);
    outline-offset: 3px;
  }

  .rfw-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Brand gets its own row so the four link columns pair up 2 × 2
     instead of leaving the last one alone. One track at <=650px, where
     this is a no-op. */
  .rfw-footer-brand {
    grid-column: 1 / -1;
  }

  /* ---------------------------------------------------------------- *
   * Tablet + mobile: centre the whole footer.
   *
   * Scoped to footer ancestors throughout. `.rfw-logo-lockup` is the SAME
   * element the header uses (template-parts/shell/brand.php), so centring
   * the bare class would move the navbar logo too. Every rule below names a
   * footer ancestor, which makes that structurally impossible.
   *
   * Desktop (>1020px) is untouched: no rule here escapes this media block.
   * ---------------------------------------------------------------- */
  .rfw-footer-grid {
    text-align: center;
  }

  .rfw-footer-brand .rfw-logo-lockup {
    justify-content: center;
  }

  /* Already max-width:330px; without auto margins it would stay left. */
  .rfw-footer-brand p {
    margin-inline: auto;
  }

  .rfw-footer-bottom {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
  }

  .rfw-footer-social {
    justify-content: center;
  }

  /* The negative offset aligns the first icon's optical edge with the text
     above on desktop; centred layouts must not inherit it. */
  .rfw-footer-social a {
    margin-left: 0;
  }

  .rfw-footer-legal {
    justify-content: center;
  }
}

@media (max-width: 650px) {
  .rfw-nav {
    min-height: 82px;
  }

  .rfw-logo-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .rfw-nav-links {
    inset: 82px 0 0;
    top: calc(82px + var(--wp-admin--admin-bar--height, 0px));
  }

  .rfw-logo-word strong {
    font-size: .86rem;
  }

  .rfw-footer-grid {
    grid-template-columns: 1fr;
  }

  .rfw-footer-bottom {
    flex-direction: column;
  }
}