/* Best Places to See Penguins — v2 flat skin
   Blue primary · warm paper · all right angles · Newsreader (headings) + Hanken Grotesk (body) */

/* ---- self-hosted variable fonts (latin subset, woff2) ---- */
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- design tokens ---- */
:root {
  --bg: #F1F6F8;          /* mist ice — cool, ocean-appropriate */
  --surface: #FFFFFF;
  --surface-muted: #E9F0F3;
  --header-h: 57px;     /* fallback; main.js measures the real header height */
  --text: #152B3C;        /* deep sea ink */
  --muted: #4F6B7C;       /* dusty ocean gray-blue */
  --border: #D7E2E8;      /* cool pale border */
  --accent: #0A6FB1;      /* ocean blue */
  --accent-soft: #E3F1F9;
  --accent-2: #0A6FB1;
  --accent-2-soft: #E3F1F9;
  --accent-deep: #074E7B;
  --coral: #F25C44;
  --coral-soft: #FDEAE5;
  --teal: #12A5A0;
  --teal-soft: #DDF4F2;
  --amber: #F0A93B;
  --amber-soft: #FCF2DE;
  --star: #F25C44;
  --danger-soft: #FDF0EF;
  --font-serif: 'Newsreader Variable', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- base: flat, right-angle everywhere ---- */
* { box-sizing: border-box; border-radius: 0 !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 1px solid var(--border); display: block; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
::selection { background: #CFE6F6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- header ---- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.site-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 23px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.site-title:hover { color: var(--accent); }
.site-header nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 12px;
}
.site-header nav a:hover { color: var(--accent); background: var(--accent-soft); }
.site-header nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
  cursor: default;
}
.site-header nav a.active:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- language switcher (i18n): flag dropdown, far right of nav ---- */
.site-header nav { order: 2; margin-left: auto; }
.lang-switch {
  position: relative;
  order: 3;
  display: flex;
  align-items: center;
}
.lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 12px;
  cursor: pointer;
}
.lang-switch-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.lang-switch .flag { font-size: 16px; line-height: 1; }
.lang-switch .caret { color: var(--muted); margin-left: 2px; flex: none; }
.lang-switch-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(36, 49, 60, .10);
  padding: 4px 0;
  display: none;
  z-index: 120;
}
.lang-switch.open .lang-menu { display: block; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: 0;
}
.lang-menu a:hover { background: var(--accent-soft); color: var(--accent); }
.lang-menu a[aria-selected="true"] { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.lang-menu a[aria-selected="true"]::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  background: var(--coral);
}

