/* =========================================================================
   Te Reo Towns — Stage 3a stylesheet
   Structure and styling only. No audio, share, GA4 or learner-reveal logic.
   Tokens copied verbatim from docs/te-reo-towns-project-log.md.
   ========================================================================= */

:root{
  /* Surfaces (sampled from the live kotui.co.nz homepage) */
  --white:#FFFFFF;
  --mint-pale:#F5FAF9;
  --mint-mid:#C5E1DB;
  --navy:#001326;

  /* Brand */
  --green:#3E9A86;
  --green-btn:#348171;
  --green-btn-hover:#2E7263;
  --pounamu:#7AE1B8;
  --ochre:#E5897F;
  --grey:#858585;

  /* Spacing, 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radius */
  --r-btn:4px; --r-sm:6px; --r-md:12px; --r-lg:20px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms; --t-med:240ms; --t-slow:420ms;
}

/* ============================ BASE ============================ */

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2{line-height:1.15;margin:0}
p{margin:0}
img{max-width:100%}

.shell{max-width:1180px;margin:0 auto;padding:0 var(--s5)}

/* Visible only to screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:50;
  background:var(--navy);color:#fff;padding:var(--s3) var(--s4);
  border-radius:var(--r-btn);font-size:.9rem;font-weight:500;text-decoration:none;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:var(--s4)}

/* ============================ BUTTONS ============================ */

.btn{
  font-family:inherit;font-size:15px;font-weight:500;line-height:1;
  padding:14px 26px;border-radius:var(--r-btn);border:0;
  background:var(--green-btn);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2);
  text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease);
}
.btn:hover{background:var(--green-btn-hover)}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}

/* ============================ HEADER ============================ */

/* Header treatment: a single mint hairline under the logo row, mirroring the
   rule at the top of the footer so the page is bookended by the same line. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);padding:var(--s4) 0;
  border-bottom:1px solid var(--mint-mid);
}
/* 78px, not the 54px used in 3a. The tagline band is 23px of the 256px-tall
   logo file, so at 54px it rendered ~4.9px and was unreadable; 78px puts it at
   ~7.0px, which is about the smallest size that reads without effort. The
   lockup is 245px wide here, well above the 120px minimum the brand guidelines
   recommend — that minimum looks too low, and is worth raising with Te Ariki.
   Costs 24px of vertical space above the map. */
.topbar .logo{height:78px;width:auto;display:block}

/* Trimmed from 48/32 to 32/24. Together with the topbar this buys back about
   40px above the map, so more of it lands in the first screen. */
.hero{text-align:center;padding:var(--s6) 0 var(--s5)}
.hero .leadin{
  font-size:1rem;font-weight:500;letter-spacing:.02em;
  color:var(--green-btn);margin-bottom:var(--s2);
}
.hero h1{
  font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.02em;
}
/* The claim and the instruction are two elements so each wraps on its own; as a
   single block the sentence broke mid-clause and left "Click any" dangling.

   36ch is measured, not guessed: the break point was tested in real Poppins
   across widths from 26ch to 42ch, and 36ch is where the two lines come out
   most even (38px apart rather than 300px), giving

       |From Kaitaia to Waihōpai, Kōtui learners are|
       |in more than 40 towns across Aotearoa.|

   text-wrap:balance refines it further where supported; the 36ch cap means
   browsers without it still break in the same place. Both are set in ch, so
   they reflow with the type scale rather than at a fixed pixel width. */
.hero .subtitle{
  font-size:clamp(1rem,2.2vw,1.25rem);font-weight:400;
  color:rgba(0,19,38,.84);max-width:36ch;
  margin:var(--s4) auto 0;
  text-wrap:balance;
}
/* Quieter and one step down the scale: it is the instruction, not the claim.
   58ch keeps it on a single line at desktop and lets it wrap on a phone. */
.hero .subnote{
  font-size:clamp(.9rem,1.7vw,1.05rem);font-weight:400;
  color:rgba(0,19,38,.62);max-width:58ch;
  margin:var(--s2) auto 0;
  text-wrap:balance;
}

