/* =============================================================
   Visit Rooibos Country — shared skin for every content page.

   ONE SOURCE OF TRUTH for the page furniture: reset, typography,
   nav, footer, and the field-guide apparatus (labels, section
   heads, caveats, source lines, figure tables, pull quotes).
   Page-specific layout stays in that page's own <style> block.

   Depends on brand/palettes.css — load that FIRST. Never hardcode
   a colour or a font here; every value comes from a token.

   Grammar rules, from docs/worklog.md section B. Deliberately
   absent and not to be added: centred hero, pill badge above a
   headline, three icon cards, near-black rounded CTA button,
   -0.03em headline tracking, grey-at-60% body text.
   Colour: --structure (bush green) is the furniture, --accent
   (tea red) is links, CTAs, drop caps and the wordmark only.
   ============================================================= */

/* --- reset + base --- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--ground);color:var(--text);line-height:1.68;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px;}
.wide{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.read{max-width:var(--measure);}

/* Skip link — keyboard users land on a page with a five-link nav first. */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gutter);top:10px;z-index:101;background:var(--ink);color:var(--on-dark);min-height:44px;display:inline-flex;align-items:center;
  font-family:var(--font-label);font-size:13px;padding:10px 16px;border-radius:var(--radius);}

/* --- the apparatus face. Labels, nav, tables, captions. NEVER body copy. --- */
.lbl{font-family:var(--font-label);font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--structure);}

/* --- nav --- */
nav.top{border-bottom:1px solid var(--line);}
nav.top .in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
.lockup{display:block;}
.lockup .pre{font-family:var(--font-logo);font-size:9.5px;font-weight:600;letter-spacing:.30em;text-transform:uppercase;color:var(--text-soft);margin-bottom:5px;}
.lockup svg{width:150px;height:auto;display:block;}
.lockup .post{font-family:var(--font-logo);font-size:10px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--structure);margin-top:6px;}
nav.top .links{display:flex;gap:22px;font-family:var(--font-label);font-size:12.5px;font-weight:500;padding-bottom:4px;}
nav.top .links a{color:var(--text);}
nav.top .links a:hover,nav.top .links a[aria-current="page"]{color:var(--accent);}
nav.top .links a[aria-current="page"]{border-bottom:2px solid var(--accent);padding-bottom:2px;}
/* --- MOBILE NAVIGATION ------------------------------------------------------
   Below 820px the seven links wrapped under the lockup at 12px: readable on a
   desk, not in the sun at arm's length, and it pushed the page content down
   before a word of it was seen. Replaced 23 Aug 2026 by a labelled menu button
   and a full-height panel carrying the WHOLE site, grouped.

   The word "Menu" sits beside the icon on purpose. NN/g's testing found the
   bare hamburger glyph is not universally understood and that hiding the
   navigation roughly halves discoverability; the label is their remedy and it
   costs nothing.

   The wrapped link row below is still the real navigation. It only gets hidden
   once brand/nav.js has built the panel and set .nav-on on <html>, so a script
   failure degrades to the old wrapped row rather than to no navigation at all.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  nav.top .in{flex-direction:column;align-items:stretch;gap:0;padding-bottom:0;}
  nav.top .links{gap:0 18px;flex-wrap:wrap;font-size:15px;padding:12px 0;margin-top:14px;border-top:1px solid var(--line);}
  nav.top .links a{display:inline-flex;align-items:center;min-height:44px;}
}

/* the button. Hidden until nav.js exists; never shown on desktop. */
.navbtn{display:none;}
@media(max-width:820px){
  .nav-on nav.top .links{display:none;}
  .nav-on nav.top .in{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;}
  .nav-on .navbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px 10px 12px;
    font-family:var(--font-label);font-size:15px;font-weight:600;letter-spacing:.02em;
    color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .nav-on .navbtn:active{background:var(--ground-alt);}
  .navbtn .bars{width:20px;height:20px;color:var(--structure);flex:none;}
}

/* the panel: a full-height sheet, not a dropdown. Closed = display:none, so
   nothing inside it can be tabbed to or read by a screen reader. */