/* ---- breadcrumb (floating under sticky header, ocean underline) ---- */
.breadcrumb {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  font-size: 14px;
  color: var(--muted);
  height: 44px; /* fixed height → H1 offsets below are deterministic */
}
.breadcrumb .container {
  height: 100%;
  display: flex;
  align-items: center;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before {
  content: "\203A";
  margin: 0 8px;
  color: #9BB8CC;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- floating "on this page" table of contents (always visible, h2 only) ---- */
body { --toc-top: calc(var(--header-h) + 44px); }                /* no breadcrumb: H1/TOC at header+44 */
body.has-breadcrumb { --toc-top: calc(var(--header-h) + 88px); } /* with breadcrumb (fixed 44px): H1/TOC at header+88 */
body.home { --toc-top: calc(var(--header-h) + 44px + var(--hero-h)); } /* homepage: below the full-bleed hero banner */
.toc {
  position: fixed;
  top: var(--toc-top);
  width: min(220px, calc(100vw - 24px));
  max-height: calc(100vh - var(--toc-top) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 13px;
  z-index: 80;
}
.toc-head { margin-bottom: 8px; padding: 0 4px; }
.toc-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc-list { display: flex; flex-direction: column; gap: 1px; }
.toc a {
  display: block;
  padding: 4px 8px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.toc a:hover { color: var(--accent); background: var(--accent-soft); }
.toc .active > a {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 600;
}
@media (min-width: 1460px) {
  .toc { left: calc((100vw - 960px) / 2 - 252px); } /* 220px panel + 32px gap to content */
}
@media (min-width: 1101px) and (max-width: 1459px) {
  .toc { left: max(16px, calc((100vw - 960px) / 2 + 12px)); }
}
@media (max-width: 1100px) {
  .toc { display: none; } /* small screens: content is king, no overlap */
}

/* ---- main content: H1 at header+44 (no breadcrumb) / header+88 (with the fixed 44px breadcrumb) ---- */
main.container {
  padding-top: 44px;
  padding-bottom: 56px;
}
section { margin: 0 0 48px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; }
h1 { font-size: 44px; line-height: 1.15; margin: 0 0 18px; letter-spacing: 0.005em; }
h2 { font-size: 30px; line-height: 1.25; margin: 44px 0 14px; }
h3 { font-size: 22px; line-height: 1.3; margin: 30px 0 10px; }
section[id], h1[id], h2[id], h3[id], [id^="top-"] { scroll-margin-top: 120px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }

/* image captions (a caption immediately following an image) */
img + .meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  margin-top: 8px;
}

/* ---- short answer box ---- */
.short-answer {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  padding: 14px 18px;
  margin: 0 0 24px;
}
.short-answer p { margin: 0; }

/* ---- hero banner (homepage only: full-bleed strip under the header) ---- */
body { --hero-h: 0px; }
body.home { --hero-h: 320px; } /* fixed banner strip at the original height */
.hero-banner {
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: none;
}

/* ---- interactive destination map ---- */
.map-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}
.map { display: block; width: 100%; height: auto; }
/* vivid atlas palette: bright ocean, colorful continents, crisp white coastlines */
.map-ocean { fill: #8FC9EC; }
.map-land { fill: #B7D8EA; stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.map-ant { fill: #F0F8FD; }
.map-nam { fill: #A5D8F0; }
.map-sam { fill: #7BD9B9; }
.map-eur { fill: #BFAEE9; }
.map-afr { fill: #F2C14E; }
.map-asia { fill: #F2A65A; }
.map-aus { fill: #F0A48A; }
.map-graticule { fill: none; stroke: rgba(255, 255, 255, 0.65); stroke-width: 1; }
.map-label {
  fill: #1F4E6E;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-anchor: middle;
  pointer-events: none;
}
.map-marker { cursor: pointer; }
.map-marker .map-hit { fill: rgba(242, 92, 68, 0.10); stroke: none; transition: fill .15s ease; }
.map-marker circle:not(.map-hit) {
  fill: var(--coral);
  stroke: #FFFFFF;
  stroke-width: 2.5;
  transition: fill .15s ease, transform .15s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.map-marker:hover .map-hit, .map-marker:focus-visible .map-hit { fill: rgba(242, 92, 68, 0.22); }
.map-marker:hover circle:not(.map-hit), .map-marker:focus-visible circle:not(.map-hit) {
  fill: #D8492F;
  transform: scale(1.6);
}
.map-marker:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
/* pulse rings for the opening ripple (injected by JS, one per ring) */
.map-marker circle.pulse-ring {
  fill: rgba(242, 92, 68, 0.14);
  stroke: #F25C44;
  stroke-width: 2;
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-name: map-pulse;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes map-pulse {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(4.6); opacity: 0; }
}
/* click-to-explore hint: unmissable coral bar above the map */
.map-hint {
  margin: 0 0 12px;
  background: var(--coral);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  padding: 10px 16px;
  line-height: 1.45;
}
.map-tip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--coral);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 8px 12px;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 1200;
  white-space: nowrap;
}
.map-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--border);
}
.map-tip strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}
.map-tip span { color: var(--muted); }
.map-tip.visible { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .map-wrap { display: none; } /* mobile: hide the map, show the jump-to-destination select instead */

  /* mobile header: row 1 = title + language dropdown (right), row 2 = nav links in one tidy row */
  .header-inner { flex-direction: row; flex-wrap: wrap; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .site-title { font-size: 20px; }
  .site-header nav { order: 4; margin-left: 0; width: 100%; flex-wrap: nowrap; justify-content: space-between; }
  .site-header nav a { font-size: 15px; padding: 6px 8px; }
  .lang-switch { order: 3; margin-left: auto; }
}

/* ---- map placeholder & jump select ---- */
.map-placeholder {
  border: 2px dashed #B7CCD8;
  background: var(--surface);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  margin-bottom: 16px;
}
.jump-row { display: none; } /* mutually exclusive with the map: dropdown only shows where the map is hidden (mobile) */
@media (max-width: 768px) {
  .jump-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
}
select {
  font-family: var(--font-sans);
  font-size: 18px; /* explicit: iOS/Android render <option> with system UI size unless set */
  font-weight: 500;
  color: var(--text);
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  max-width: 100%;
  flex: 1 1 220px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23818C96' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select option {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.jump-row label { font-weight: 600; font-size: 16px; white-space: nowrap; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 20px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--coral); }
/* whole card is clickable: invisible stretched overlay; the bottom CTA link stays above it */
.card-link { position: absolute; inset: 0; z-index: 1; }
.card a:not(.card-link) { position: relative; z-index: 2; }
.card h3 { margin-top: 0; font-size: 20px; }
.card .tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 10px;
  margin-bottom: 10px;
}
/* ocean pop tones for tags */
.card .tag-coral { color: var(--coral); background: var(--coral-soft); }
.card .tag-teal { color: var(--teal); background: var(--teal-soft); }
.card .tag-amber { color: var(--amber); background: var(--amber-soft); }
.card .tag-blue { color: var(--accent); background: var(--accent-soft); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--surface); }
th, td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
th { background: var(--surface-muted); font-weight: 600; }
tr:nth-child(even) td { background: #F7FAFB; }

/* ---- destination list (homepage) ---- */
.destination { border-top: 1px solid var(--border); padding: 20px 0; }
.destination:first-of-type { border-top: none; }
.meta { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.ratings { font-size: 15px; color: var(--star); margin: 4px 0; }
.ratings .label { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.notice {
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-muted);
  padding: 8px 12px;
  display: inline-block;
}

/* ---- ratings scorecard on location pages ---- */
.ratings-box {
  background: #FDF4F1;
  border: 1px solid #F2CDBF;
  border-left: 4px solid var(--coral);
  padding: 22px 26px 18px;
  margin: 0 0 28px;
}
.ratings-kicker {
  margin: 0 0 18px;
  color: var(--coral);
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ratings-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.rating-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 22px;
  border-left: 1px solid #F2CDBF;
}
.rating-item:first-child { border-left: 0; padding-left: 0; }
.rating-item:last-child { padding-right: 0; }
.rating-name { color: var(--text); font-size: 14.5px; font-weight: 600; }
.rating-stars { color: var(--coral); font-size: 26px; line-height: 1.15; letter-spacing: 4px; }
.rating-scale {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.rating-scale strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .ratings-box { padding: 18px 16px 14px; }
  .ratings-kicker { font-size: 18px; margin-bottom: 14px; }
  .ratings-row { grid-template-columns: 1fr; }
  .rating-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-left: 0;
  }
  .rating-item + .rating-item { border-top: 1px solid #F2CDBF; }
  .rating-name { font-size: 13.5px; }
  .rating-stars { font-size: 22px; letter-spacing: 2px; }
}

/* ---- faq ---- */
.faq-item { margin-bottom: 20px; }
.faq-item h3 { margin-bottom: 6px; }
.faq-item p { margin-bottom: 0; }

/* ---- placeholder content blocks ---- */
.todo-block {
  border: 1px dashed #B7CCD8;
  background: #F7FAFB;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---- footer ---- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 32px 0 44px;
  font-size: 14px;
  color: var(--muted);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.footer-brand { max-width: 560px; }
.footer-name {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text);
  font-size: 17px;
}
.footer-tagline { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 2px; }
.footer-legal a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; }
.fineprint { font-size: 12.5px; color: #8FA7B6; line-height: 1.5; }

/* ---- back to top (square) ---- */
#back-to-top {
  position: fixed;
  right: max(16px, calc((100vw - 960px) / 2 - 60px)); /* fully outside the content column (44px button + 16px gap) */
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 999;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s, transform .2s ease;
}
#back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--accent-deep); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  :root { --header-h: 88px; } /* fallback for mobile header (JS measures anyway) */
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  section[id], h1[id], h2[id], h3[id], [id^="top-"] { scroll-margin-top: 150px; }
}