/* ============================ MAP ============================ */

/* The frame carries side padding so labels sitting at 95% of the map width
   have somewhere to overhang without triggering a horizontal scrollbar. */
.mapframe{padding:var(--s5) 0 var(--s7)}

/* 840px is the design width. The min() shrinks the map on narrow desktop
   windows so the widest right-hand label — Te Ika-a-Māui, sitting at 95.9%
   of the map width — still has room to overhang without being clipped.
   Measured in Poppins: it needs 82px of clearance past the map edge. */
.mapwrap{
  position:relative;
  width:min(840px, calc(100vw - 120px));
  max-width:840px;
  margin:0 auto;
  aspect-ratio:1/1;
}

.land{position:absolute;inset:0;color:var(--mint-mid);pointer-events:none}
.land svg{width:100%;height:100%;display:block}

.lines{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
/* non-scaling-stroke keeps this at a true 0.8 screen pixels. Without it the
   100-unit viewBox scales the stroke up to roughly 6.7px. */
.lines line{
  stroke:var(--navy);stroke-width:.8;opacity:.16;
  vector-effect:non-scaling-stroke;
}

/* Geographic dot — decorative only, never the interactive element */
.gdot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--ochre);opacity:.75;
  transform:translate(-50%,-50%);pointer-events:none;
}

/* Transparent 44x44 tap target sitting over the dot. Used below 900px,
   where the labels are gone. The visible dot is never enlarged. */
.dotbtn{
  position:absolute;width:44px;height:44px;
  transform:translate(-50%,-50%);
  background:none;border:0;padding:0;margin:0;
  border-radius:50%;cursor:pointer;display:none;
}
.dotbtn:focus-visible{outline:3px solid var(--green-btn);outline-offset:2px}

/* ---- Label pin ---- */

.pin{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  background:none;border:0;padding:6px;margin:0;
  font-family:inherit;cursor:pointer;border-radius:10px;
  white-space:nowrap;
}
.pin.ico-left{flex-direction:row}
.pin.ico-right{flex-direction:row-reverse}
.pin:focus-visible{outline:3px solid var(--green-btn);outline-offset:2px}

.pin .nm{line-height:1.22;text-align:left}
.pin .reo{display:block;font-weight:700;font-size:15px;color:var(--navy)}
.pin .eng{display:block;font-weight:400;font-size:11.5px;color:rgba(0,19,38,.62)}

/* The learner-count reveal that used to sit here was removed on 20 Aug, along
   with the `learners` field in js/map-data.js and the fmtCount/recut logic in
   index.html. Nothing now changes a pin's height when it plays, which is why
   the leader lines no longer need recutting on playback. */

/* ---- Island labels (Option C: green rule) ----
   Te Ika-a-Māui and Te Waipounamu have no dot, so they never get a leader
   line. The 2px green rule sits on the land-facing side and does that job:
   it anchors the label and marks the two islands as a different kind of
   thing from the towns. */

.pin.island .nm{padding-left:12px;border-left:2px solid var(--green)}
.pin.island.ico-right .nm{
  padding-left:0;padding-right:12px;
  border-left:0;border-right:2px solid var(--green);
  text-align:right;
}
.pin.island .reo{font-size:17px;letter-spacing:.01em}
.pin.island .eng{
  font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-btn);
}

/* List rows carry a lighter version of the same idea so the islands still
   read as a set on narrow screens, without the map-only rule. */
.row.island .eng{
  font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-btn);
}
.row.island{box-shadow:inset 0 0 0 1px rgba(0,19,38,.1),inset 3px 0 0 var(--green)}
.row.island:hover{box-shadow:inset 0 0 0 1px rgba(0,19,38,.32),inset 3px 0 0 var(--green)}

/* ---- Speaker button ---- */

.spk{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--navy);
  display:grid;place-items:center;position:relative;
  transition:background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.spk svg{width:15px;height:15px;fill:var(--navy);transition:fill var(--t-fast) var(--ease)}