.navpanel{display:none;}
.nav-open .navpanel{display:block;position:fixed;inset:0;z-index:100;background:rgba(58,21,8,.34);
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-open{overflow:hidden;}
.navpanel-in{background:var(--ground);min-height:100%;padding:0 var(--gutter) 40px;
  max-width:520px;margin-left:auto;box-shadow:-14px 0 40px rgba(58,21,8,.14);}
.navpanel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ground);}
.navclose{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  margin-right:-10px;background:none;border:0;color:var(--text);cursor:pointer;border-radius:var(--radius);}
.navclose:active{background:var(--ground-alt);}
.navclose svg{width:24px;height:24px;}
.navgroup{padding-top:22px;}
.navgroup .lbl{display:block;margin-bottom:4px;}
.navgroup ul{list-style:none;margin:0;max-width:none;}
.navgroup li{margin-bottom:0;border-bottom:1px solid var(--line);}
.navgroup li:last-child{border-bottom:0;}
.navgroup a{display:flex;align-items:center;min-height:52px;padding:8px 0;
  font-family:var(--font-title);font-weight:var(--weight-title);font-size:19px;color:var(--text);}
.navgroup a:hover{text-decoration:none;color:var(--accent);}
.navgroup a[aria-current="page"]{color:var(--accent);}
.navgroup a[aria-current="page"]::after{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:10px;flex:none;}
/* a visible focus ring is the whole point of a focus ring */
.navbtn:focus-visible,.navclose:focus-visible,.navgroup a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
@media(prefers-reduced-motion:no-preference){
  .nav-open .navpanel-in{animation:navin .18s ease-out;}
  @keyframes navin{from{transform:translateX(14px);opacity:.4}to{transform:none;opacity:1}}
}

/* --- breadcrumb --- */
.crumbs{font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:20px 0 0;color:var(--text-soft);}
.crumbs a{color:var(--text-soft);}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{opacity:.45;margin:0 8px;}
.crumbs .here{color:var(--structure);}

/* --- typography --- */
h1{font-family:var(--font-title);font-weight:var(--weight-title);font-size:clamp(34px,5.6vw,60px);line-height:1.04;letter-spacing:var(--track-title);text-transform:var(--uppercase-title);max-width:17ch;}
h2{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(25px,3.4vw,38px);line-height:1.12;margin-bottom:16px;max-width:22ch;letter-spacing:var(--track-display);text-transform:var(--uppercase-display);}
h3{font-family:var(--font-display);font-weight:var(--weight-display);font-size:21px;line-height:1.22;margin:24px 0 6px;letter-spacing:var(--track-display);text-transform:var(--uppercase-display);}
p{font-size:17.5px;line-height:1.66;max-width:var(--measure);margin-bottom:14px;}
.lede{font-size:clamp(17px,2vw,21px);line-height:1.44;max-width:42ch;}
p.first::first-letter{font-family:var(--font-display);font-weight:var(--weight-display);float:left;font-size:66px;line-height:.78;padding:6px 10px 0 0;color:var(--accent);}
ul,ol{margin:0 0 16px 20px;max-width:var(--measure);}
li{font-size:17.5px;line-height:1.62;margin-bottom:8px;}
strong{font-weight:700;}
em,i.sp{font-style:italic;}
section{padding:clamp(34px,5vw,58px) 0;border-top:1px solid var(--line);}

/* --- section head: label, then a rule to the margin --- */
.sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.sechead .lbl{white-space:nowrap;}
.sechead .rule{flex:1;height:1px;background:var(--line);}

/* --- figure table --- */
table.fig{width:100%;border-collapse:collapse;margin:6px 0 14px;max-width:640px;}
table.fig th,table.fig td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;}
table.fig thead th{font-family:var(--font-label);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft);border-bottom:2px solid var(--structure);}
table.fig td{font-size:17px;}
table.fig td.n{font-variant-numeric:tabular-nums;}
table.fig td small,table.fig th small{font-family:var(--font-label);font-size:11px;color:var(--text-soft);display:block;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;}

/* --- caveat: what we do NOT know. Used often, on purpose. --- */
.caveat{border-left:2px solid var(--structure);padding:4px 0 4px 18px;margin:20px 0;max-width:var(--measure);}
.caveat .lbl{display:block;margin-bottom:6px;}
.caveat p{margin-bottom:0;font-size:16.5px;}
.caveat p + p{margin-top:10px;}

