/* ===================================================================
   runwell-site.css — RunWell4Life shared design system + site chrome.
   A faithful re-skin of GolfWell4Life's golf-site.css: SAME structure,
   SAME geometry, SAME fonts — only the colour tokens change to the
   "Trailhead" runner palette: deep navy primary, fresh emerald-green
   accent (the energy/CTA colour), a sky-blue support, cool cream.
   Distinct from GolfWell4Life (which is green-PRIMARY + gold) — here
   navy dominates and green is the accent. Chrome classes are namespaced
   `rw-` so they never clash. Pair with runwell-chrome.js.
   Brand line: "The Life of Running and the Running of Life."
   =================================================================== */

:root {
  /* "Trailhead" palette — navy primary + emerald-green accent */
  --ink:#14334E; --ink-deep:#0C2236;            /* navy — headers / hero / nav (golf's green slot) */
  --energy:#16A75F; --energy-light:#46C98A;      /* emerald green — CTA + accent (golf's gold slot) */
  --stride:#3E84B8; --stride-deep:#2C648F;       /* sky blue — secondary (golf's navy slot) */
  --text-dark:#1E2A33; --text-med:#52606B; --text-muted:#8A96A0;
  --cream:#F6F8F7; --sand:#E9EFEC; --white:#FFFFFF; --border:#DCE3DF;
  --f-head:Georgia,"Times New Roman",serif;
  --f-body:Calibri,"Helvetica Neue",Arial,sans-serif;
}

/* Baseline typography — every page shares the same fonts. */
body{ font-family:var(--f-body); color:var(--text-dark); margin:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--f-head); }