.pin:hover .spk,
.row:hover .spk{background:var(--navy);transform:scale(1.12)}
.pin:hover .spk svg,
.row:hover .spk svg{fill:var(--white)}

.pin.playing .spk,
.row.playing .spk{background:var(--navy)}
.pin.playing .spk svg,
.row.playing .spk svg{fill:var(--pounamu)}

.pin.playing .spk::before,.pin.playing .spk::after,
.row.playing .spk::before,.row.playing .spk::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--navy);
  animation:pulse 1.6s var(--ease) infinite;
}
.pin.playing .spk::after,
.row.playing .spk::after{animation-delay:.8s}

@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(2.1);opacity:0}
}

/* 3px pounamu halo, revealed on click only. This was previously gated on
   .has-learners, so removing the learner count would have taken the halo off
   every town with it and left the playing state much weaker. Re-attached to
   .playing on its own (confirmed 20 Aug) so every town keeps the same feedback.
   The 120ms delay is kept: it lets the sound start before the ring lands.
   .spk already transitions box-shadow. */
.pin.playing .spk,
.row.playing .spk{
  box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 3px var(--pounamu);
  transition-delay:120ms;
}

/* ---- Te Aka referral line, under the map ----
   Deliberately quiet: it is a helpful aside, not a second call to action, so
   it must not compete with the footer CTA. Colour is navy at 72% (7.64:1) —
   not --grey, which is only 3.69:1 on white and fails WCAG AA for text this
   size. The link uses --green-btn (4.64:1), the same contrast-fixed green as
   the buttons. */
.aka{
  text-align:center;
  max-width:56ch;
  /* Side padding matters: this sits outside .shell, so on a narrow phone the
     text would otherwise run to the very edge of the screen. */
  margin:var(--s5) auto var(--s6);
  padding:0 var(--s4);
  font-size:.875rem;
  line-height:1.55;
  color:rgba(0,19,38,.72);
  text-wrap:balance;
}
.aka a{
  color:var(--green-btn);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  white-space:nowrap;          /* keep the name and its arrow together */
}
.aka a:hover{color:var(--green-btn-hover)}
.aka a:focus-visible{outline:3px solid var(--green-btn);outline-offset:2px;border-radius:2px}
.aka .arw{
  width:.72em;height:.72em;
  margin-left:.28em;
  vertical-align:-.02em;
  fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ============================ TOWN LIST ============================ */

.listband{background:var(--mint-pale);padding:var(--s7) 0;display:none}
.listband h2{
  font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:var(--s2);
}
.listband .listnote{
  text-align:center;font-size:.8125rem;color:var(--grey);
  margin-bottom:var(--s6);
}

.townlist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--s2);
}

.row{
  width:100%;min-height:44px;
  display:flex;align-items:center;gap:var(--s4);
  background:var(--white);border:0;
  box-shadow:inset 0 0 0 1px rgba(0,19,38,.1);
  border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);
  font-family:inherit;text-align:left;cursor:pointer;
  transition:box-shadow var(--t-fast) var(--ease);
}
.row:hover{box-shadow:inset 0 0 0 1px rgba(0,19,38,.32)}
.row:focus-visible{outline:3px solid var(--green-btn);outline-offset:2px}
.row .nm{flex:1 1 auto;min-width:0;line-height:1.25}
.row .reo{
  display:block;font-weight:700;font-size:15px;color:var(--navy);
  overflow-wrap:anywhere;
}
.row .eng{display:block;font-weight:400;font-size:11.5px;color:rgba(0,19,38,.62)}

/* ============================ FOOTER ============================ */

.ftr{
  background:var(--white);
  border-top:1px solid var(--mint-mid);
  padding:var(--s7) 0 var(--s6);
  margin-top:var(--s5);
}
/* Option C: logo, statement and socials stack together on the left as one
   block; the right column holds nothing but the CTA, so it carries the most
   weight in the footer. */