/* a secondary note inside an .aside (was an inline font-size, which beat every
   stylesheet including the mobile overrides) */
.asidenote{font-size:13.5px;line-height:1.55;color:var(--text-soft);margin:12px 0 0;max-width:none;}
@media(max-width:820px){.asidenote{font-size:16px;}}

/* --- pull quote --- */
blockquote{border-left:2px solid var(--accent);padding:2px 0 2px 20px;margin:22px 0;max-width:46ch;}
blockquote p{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(19px,2.3vw,24px);line-height:1.34;margin-bottom:10px;max-width:none;letter-spacing:var(--track-display);text-transform:var(--uppercase-display);}
blockquote cite{font-family:var(--font-label);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);}

/* --- elsewhere: pointing the reader at somebody else's better page ---------
   Distinct from .srcline. A source line says "here is where we got this";
   an elsewhere block says "here is who else is good on this, go and read them".
   Being useful about the competition is the posture, not a concession. ------ */
.elsewhere{border:1px solid var(--line);background:var(--ground-alt);padding:20px 22px;margin:24px 0;max-width:var(--measure);}
.elsewhere .lbl{display:block;margin-bottom:12px;}
.elsewhere ul{list-style:none;margin:0;max-width:none;}
.elsewhere li{font-size:17px;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--line);margin-bottom:0;}
.elsewhere li:last-child{border-bottom:0;}
.elsewhere li b{display:block;font-weight:600;}
.elsewhere li span{font-family:var(--font-label);font-size:12.5px;color:var(--text-soft);display:block;margin-top:2px;}
@media(max-width:820px){.elsewhere li a{display:inline-flex;align-items:center;min-height:44px;}}

/* --- source line: every section that makes a claim ends with one --- */
.srcline{font-family:var(--font-label);font-size:11px;letter-spacing:.02em;color:var(--text-soft);border-top:1px solid var(--line);padding-top:11px;margin-top:20px;max-width:var(--measure);line-height:1.6;}
.srcline a{color:var(--structure-deep);}

/* --- data rail: a real sidebar of figures, not a row of stat tiles --- */
.rail{border-top:2px solid var(--structure);padding-top:14px;}
.rail .st{display:block;margin-bottom:14px;}
.rail dt{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft);margin-bottom:1px;}
.rail dd{margin:0 0 13px;font-size:16px;line-height:1.28;}
.rail dd small{display:block;font-family:var(--font-label);font-size:10.5px;color:var(--text-soft);margin-top:2px;letter-spacing:.01em;line-height:1.4;}

/* --- figure with caption (photos, once we have any) --- */
figure{margin:24px 0;max-width:var(--measure);}
figure img{width:100%;height:auto;border:1px solid var(--line);}
figcaption{font-family:var(--font-label);font-size:11.5px;line-height:1.55;color:var(--text-soft);padding-top:9px;}
figcaption b{color:var(--text);font-weight:600;}

/* --- next-steps grid at the foot of a page --- */
.onward{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid var(--line);margin-top:10px;}
.onward a{display:block;padding:20px 22px 20px 0;border-bottom:1px solid var(--line);}
.onward a b{font-family:var(--font-display);font-weight:var(--weight-display);font-size:19px;display:block;margin-bottom:4px;color:var(--text);letter-spacing:var(--track-display);}
.onward a:hover{text-decoration:none;}
.onward a:hover b{color:var(--accent);}
.onward a span{font-family:var(--font-label);font-size:12.5px;color:var(--text-soft);line-height:1.5;display:block;}

/* --- footer --- */
footer{background:var(--ink);color:var(--on-dark);padding:clamp(40px,6vw,66px) 0 34px;}
footer a{color:var(--bloom);}
footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:34px;}
@media(max-width:760px){footer .cols{grid-template-columns:1fr;gap:26px;}}
footer .lbl{color:var(--stone);display:block;margin-bottom:12px;}
footer p{font-size:15px;color:rgba(248,243,233,.82);max-width:44ch;margin-bottom:12px;}
footer ul{list-style:none;font-family:var(--font-label);font-size:13px;line-height:2.05;margin:0;max-width:none;}
footer li{margin-bottom:0;font-size:13px;}
footer ul a{color:rgba(248,243,233,.86);}
footer ul a:hover{color:var(--bloom);}
footer .base{border-top:1px solid rgba(248,243,233,.16);margin-top:32px;padding-top:18px;font-family:var(--font-label);font-size:11.5px;color:rgba(248,243,233,.6);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}


