/* Swell Otter spot guides and regional hubs. Uses the colour tokens from spot.css. */
#spot-guide{padding:8px 14px 24px;border-top:2px solid var(--line);margin-top:14px}
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 12px}
.g-head h2{margin:0;font:400 28px/1.1 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--mustard)}
.g-hublink{font:700 13px var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--teal);text-decoration:none}
.g-hublink:hover{text-decoration:underline}
.g-h{margin:26px 0 10px;font:900 15px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--navy);display:flex;align-items:center;gap:10px}
.g-h::after{content:"";flex:1;height:3px;background:linear-gradient(var(--mustard) 0 33%,var(--orange) 33% 66%,var(--rust) 66%)}
.g-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.g-src{margin:8px 0 0;font-size:12px;color:var(--muted)}

/* stats block */
.g-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:860px){.g-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.g-stat{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--navy);border-radius:12px;padding:11px 12px 12px;box-shadow:0 3px 0 var(--navy);min-width:0}
.g-stat>div{min-width:0;flex:1}
.g-stat small{display:block;font:700 10.5px var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.g-stat b{display:block;font:800 17px/1.2 var(--body);color:var(--navy);margin-top:2px}
.g-stat-sub{display:block;margin-top:4px;font:600 12.5px/1.35 var(--body);color:var(--muted)}
.g-st-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--mustard);display:grid;place-items:center}
.g-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-arr{width:16px;height:16px;color:var(--teal);vertical-align:-3px;margin-top:3px}
.g-dots{display:flex;gap:3px;margin-top:4px}
.g-dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.g-dots i.on{background:var(--teal)}
.g-dots.rust i.on{background:var(--rust)}
.g-abil{display:flex;gap:3px;margin-top:4px}
.g-abil i{width:18px;height:6px;border-radius:3px;background:var(--line)}
.g-abil i.on:nth-child(1){background:var(--olive)} .g-abil i.on:nth-child(2){background:var(--mustard)} .g-abil i.on:nth-child(3){background:var(--rust)}

/* spot-page "at a glance": one navy band for best conditions, then four plain rows */
.g-glance{display:grid;gap:4px}
.g-best{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;background:var(--navy);color:var(--paper);border-radius:12px;padding:12px 18px 14px;box-shadow:0 4px 0 var(--mustard),0 8px 0 var(--orange),0 12px 0 var(--rust);margin-bottom:22px}
.g-best-t{flex:1 0 100%;font:400 18px/1.1 var(--display);color:var(--mustard)}
.g-bc{display:flex;align-items:center;gap:10px;min-width:0}
.g-bc:last-child{flex:1 1 180px}
.g-bc-ic{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--mustard);color:var(--mustard);display:grid;place-items:center}
.g-bc-ic .g-ic{width:16px;height:16px}
.g-bc small{display:block;font:700 10.5px var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--sage)}
.g-bc b{display:flex;align-items:center;gap:6px;font:800 17px/1.2 var(--body);color:#fff}
.g-bc .g-arr{color:var(--mustard);margin:0}
@media (max-width:480px){
  .g-best{padding:12px 14px 14px;gap:12px 20px}
}

/* month strip: coloured line under each month letter */
.g-months{display:grid;grid-template-columns:repeat(12,1fr);text-align:center}
.g-m span{display:block;font:800 13px var(--narrow);color:var(--navy);padding-bottom:6px}
.g-m i{display:block;height:6px}
.g-m:first-child i{border-radius:3px 0 0 3px} .g-m:last-child i{border-radius:0 3px 3px 0}
.g-m.cur span{color:var(--rust);text-decoration:underline 2px;text-underline-offset:3px}
.l3 i,.g-key i.l3,.g-table th.l3{background:var(--olive)}
.l2 i,.g-key i.l2,.g-table th.l2{background:var(--mustard)}
.l1 i,.g-key i.l1,.g-table th.l1{background:var(--orange)}
.l0 i,.g-key i.l0,.g-table th.l0{background:var(--rust)}
.g-months.compact .g-m i{height:3px}
.g-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font:600 12px var(--narrow);color:var(--muted)}
.g-key i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:5px;vertical-align:1px}