.ftr .top{
  display:flex;gap:var(--s7);flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}
.ftr .brand{flex:1 1 460px;max-width:560px}
.ftr .brand img.lg{height:62px;width:auto;display:block}
.ftr .stmt{font-size:.96rem;margin-top:var(--s5)}

.ftr .right{flex:0 0 auto;text-align:right}
/* Matched to .stmt so the right column carries the same weight as the
   statement on the left, rather than reading as small print. */
.ftr .right .why{font-size:.96rem;color:var(--navy);margin-bottom:var(--s3)}

.socials{display:flex;gap:10px;margin-top:var(--s5)}
.socials a{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--navy);
  box-shadow:inset 0 0 0 1.5px rgba(0,19,38,.28);
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.socials a svg{width:17px;height:17px;fill:currentColor}
.socials a:hover{background:var(--green-btn);color:#fff;box-shadow:inset 0 0 0 1.5px var(--green-btn)}
.socials a:focus-visible{outline:3px solid var(--green-btn);outline-offset:3px}

.ftr .base{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(0,19,38,.1);
  font-size:.8125rem;color:var(--grey);
}

/* ============================ RESPONSIVE ============================ */

/* Desktop, 1100px and up — the larger map type from the scale */
@media (min-width:1100px){
  .pin .reo{font-size:17px}
  .pin .eng{font-size:13px}
  .pin.island .reo{font-size:19px}
  .pin.island .eng{font-size:12px}
}

/* Tablet and below, under 900px.
   Labels and leader lines drop, dots become the tap targets, list appears. */
@media (max-width:899px){
  .pin{display:none}
  .lines{display:none}
  .dotbtn{display:block}
  .listband{display:block}
  .townlist{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .mapframe{padding:var(--s4) 0 var(--s6)}
  .hero{padding:var(--s6) 0 var(--s5)}
}

/* Mobile, under 600px — single column list */
@media (max-width:599px){
  .shell{padding:0 var(--s4)}
  .townlist{grid-template-columns:1fr}
  .topbar{padding:var(--s4) 0}
  .topbar .logo{height:36px}
  .btn{padding:12px 20px;font-size:14px}
  .ftr .top{gap:var(--s6)}
  /* Once the columns stack, the CTA lines up with everything else */
  .ftr .right{text-align:left;width:100%}
  .ftr .brand img.lg{height:52px}
  .listband{padding:var(--s6) 0}
}

/* ============================ PRINT / PDF ============================
   Print media evaluates the width queries against the paper, not the screen,
   so an A4 page would otherwise land under 900px and print the mobile layout
   — dots with no names. This forces the desktop treatment onto the page.
   Must stay last in the file so it wins on source order.
   ==================================================================== */

@media print{
  @page{size:landscape;margin:12mm}

  /* Browsers drop background fills when printing unless told otherwise.
     Without this the land, the mint bands and the green button all vanish. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  body{background:var(--white)}
  .skip{display:none}

  /* Desktop treatment regardless of paper size */
  .pin{display:flex}
  .lines{display:block}
  .dotbtn{display:none}
  .listband{display:none}

  /* Pin the map type so the label overhang is a known 82px each side,
     then leave 180px of total clearance for it. */
  .pin .reo{font-size:15px}
  .pin .eng{font-size:11.5px}
  .mapwrap{width:min(840px,calc(100vw - 180px))}

  .mapframe,.ftr,.hero{break-inside:avoid;page-break-inside:avoid}
  .btn{background:var(--green-btn);color:#fff}
  a{text-decoration:none}
}

/* ============================ REDUCED MOTION ============================ */

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;transition-delay:0ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .pin.playing .spk::before,.pin.playing .spk::after,
  .row.playing .spk::before,.row.playing .spk::after{animation:none;opacity:0}
  .pin.playing .spk,.row.playing .spk{
    box-shadow:inset 0 0 0 1.5px var(--navy),0 0 0 3px var(--pounamu);
  }
  .pin:hover .spk,.row:hover .spk{transform:none}
}