/* ---------------------------------------------------------------------------
   MOBILE ERGONOMICS — audited at a true 390px and 360px, most recently on
   23 August 2026 with a measuring harness (every element's box and computed
   font-size read in a 390px frame) rather than by eye.

   Two rules, applied to every page below 820px:

   1. Anything that is a NAVIGATION TARGET gets a 44px touch area
      (WCAG 2.5.8, Apple HIG). Inline links inside running prose are exempt —
      they are words, not buttons, and padding them would wreck the text block.
   2. Nothing meant to be read drops below 16px, and no secondary text below
      12.5px. The audit found an 11px caption; this site is read on a phone,
      outdoors, often in bright sun. That is the design condition, not a desk.
   3. A LINK LIST IS NAVIGATION, NOT SECONDARY TEXT. The 23 Aug harness found
      three lists breaking rule 2 while pretending to be furniture: the footer
      columns (13px), the on-this-page contents (15px) and the glossary jump
      list (13px). All three are how a reader gets around on a phone.
   --------------------------------------------------------------------------- */
@media(max-width:820px){
  nav.top .links a{display:inline-flex;align-items:center;min-height:44px;}
  .onward a{min-height:44px;}
  footer ul a{display:flex;align-items:center;min-height:44px;}
  footer li{margin-bottom:0;}

  p{font-size:17.5px;}
  li{font-size:17.5px;}
  .caveat p{font-size:17px;}
  .aside p,.aside li{font-size:16px;line-height:1.6;}
  .srcline{font-size:12.5px;}
  figcaption{font-size:12.5px;}
  figcaption a{display:inline-flex;align-items:center;min-height:32px;}
  footer ul,footer li{font-size:15.5px;}
  /* the tracked eyebrow labels and the rail's keys were 9-10px: legible on a
     desk, not at arm's length in the sun. Tracking lets them stay small, but
     not that small. */
  .lbl{font-size:11.5px;}
  .rail dt{font-size:11px;}
  .rail dd small{font-size:12.5px;}
  .onward a span{font-size:14.5px;}
  .elsewhere li span{font-size:13.5px;}
  .rail dd small{font-size:12px;}
  .crumbs{font-size:12.5px;}
  footer p{font-size:16px;}
}

/* --- motion: honour the user's preference, always --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------------------------------------------------------------------------
   PRINT.

   People print or save a PDF of an itinerary before driving into an area with
   patchy signal — which is the actual use case for /plan/ and /towns/. So the
   printed page drops the furniture, keeps the substance, and does the one thing
   screens cannot: prints the destination of every link, so a paper copy is
   still usable.
   --------------------------------------------------------------------------- */
@media print{
  nav.top,.crumbs,.onward,footer,.skip,.jump,#chooser,.elsewhere{display:none !important;}
  html,body{background:#fff !important;color:#000 !important;font-size:11.5pt;}
  .wide{max-width:none;padding:0;}
  section{padding:14pt 0;border-top:1px solid #ccc;break-inside:avoid;}
  h1{font-size:22pt;} h2{font-size:15pt;} h3{font-size:12.5pt;}
  h1,h2,h3{break-after:avoid;}
  p,li{font-size:11.5pt;line-height:1.45;max-width:none;}
  figure,table,.caveat,blockquote,.rail{break-inside:avoid;}
  figure.photo{max-width:9cm;}
  .srcline{border-top:1px solid #ccc;color:#444;font-size:9pt;}
  .statband .stat,.seasons .season{background:#fff !important;border:1px solid #ccc !important;
    box-shadow:none !important;break-inside:avoid;}
  /* a paper copy with invisible links is a dead end */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all;}
  main a[href^="/"]::after{content:" (visitrooiboscountry.com" attr(href) ")";font-size:8.5pt;color:#555;}
  a{text-decoration:underline;color:#000;}
  .rv{opacity:1 !important;transform:none !important;}
}