/* positives and negatives */
.g-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.g-pc h4{margin:0 0 6px;font:900 13px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.g-pc ul{list-style:none;margin:0;padding:0}
.g-pc li{position:relative;padding:4px 0 4px 20px;font:600 13px/1.35 var(--body);text-transform:uppercase;letter-spacing:.02em}
.g-pc .pos li::before{content:"+";position:absolute;left:2px;font-weight:900;color:var(--olive)}
.g-pc .neg li::before{content:"–";position:absolute;left:2px;font-weight:900;color:var(--rust)}
@media (max-width:420px){.g-pc{grid-template-columns:1fr}}

.g-about p{margin:0 0 10px;font-size:15.5px;line-height:1.6}

/* month-by-month table */
.g-tablewrap{overflow-x:auto;border:2px solid var(--navy);border-radius:10px;background:var(--paper)}
.g-table{border-collapse:collapse;width:100%;min-width:640px;font:600 12.5px var(--narrow);text-align:center}
.g-table th,.g-table td{padding:5px 3px;border-bottom:1px solid var(--line)}
.g-table thead th{color:var(--cream);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.g-table thead th:first-child{background:var(--navy)}
.g-table tbody th{text-align:left;padding-left:8px;font-weight:700;color:var(--muted);white-space:nowrap;position:sticky;left:0;background:var(--paper)}
.g-table tr.sec th{background:var(--cream);color:var(--navy);font:900 11px var(--body);text-transform:uppercase;letter-spacing:.1em}
.g-table td small{display:block;font-size:10px;color:var(--muted)}
.g-table td .g-arr{display:block;margin:0 auto}
.g-table tr.suit td{color:var(--teal)}

/* wetsuits */
.g-suits{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;text-align:center}
.g-suits div{background:var(--navy);color:var(--cream);border-radius:6px;padding:6px 0}
.g-suits span{display:block;font:700 10px var(--narrow);text-transform:uppercase;color:var(--sage)}
.g-suits b{display:block;font:800 12px var(--narrow);color:var(--mustard)}
.g-suits small{display:block;font:600 10px var(--narrow)}
@media (max-width:520px){.g-suits{grid-template-columns:repeat(6,1fr)}}

/* travel */
.g-travel{margin:0;display:grid;gap:10px}
.g-travel div{border-left:4px solid var(--teal);padding:2px 0 2px 12px}
.g-travel dt{font:900 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.g-travel dd{margin:2px 0 0;line-height:1.5}

/* hub card (styled after a travel-guide region card) */
.g-card{position:relative;background:#fff;border:2px solid var(--navy);border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 var(--mustard);display:flex;flex-direction:column}
.g-hero{display:block;position:relative;aspect-ratio:2/1;background:var(--sand)}
.g-hero img,.g-hero-art{display:block;width:100%;height:100%;object-fit:cover}
.g-photo{position:absolute;top:8px;right:8px;font:700 10px var(--narrow);text-transform:uppercase;letter-spacing:.08em;background:rgba(31,48,68,.75);color:var(--cream);padding:3px 7px;border-radius:4px}
.g-tags{position:relative;height:0}
.g-tag{position:absolute;left:18px;top:-14px;background:var(--orange);color:#fff;font:800 12px var(--body);text-transform:uppercase;letter-spacing:.08em;padding:5px 9px;border-radius:3px}
.g-cardin{padding:26px 18px 10px;flex:1}
.g-card h3{margin:0;font:900 22px/1.15 var(--body);text-transform:uppercase;letter-spacing:.01em;color:var(--navy)}
.g-card h3 a{text-decoration:none}
.g-count{margin:6px 0 16px;font:600 14px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.g-card .g-pc{margin-top:18px}
.g-explore{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--cream);border-top:2px solid var(--line);font:900 13px var(--body);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--navy)}
.g-explore span{font-size:22px}
.g-explore:hover{background:var(--mustard)}

/* region pages */
.hub-intro{margin:6px 0 18px}
.hub h2{margin:28px 0 8px;font:400 26px/1.15 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--mustard)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.hub-spots{display:grid;gap:12px}
.hub-spot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--cream);border:2px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none}
.hub-spot:hover{border-color:var(--teal)}
.hub-spot h3{margin:0;font:400 21px/1.1 var(--display);color:var(--navy)}
.hub-spot p{grid-column:1/-1;margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.hub-spot .g-months{grid-column:1/-1;margin-top:6px}
.hub-spot .go{font:900 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.hub-chips{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.hub-chips span{font:700 11px var(--narrow);text-transform:uppercase;letter-spacing:.05em;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:2px 8px;color:var(--muted)}
.hub-chips span.hot{background:var(--rust);border-color:var(--rust);color:#fff}
.low{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.low section{background:var(--cream);border:2px solid var(--line);border-radius:10px;padding:10px 12px}
.low h4{margin:0 0 8px;display:flex;align-items:center;gap:8px;font:900 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.low h4 .g-st-ic{width:28px;height:28px}
.low h4 .g-ic{width:16px;height:16px}
.low .bar{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font:600 12.5px var(--narrow);margin-bottom:5px}
.low .bar i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.low .bar i b{display:block;height:100%;background:var(--teal)}
.low .bar.zero{color:var(--muted);opacity:.6}
.g-links{display:flex;gap:6px 16px;flex-wrap:wrap}

/* region page layout: full-width paper with a centred column. Phones get one column with the region card first;
   desktops get the guide on the left and the region card sticky on the right. */
body.hubpage main{max-width:none;border:0;padding:0}
.hub-wrap{max-width:1180px;margin:0 auto;padding:6px 16px 36px}
.hub-kicker{display:table;margin:16px 0 8px;padding:4px 11px;border-radius:999px;background:var(--teal);color:var(--cream);font:900 11.5px var(--body);text-transform:uppercase;letter-spacing:.12em}
.hub-title{margin:0 0 18px;font:400 clamp(32px,7vw,52px)/1.08 var(--display);color:var(--navy);text-shadow:3px 3px 0 var(--mustard)}
.hub-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0 44px}
.hub-main,.hub-side{min-width:0}
.hub-main>h2:first-child{margin-top:28px}
@media (min-width:1000px){
  .hub-wrap{padding:10px 28px 48px}
  .hub-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .hub-main{grid-column:1;grid-row:1}
  .hub-main>h2:first-child{margin-top:0}
  .hub-side{grid-column:2;grid-row:1;position:sticky;top:92px}
  .hub-side .g-pc{grid-template-columns:1fr;gap:12px}
  .hub-spots{grid-template-columns:1fr 1fr;gap:16px}
  .hub-spot{align-content:start}
  .g-travel{grid-template-columns:1fr 1fr;gap:18px 32px}
  .hub-layout~.hub-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .hub-layout~.hub-grid .g-pc{grid-template-columns:1fr;gap:10px}
  .g-about p{font-size:16.5px;line-height:1.65;max-width:68ch}
}

/* The Swell Otter take: our own one or two line opinion, at the top of every spot guide. */
.g-take{margin:18px 0 14px;padding:12px 14px;border-left:4px solid #1c8790;background:rgba(28,135,144,.07);border-radius:0 10px 10px 0}
.g-take b{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#1c8790;margin-bottom:4px}
.g-take p{margin:0;font-size:1rem;line-height:1.5}

/* Spot summary under the guide: short intro, then bullet lists that scan on a phone */
.g-sum{margin:14px 0 6px;line-height:1.55}
.g-sum p{margin:0 0 10px}
.g-sum .g-sum-h{margin:14px 0 6px;font-weight:700}
.g-sum ul{margin:0 0 12px;padding-left:1.15em}
.g-sum li{margin:3px 0}
.g-sum li b{font-weight:600}
@media (max-width:480px){
  .g-stat{flex-direction:column;gap:8px;padding:10px 11px 11px}
  .g-st-ic{width:30px;height:30px}
  .g-st-ic .g-ic{width:17px;height:17px}
}
.g-stat-sub span{white-space:nowrap}

/* Ask an AI: logo buttons under the spot summary */
.g-ask{margin:14px 0 4px}
.g-ask>p{margin:0 0 8px;font:700 11px var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.g-ai-row{display:flex;flex-wrap:wrap;gap:8px}
.g-ai{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;background:#fff;border:2px solid var(--navy);border-radius:999px;box-shadow:0 3px 0 var(--navy);font:800 14px/1 var(--body);color:var(--navy);text-decoration:none;transition:transform .1s,box-shadow .1s}
.g-ai:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--navy)}
.g-ai:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.g-ai svg{width:20px;height:20px;flex:none}
.g-ai-chatgpt svg{fill:#000}
.g-ai-claude svg{fill:#d97757}
.g-ai-perplexity svg{fill:#1fb8cd}
@media (max-width:480px){
  .g-ai-row{gap:6px}
  .g-ai{gap:6px;padding:7px 10px 7px 8px;font-size:13px}
  .g-ai svg{width:17px;height:17px}
}

/* Spot questions: every answer is in the HTML (tools/spot-faq.mjs); the first two start open */
.g-faq{margin:18px 0 8px;display:grid;gap:8px}
.g-faq h2{margin:0 0 4px;font:800 18px/1.3 var(--body);color:var(--navy)}
.g-faq details{background:#fff;border:2px solid var(--line);border-radius:10px;padding:0 14px}
.g-faq details[open]{border-color:var(--navy)}
.g-faq summary{cursor:pointer;list-style:none;padding:11px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";font:800 20px/1 var(--body);color:var(--orange)}
.g-faq details[open] summary::after{content:"–"}
.g-faq h3{margin:0;font:800 15px/1.35 var(--body);color:var(--navy)}
.g-faq p{margin:0 0 12px;line-height:1.6}
.g-faq a{color:var(--teal)}