/* ── Top navigation ───────────────────────────────────────────── */
.rw-nav{ position:sticky; top:0; z-index:120; background:var(--ink); border-bottom:4px solid var(--energy); }
.rw-nav-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.rw-brand{ font-family:var(--f-head); font-weight:700; font-size:22px; color:#fff; letter-spacing:.5px; text-decoration:none; }
.rw-brand:hover{ text-decoration:none; }
.rw-brand .l4{ color:var(--energy-light); font-style:italic; }
.rw-links{ display:flex; gap:22px; align-items:center; }
.rw-links a{ color:#fff; font-size:14px; font-weight:500; letter-spacing:.5px; padding:6px 2px; border-bottom:2px solid transparent; text-decoration:none; transition:border-color .2s,color .2s; }
.rw-links a:hover{ color:var(--energy-light); text-decoration:none; border-bottom-color:var(--energy-light); }
.rw-cta{ background:var(--energy); color:#fff !important; padding:9px 18px !important; border-radius:4px; font-weight:700; }
.rw-cta:hover{ background:var(--energy-light); color:var(--ink-deep) !important; border-bottom-color:transparent !important; }
.rw-burger{ background:none; border:1.5px solid rgba(255,255,255,.5); color:#fff; font-size:18px; line-height:1; padding:8px 12px; border-radius:4px; cursor:pointer; margin-left:6px; }
.rw-burger:hover{ border-color:var(--energy-light); color:var(--energy-light); }
.rw-cart{ position:relative; color:#fff; text-decoration:none; font-size:19px; padding:6px 2px; display:inline-flex; align-items:center; border-bottom:2px solid transparent; }
.rw-cart:hover{ text-decoration:none; }
.rw-cart-count{ display:none; background:var(--energy-light); color:var(--ink-deep); border-radius:11px; padding:1px 7px; font-size:12px; font-weight:700; margin-left:4px; }
@media (max-width:860px){ .rw-links a:not(.rw-cta):not(.rw-cart){ display:none; } }
@media (max-width:520px){
  .rw-nav-inner{ padding:12px 14px; }
  .rw-brand{ font-size:19px; }
  .rw-links{ gap:10px; }
  .rw-cta{ padding:8px 12px !important; font-size:13px; }
  .rw-burger{ padding:7px 10px; }
}

/* ── Slide-out family menu ────────────────────────────────────── */
.rw-fam-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .25s; z-index:200; }
.rw-fam-overlay.active{ opacity:1; visibility:visible; }
.rw-fam{ position:fixed; top:0; right:-340px; width:340px; max-width:88vw; height:100vh; background:linear-gradient(135deg,var(--ink) 0%,var(--ink-deep) 100%); box-shadow:-3px 0 18px rgba(0,0,0,.35); transition:right .28s ease; z-index:201; overflow-y:auto; padding-bottom:40px; }
.rw-fam.active{ right:0; }
.rw-fam-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.18); }
.rw-fam-head .t{ font-family:var(--f-head); color:#fff; font-size:20px; font-weight:700; }
.rw-fam-head .t .l4{ color:var(--energy-light); font-style:italic; }
.rw-fam-close{ background:none; border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.rw-fam-close:hover{ color:var(--energy-light); }
.rw-fam-group{ padding:16px 14px 4px; }
.rw-fam-title{ font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--energy-light); padding:0 8px 8px; }
.rw-fam-item{ display:flex; align-items:center; padding:11px 12px; color:#fff; text-decoration:none; border-radius:8px; margin-bottom:3px; transition:background .15s; font-size:15px; }
.rw-fam-item:hover{ background:rgba(255,255,255,.12); text-decoration:none; color:#fff; }
.rw-fam-item .ic{ font-size:19px; width:30px; text-align:center; margin-right:12px; }
.rw-fam-item .ext{ margin-left:auto; font-size:12px; opacity:.55; }
.rw-fam-divider{ height:1px; background:rgba(255,255,255,.14); margin:8px 22px; }
.rw-fam-note{ font-family:var(--f-body); font-size:12px; color:rgba(255,255,255,.6); padding:8px 22px 0; line-height:1.5; }

/* ── Reusable hero (ink gradient + coral rule) ────────────────── */
.rw-hero{ background:linear-gradient(135deg,var(--ink-deep) 0%,var(--ink) 55%,var(--stride-deep) 140%); color:#fff; text-align:center; padding:64px 24px; border-bottom:6px solid var(--energy); }
.rw-hero .eyebrow{ font-family:var(--f-body); color:var(--energy-light); letter-spacing:3px; text-transform:uppercase; font-size:13px; font-weight:700; margin-bottom:12px; }
.rw-hero h1{ font-family:var(--f-head); color:#fff; font-size:40px; margin-bottom:14px; line-height:1.15; }
.rw-hero p{ max-width:660px; margin:0 auto; opacity:.95; font-size:17px; line-height:1.6; }
.rw-btn{ display:inline-block; font-weight:700; padding:13px 28px; border-radius:4px; margin:6px 5px 0; text-decoration:none; }
.rw-btn-primary{ background:var(--energy); color:#fff; }
.rw-btn-primary:hover{ background:var(--energy-light); color:var(--ink-deep); text-decoration:none; }
.rw-btn-outline{ border:2px solid var(--energy-light); color:var(--energy-light); }
.rw-btn-outline:hover{ background:var(--energy-light); color:var(--ink-deep); text-decoration:none; }
@media (max-width:560px){ .rw-hero h1{ font-size:30px; } }

/* ── Section + cards ──────────────────────────────────────────── */
.rw-section{ background:var(--cream); padding:56px 24px; }
.rw-section.alt{ background:var(--sand); }
.rw-section-inner{ max-width:1100px; margin:0 auto; }
.rw-section h2{ color:var(--ink); font-size:28px; text-align:center; margin:0 0 8px; }
.rw-rule{ width:60px; height:3px; background:var(--energy); margin:0 auto 36px; }
.rw-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.rw-card{ background:var(--white); border:1px solid var(--border); border-radius:8px; padding:24px; }
.rw-card .tag{ display:inline-block; font-size:11px; font-weight:700; padding:4px 11px; border-radius:3px; margin-bottom:12px; letter-spacing:.5px; }
.rw-card .tag-ink{ background:var(--ink); color:#fff; }
.rw-card .tag-teal{ background:var(--stride); color:#fff; }
.rw-card .tag-energy{ background:var(--energy); color:#fff; }
.rw-card h3{ color:var(--ink); font-size:19px; margin:0 0 8px; }
.rw-card p{ font-size:14px; color:var(--text-med); line-height:1.6; margin:0; }

/* ── Footer ───────────────────────────────────────────────────── */
.rw-footer{ background:var(--ink-deep); color:rgba(255,255,255,.85); border-top:6px solid var(--energy); margin-top:0; }
.rw-footer-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding:48px 24px 30px; }
.rw-footer h4{ font-family:var(--f-head); color:var(--energy-light); font-size:18px; margin:0 0 12px; }
.rw-footer p{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.8); }
.rw-footer ul{ list-style:none; margin:0; padding:0; }
.rw-footer li{ margin:7px 0; }
.rw-footer a{ color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; }
.rw-footer a:hover{ color:var(--energy-light); text-decoration:none; }
.rw-footer .created{ font-size:13px; color:rgba(255,255,255,.6); margin-top:14px; line-height:1.7; }
.rw-footer .created a{ color:rgba(255,255,255,.85); border-bottom:1px dotted rgba(255,255,255,.5); }
.rw-footer-bottom{ border-top:1px solid rgba(255,255,255,.14); text-align:center; padding:16px 24px; font-size:13px; color:rgba(255,255,255,.6); }
@media (max-width:820px){ .rw-footer-inner{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:480px){ .rw-footer-inner{ grid-template-columns:1fr; } }

/* ── GrowWell4Life "included free" bonus banner (used across course pages) ── */
.rw-grow-bonus{ max-width:900px; margin:0 auto; background:linear-gradient(135deg,#0E5A4E 0%,var(--stride-deep) 130%); color:#fff; border-radius:14px; border-left:5px solid var(--energy); padding:22px 26px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.rw-grow-bonus .gb-badge{ flex:0 0 auto; background:var(--energy); color:#fff; font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:8px 14px; border-radius:20px; }
.rw-grow-bonus .gb-body{ flex:1; min-width:240px; }
.rw-grow-bonus h4{ font-family:var(--f-head); color:#fff; font-size:18px; margin:0 0 6px; }
.rw-grow-bonus p{ font-size:13.5px; line-height:1.6; margin:0 0 10px; opacity:.95; color:#fff; }
.rw-grow-bonus p b{ color:#fff; }
.rw-grow-bonus a{ color:#fff; font-weight:700; font-size:13.5px; text-decoration:underline; }
.rw-grow-bonus a:hover{ color:var(--energy-light); }