/* ============================================================
   revel-3.css, shared chrome for revelstrengthandwellness.com

   Renamed from revel-2.css on 2026-08-19. _headers caches /*.css
   as immutable for a year, so the FILENAME is the cache key:
   any future edit needs a new name (revel-4.css) or returning
   visitors keep the stale copy.

   Nav, services dropdown and footer. Every page links this just
   before its own <style>, so a page can still override anything
   here by restating it inline.

   >> Edit the nav or footer HERE. These rules used to be
   >> copy-pasted into all 8 pages and had drifted apart.

   Three things deliberately stay per-page:

   1. The footer grid. Partner pages use two columns, the blog
      and privacy pages three, the homepage `1fr auto 1fr`.
      Real layout differences, not drift.
   2. The Gym's white social-hover and partner accent, which
      match its own blue identity rather than Revel periwinkle.
   3. Everything inside @media. A media query adds no
      specificity, so a rule moved here would sit BEFORE a
      page's inline base rule and quietly stop applying, that
      is how the collapsed mobile nav gets its flat styling.
   ============================================================ */


/* ── SHARED TEXT TOKENS (added 2026-08-12) ──
   Small copy at 300 weight in 58% white was legible by the numbers
   (6.9:1) but read thin on pure black. Everything under 13px now sits
   at 400 weight in 72% white (10.5:1). Sizes were deliberately NOT
   changed, so nothing reflows. These two values are the site's muted
   body colour, use them instead of typing a new rgba(). */
:root {
  --ink-muted: rgba(255,255,255,0.72);
  --ink-faint: rgba(255,255,255,0.58);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.rv-nav { position: sticky; top: 0; height: var(--nav-h); background: var(--dark-nav); border-bottom: 1px solid rgba(149,149,210,0.18); display: flex; align-items: center; justify-content: space-between; padding: 0 3rem; z-index: 1000; }
.rv-nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.rv-nav-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.rv-nav-links { display: flex; align-items: center; gap: 2rem; }
/* Desktop: flatten the link wrapper so the logo and every nav item are spread evenly across the full bar */
@media (min-width: 901px) { .rv-nav-links { display: contents; } .rv-nav { gap: 1.25rem; } }
.rv-nav-link { font-family: 'Raleway', sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.rv-nav-book { font-family: 'Raleway', sans-serif; background: var(--rv); color: #06060F; padding: 0.55rem 1.5rem; border-radius: var(--radius-sm); font-weight: 800; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; display: inline-block; box-shadow: 0 0 10px var(--rv-glow); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; border: 1px solid rgba(255,255,255,0.15); }
.rv-nav-book:hover { background: var(--rv-bright); box-shadow: 0 0 16px rgba(149,149,210,0.3); transform: translateY(-1px); }
.rv-nav-toggle { display: none; }
.rv-nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px; }
.rv-nav-hamburger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.rv-nav-dropdown { position: relative; }
.rv-dropdown-trigger { font-family: 'Raleway', sans-serif; font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); background: none; border: none; cursor: pointer; padding: 0.5rem 0; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.rv-dropdown-trigger:hover { color: #fff; }
.rv-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 16px; z-index: 2000; min-width: 250px; }
.rv-dropdown-menu-inner { background: var(--dark-nav); border: 1px solid rgba(149,149,210,0.22); border-radius: var(--radius-md); padding: 0.6rem 0; box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(149,149,210,0.08); position: relative; }
.rv-dropdown-menu-inner::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(149,149,210,0.22); }
.rv-nav-dropdown:hover .rv-dropdown-menu { display: block; }
.rv-nav-dropdown:hover .rv-caret { transform: rotate(180deg); opacity: 1; }
.rv-dropdown-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.25rem; font-family: 'Raleway', sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); text-decoration: none; transition: background 0.15s, color 0.15s; }
.rv-dropdown-item img { width: 22px; height: 22px; object-fit: contain; opacity: 1; flex-shrink: 0; transition: opacity 0.15s, filter 0.15s; }
.rv-footer-name { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: #fff; letter-spacing: 0.04em; margin-bottom: 1rem; }
.rv-footer-address { font-family: 'Raleway', sans-serif; font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.9; font-weight: 400; }
.rv-footer-address a { color: var(--rv-mid); text-decoration: none; display: block; margin-top: 0.5rem; font-weight: 400; }
.rv-footer-address a:hover { color: var(--rv-bright); }
.rv-footer-center { display: flex; align-items: center; justify-content: center; }
.rv-footer-right-col { text-align: right; }
.rv-footer-social { display: inline-flex; gap: 0.9rem; align-items: center; }
.rv-footer-social a { display: inline-flex; color: rgba(149,149,210,0.78); transition: color 0.2s, transform 0.15s; }
.rv-footer-social svg { width: 20px; height: 20px; }
.rv-footer-nav a { font-family: 'Raleway', sans-serif; font-size: 11px; color: rgba(255,255,255,0.72); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.rv-footer-nav a:hover { color: rgba(255,255,255,0.7); }
.rv-nav-dropdown:focus-within .rv-dropdown-menu, .rv-nav-dropdown.rv-dd-open .rv-dropdown-menu { display: block; }
.rv-nav-dropdown:focus-within .rv-caret, .rv-nav-dropdown.rv-dd-open .rv-caret { transform: rotate(180deg); opacity: 1; }
.rv-dropdown-trigger:focus-visible, .rv-dropdown-item:focus-visible, .rv-nav-link:focus-visible, .rv-nav-book:focus-visible { outline: 2px solid var(--rv-bright); outline-offset: 3px; border-radius: 3px; }
.rv-footer-legal { margin-top: 1rem; }
.rv-footer-legal a { font-family: 'Raleway', sans-serif; font-size: 11px; color: rgba(255,255,255,0.72); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; text-decoration: none; }
.rv-footer-legal a:hover { color: rgba(255,255,255,0.7); }


/* ── SKIP LINK (added 2026-08-19) ──
   Keyboard and screen-reader users previously had to tab through the whole
   nav, including the seven-item Services menu, on every page before reaching
   the content (WCAG 2.4.1 Bypass Blocks). Off-screen until focused. */
.rv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  background: var(--rv, #9595D2); color: #06060F;
  padding: 0.8rem 1.4rem; border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.rv-skip:focus { left: 1rem; top: 1rem; }

/* ── FOOTER NAV ON PARTNER PAGES (added 2026-08-19) ──
   Partner footers are a two-column grid (Revel | partner) with no room for
   the homepage's third nav column, so the links sit inline under the Revel
   side instead. Pages that already style .rv-footer-nav themselves are
   unaffected: they never carry this second class. */
.rv-footer-nav.rv-foot-nav-inline {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin-top: 1.25rem; justify-content: flex-start;
}