/* ===================================================================
   golf-site.css — GolfWell4Life shared design system + site chrome.
   A faithful recolour of FlourishIQ's fiq-site.css: SAME structure,
   SAME geometry, SAME fonts — only the colour tokens change
   (maroon → fairway green, with clubhouse navy + trophy gold).
   Chrome classes are namespaced `gw-` so they never clash. Pair with
   golf-chrome.js (injects the nav + family menu + footer).
   Brand approved by Alten du Plessis, 15 Jun 2026.
   =================================================================== */

:root {
  --green:#1B5E20; --green-dark:#0D4A14; --gold:#DAA520; --gold-light:#E8C76B;
  --navy:#1A3A52; --text-dark:#2C2C2C; --text-med:#555555; --text-muted:#7A7A7A;
  --cream:#FDF8F0; --parchment:#FAF3E3; --white:#FFFFFF; --border:#E5DCC8;
  --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 ───────────────────────────────────────────── */
.gw-nav{ position:sticky; top:0; z-index:120; background:var(--green); border-bottom:4px solid var(--gold); }
.gw-nav-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.gw-brand{ font-family:var(--f-head); font-weight:700; font-size:22px; color:#fff; letter-spacing:.5px; text-decoration:none; }
.gw-brand:hover{ text-decoration:none; }
.gw-brand .l4{ color:var(--gold-light); font-style:italic; }
.gw-links{ display:flex; gap:22px; align-items:center; }
.gw-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; }
.gw-links a:hover{ color:var(--gold-light); text-decoration:none; border-bottom-color:var(--gold-light); }
.gw-cta{ background:var(--gold); color:#fff !important; padding:9px 18px !important; border-radius:4px; font-weight:700; }
.gw-cta:hover{ background:var(--gold-light); color:var(--green-dark) !important; border-bottom-color:transparent !important; }
.gw-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; }
.gw-burger:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.gw-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; }
.gw-cart:hover{ text-decoration:none; }
.gw-cart-count{ display:none; background:var(--gold-light); color:var(--green-dark); border-radius:11px; padding:1px 7px; font-size:12px; font-weight:700; margin-left:4px; }
@media (max-width:860px){ .gw-links a:not(.gw-cta):not(.gw-cart){ display:none; } }
@media (max-width:520px){
  .gw-nav-inner{ padding:12px 14px; }
  .gw-brand{ font-size:19px; }
  .gw-links{ gap:10px; }
  .gw-cta{ padding:8px 12px !important; font-size:13px; }
  .gw-burger{ padding:7px 10px; }
}

/* ── Slide-out family menu ────────────────────────────────────── */
.gw-fam-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .25s; z-index:200; }
.gw-fam-overlay.active{ opacity:1; visibility:visible; }
.gw-fam{ position:fixed; top:0; right:-340px; width:340px; max-width:88vw; height:100vh; background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%); box-shadow:-3px 0 18px rgba(0,0,0,.35); transition:right .28s ease; z-index:201; overflow-y:auto; padding-bottom:40px; }
.gw-fam.active{ right:0; }
.gw-fam-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.18); }
.gw-fam-head .t{ font-family:var(--f-head); color:#fff; font-size:20px; font-weight:700; }
.gw-fam-head .t .l4{ color:var(--gold-light); font-style:italic; }
.gw-fam-close{ background:none; border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.gw-fam-close:hover{ color:var(--gold-light); }
.gw-fam-group{ padding:16px 14px 4px; }
.gw-fam-title{ font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-light); padding:0 8px 8px; }
.gw-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; }
.gw-fam-item:hover{ background:rgba(255,255,255,.12); text-decoration:none; color:#fff; }
.gw-fam-item .ic{ font-size:19px; width:30px; text-align:center; margin-right:12px; }
.gw-fam-item .ext{ margin-left:auto; font-size:12px; opacity:.55; }
.gw-fam-divider{ height:1px; background:rgba(255,255,255,.14); margin:8px 22px; }
.gw-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 (green gradient + gold rule) ───────────────── */
.gw-hero{ background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%); color:#fff; text-align:center; padding:64px 24px; border-bottom:6px solid var(--gold); }
.gw-hero .eyebrow{ font-family:var(--f-body); color:var(--gold-light); letter-spacing:3px; text-transform:uppercase; font-size:13px; font-weight:700; margin-bottom:12px; }
.gw-hero h1{ font-family:var(--f-head); color:#fff; font-size:40px; margin-bottom:14px; line-height:1.15; }
.gw-hero p{ max-width:660px; margin:0 auto; opacity:.95; font-size:17px; line-height:1.6; }
.gw-btn{ display:inline-block; font-weight:700; padding:13px 28px; border-radius:4px; margin:6px 5px 0; text-decoration:none; }
.gw-btn-primary{ background:var(--gold); color:var(--green-dark); }
.gw-btn-primary:hover{ background:var(--gold-light); text-decoration:none; }
.gw-btn-outline{ border:2px solid var(--gold-light); color:var(--gold-light); }
.gw-btn-outline:hover{ background:var(--gold-light); color:var(--green-dark); text-decoration:none; }
@media (max-width:560px){ .gw-hero h1{ font-size:30px; } }

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

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