/* ==========================================================
   Aegean Blueprint — style.css  v5.0
   Mediterranean summer palette: turquoise, coral, warm sand.
   Nunito rounded sans-serif throughout.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ----------------------------------------------------------
   MEDITERRANEAN SUMMER PALETTE
---------------------------------------------------------- */
:root {
  /* Primary — turquoise sea */
  --aegean:        #0B8FAC;
  --aegean-mid:    #14A8C8;
  --aegean-light:  #C8EEF5;
  --aegean-pale:   #E8F7FB;
  --aegean-dark:   #076880;

  /* Warm sand base */
  --marble:        #FFFBF5;
  --marble-2:      #FFF4E8;
  --marble-3:      #FFE8D0;

  /* Coral accent */
  --gold:          #FF6B6B;
  --gold-light:    #FFD4D4;
  --gold-pale:     #FFF0F0;

  /* Terracotta */
  --terracotta:    #E8522A;
  --terra-dark:    #C6421F;
  --terra-light:   #FCDDD3;
  --terra-pale:    #FEF2EE;

  /* Single warm UI accent (buttons, links, active states). Points at terracotta
     so the interface reads as turquoise + one warm signature, instead of coral
     AND terracotta competing. Coral (--gold) and olive are reserved for
     decorative/data-viz use. Auto-adapts in dark mode via the vars it references. */
  --accent:        var(--terracotta);
  --accent-dark:   var(--terra-dark);

  /* Olive / sea grass */
  --olive:         #3D8B6F;
  --olive-light:   #C8EBE0;
  --olive-pale:    #E8F6F1;

  --ink:           #1A2332;
  --ink-1:         #1A2332;
  --ink-2:         #2E3D50;
  --ink-3:         #637080;
  --ink-4:         #A0ADB8;
  --ink-5:         #E4E8ED;

  --white:         #FFFFFF;
  --border:        #EAE4DC;
  --border-2:      #D8CEC2;

  /* Semantic score colors */
  --score-great:   #2E9E6A;
  --score-good:    var(--aegean);
  --score-mid:     #F0A500;
  --score-low:     var(--terracotta);

  /* Typography — Nunito rounded */
  --serif: 'Nunito', system-ui, sans-serif;
  --sans:  'Nunito Sans', system-ui, sans-serif;
  /* Display face for large titles only (page/section titles, hero, island name).
     Alegreya is a warm literary serif WITH Greek support — important since the
     site is bilingual and /el/ titles must not fall back. Body/cards/scores stay
     on Nunito. To try a different face, swap the family here (keep a Greek-capable
     serif: Alegreya, Playfair Display, GFS Didot — not Fraunces, which lacks Greek). */
  --font-display: 'Alegreya', Georgia, 'Times New Roman', serif;

  /* ----------------------------------------------------------
     TYPE SCALE — single source of truth for font sizes.
     Every font-size in this stylesheet should reference one of
     these seven variables. Do NOT introduce arbitrary px values
     (no 12.5px, 15.5px, 17px, 19px, etc.) — pick the nearest
     scale tier instead. Mobile sizes auto-shrink via the
     @media (max-width: 600px) override below.

       --text-hero    32 / 26    serif    page title (h1)
       --text-section 24 / 20    serif    section title (h2)
       --text-sub     18 / 16    serif    subsection / card title (h3)
       --text-body    16 / 15    sans     body text
       --text-small   14 / 13    sans     secondary body, table cells
       --text-meta    13 / 12    sans     captions, metadata
       --text-tiny    11 / 11    sans     labels, badges, legend
  ---------------------------------------------------------- */
  --text-hero:    32px;
  --text-section: 24px;
  --text-sub:     18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-meta:    13px;
  --text-tiny:    11px;

  /* Sizing */
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 8px rgba(11,143,172,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow:    0 6px 20px rgba(11,143,172,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --header-height: 64px;
  --search-bar-height: 52px;
  /* "Underrated picks for…" strip sits between search-bar and map on the
     home view. Subtracted from map height so the map ends at the viewport
     bottom and the "About this site" button stays visible. */
  --whats-on-strip-height: 37px;
}

/* Mobile type scale — narrower screens get smaller hero/section sizes */
@media (max-width: 600px) {
  :root {
    --text-hero:    26px;
    --text-section: 20px;
    --text-sub:     16px;
    --text-body:    15px;
    --text-small:   13px;
    --text-meta:    12px;
    /* --text-tiny stays 11px */
  }
}

/* ----------------------------------------------------------
   DARK MODE
---------------------------------------------------------- */
html.dark {
  --aegean:        #22C0E0;
  --aegean-mid:    #22C0E0;
  --aegean-light:  #0A2A35;
  --aegean-pale:   #071820;
  --aegean-dark:   #60D8F0;

  --marble:        #171C24;
  --marble-2:      #1F2530;
  --marble-3:      #283040;

  --gold:          #FF8F8F;
  --gold-light:    #2A1010;
  --gold-pale:     #1E0E0E;

  --terracotta:    #F07050;
  --terra-dark:    #D85F40;
  --terra-light:   #2A1510;
  --terra-pale:    #1E100E;

  --olive:         #50C090;
  --olive-light:   #0A2018;
  --olive-pale:    #071510;

  --ink:           #EEF2F5;
  --ink-1:         #EEF2F5;
  --ink-2:         #C8D4DC;
  --ink-3:         #8898A8;
  --ink-4:         #556070;
  --ink-5:         #2A3545;

  --white:         #1F2530;
  --border:        rgba(255,255,255,0.08);
  --border-2:      rgba(255,255,255,0.14);

  --score-great:   #40D090;
  --score-good:    #22C0E0;
  --score-mid:     #F0B020;
  --score-low:     #F07050;
}

/* ----------------------------------------------------------
   RESET & BASE
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--ink);
  /* Depth + texture: two soft palette washes (warm top-right, cool bottom-left)
     over the marble base, plus a very faint sea-chart wave pattern. All layers
     use theme vars / low alpha so they stay subtle and adapt to dark mode. */
  background-color: var(--marble);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 20 Q20 8 40 20 T80 20' fill='none' stroke='%230B8FAC' stroke-opacity='0.045' stroke-width='1.1'/%3E%3C/svg%3E"),
    radial-gradient(1100px 520px at 88% -8%, var(--marble-2), transparent 60%),
    radial-gradient(900px 480px at -6% 108%, var(--aegean-pale), transparent 62%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Consistent brand focus ring for keyboard users (accessibility + polish) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--aegean);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.25;
}
h1 { font-family: var(--font-display); font-size: var(--text-section); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
h2 { font-size: var(--text-sub); font-weight: 700; margin-bottom: 8px; }

/* Demoted-from-h1 view headings — each SPA view (Islands Data, Compare,
   Island Hopping, etc.) used to use <h1> for its title. Demoted to <h2>
   so the homepage has exactly one <h1> (the sr-only one in #view-home)
   per SEO best practice. This rule preserves the original h1 sizing so
   the visual UI is unchanged. */
.view-section > h2[data-i18n$=".title"],
.content-page > h2[data-i18n$=".title"] {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
h3 { font-size: var(--text-body); font-weight: 700; margin-bottom: 6px; }

p { color: var(--ink-3); line-height: 1.7; }
a { color: var(--aegean); }
a:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   LOADING OVERLAY
---------------------------------------------------------- */
#loading-overlay {
  position: fixed; inset: 0;
  background: var(--aegean);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* Loading splash logo: turquoise SVG mark on white circle, on turquoise overlay */
#loading-logo {
  width: 96px;
  height: 96px;
  background: var(--white);
  border-radius: 50%;
  padding: 0;
  display: block;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-inner p { font-size: var(--text-small); color: rgba(255,255,255,0.75); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------
   HEADER  — Aegean blue
---------------------------------------------------------- */
header {
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border-bottom: none;
  position: sticky; top: 0; z-index: 1000;
  height: var(--header-height);
  box-shadow: 0 2px 12px rgba(11,143,172,0.25);
}
.header-content {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px; height: 100%;
  display: flex; align-items: center; gap: 16px;
}

/* BIGGER LOGO in header */
.logo-wrapper {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
#site-logo {
  width: 48px;
  height: 48px;
  display: block;
  transition: opacity 0.2s;
}
.logo-wrapper:hover #site-logo { opacity: 0.85; }
#brand-text {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Nav links on Aegean blue */
.top-nav {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
}
.top-nav a {
  padding: 7px 13px;
  font-size: var(--text-meta); font-weight: 500; font-family: var(--sans);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.top-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.top-nav a.active { background: rgba(255,255,255,0.18); color: #fff; }

/* Utility nav links (Privacy etc.) — dimmer, smaller, separated by a thin
   divider so they read as legal/secondary links rather than primary nav. */
.top-nav a.nav-utility {
  font-size: calc(var(--text-meta) - 1px);
  color: rgba(255,255,255,0.45);
  margin-left: 6px;
  padding-left: 13px;
  border-left: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
}
.top-nav a.nav-utility:hover {
  background: transparent;
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
}

.dark-mode-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: var(--text-body);
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
  transition: background 0.15s;
}
.dark-mode-toggle:hover { background: rgba(255,255,255,0.2); color: #fff; }

.menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; margin-left: auto;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.85); border-radius: 2px;
}

/* ----------------------------------------------------------
   SEARCH + CONTROLS BAR — marble tone
---------------------------------------------------------- */
.search-container {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  flex-shrink: 0;
}

.search-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Vibe filter button ──────────────────────────────────── */
.vibe-filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: var(--text-meta); font-family: var(--sans); font-weight: 600;
  color: var(--ink-3);
  background: var(--marble);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.vibe-filter-btn:hover,
.vibe-filter-btn[aria-expanded="true"] {
  background: var(--aegean-pale);
  border-color: var(--aegean);
  color: var(--aegean);
}
.vibe-filter-btn[aria-expanded="true"] svg { stroke: var(--aegean); }
.vibe-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--aegean); color: #fff;
  font-size: var(--text-micro, 11px); font-weight: 700;
  border-radius: 9px;
}

/* ── Vibe panel ──────────────────────────────────────────── */
.vibe-panel {
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  animation: vibe-slide-in 0.18s ease-out;
}
@keyframes vibe-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vibe-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-bottom: 8px;
}
.vibe-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  color: var(--ink-3);
  background: var(--marble);
  border: 1.5px solid var(--border-2);
  border-radius: 20px;
  cursor: pointer; transition: all 0.13s;
  user-select: none;
}
.vibe-tag:hover {
  background: var(--aegean-pale);
  border-color: var(--aegean-light);
  color: var(--aegean);
}
.vibe-tag.active {
  background: var(--aegean);
  border-color: var(--aegean-dark);
  color: #fff;
  font-weight: 600;
}
.vibe-tag.active::before {
  content: "✓ ";
  font-size: 0.85em;
  opacity: 0.9;
}
.vibe-hint {
  margin: 0 0 8px;
  font-size: var(--text-meta);
  color: var(--ink-4);
  font-style: italic;
}
.vibe-panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 24px;
}
.vibe-match-count {
  font-size: var(--text-meta); color: var(--ink-4); font-style: italic;
}
.vibe-clear-btn {
  padding: 4px 10px;
  font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  background: none; border: 1px solid var(--border-2);
  border-radius: var(--radius); color: var(--ink-4);
  cursor: pointer; transition: all 0.13s;
}
.vibe-clear-btn:hover { background: var(--marble-2); color: var(--ink-3); }

/* Mobile: stack tags, full-width panel */
@media (max-width: 600px) {
  .vibe-tag { font-size: var(--text-micro, 12px); padding: 5px 10px; }
  .vibe-filter-btn span[data-i18n] { display: none; }
}

#islandSearch {
  flex: 1;
  padding: 9px 16px;
  font-size: var(--text-small); font-family: var(--sans);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--marble);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
#islandSearch:focus {
  outline: none;
  border-color: var(--aegean-mid);
  box-shadow: 0 0 0 3px var(--aegean-pale);
  background: var(--white);
}
#islandSearch::placeholder { color: var(--ink-4); }

.filter-select {
  padding: 9px 12px;
  font-size: var(--text-meta); font-family: var(--sans);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
  appearance: auto;
}
.filter-select:focus {
  outline: none;
  border-color: var(--aegean-mid);
}

@media (max-width: 600px) {
  .search-bar-row { flex-wrap: wrap; }
  #islandSearch { min-width: 100%; }
  .filter-select { flex: 1; font-size: var(--text-meta); }
}

/* ----------------------------------------------------------
   MAP  — constrained to Greece bounds
   script.js handles: map.setMaxBounds and fitBounds
   This just styles the container
---------------------------------------------------------- */
#view-home {
  /* Map fills the viewport, but the page now scrolls past it to reveal
     the homepage content section. Previously this was a flex column with
     overflow:hidden — that locked users to the map view. */
  display: block;
}
#view-home #main-map {
  height: calc(100vh  - var(--header-height) - var(--search-bar-height) - var(--whats-on-strip-height));
  height: calc(100dvh - var(--header-height) - var(--search-bar-height) - var(--whats-on-strip-height));
}
/* body.home-view-active formerly locked scroll and hid the footer. Now we
   want both: scroll to read the homepage content section, and a visible
   footer once you've scrolled past the map and the content. */
body.home-view-active {
  overflow-y: auto;
}
#main-map {
  width: 100%;
  background: var(--aegean-pale);
  position: relative;
}
.custom-marker { background: none; border: none; }

/* ----------------------------------------------------------
   CONTENT PAGES
---------------------------------------------------------- */
.content-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.content-page > h1,
.content-page > h2[data-i18n$=".title"] { margin-bottom: 4px; }
.content-page > p:first-of-type { color: var(--ink-3); margin-bottom: 24px; }

/* ----------------------------------------------------------
   DATA TABLE
---------------------------------------------------------- */
.table-search-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.table-search-row input {
  flex: 1; padding: 9px 14px;
  font-size: var(--text-meta); font-family: var(--sans);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.table-search-row input:focus {
  outline: none;
  border-color: var(--aegean-mid);
  box-shadow: 0 0 0 3px var(--aegean-pale);
}
.table-count {
  font-size: var(--text-meta); color: var(--ink-4); white-space: nowrap;
}
.table-container {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
#islands-table {
  width: 100%; border-collapse: collapse;
  background: var(--white); font-size: var(--text-meta);
}
#islands-table thead th {
  padding: 11px 14px; text-align: left;
  background: var(--marble);
  border-bottom: 1px solid var(--border-2);
  font-size: var(--text-tiny); font-weight: 600; font-family: var(--sans);
  color: var(--ink-3); cursor: pointer; user-select: none;
  white-space: nowrap; letter-spacing: 0.3px; text-transform: uppercase;
}
#islands-table thead th:hover { color: var(--aegean); }
#islands-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
#islands-table tbody tr:last-child td { border-bottom: none; }
#islands-table tbody tr:hover td { background: var(--aegean-pale); cursor: pointer; }
.group-tag {
  font-size: var(--text-tiny); font-weight: 500;
  padding: 2px 9px;
  background: var(--marble-2);
  border-radius: 20px;
  color: var(--ink-3);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

@media (max-width: 600px) {
  .table-container { border: none; box-shadow: none; }
  #islands-table, #islands-table tbody, #islands-table tr, #islands-table td { display: block; }
  #islands-table thead { display: none; }
  #islands-table tbody tr {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
  }
  #islands-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
  }
  #islands-table tbody td:last-child { border-bottom: none; }
  #islands-table tbody td::before {
    content: attr(data-label);
    font-weight: 600; font-size: var(--text-tiny);
    color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.3px;
  }
}

/* ----------------------------------------------------------
   COMPARE VIEW
---------------------------------------------------------- */
.compare-intro { font-size: var(--text-small); margin-bottom: 20px; }
.compare-selectors {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.compare-selectors select {
  flex: 1; min-width: 160px;
  padding: 10px 14px; font-size: var(--text-meta); font-family: var(--sans);
  border: 1.5px solid var(--border-2); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}
.vs-label { font-weight: 700; color: var(--ink-4); flex-shrink: 0; font-size: var(--text-meta); }
.compare-placeholder {
  text-align: center; padding: 64px 20px;
  color: var(--ink-4); font-size: var(--text-small);
  border: 1.5px dashed var(--border-2); border-radius: var(--radius-lg);
  background: var(--marble);
}
.compare-radar-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 20px;
  height: 360px; position: relative;
  box-shadow: var(--shadow-sm);
}
#compare-radar-chart { width: 100% !important; height: 100% !important; }
.compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Editorial verdict block — shown above the WTV section for the 15 curated
   comparison pairs. Has a slightly distinct background and serif body to
   feel like real travel writing rather than data output. */
.compare-verdict {
  background: linear-gradient(135deg, rgba(11,143,172,0.06) 0%, rgba(11,143,172,0.02) 100%);
  border: 1px solid rgba(11,143,172,0.18);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 20px 0 8px;
}
.compare-verdict-heading {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--aegean-dark);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(11,143,172,0.25);
}
.compare-verdict p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-1);
  margin: 0 0 14px;
}
.compare-verdict p:last-child { margin-bottom: 0; }
.compare-verdict strong {
  color: var(--aegean-dark);
  font-weight: 700;
}
html.dark .compare-verdict {
  background: linear-gradient(135deg, rgba(11,143,172,0.14) 0%, rgba(11,143,172,0.06) 100%);
  border-color: rgba(11,143,172,0.35);
}
html.dark .compare-verdict p { color: #ddd; }
@media (max-width: 600px) {
  .compare-verdict { padding: 18px 18px; }
  .compare-verdict p { font-size: 15px; }
}
/* Long-form verdict (Milos vs Santorini and others) — adds H4 subheaders,
   two-column "Choose X if..." blocks, and a FAQ accordion below the prose. */
.compare-verdict h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 24px 0 10px;
}
.compare-verdict h4:first-of-type { margin-top: 16px; }
.compare-verdict-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 20px;
}
.compare-verdict-col {
  background: var(--white);
  border: 1px solid rgba(11,143,172,0.15);
  border-radius: 10px;
  padding: 14px 18px;
}
.compare-verdict-col h4 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--aegean-dark);
}
.compare-verdict-col ul {
  margin: 0;
  padding-left: 18px;
}
.compare-verdict-col li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 8px;
  color: var(--ink-1);
}
.compare-verdict-col li:last-child { margin-bottom: 0; }
html.dark .compare-verdict-col {
  background: rgba(0,0,0,0.18);
  border-color: rgba(11,143,172,0.30);
}
html.dark .compare-verdict-col li { color: #ddd; }
@media (max-width: 720px) {
  .compare-verdict-cols { grid-template-columns: 1fr; gap: 12px; }
}
/* FAQ accordion below the verdict prose */
.compare-faq {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(11,143,172,0.18);
}
.compare-faq-heading {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--aegean-dark);
  margin: 0 0 12px;
}
.compare-faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 8px;
}
.compare-faq details summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-1);
  list-style: none;
}
.compare-faq details summary::-webkit-details-marker { display: none; }
.compare-faq details summary::after {
  content: '+';
  float: right;
  color: var(--aegean);
  font-weight: 700;
}
.compare-faq details[open] summary::after { content: '−'; }
.compare-faq details p {
  padding: 0 16px 14px;
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
}
html.dark .compare-faq details {
  background: rgba(0,0,0,0.2);
  border-color: #444;
}
html.dark .compare-faq details p { color: #ddd; }
.compare-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; position: relative;
  box-shadow: var(--shadow-sm);
}
.compare-card.compare-winner { border: 2px solid var(--aegean-mid); }
/* Photo banner at the top of each compare card */
.cmp-media { position: relative; aspect-ratio: 16 / 9; background: var(--aegean-pale); overflow: hidden; }
.cmp-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-media.cmp-nophoto .cmp-photo { display: none; }
.cmp-media.cmp-nophoto::after {
  content: attr(data-initial); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  color: var(--aegean); opacity: 0.5;
}
.cmp-body { padding: 18px 20px 20px; }
/* Card header: name on the left, overall score on the right, baseline-aligned
   so the score sits on the same visual line as the name rather than below it. */
.compare-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.compare-card h2 { font-family: var(--serif); font-size: var(--text-sub); margin-bottom: 0; }
.compare-meta { font-size: var(--text-meta); color: var(--ink-3); margin-bottom: 12px; }
/* Score: smaller than the old hero size since it shares a line with the name,
   but still the dominant visual on the right of the head. */
.compare-total { font-family: var(--serif); font-size: var(--text-sub); font-weight: 600; line-height: 1; white-space: nowrap; }
.compare-total span { font-size: var(--text-meta); color: var(--ink-4); }

.compare-add-btn {
  padding: 8px 16px; font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  border: 1.5px solid var(--aegean-mid);
  color: var(--aegean); background: var(--aegean-pale);
  border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s;
}
.compare-add-btn:hover { background: var(--aegean); color: #fff; }

/* ----------------------------------------------------------
   ISLAND HOPPING
---------------------------------------------------------- */
.hopping-intro { margin-bottom: 24px; font-size: var(--text-small); }

/* ============================================================
   FERRY PLANNER
============================================================ */
.planner-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 8px;
}
.planner-title {
  margin: 0;
}
.ferry-btn-prominent {
  /* Bigger and more visible than the standard ferry-btn used elsewhere */
  padding: 12px 22px;
  font-size: var(--text-body);
  border-radius: 999px;       /* pill shape — distinguishes from squarer planner UI */
  box-shadow: 0 2px 8px rgba(232, 82, 42, 0.18);
}
.ferry-btn-prominent:hover {
  box-shadow: 0 4px 14px rgba(232, 82, 42, 0.30);
}
@media (max-width: 600px) {
  .planner-header-row { gap: 12px; }
  .ferry-btn-prominent { width: 100%; text-align: center; padding: 12px 18px; }
}
#ferry-planner { margin-bottom: 28px; }
.planner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.planner-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}
.planner-field { display: flex; flex-direction: column; gap: 4px; }
.planner-field label {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.planner-select {
  padding: 10px 12px;
  font-size: var(--text-small);
  font-family: var(--sans);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--marble);
  color: var(--ink);
  cursor: pointer;
}
.planner-select:focus {
  outline: none;
  border-color: var(--aegean);
  background: var(--white);
}
.planner-arrow {
  font-size: var(--text-section);
  color: var(--aegean);
  font-weight: 700;
  padding-bottom: 6px;
}
.planner-go-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  font-size: var(--text-body);
  font-family: var(--sans);
  font-weight: 700;
  background: var(--aegean);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.planner-go-btn:hover:not(:disabled) { background: var(--aegean-dark); }
.planner-go-btn:disabled {
  background: var(--marble-3);
  color: var(--ink-4);
  cursor: not-allowed;
}
.planner-select:disabled {
  background: var(--marble-2);
  color: var(--ink-4);
  cursor: not-allowed;
  opacity: 0.65;
}
.planner-result:empty { display: none; }
.planner-result { margin-top: 18px; }

.planner-msg {
  padding: 12px 16px;
  background: var(--marble-2);
  border-left: 3px solid var(--aegean);
  border-radius: var(--radius);
  font-size: var(--text-small);
  color: var(--ink-2);
}
.planner-msg-warn {
  border-left-color: #C25450;
  background: rgba(194, 84, 80, 0.07);
}

.planner-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.planner-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.planner-stat-num {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--aegean-dark);
  line-height: 1.1;
}
.planner-stat-lbl {
  font-size: var(--text-meta);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.planner-hops {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.planner-hop {
  padding: 12px 14px;
  background: var(--marble);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.planner-hop-route {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-body);
  margin-bottom: 6px;
}
.planner-hop-arrow {
  color: var(--aegean);
  font-size: var(--text-small);
}
.planner-hop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
  font-size: var(--text-meta);
}
.planner-hop-dur {
  color: var(--ink-2);
  font-weight: 600;
}
.planner-hop-freq {
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.planner-freq-high { background: rgba(11, 143, 172, 0.15); color: var(--aegean-dark); }
.planner-freq-med  { background: rgba(255, 107, 107, 0.15); color: #B33E3E; }
.planner-freq-low  { background: rgba(196, 150, 42, 0.15); color: #8B6A1A; }
.planner-freq-seasonal { background: rgba(196, 150, 42, 0.15); color: #8B6A1A; }
.planner-hop-price { color: var(--ink-3); }
.planner-hop-note {
  font-size: var(--text-meta);
  color: var(--ink-3);
  font-style: italic;
}

.planner-disclaimer {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(11, 143, 172, 0.04);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  color: var(--ink-3);
  font-style: italic;
}

@media (max-width: 600px) {
  .planner-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .planner-arrow {
    text-align: center;
    transform: rotate(90deg);
    padding: 0;
  }
  .planner-summary { grid-template-columns: 1fr; gap: 8px; }
  .planner-summary-stat { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .planner-stat-lbl { margin-top: 0; }
}

html.dark .planner-card { background: var(--marble); }
html.dark .planner-hop { background: rgba(255,255,255,0.04); }
html.dark .planner-msg { background: rgba(255,255,255,0.04); }
html.dark .planner-disclaimer { background: rgba(11, 143, 172, 0.10); }

/* ----------------------------------------------------------
   MATCH ME QUIZ
---------------------------------------------------------- */
.match-intro { margin-bottom: 24px; font-size: var(--text-small); }
.quiz-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.quiz-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--marble-3); border: 1px solid var(--border-2);
  transition: background 0.2s;
}
.quiz-dot.done  { background: var(--aegean); border-color: var(--aegean); }
.quiz-dot.current { background: var(--aegean-mid); border-color: var(--aegean-mid); }
.quiz-step-label { font-size: var(--text-meta); color: var(--ink-4); margin-left: 6px; }

.quiz-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px; max-width: 560px;
  box-shadow: var(--shadow-sm);
  /* Slide transition — transform + opacity change from entering state */
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.22s ease;
}
/* Entering states — card starts offset, CSS transition brings it to resting */
.quiz-card.quiz-card-entering.quiz-card-from-right {
  transform: translateX(32px);
  opacity: 0;
}
.quiz-card.quiz-card-entering.quiz-card-from-left {
  transform: translateX(-32px);
  opacity: 0;
}
.quiz-question {
  font-family: var(--serif);
  font-size: var(--text-sub); font-weight: 600;
  margin-bottom: 20px; color: var(--ink);
  line-height: 1.35;
}
.quiz-options {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 24px;
}
/* 12-month compact grid */
.quiz-month-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.quiz-month-btn {
  padding: 10px 6px;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-small);
}
.quiz-month-btn.selected {
  background: var(--aegean);
  border-color: var(--aegean);
  color: #fff;
}
.quiz-month-btn.selected:hover {
  background: var(--aegean-dark);
}
.quiz-option {
  padding: 13px 16px; font-size: var(--text-meta); font-family: var(--sans);
  text-align: left;
  border: 1.5px solid var(--border-2); border-radius: var(--radius);
  background: var(--marble); color: var(--ink);
  cursor: pointer; transition: all 0.15s;
  line-height: 1.4;
}
.quiz-option:hover { background: var(--aegean-pale); border-color: var(--aegean-light); }
.quiz-option.selected {
  background: var(--aegean-pale);
  border-color: var(--aegean); color: var(--aegean); font-weight: 600;
}
.quiz-nav-back { margin-top: 16px; }
.quiz-back-btn {
  padding: 8px 16px; font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  border-radius: var(--radius); cursor: pointer; transition: all 0.15s;
  background: none; border: 1.5px solid var(--border-2); color: var(--ink-3);
}
.quiz-back-btn:hover { background: var(--marble-2); }
/* Flash animation when option auto-advances */
@keyframes quiz-select-flash {
  0%   { background: var(--aegean-pale); border-color: var(--aegean); }
  60%  { background: var(--aegean-light); border-color: var(--aegean); }
  100% { background: var(--aegean-pale); border-color: var(--aegean); }
}
.quiz-option.selected {
  background: var(--aegean-pale);
  border-color: var(--aegean); color: var(--aegean); font-weight: 600;
  animation: quiz-select-flash 0.18s ease-out;
}
.quiz-results-header { margin-bottom: 20px; }
.quiz-results-title { font-family: var(--serif); font-size: var(--text-sub); font-weight: 600; }
.quiz-results-sub { font-size: var(--text-meta); color: var(--ink-3); }
.result-island-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 10px;
  cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  box-shadow: var(--shadow-sm);
}
.result-island-card:hover {
  border-color: var(--aegean-mid);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
/* Photo thumbnail with the rank badge overlaid (Match Me results) */
.result-thumb {
  position: relative; flex-shrink: 0;
  width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--aegean-pale);
}
.result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-thumb.result-nophoto img { display: none; }
.result-thumb.result-nophoto::after {
  content: attr(data-initial); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--aegean); opacity: 0.55;
}
.result-rank {
  position: absolute; top: 5px; left: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--aegean-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-tiny);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.result-info { flex: 1; }
.result-name {
  font-family: var(--serif);
  font-size: var(--text-body); font-weight: 600; color: var(--ink);
}
.result-why { font-size: var(--text-meta); color: var(--ink-3); margin-top: 3px; }
.result-score { font-family: var(--serif); font-size: var(--text-section); font-weight: 600; flex-shrink: 0; }
.quiz-retake-row { margin-top: 24px; text-align: center; }
.quiz-retake-btn {
  padding: 10px 24px; font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  border: 1.5px solid var(--border-2); border-radius: var(--radius);
  background: var(--white); color: var(--ink-3); cursor: pointer;
}
.quiz-retake-btn:hover { background: var(--marble-2); }

/* ----------------------------------------------------------
   ISLAND DETAIL
---------------------------------------------------------- */
.detail-container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.detail-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.detail-header h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.back-btn {
  padding: 8px 16px; font-size: var(--text-meta); font-family: var(--sans); font-weight: 500;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--white); color: var(--ink-3); cursor: pointer; flex-shrink: 0;
  transition: all 0.15s;
}
.back-btn:hover { background: var(--marble-2); }
.island-meta-pill {
  font-size: var(--text-meta); font-weight: 500;
  padding: 4px 12px; background: var(--marble-2);
  border-radius: 20px; color: var(--ink-3);
  letter-spacing: 0.2px;
}
/* "Last updated" stamp in the detail-header — small, italic, muted.
   Sits below the island-meta-pill, populated by renderIslandPage()
   from the JSON file's HTTP Last-Modified header. */
.island-lastupdated {
  font-size: var(--text-tiny, 12px);
  color: var(--ink-3);
  font-style: italic;
  margin-top: 4px;
  width: 100%;
}
.island-lastupdated time { color: inherit; }
.island-lastupdated strong { font-weight: 600; font-style: normal; color: var(--ink-2); }
.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
#island-mini-map {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
/* Collapse to nothing when no map content has been rendered into it */
#island-mini-map:empty {
  display: none;
}
.island-guide-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.island-guide-box h3 { font-family: var(--serif); margin-bottom: 10px; }
.sidebar-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.sidebar-box h3 {
  font-family: var(--serif); font-size: var(--text-meta);
  margin-bottom: 14px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rating-item { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rating-label { font-size: var(--text-meta); font-weight: 500; color: var(--ink-3); width: 110px; flex-shrink: 0; }
.stars-outer { flex: 1; height: 8px; background: var(--marble-2); border-radius: 4px; overflow: hidden; }
.stars-inner { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.rating-val { font-size: var(--text-meta); font-weight: 600; width: 28px; text-align: right; }
.stat-line {
  display: flex; justify-content: space-between;
  font-size: var(--text-meta); padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.stat-line:last-child { border-bottom: none; }
.stat-line span { color: var(--ink-3); }

/* ----------------------------------------------------------
   ★  WHY THIS EXISTS PAGE  (full redesign)
---------------------------------------------------------- */

/* Hero — deep Aegean with geometric decoration */
.why-hero {
  background: var(--aegean);
  padding: 56px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.why-hero-geometry {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0.06;
}
.why-hero-logo-wrap {
  width: 110px;
  height: 110px;
  margin: 0 auto 24px;
  position: relative;
}
.why-hero-logo-wrap img {
  width: 110px;
  height: 110px;
  display: block;
}
.why-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero); font-weight: 700;
  color: #fff; margin-bottom: 12px;
}
.why-hero-sub {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.78);
  max-width: 500px; margin: 0 auto;
  line-height: 1.65;
}

/* Body */

/* Stats strip */
.why-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.why-stat-card.accent-aegean::before { background: var(--aegean); }
.why-stat-card.accent-gold::before   { background: var(--gold); }
.why-stat-card.accent-terra::before  { background: var(--terracotta); }

/* Section divider */
.why-divider::before, .why-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.why-divider span {
  font-size: var(--text-tiny); font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* Philosophy row */

/* Feature cards */
html.dark .why-feat-num { color: var(--marble-3); }
.why-feat-card h3 {
  font-family: var(--serif); font-size: var(--text-body); font-weight: 600;
  margin-bottom: 8px; color: var(--ink);
}
.why-feat-card p { font-size: var(--text-meta); color: var(--ink-3); line-height: 1.65; margin: 0; }

/* Manifesto block */
.why-manifesto h2 {
  font-family: var(--serif); font-size: var(--text-sub);
  color: #fff; margin-bottom: 12px;
}
.why-manifesto p {
  font-size: var(--text-small); color: rgba(255,255,255,0.8);
  line-height: 1.7; margin: 0 auto 6px; max-width: 520px;
}
.why-manifesto .why-kicker {
  font-family: var(--serif); font-style: italic;
  font-size: var(--text-body); color: var(--gold-light);
  margin-top: 14px; display: block;
}

/* ----------------------------------------------------------
   MISSION PAGE (old layout — keep working)
---------------------------------------------------------- */
.mission-card h3 { font-family: var(--serif); margin-bottom: 6px; }
.mission-card p  { font-size: var(--text-meta); margin: 0; }
.the-point-highlight h2 { font-family: var(--serif); margin-bottom: 10px; }

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
#site-footer {
  text-align: center; padding: 20px;
  font-size: var(--text-meta); color: var(--ink-4);
  border-top: 1px solid var(--border);
  background: var(--white); margin-top: 48px;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 860px) {
  .top-nav { display: none; }
  .top-nav.open {
    display: flex; flex-direction: column;
    position: fixed; top: var(--header-height); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--aegean); border-bottom: 1px solid var(--aegean-dark);
    padding: 12px; gap: 4px; z-index: 10000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .top-nav.open a { padding: 11px 16px; font-size: var(--text-small); color: rgba(255,255,255,0.8); }
  .top-nav.open a:hover, .top-nav.open a.active { background: rgba(255,255,255,0.15); color: #fff; }
  /* Utility links read as normal items in the mobile drawer — drop the divider/dimming. */
  .top-nav.open a.nav-utility {
    font-size: var(--text-small);
    border-left: none;
    margin-left: 0;
    padding-left: 16px;
    color: rgba(255,255,255,0.65);
  }
  .menu-toggle { display: flex; }
  .detail-grid     { grid-template-columns: 1fr; }
  .compare-cards   { grid-template-columns: 1fr; }
  .why-features    { grid-template-columns: 1fr; }
  .why-philosophy  { grid-template-columns: 1fr 1fr; }
  .phil-step       { border-right: none; border-bottom: 1px solid var(--border); }
  .phil-step:nth-child(odd) { border-right: 1px solid var(--border); }
  .quiz-options    { grid-template-columns: 1fr; }
  .quiz-month-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  #main-map { min-height: 300px; }
  .compare-selectors { flex-direction: column; }
  .compare-selectors select { width: 100%; }
  .why-stats       { grid-template-columns: 1fr; }
  .why-philosophy  { grid-template-columns: 1fr; }
  .phil-step       { border-right: none; }
  .phil-step:nth-child(odd) { border-right: none; }
  #brand-text { font-size: var(--text-body); line-height: 1.1; }
  #brand-text .brand-word { display: block; } /* stack on two lines */
  #site-logo { width: 36px; height: 36px; }
  .logo-wrapper { gap: 10px; }
  .why-hero h1 { font-size: var(--text-section); }
  .mission-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ITINERARY PAGE — Lesvos (and future island pages)
============================================================ */
.itin-wrapper { max-width: 1000px; margin: 0 auto; padding: 0 0 60px; }

.itin-hero {
  background: var(--aegean);
  padding: 36px 28px 40px;
  margin-bottom: 0;
}

/* ---- Immersive island hero (photo + overlaid name/score/tagline/facts) ---- */
.isl-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.isl-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,16,26,0.86) 0%, rgba(8,16,26,0.34) 44%, rgba(8,16,26,0.08) 72%);
}
.isl-hero-body { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2; color: #fff; }
.isl-hero-eyebrow {
  font-family: var(--sans); font-size: var(--text-tiny); font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase; color: #bfe6f0; margin-bottom: 6px;
}
.isl-hero-nrow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.isl-hero-name {
  font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 0.98;
  margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.isl-hero-score {
  display: inline-flex; align-items: baseline; gap: 2px; margin-bottom: 8px;
  background: var(--aegean-dark); color: #fff; font-family: var(--serif); font-weight: 800;
  font-size: 17px; padding: 6px 13px; border-radius: 999px; box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.isl-hero-score small { font-size: 11px; opacity: 0.85; font-weight: 700; }
.isl-hero-tag {
  font-size: var(--text-body); line-height: 1.45; color: rgba(255,255,255,0.93);
  max-width: 640px; margin: 10px 0 14px; text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.isl-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.isl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  font-size: var(--text-tiny); font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.isl-hero .photo-credit-badge { top: 12px; right: 12px; bottom: auto; left: auto; }
/* Itinerary title is now a plain heading below the hero (was a teal box) */
.itin-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-section); letter-spacing: -0.01em; margin: 4px 0 4px; }
.itin-section-sub { color: var(--ink-3); font-size: var(--text-small); margin: 0 0 16px; }
/* Name/meta now live on the hero — hide the redundant copies in the top toolbar */
.detail-header #island-name, .detail-header .island-meta-pill { display: none; }
@media (max-width: 600px) {
  .isl-hero { min-height: 300px; }
  .isl-hero-name { font-size: 34px; }
  .isl-hero-body { left: 18px; right: 18px; bottom: 16px; }
}
.itin-title {
  font-family: var(--serif);
  font-size: var(--text-section); font-weight: 600;
  color: #fff; margin-bottom: 8px;
}
.itin-subtitle {
  font-size: var(--text-small); color: rgba(255,255,255,0.78);
  max-width: 580px; line-height: 1.65; margin: 0;
}

.itin-map-wrap {
  position: relative;
  margin-bottom: 28px;
}
#itin-map {
  height: 480px;
  width: 100%;
  background: var(--aegean-pale);
}

.itin-days { padding: 0; }

.itin-day-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.itin-day-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--marble);
  border-bottom: 1px solid var(--border);
}
.itin-day-label {
  font-family: var(--serif);
  font-size: var(--text-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.itin-day-title {
  font-family: var(--serif);
  font-size: var(--text-body); font-weight: 600;
  color: var(--ink);
}
.itin-stops { padding: 8px 0; }
.itin-stop {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.itin-stop:last-child { border-bottom: none; }
.itin-stop:hover { background: var(--marble); }
.itin-stop-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-tiny); font-weight: 700; color: #fff;
  flex-shrink: 0; margin-top: 1px;
}
.itin-stop-content { flex: 1; }
.itin-stop-name {
  font-family: var(--serif);
  font-size: var(--text-body); font-weight: 600;
  color: var(--ink); margin-bottom: 3px;
}
.itin-stop-desc {
  font-size: var(--text-meta); color: var(--ink-3); line-height: 1.55;
}

@media (max-width: 600px) {
  #itin-map { height: 320px; }
  .itin-hero { padding: 24px 16px 28px; }
  .itin-days { padding: 0; }
  .itin-title { font-size: var(--text-sub); }
}

/* Getting-there section v2 — pills + summary + tip */
.itin-getting-there {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.itin-getting-there-title {
  font-family: var(--serif);
  font-size: var(--text-sub); font-weight: 600;
  color: var(--ink); margin: 0 0 10px;
}
.itin-gt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.itin-gt-pill {
  background: rgba(11,143,172,0.08);
  color: var(--aegean);
  font-size: var(--text-tiny);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.itin-gt-summary {
  margin: 0 0 10px;
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.6;
}
.itin-gt-tip {
  margin: 0;
  padding: 8px 12px;
  background: rgba(11,143,172,0.04);
  border-left: 3px solid var(--aegean);
  border-radius: 0 4px 4px 0;
  font-size: var(--text-small);
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.5;
}
.itin-gt-tip strong { font-style: normal; color: var(--aegean); }

/* Detailed long-form paragraphs (SPA-side, when getting_there.detailed is present).
   Mirrors prerender's .seo-getting-there p styling so the SPA matches what
   Google indexes. **Bold** subheaders inside the prose act as visual sectioning. */
.itin-getting-there > p {
  margin: 0 0 14px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
}
.itin-getting-there > p strong { color: var(--ink-1); }
.itin-getting-there > p:last-child { margin-bottom: 0; }
/* beaches_intro: declarative top-pick prose above the per-beach list */
.itin-beaches-intro p {
  margin: 0 0 14px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
}
.itin-beaches-intro p strong { color: var(--ink-1); }
.itin-beaches-intro p:last-child { margin-bottom: 18px; }

/* Audience pitches ("Naxos for families", "Milos for hikers", etc.) — SPA side.
   Mirrors prerender's .seo-audience styling so the in-browser view matches
   what's indexed. */
.itin-audience {
  margin: 28px 0;
}
.itin-audience-title {
  font-family: var(--display);
  font-size: var(--text-section);
  margin: 0 0 16px;
  color: var(--ink-1);
  border-bottom: 2px solid var(--aegean);
  padding-bottom: 6px;
}
.itin-audience p {
  margin: 0 0 14px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
}
.itin-audience p strong { color: var(--ink-1); }
.itin-audience p:last-child { margin-bottom: 0; }

/* "Read full route" toggle in the SPA's getting-there block. Hides .itin-gt-more
   by default; toggleGettingThereMore() removes the [hidden] attribute on click.
   Content inside remains in the DOM at load — Google indexes it regardless. */
.itin-gt-more[hidden] { display: none; }
.itin-gt-more {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-gt-toggle {
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--aegean);
  font-size: var(--text-small);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.itin-gt-toggle:hover { text-decoration: underline; }

/* Same pattern for the prerendered SEO page (uses native <details>). The
   <summary> is the visible click target; clicking expands the rest. Google
   indexes all of it whether or not the user clicks. */
.seo-gt-more {
  margin-top: 8px;
}
.seo-gt-more > summary {
  cursor: pointer;
  color: #0B8FAC;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  list-style: none;
}
.seo-gt-more > summary::-webkit-details-marker { display: none; }
.seo-gt-more > summary::after {
  content: ' ▾';
  font-size: 0.85em;
  color: #888;
}
.seo-gt-more[open] > summary::after {
  content: ' ▴';
}
.seo-gt-more > summary:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .itin-getting-there { padding: 12px 14px; margin: 16px 0; }
  .itin-getting-there-title { font-size: var(--text-body); }
}

.itin-day-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.itin-day-btn {
  padding: 6px 14px;
  font-size: var(--text-meta); font-weight: 600; font-family: var(--sans);
  border: 1.5px solid;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.75;
}
.itin-day-btn.active {
  opacity: 1;
  background: var(--ink-1);
  color: #fff !important;
  border-color: var(--ink-1) !important;
}
.itin-day-btn:hover { opacity: 1; }
html.dark .itin-day-btn.active {
  background: rgba(255,255,255,0.9);
  color: #111 !important;
  border-color: rgba(255,255,255,0.9) !important;
}

.itin-stop-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.25);
  text-underline-offset: 2px;
}
.itin-stop-link:hover { text-decoration-color: currentColor; }

.itin-beaches-section {
  margin: 32px 0 0;
}
.itin-beaches-header {
  margin-bottom: 20px;
}
.itin-beaches-title {
  font-family: var(--serif);
  font-size: var(--text-sub); font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.itin-beaches-sub {
  font-size: var(--text-meta); color: var(--ink-3); margin: 0;
}
.itin-beaches-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.beach-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}
.beach-card:hover { border-color: var(--aegean-light); }
.beach-photo-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--marble-2);
  position: relative;
}
.beach-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.beach-card:hover .beach-photo { transform: scale(1.03); }

/* Photo credit — tiny info badge that expands on click to show full
   CC attribution. Sits in bottom-right of any positioned photo container.
   Click on badge toggles .open which reveals the credit text. */
.photo-credit-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-tiny);
  line-height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s ease, width 0.18s ease, padding 0.18s ease, border-radius 0.18s ease;
  overflow: hidden;
  white-space: nowrap;
}
.photo-credit-badge:hover,
.photo-credit-badge:focus {
  background: rgba(0, 0, 0, 0.78);
  outline: none;
}
.photo-credit-text {
  display: none;
  margin-left: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-tiny);
  line-height: 1.2;
}
.photo-credit-badge.open {
  width: auto;
  max-width: calc(100% - 12px);
  border-radius: 9px;
  padding: 0 8px 0 6px;
  background: rgba(0, 0, 0, 0.78);
}
.photo-credit-badge.open .photo-credit-text {
  display: inline;
}
.photo-credit-text a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.photo-credit-text a:hover {
  border-bottom-color: #fff;
}

/* ============================================================
   LIGHTBOX — fullscreen overlay for clicking any .lightbox-img
============================================================ */
.lightbox-img {
  cursor: zoom-in;
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox-overlay.lightbox-open {
  display: flex;
  opacity: 1;
}
.lightbox-content {
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lightbox-content-img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  background: #111;
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: var(--text-meta);
  text-align: center;
  max-width: 90vw;
  line-height: 1.4;
  min-height: 18px;
}
.lightbox-caption a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.lightbox-caption a:hover {
  border-bottom-color: #fff;
}

/* Close button — top-right */
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-sub);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-close:focus {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

/* Prev / next arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-h2);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover, .lightbox-prev:focus,
.lightbox-next:hover, .lightbox-next:focus {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

/* Mobile: smaller controls, navigation arrows tucked closer */
@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next {
    width: 36px;
    height: 56px;
    font-size: var(--text-sub);
  }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close {
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .lightbox-content-img {
    max-height: 80vh;
  }
}
.beach-card-body {
  padding: 16px 20px 18px;
}
.beach-rank-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.beach-rank {
  font-family: var(--serif);
  font-size: var(--text-section); font-weight: 600;
  color: var(--aegean-light);
  flex-shrink: 0; width: 32px;
}
.beach-name-stars { flex: 1; }
.beach-stars {
  font-size: var(--text-body);
  color: var(--gold);
  letter-spacing: 1px;
  margin-top: 2px;
}
.beach-name {
  font-family: var(--serif);
  font-size: var(--text-body); font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.beach-name-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.2);
  text-underline-offset: 2px;
}
.beach-name-link:hover { color: var(--aegean); text-decoration-color: var(--aegean); }
.beach-desc {
  font-size: var(--text-meta); color: var(--ink-3);
  line-height: 1.65; margin: 0 0 12px;
}
.beach-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.beach-spec {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.beach-spec-full {
  grid-column: 1 / -1;
}
.beach-spec-label {
  font-size: var(--text-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-4);
}
.beach-spec-val {
  font-size: var(--text-meta); color: var(--ink-2);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .beach-card { flex-direction: column; gap: 8px; }
  .beach-rank { font-size: var(--text-sub); }
  .beach-specs { grid-template-columns: 1fr; }
  .itin-beaches-section { margin: 24px 0 0; }
  .itin-day-filter { padding: 10px 12px; gap: 6px; }
  .itin-day-btn { font-size: var(--text-tiny); padding: 5px 10px; }
}

/* Itinerary day header extras */
.itin-day-header {
  flex-wrap: wrap;
  gap: 8px;
}
.itin-day-header-main {
  display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap;
}
.itin-day-meta {
  font-size: var(--text-tiny); font-weight: 500;
  color: var(--ink-4);
  letter-spacing: 0.2px;
  margin-left: auto;
}
.itin-overnight {
  font-size: var(--text-tiny); font-weight: 600;
  padding: 3px 10px;
  border: 1.5px solid;
  border-radius: 20px;
  background: var(--white);
  white-space: nowrap;
}
.itin-overnight--booking {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.itin-overnight--booking:hover {
  background: currentColor;
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.itin-overnight--booking:hover,
.itin-overnight--booking:hover .itin-overnight-cta {
  color: var(--white) !important;
}
.itin-overnight--booking:active {
  transform: translateY(0);
}
.itin-overnight-cta {
  font-weight: 700;
  font-size: 0.95em;
  opacity: 0.85;
}
.itin-stop-name-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px; flex-wrap: wrap;
}
.itin-stop-time {
  font-size: var(--text-tiny); font-weight: 600;
  color: var(--ink-4);
  background: var(--marble-2);
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ============================================================
   HERO BANNER
============================================================ */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-sub); font-weight: 700;
  color: #fff; margin: 0 0 4px;
  line-height: 1.2;
}
.hero-sub {
  font-size: var(--text-meta);
  color: rgba(255,255,255,0.78);
  margin: 0; line-height: 1.5;
}
.hero-stats {
  display: flex; gap: 20px; flex-shrink: 0;
}
.hero-stat {
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}
.hero-stat-num {
  font-family: var(--serif);
  font-size: var(--text-sub); font-weight: 600;
  color: #fff; line-height: 1;
}
.hero-stat-lbl {
  font-size: var(--text-tiny); font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ============================================================
   LOCAL & SEASONAL — specialties / crafts / festivals
============================================================ */
.local-section {
  margin-top: 28px;
  padding: 24px 0 28px;
  background: var(--marble);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.local-section-title {
  font-family: var(--serif);
  font-size: var(--text-sub); font-weight: 600;
  color: var(--ink);
  margin: 0 18px 18px;
}
.local-block {
  margin-bottom: 22px;
}
.local-block:last-child { margin-bottom: 0; }
.local-heading {
  font-family: var(--serif);
  font-size: var(--text-body); font-weight: 600;
  color: var(--ink-2);
  margin: 0 18px 12px;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.local-icon {
  font-size: var(--text-body);
  display: inline-block;
}
.local-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.local-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.local-item:hover {
  border-color: var(--aegean-light);
}
.local-item-name {
  font-family: var(--serif);
  font-size: var(--text-small); font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.local-when {
  font-family: var(--sans);
  font-size: var(--text-tiny); font-weight: 500;
  color: var(--aegean-dark);
  background: var(--aegean-pale);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.local-item-desc {
  font-size: var(--text-meta);
  color: var(--ink-3);
  line-height: 1.55;
}

/* Image-variant: card becomes a flex row with thumbnail on the left */
.local-item-with-image {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
}
.local-item-image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--marble-2, var(--marble));
  display: block;
}
/* Photo-variant: card stacks vertically with full-width banner photo on top */
.local-item-with-photo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.local-item-photo-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: var(--marble-2, var(--marble));
}
.local-item-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.local-item-with-photo > .local-item-text {
  padding: 12px 14px 14px;
}
.local-item-text {
  flex: 1;
  min-width: 0;
}
/* Plain (no-image, no-photo) variant keeps existing block layout */
.local-item:not(.local-item-with-image):not(.local-item-with-photo) > .local-item-text {
  display: contents;
}

@media (max-width: 600px) {
  .local-section { padding: 20px 0 24px; }
  .local-section-title { font-size: var(--text-sub); margin-left: 14px; margin-right: 14px; }
  .local-heading { margin-left: 14px; margin-right: 14px; }
  .local-items { grid-template-columns: 1fr; }
  .local-item-image { width: 64px; height: 64px; }
}

html.dark .local-section { background: var(--marble-2); border-top-color: var(--marble-3); }
html.dark .local-when { background: var(--aegean-light); color: var(--aegean-dark); }
html.dark .local-item { background: var(--bg); border-color: var(--ink-2); }

/* ============================================================
   SIMILAR ISLANDS — recommendation cards at bottom of detail page
============================================================ */
.similar-section {
  margin-top: 28px;
  padding: 24px 18px 28px;
  background: var(--marble);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.similar-title {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.similar-intro {
  font-size: var(--text-meta);
  color: var(--ink-3);
  margin: 0 0 18px;
}
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.similar-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-1);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  cursor: pointer;
}
.similar-card:hover {
  border-color: var(--aegean);
  box-shadow: 0 2px 8px rgba(11, 143, 172, 0.10);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--ink-1);
}
.similar-card-name {
  font-family: var(--serif);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--ink);
}
.similar-card-score {
  font-size: var(--text-meta);
  color: var(--aegean-dark);
  font-weight: 600;
}
.similar-card-reason {
  font-size: var(--text-meta);
  color: var(--ink-3);
  line-height: 1.4;
  text-transform: capitalize;
}

html.dark .similar-section { background: var(--marble-2); border-top-color: var(--marble-3); }
html.dark .similar-card { background: var(--bg); border-color: var(--ink-2); }
html.dark .similar-card:hover { border-color: var(--aegean); }

/* ============================================================
   "WHAT'S ON NOW" HOME STRIP
   Compact one-row band above the map showing what's perfect
   for the current month + any festivals happening now.
============================================================ */
.whats-on-strip {
  background: var(--marble);
  border-bottom: 1px solid var(--border);
  padding: 6px 18px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  line-height: 1.4;
}
.whats-on-strip:empty { display: none; }
.whats-on-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.whats-on-perfect {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.whats-on-label {
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.whats-on-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.whats-on-chip {
  display: inline-block;
  padding: 2px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-meta);
  transition: border-color 0.15s, color 0.15s;
}
.whats-on-chip:hover {
  border-color: var(--aegean);
  color: var(--aegean-dark);
  text-decoration: none;
}
.whats-on-festivals-link {
  white-space: nowrap;
  color: var(--accent, #FF6B6B);
  font-weight: 600;
  text-decoration: none;
  padding: 2px 0;
}
.whats-on-festivals-link:hover {
  text-decoration: underline;
  color: var(--accent-dark);
}

@media (max-width: 600px) {
  .whats-on-strip { padding: 5px 10px; }
  .whats-on-chip { padding: 2px 8px; }
}

html.dark .whats-on-strip { background: var(--marble-2); border-bottom-color: var(--marble-3); }
html.dark .whats-on-chip { background: var(--bg); border-color: var(--ink-2); color: var(--ink); }
html.dark .whats-on-chip:hover { border-color: var(--aegean); }

/* MAP LEGEND */
.map-legend {
  position: absolute;
  bottom: 28px; right: 10px;
  z-index: 400;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  min-width: 160px;
}
.map-legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-meta); font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.map-legend-row:last-of-type { margin-bottom: 8px; }
.map-legend-dot {
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.map-legend-hint {
  font-size: var(--text-tiny); color: var(--ink-4);
  border-top: 1px solid var(--border);
  padding-top: 7px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .hero-banner { padding: 12px 16px; max-height: 160px; }
  .hero-title { font-size: var(--text-body); }
  .hero-stats { gap: 14px; }
  .hero-stat-num { font-size: var(--text-sub); }
  .map-legend { bottom: 20px; right: 8px; min-width: 140px; }
}

/* Mobile filter and hero fixes */
@media (max-width: 600px) {
  .search-container { padding: 8px 12px 10px; }
  .filter-section { gap: 6px; margin-bottom: 7px; }
  .filter-label { min-width: 75px; font-size: var(--text-tiny); }
  .hero-banner {
    background: #0B8FAC !important;
    max-height: 180px;
  }
  .hero-content { gap: 10px; }
  .hero-stats { display: none; }
  .hero-text { min-width: 0; }
  .hero-title { font-size: var(--text-body); }
  .hero-sub { font-size: var(--text-meta); }
  .map-legend { display: none; }
}

/* Share button */
.share-btn {
  padding: 8px 16px; font-size: var(--text-meta); font-family: var(--sans); font-weight: 600;
  border: 1.5px solid var(--aegean-mid);
  color: var(--aegean); background: var(--aegean-pale);
  border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s;
}
.share-btn:hover { background: var(--aegean); color: #fff; }

/* Score pills — replaces the old star ratings.
   Numeric badge with color from scoreToColor() in script.js. More honest about
   precision (0.1 resolution shown directly) and easier to scan in dense tables.
   The color scale is the same 4-bucket palette used on map markers/tooltips. */
.score-pill {
  display: inline-block;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ink-3);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
}
.score-pill.score-empty {
  background: transparent;
  color: var(--ink-4);
  font-weight: 400;
}
/* Legacy alias — kept so old call sites with .star-rating wrapping a pill still
   look fine. Doesn't override anything; the inner .score-pill carries the visuals. */
.star-rating {
  font-size: var(--text-meta);
  white-space: nowrap;
}
.table-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}
.table-bar-fill {
  height: 6px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.75;
}
.table-bar-label {
  font-size: var(--text-tiny);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Beach community voting */
.beach-ratings-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}
.beach-rating-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.beach-rating-label {
  font-size: var(--text-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-4);
}
@media (max-width: 600px) {
  .beach-ratings-row { gap: 10px; }
}

.footer-copy {
  font-size: var(--text-meta);
  color: var(--ink-4);
  margin-top: 4px;
}
.footer-updated {
  font-size: var(--text-meta);
  color: var(--ink-4);
  opacity: 0.7;
  margin-top: 2px;
}
.footer-updated:empty { display: none; }
.footer-links {
  font-size: var(--text-meta);
  color: var(--ink-4);
  margin-top: 2px;
}
.footer-links a {
  color: var(--ink-4);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--teal);
  text-decoration: underline;
}

/* Island hover tooltip */
.island-tooltip {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 10px 14px !important;
  font-family: var(--sans) !important;
}
.island-tooltip::before {
  display: none !important;
}
.leaflet-tooltip-bottom.island-tooltip::before,
.leaflet-tooltip-top.island-tooltip::before {
  border-bottom-color: var(--white) !important;
  border-top-color: var(--white) !important;
}

/* Ferry booking button */
.ferry-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--text-meta);
  font-family: var(--sans);
  font-weight: 700;
  background: var(--accent, #FF6B6B);
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.ferry-btn:hover {
  background: var(--terracotta, #E8522A);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,82,42,0.25);
}
.car-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--text-meta);
  font-family: var(--sans);
  font-weight: 700;
  background: var(--aegean, #0B8FAC);
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.car-btn:hover {
  background: var(--aegean-dark, #076880);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,143,172,0.25);
}

/* Shortlist button on detail page */
.shortlist-btn {
  padding: 8px 16px;
  font-size: var(--text-meta);
  font-family: var(--sans);
  font-weight: 600;
  border: 1.5px solid var(--gold, #C4962A);
  color: var(--gold, #C4962A);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.shortlist-btn:hover {
  background: var(--gold, #C4962A);
  color: #fff;
}
.shortlist-btn.saved {
  background: var(--gold, #C4962A);
  color: #fff;
}

/* Shortlist count in nav */
.shortlist-count {
  font-size: var(--text-tiny);
  color: var(--aegean);
  font-weight: 700;
  margin-left: 3px;
}

/* Shortlist page */
.shortlist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.shortlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.shortlist-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.shortlist-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--aegean);
}
.shortlist-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: var(--text-sub);
  color: var(--ink-1);
}
.shortlist-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: var(--text-meta);
  color: var(--ink-3);
}
.shortlist-rating {
  margin-bottom: 8px;
}
.shortlist-dims {
  font-size: var(--text-meta);
  color: var(--ink-3);
  margin-bottom: 12px;
}
.shortlist-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-3);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--text-tiny);
  font-family: var(--sans);
  transition: all 0.15s;
}
.shortlist-remove:hover {
  background: #fee;
  border-color: var(--accent);
  color: var(--accent);
}
.shortlist-clear {
  padding: 10px 24px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink-3);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
}
.shortlist-clear:hover {
  background: #fee;
  color: var(--accent);
  border-color: var(--accent);
}

/* Island tooltip — content styles that respond to dark mode */
.island-tooltip-inner {
  font-family: var(--sans);
  min-width: 200px;
}
/* Lazy island photo at the top of the hover tooltip. Hidden until a photo is
   loaded on hover; bleeds to the tooltip's padded edges (10px 14px). */
.itt-media { display: none; }
.island-tooltip-inner.has-photo .itt-media {
  display: block;
  position: relative;
  height: 112px;
  margin: -10px -14px 9px;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(100deg, #eef3f4 30%, #e4edee 50%, #eef3f4 70%);
}
.itt-photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.3s ease;
}
.itt-photo.loaded { opacity: 1; }
.itt-name {
  font-weight: 700;
  font-size: var(--text-meta);
  color: var(--ink-1);
}
.itt-meta {
  font-size: var(--text-tiny);
  color: var(--ink-3);
  margin: 2px 0;
}
.itt-overall {
  margin-top: 5px;
  font-size: var(--text-meta);
  color: var(--ink-2);
}
.itt-days {
  margin-top: 5px;
  font-size: var(--text-tiny);
  font-weight: 700;
  color: var(--aegean);
}
.itt-cta {
  margin-top: 3px;
  font-size: var(--text-tiny);
  color: var(--aegean);
}

/* Dark mode for Leaflet tooltips and popups */
html.dark .island-tooltip {
  background: var(--white, #1a2332) !important;
  border-color: var(--border, #2a3040) !important;
  color: var(--ink-1, #e8ecf1) !important;
}
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip {
  background: var(--white, #1a2332) !important;
  color: var(--ink-1, #e8ecf1) !important;
}
html.dark .leaflet-popup-content {
  color: var(--ink-1, #e8ecf1) !important;
}

/* Ferry Routes Map — legend and styling */
.ferry-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: var(--text-meta);
  color: var(--ink-2);
  font-family: var(--sans);
}
.ferry-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ferry-legend-line {
  display: inline-block;
  width: 40px;
  height: 0;
  border-top-style: solid;
  border-top-width: 4px;
}
.ferry-legend-line.ferry-freq-high {
  border-top-color: #076880;
  border-top-width: 4px;
}
.ferry-legend-line.ferry-freq-med {
  border-top-color: #0B8FAC;
  border-top-width: 3px;
}
.ferry-legend-line.ferry-freq-low {
  border-top-color: #C4962A;
  border-top-width: 2px;
  border-top-style: dashed;
}

/* ============================================================
   FERRY MAP FREQUENCY FILTER
   Toggle pills below the map. Each pill shows a coloured line
   matching its frequency tier. Inactive pills look dimmed.
============================================================ */
.ferry-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.ferry-filter-label {
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.ferry-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--marble);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.ferry-filter-btn:hover { border-color: var(--aegean); }
.ferry-filter-btn.active {
  background: var(--white);
  border-color: var(--aegean);
  color: var(--ink);
}
.ferry-filter-btn:not(.active) {
  opacity: 0.45;
}
.ferry-filter-btn:not(.active) .ferry-filter-line {
  filter: grayscale(0.8);
}
.ferry-filter-line {
  display: inline-block;
  width: 28px;
  height: 0;
  border-top-style: solid;
  border-top-width: 3px;
}
.ferry-freq-high .ferry-filter-line {
  border-top-color: #076880;
  border-top-width: 3px;
}
.ferry-freq-med .ferry-filter-line {
  border-top-color: #0B8FAC;
  border-top-width: 2.5px;
}
.ferry-freq-low .ferry-filter-line {
  border-top-color: #C4962A;
  border-top-width: 2px;
  border-top-style: dashed;
}

html.dark .ferry-filter-row { background: var(--marble); }
html.dark .ferry-filter-btn { background: rgba(255,255,255,0.04); }
html.dark .ferry-filter-btn.active { background: var(--marble-2); }

/* ============================================================
   FERRY MAP FOCUS BANNER — appears above the map when a port is clicked
============================================================ */
.ferry-focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  margin-bottom: 12px;
  background: var(--aegean);
  color: #fff;
  border-radius: var(--radius);
  font-family: var(--sans);
}
.ferry-focus-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--text-body);
}
.ferry-focus-text strong {
  font-size: var(--text-sub);
  font-family: var(--serif);
}
.ferry-focus-count {
  opacity: 0.85;
  font-size: var(--text-small);
}
.ferry-focus-actions {
  display: flex;
  gap: 8px;
}
.ferry-focus-btn,
.ferry-focus-clear {
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  transition: background 0.15s;
}
.ferry-focus-btn { background: #fff; color: var(--aegean-dark); border-color: #fff; }
.ferry-focus-btn:hover { background: var(--marble); }
.ferry-focus-clear:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   FERRY PLANNER — Book trip button in result panel
============================================================ */
.planner-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.planner-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 700;
  color: #fff !important;
  background: var(--accent, #FF6B6B);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(232, 82, 42, 0.18);
  transition: all 0.15s;
}
.planner-book-btn:hover {
  background: var(--terracotta, #E8522A);
  text-decoration: none;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 82, 42, 0.30);
}
.planner-book-btn:active { transform: scale(0.98); }

/* In-map "Book ferries" Leaflet control — top-right of ferry map */
.ferry-map-book-ctrl {
  background: var(--aegean);
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
.ferry-map-book-ctrl a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--aegean);
  transition: background 0.15s;
}
.ferry-map-book-ctrl a:hover {
  background: var(--aegean-dark);
  text-decoration: none;
  color: #fff;
}
@media (max-width: 600px) {
  .ferry-map-book-ctrl a { padding: 7px 10px; }
  .ferry-map-book-label { display: none; }    /* Icon only on small screens */
}

/* Ferry map container */
#ferry-map {
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

html.dark #ferry-map {
  border-color: var(--border);
}

/* Mobile legend stacking */
@media (max-width: 640px) {
  .ferry-legend {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }
  .ferry-legend-item { font-size: var(--text-meta); }
  #ferry-map { height: 500px !important; }
}

/* Hopping intro */
.hopping-intro {
  color: var(--ink-3);
  font-size: var(--text-small);
  margin-bottom: 20px;
  line-height: 1.6;
}

.hopping-header h1 {
  margin-bottom: 6px;
}

/* Boost complementary pairings heading */
#view-hopping h2 {
  font-family: var(--serif);
  font-size: var(--text-section);
  color: var(--ink-1);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* Suggested Itineraries cards */
#hopping-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.itin-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.itin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--aegean);
}
.itin-title {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ink-1);
  line-height: 1.3;
}
.itin-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  font-size: var(--text-meta);
}
.itin-duration {
  color: var(--aegean);
  font-weight: 700;
}
.itin-vibe {
  color: var(--ink-3);
  font-style: italic;
}
.itin-vibe::before {
  content: '·';
  margin-right: 6px;
  color: var(--ink-3);
}
.itin-desc {
  font-size: var(--text-meta);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 16px;
}
.itin-legs {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itin-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-meta);
}
.itin-leg-place {
  color: var(--ink-1);
  font-size: var(--text-meta);
}
.itin-leg-place strong {
  font-weight: 700;
}
.itin-nights {
  color: var(--aegean);
  font-weight: 600;
  margin-left: 6px;
}
.itin-leg-via {
  color: var(--ink-3);
  font-size: var(--text-tiny);
  font-style: italic;
}
.itin-links {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--text-meta);
  color: var(--ink-3);
}
.itin-island-link {
  color: var(--aegean);
  text-decoration: none;
  font-weight: 600;
}
.itin-island-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  #hopping-list {
    grid-template-columns: 1fr;
  }
}

/* Dark mode header — darker background so nav text stays readable */
html.dark header {
  background: linear-gradient(135deg, #0A2A35 0%, #144A5F 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
html.dark .top-nav a {
  color: rgba(255,255,255,0.85);
}
html.dark .top-nav a:hover,
html.dark .top-nav a.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
html.dark #brand-text {
  color: #fff;
}
html.dark #site-logo {
  background: rgba(255,255,255,0.18);
}
html.dark .dark-mode-toggle {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
html.dark .menu-toggle span {
  background: #fff;
}
/* Mobile menu in dark mode */
html.dark .top-nav.open {
  background: #0A2A35;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Compact Why This Site Exists page */
.why-body-compact .why-lead {
  font-size: var(--text-sub);
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 22px;
  font-weight: 400;
}
.why-body-compact .why-lead strong {
  color: var(--ink-1);
  font-weight: 700;
}
.why-body-compact .why-manifesto {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.why-body-compact .why-manifesto h2 {
  font-family: var(--serif);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--aegean);
  margin: 0 0 16px;
  font-weight: 700;
}
.why-body-compact .why-manifesto p {
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 800;
  color: var(--ink-1);
  margin: 0 0 14px;
  line-height: 1.4;
}
.why-body-compact .why-kicker {
  display: block;
  font-size: var(--text-small);
  color: var(--ink-3);
  font-style: italic;
}

@media (max-width: 640px) {
  .why-body-compact {
    padding: 32px 20px 40px;
  }
  .why-body-compact .why-lead {
    font-size: var(--text-body);
  }
  .why-body-compact .why-manifesto p {
    font-size: var(--text-sub);
  }
}

/* Print/PDF button on detail page */
.print-btn {
  padding: 8px 16px;
  font-size: var(--text-meta);
  font-family: var(--sans);
  font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--ink-2);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.print-btn:hover {
  background: var(--ink-1);
  color: var(--white);
  border-color: var(--ink-1);
}

/* Print stylesheet — strips chrome for clean PDF output */
@media print {
  /* Hide navigation, maps, action buttons, footer */
  header,
  #site-footer,
  .menu-toggle,
  .top-nav,
  .dark-mode-toggle,
  #itinerary-map,
  #island-mini-map,
  .back-btn,
  .compare-add-btn,
  .shortlist-btn,
  .share-btn,
  .print-btn,
  .ferry-btn,
  .car-btn,
  .itin-day-btn-row,
  .leaflet-container,
  #home-controls,
  #loading-overlay,
  #hero-banner {
    display: none !important;
  }
  
  /* Reset backgrounds and forced colors for clean print */
  html, body, .view-section, #view-detail, .detail-container, .detail-grid, .detail-main, .detail-sidebar {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  
  body {
    font-size: 11pt;
    line-height: 1.5;
    margin: 0;
  }
  
  /* Page setup */
  @page {
    size: A4;
    margin: 18mm 16mm;
  }
  
  /* Show URL after links so the PDF has clickable references */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    font-weight: normal;
  }
  /* But don't print URLs after navigation/in-page links */
  a[href^="#"]:after,
  .nav-link:after {
    content: "";
  }
  
  /* Headings */
  h1 { font-size: 22pt; margin: 0 0 6pt; color: #000; }
  h2 { font-size: 14pt; margin: 18pt 0 8pt; color: #000; page-break-after: avoid; }
  h3 { font-size: 12pt; margin: 12pt 0 6pt; color: #000; page-break-after: avoid; }
  
  /* Detail page layout — single column */
  .detail-grid {
    display: block !important;
    grid-template-columns: none !important;
  }
  .detail-main, .detail-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Keep itinerary stops on same page when possible */
  .stop-card,
  .beach-card,
  .itin-day {
    page-break-inside: avoid;
  }
  
  /* Beach photos — keep small in print to save ink and pages */
  .beach-photo {
    max-height: 120px !important;
    object-fit: cover;
  }
  
  /* Compact ratings/stars */
  .star-rating { color: #444 !important; }
  
  /* Footer note for PDF identifying source */
  .detail-container::after {
    content: "Source: aegeanblueprint.com — © 2026 Stergios Gousios";
    display: block;
    margin-top: 24pt;
    padding-top: 12pt;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #666;
    text-align: center;
  }
  
  /* Hide stops we filtered out — make sure all show in print */
  .stop-card[style*="display: none"] {
    display: block !important;
  }
}

/* ============================================================
   FEEDBACK BUTTON & MODAL
============================================================ */

/* Floating feedback button — fixed bottom-right */
#feedback-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(11,143,172,0.35);
  transition: all 0.2s;
}
#feedback-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11,143,172,0.45);
}

/* Hide feedback button on print */
@media print {
  #feedback-btn, .feedback-modal { display: none !important; }
}

/* Modal backdrop */
.feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal content */
.feedback-content {
  background: var(--white);
  color: var(--ink-1);
  border-radius: 18px;
  padding: 32px 32px 28px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.25s;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.feedback-content h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: var(--text-section);
  color: var(--ink-1);
}
.feedback-content > p {
  margin: 0 0 20px;
  font-size: var(--text-small);
  color: var(--ink-3);
  line-height: 1.6;
}

.feedback-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--marble-2, #f0f0f0);
  color: var(--ink-2);
  font-size: var(--text-sub);
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.feedback-close:hover {
  background: var(--accent, #FF6B6B);
  color: #fff;
}

/* Form */
#feedback-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#feedback-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink-2);
}
#feedback-form select,
#feedback-form textarea,
#feedback-form input {
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: var(--text-small);
  background: var(--marble, #fff);
  color: var(--ink-1);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: border 0.15s;
  font-weight: 400;
}
#feedback-form select:focus,
#feedback-form textarea:focus,
#feedback-form input:focus {
  outline: none;
  border-color: var(--aegean);
}
#feedback-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--sans);
}

.feedback-submit {
  margin-top: 6px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.feedback-submit:hover {
  transform: translateY(-1px);
}

.feedback-note {
  margin: 4px 0 0;
  font-size: var(--text-tiny) !important;
  color: var(--ink-4) !important;
  font-style: italic;
  text-align: center;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  #feedback-btn {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: var(--text-meta);
  }
  .feedback-content {
    padding: 24px 20px;
  }
  .feedback-content h2 { font-size: var(--text-sub); }
}

/* ============================================================
   LANGUAGE DROPDOWN — globe with menu
============================================================ */
.lang-dropdown {
  position: relative;
  margin-left: 8px;
  display: inline-block;
}
.lang-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.2);
}
.lang-globe { font-size: var(--text-body); line-height: 1; }
.lang-current { font-weight: 700; }
.lang-caret { font-size: var(--text-tiny); opacity: 0.7; transition: transform 0.15s; }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 140px;
  padding: 4px 0;
  display: none;
  z-index: 3000;
}
.lang-menu.open { display: block; }
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: var(--text-small);
  color: var(--ink-1);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.1s;
}
.lang-option:hover { background: var(--tile-bg); }
.lang-option.active { background: var(--aegean-light); color: var(--aegean); font-weight: 700; }
.lang-option-flag { font-size: var(--text-sub); line-height: 1; }

html.dark .lang-menu {
  background: var(--dark-card);
  border-color: rgba(255,255,255,0.12);
}
html.dark .lang-option { color: rgba(255,255,255,0.85); }
html.dark .lang-option:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 768px) {
  .lang-dropdown { margin-left: 4px; }
  .lang-toggle { padding: 5px 8px; font-size: var(--text-meta); }
  .lang-globe { font-size: var(--text-small); }
}

/* ============================================================
   Compare bar colors — work in both light & dark mode
============================================================ */
/* (Removed — per-dimension bars dropped from compare cards; radar covers it.) */

/* ============================================================
   COMPARE — WTV OVERLAP RIBBON
============================================================ */
.compare-section-label {
  font-family: var(--serif);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.compare-wtv {
  margin-bottom: 8px;
}
.cwtv-legend-row {
  display: flex; align-items: center;
  margin-bottom: 8px; gap: 8px;
}
.cwtv-legend {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-meta); color: var(--ink-4); flex-wrap: wrap;
}
/* Island name labels on the left of the grid */
.cwtv-wrap {
  display: flex; align-items: stretch; gap: 8px;
}
.cwtv-labels {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 0 2px;
  flex-shrink: 0;
  min-width: 72px; max-width: 120px;
}
.cwtv-label-a, .cwtv-label-b {
  font-family: var(--serif); font-size: var(--text-meta); font-weight: 700;
  line-height: 1.2;
  /* vertically centre in their half of the strip height */
  display: flex; align-items: center;
  height: 22px;
}
.cwtv-label-a { color: #1B4F8A; }
.cwtv-label-b { color: #C4962A; }
html.dark .cwtv-label-a { color: #4DBEFF; }
html.dark .cwtv-label-b { color: #FFCB52; }
.cwtv-label-spacer {
  /* matches the month label row height */
  height: 18px; flex-shrink: 0;
}
.cwtv-wrap .cwtv-grid { flex: 1; min-width: 0; }
.cwtv-leg {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; flex-shrink: 0;
}
/* Reuse WTV palette */
.cwtv-leg.wtv-perfect { background: #076880; }
.cwtv-leg.wtv-great   { background: #0B8FAC; }
.cwtv-leg.wtv-ok      { background: #B8DCE5; }
.cwtv-leg.wtv-avoid   { background: #C25450; }

.cwtv-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.cwtv-col {
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: 3px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.1s;
}
.cwtv-col:hover { transform: scaleY(1.04); z-index: 1; }
.cwtv-col.cwtv-sweet { outline: 2px solid rgba(11,143,172,0.4); border-radius: 3px; }
.cwtv-col.cwtv-best  { outline: 2px solid #076880; border-radius: 3px; }
.cwtv-cell {
  height: 22px; position: relative; overflow: hidden;
}
.cwtv-cell.wtv-perfect { background: #076880; }
.cwtv-cell.wtv-great   { background: #0B8FAC; }
.cwtv-cell.wtv-ok      { background: #B8DCE5; }
.cwtv-cell.wtv-avoid   { background: #C25450; }
.cwtv-why {
  display: none; /* shown on hover via tooltip attr, not inline */
}
.cwtv-month {
  text-align: center;
  font-size: var(--text-micro, 10px); font-weight: 600;
  color: var(--ink-3);
  padding: 2px 0;
  background: var(--marble-2);
}
.cwtv-verdict {
  margin-top: 10px;
  font-size: var(--text-small);
  color: var(--ink-3);
  padding: 8px 12px;
  background: var(--aegean-pale);
  border-radius: var(--radius);
  border-left: 3px solid var(--aegean);
}
.cwtv-verdict-best { border-left-color: #076880; background: rgba(7,104,128,0.08); }
.cwtv-verdict-warn { border-left-color: #C25450; background: rgba(194,84,80,0.07); color: var(--ink-3); }

html.dark .cwtv-month { background: rgba(255,255,255,0.06); color: var(--ink-4); }
html.dark .cwtv-verdict { background: rgba(11,143,172,0.12); }
html.dark .cwtv-verdict-best { background: rgba(7,104,128,0.15); }
html.dark .cwtv-verdict-warn { background: rgba(194,84,80,0.1); }

/* ============================================================
   COMPARE — CHARACTER & EXTRA CARDS
============================================================ */
.compare-extra { margin-bottom: 32px; }
.cmp-extra-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.cmp-extra-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.cmp-extra-name {
  font-family: var(--serif); font-size: var(--text-body);
  font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}
.cmp-bestfor {
  font-size: var(--text-small); color: var(--ink-3);
  margin-bottom: 12px;
}
.cmp-char-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.cmp-char-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: var(--text-meta); font-weight: 500;
  background: var(--marble);
  border: 1.5px solid var(--border-2);
  border-radius: 20px;
  color: var(--ink-3);
}
.cmp-beach-summary {
  font-size: var(--text-meta); color: var(--ink-3);
  margin-bottom: 10px;
}
.cmp-transport {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cmp-transport-pill {
  font-size: var(--text-meta);
  padding: 3px 9px;
  background: var(--aegean-pale);
  border: 1px solid var(--aegean-light);
  border-radius: var(--radius);
  color: var(--aegean-dark);
}

@media (max-width: 600px) {
  .cwtv-grid { gap: 1px; }
  .cwtv-cell { height: 16px; }
  .cwtv-month { font-size: var(--text-micro, 9px); }
  .cwtv-legend { display: none; }
  .cwtv-labels { min-width: 52px; max-width: 72px; }
  .cwtv-label-a, .cwtv-label-b { font-size: var(--text-micro, 10px); height: 16px; }
  .cmp-extra-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer cleanup — single line, compact, no version display
============================================================ */
#site-footer {
  text-align: center;
  padding: 18px 16px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  color: var(--ink-3);
  border-top: 1px solid var(--border);
  margin-top: 40px;
  background: transparent;
}
#site-footer .footer-copy {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--ink-3);
}
#version-display { display: none; }

@media print {
  #site-footer { display: none; }
}

/* ============================================================
   (Legacy lang toggle styles removed — replaced by .lang-dropdown)
============================================================ */

/* ============================================================
   Author photo block on mission page
============================================================ */
.author-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  border: 3px solid var(--white);
}
html.dark .author-photo {
  border-color: var(--marble-3);
}
.author-name {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 800;
  color: var(--ink-1);
}
.author-role {
  font-size: var(--text-meta);
  color: var(--ink-3);
  font-style: italic;
}

@media (max-width: 480px) {
  .author-photo-block {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 18px 16px;
  }
  .author-photo { width: 80px; height: 80px; }
}

/* ============================================================
   Stop photos in itinerary — side by side with text (compact)
============================================================ */

/* When a stop has a photo, lay text and photo side-by-side */
.itin-stop.has-photo .itin-stop-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.itin-stop.has-photo .itin-stop-text {
  flex: 1;
  min-width: 0; /* allow text to wrap */
}
.itin-stop-photo-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 95px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  align-self: center;
  position: relative;
}
.itin-stop-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.itin-stop-photo:hover {
  transform: scale(1.06);
}
html.dark .itin-stop-photo-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* On narrower screens, drop the photo below the text */
@media (max-width: 640px) {
  .itin-stop.has-photo .itin-stop-content {
    flex-direction: column;
    gap: 10px;
  }
  .itin-stop-photo-wrap {
    width: 100%;
    max-width: 280px;
    height: 140px;
    align-self: flex-start;
  }
}

/* ============================================================
   Car-need pill (inverted scale: 1=useless, 5=essential)
============================================================ */
.car-need-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--text-tiny);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.car-need-icon { font-size: var(--text-meta); line-height: 1; }
.car-need-score { font-weight: 800; font-size: var(--text-tiny); }
.car-need-label { font-size: var(--text-tiny); opacity: 0.9; }
/* Clickable car-reliance pill → car-rental affiliate */
.car-need-link { transition: filter .15s ease, box-shadow .15s ease; }
.car-need-link:hover { filter: brightness(0.94); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.car-need-link:hover .car-need-label { text-decoration: underline; }
.car-need-go { font-size: var(--text-tiny); font-weight: 700; opacity: 0.75; }

/* Hide the text label on narrower screens to save space */
@media (max-width: 900px) {
  .car-need-label { display: none; }
}

/* ============================================================
   TABLE DIMENSION TOGGLE — Show/Hide score columns
============================================================ */

/* By default: show Island + main columns, hide dimension columns */
#islands-table .th-dim,
#islands-table .td-dim {
  display: none;
}

/* When .show-dims is active: show only Island + dimensions, hide everything else */
#islands-table.show-dims .th-main,
#islands-table.show-dims .td-main {
  display: none;
}
#islands-table.show-dims .th-dim,
#islands-table.show-dims .td-dim {
  display: table-cell;
}

/* Stacked bar for area/population: number on top, bar below (saves horizontal space) */
.table-bar-stacked {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 70px;
}
.table-bar-stacked-num {
  font-size: var(--text-tiny);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}
.table-bar-stacked-track {
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.table-bar-stacked-fill {
  height: 100%;
  border-radius: 3px;
}
html.dark .table-bar-stacked-num {
  color: rgba(255,255,255,0.85);
}
html.dark .table-bar-stacked-track {
  background: rgba(255,255,255,0.1);
}

/* Callout row under search — makes the expansion affordance obvious */
.table-hint-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(11,143,172,0.06) 0%, rgba(11,143,172,0.02) 100%);
  border: 1px dashed rgba(11,143,172,0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.table-hint-row:hover {
  background: linear-gradient(90deg, rgba(11,143,172,0.12) 0%, rgba(11,143,172,0.05) 100%);
  border-color: rgba(11,143,172,0.55);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(11,143,172,0.15);
}
.table-hint-text {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--text-meta);
  color: var(--ink-2);
  line-height: 1.5;
}
html.dark .table-hint-row {
  background: linear-gradient(90deg, rgba(77,190,255,0.08) 0%, rgba(77,190,255,0.02) 100%);
  border-color: rgba(77,190,255,0.3);
}
html.dark .table-hint-row:hover {
  background: linear-gradient(90deg, rgba(77,190,255,0.15) 0%, rgba(77,190,255,0.05) 100%);
  border-color: rgba(77,190,255,0.55);
}
html.dark .table-hint-text {
  color: rgba(255,255,255,0.8);
}

/* When dims are showing, soften the hint */
#islands-table.show-dims ~ .table-hint-row,
body:has(#islands-table.show-dims) .table-hint-row {
  opacity: 0.7;
}

/* Show/Hide scores button */
.toggle-dims-btn {
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(11,143,172,0.25);
}
.toggle-dims-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(11,143,172,0.4);
}

/* Mobile: stack button + hint text vertically */
@media (max-width: 640px) {
  .table-hint-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .table-hint-text { font-size: var(--text-meta); }
}

/* ============================================================
   MAP TOOLTIP — compact ratings bars
============================================================ */
.itt-ratings {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.itt-rating-row {
  display: grid;
  grid-template-columns: 76px 1fr 24px;
  align-items: center;
  gap: 6px;
  font-size: var(--text-tiny);
  line-height: 1.2;
}
.itt-rating-label {
  color: var(--ink-2, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itt-rating-bar {
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
  display: block;
}
.itt-rating-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.itt-rating-val {
  font-weight: 700;
  color: var(--ink-1, #111);
  text-align: right;
  font-size: var(--text-tiny);
}
.itt-fill-beach  { background: #2196D3; }
.itt-fill-hist   { background: #6BB04A; }
.itt-fill-night  { background: #E8662C; }
.itt-fill-access { background: #DDB13C; }
.itt-fill-afford { background: #9B7EC8; }

/* Dark-mode tooltip bars */
html.dark .itt-ratings {
  border-color: rgba(255,255,255,0.15);
}
html.dark .itt-rating-bar {
  background: rgba(255,255,255,0.12);
}
html.dark .itt-rating-label {
  color: rgba(255,255,255,0.75);
}
html.dark .itt-rating-val {
  color: rgba(255,255,255,0.95);
}
html.dark .itt-fill-beach  { background: #4DBEFF; }
html.dark .itt-fill-hist   { background: #8FD66B; }
html.dark .itt-fill-night  { background: #FF8A52; }
html.dark .itt-fill-access { background: #FFCB52; }
html.dark .itt-fill-afford { background: #BAA0E8; }

/* ============================================================
   FLOATING ACTION BUTTONS (bottom-right) — Help + Feedback
============================================================ */

/* Shared FAB style */
.fab-btn {
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(11,143,172,0.35);
  transition: all 0.2s;
  white-space: nowrap;
}
.fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11,143,172,0.45);
}

/* Position the two FABs stacked at bottom-right */
#feedback-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}
#help-btn {
  position: fixed;
  bottom: 24px;
  right: 180px; /* sits left of feedback */
  z-index: 1000;
  background: linear-gradient(135deg, #3D8B6F 0%, #2A6B54 100%);
  box-shadow: 0 4px 16px rgba(61,139,111,0.35);
}
#help-btn:hover {
  box-shadow: 0 6px 20px rgba(61,139,111,0.45);
}

/* Hide on print */
@media print {
  #help-btn, #feedback-btn, .help-modal { display: none !important; }
}

/* Mobile — stack vertically, smaller icon-only circles */
@media (max-width: 640px) {
  #feedback-btn {
    bottom: 16px;
    right: 16px;
    padding: 0;
    width: 48px;
    height: 48px;
    font-size: var(--text-sub);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hide text on mobile — keep only emoji */
    font-size: 0;
  }
  #feedback-btn::before {
    content: "💬";
    font-size: var(--text-sub);
    line-height: 1;
  }
  #help-btn {
    bottom: 76px;
    right: 16px;
    padding: 0;
    width: 48px;
    height: 48px;
    font-size: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #help-btn::before {
    content: "❓";
    font-size: var(--text-sub);
    line-height: 1;
  }
}

/* Kill the old .help-btn absolute positioning on the map page */
.help-btn {
  position: static !important;
}

/* Modal overlay */
.help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2500;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s;
}
.help-modal-content {
  background: var(--white);
  color: var(--ink-1);
  border-radius: 20px;
  padding: 36px 32px 28px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s;
}
.help-modal-content .hero-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 800;
  color: var(--ink-1);
}
.help-modal-content .hero-sub {
  margin: 0 0 22px;
  font-size: var(--text-small);
  color: var(--ink-3);
  line-height: 1.55;
}
.help-modal-content .hero-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin: 0 -8px 22px;
  padding: 16px 0;
  background: linear-gradient(90deg, rgba(11,143,172,0.06), rgba(11,143,172,0.02));
  border-radius: 12px;
}
.help-modal-content .hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.help-modal-content .hero-stat-num {
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 800;
  color: var(--aegean);
  line-height: 1;
}
.help-modal-content .hero-stat-lbl {
  font-size: var(--text-tiny);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}

.help-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--marble-2, #f0f0f0);
  color: var(--ink-2);
  font-size: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.help-modal-close:hover {
  background: var(--accent, #FF6B6B);
  color: #fff;
}

.help-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.help-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.help-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  color: #fff;
  font-family: var(--serif);
  font-weight: 800;
  font-size: var(--text-small);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.help-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding-top: 4px;
}
.help-step-text strong {
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink-1);
}
.help-step-text span {
  font-size: var(--text-meta);
  color: var(--ink-3);
  line-height: 1.5;
}

.help-close-btn {
  width: 100%;
  padding: 13px 20px;
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s;
}
.help-close-btn:hover {
  transform: translateY(-1px);
}

/* Dark mode */
html.dark .help-modal-content {
  background: var(--marble-3, #1a2a33);
  color: rgba(255,255,255,0.9);
}
html.dark .help-modal-content .hero-title {
  color: rgba(255,255,255,0.95);
}
html.dark .help-modal-content .hero-sub,
html.dark .help-step-text span {
  color: rgba(255,255,255,0.7);
}
html.dark .help-step-text strong {
  color: rgba(255,255,255,0.95);
}
html.dark .help-modal-content .hero-stats {
  background: rgba(77,190,255,0.08);
}
html.dark .help-modal-content .hero-stat-num {
  color: #4DBEFF;
}
html.dark .help-modal-close {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}

@media (max-width: 640px) {
  .help-modal-content {
    padding: 26px 20px 20px;
    border-radius: 16px;
  }
  .help-modal-content .hero-title { font-size: var(--text-sub); }
  .help-modal-content .hero-stat-num { font-size: var(--text-sub); }
}

/* Hide the legacy hero banner in case any cached version references it */

/* ============================================================
   CONDENSED TABLE — tighter rows, smaller text
============================================================ */
#islands-table {
  font-size: var(--text-meta);
}
#islands-table th {
  padding: 8px 10px !important;
  font-size: var(--text-tiny);
  letter-spacing: 0.3px;
}
#islands-table td {
  padding: 6px 10px !important;
  vertical-align: middle;
}
#islands-table .group-tag {
  font-size: var(--text-tiny);
  padding: 2px 7px;
}
/* Tighten star ratings in table */
#islands-table .stars-outer,
#islands-table .stars-inner {
  font-size: var(--text-meta);
}
/* Compact bar charts for area/pop */
#islands-table .table-bar-wrap {
  height: 14px;
}

/* Car-need compact pill (table cell) */
.car-compact-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-tiny);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #islands-table { font-size: var(--text-meta); }
  #islands-table td { padding: 5px 8px !important; }
}

/* ============================================================
   AIRPORT column in data table + tooltip line
============================================================ */
.td-airport {
  text-align: center;
  font-size: var(--text-body);
}
.airport-yes {
  color: var(--aegean);
  font-size: var(--text-sub);
  font-weight: 700;
}
.airport-no {
  color: var(--ink-4);
  opacity: 0.4;
}
html.dark .airport-yes {
  color: #4DBEFF;
}

/* Tooltip airport row */
.itt-airport {
  margin-top: 4px;
  font-size: var(--text-meta);
  color: var(--aegean);
}
.itt-airport strong {
  font-weight: 600;
}
html.dark .itt-airport {
  color: #4DBEFF;
}

/* ============================================================
   INTERNATIONAL ESCAPES — route cards
============================================================ */
.intl-country-heading {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--ink-1);
  margin: 32px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--aegean);
}

.intl-route-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: all 0.15s;
}
.intl-route-card:hover {
  border-color: var(--aegean);
  box-shadow: 0 4px 14px rgba(11,143,172,0.1);
}

.intl-route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.intl-route-title {
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.intl-flag-from,
.intl-flag-to { font-size: var(--text-sub); }
.intl-arrow {
  color: var(--ink-4);
  font-weight: 400;
  margin: 0 4px;
}

.intl-freq-badge {
  font-size: var(--text-tiny);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.intl-freq-badge.freq-high {
  background: rgba(11,143,172,0.12);
  color: var(--aegean);
}
.intl-freq-badge.freq-med {
  background: rgba(255,107,107,0.15);
  color: #D04545;
}
.intl-freq-badge.freq-low {
  background: rgba(196,150,42,0.15);
  color: #A07820;
}

.intl-route-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.intl-meta-item {
  font-size: var(--text-meta);
  color: var(--ink-2);
}

.intl-route-note {
  margin: 8px 0 0;
  font-size: var(--text-meta);
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
}

/* Dark mode */
html.dark .intl-route-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
html.dark .intl-route-card:hover {
  border-color: #4DBEFF;
  box-shadow: 0 4px 14px rgba(77,190,255,0.15);
}
html.dark .intl-country-heading {
  color: rgba(255,255,255,0.95);
  border-color: #4DBEFF;
}
html.dark .intl-route-title { color: rgba(255,255,255,0.95); }
html.dark .intl-meta-item { color: rgba(255,255,255,0.8); }
html.dark .intl-route-note { color: rgba(255,255,255,0.65); }
html.dark .intl-freq-badge.freq-high {
  background: rgba(77,190,255,0.2);
  color: #4DBEFF;
}
html.dark .intl-freq-badge.freq-med {
  background: rgba(255,138,82,0.2);
  color: #FF8A52;
}
html.dark .intl-freq-badge.freq-low {
  background: rgba(255,203,82,0.2);
  color: #FFCB52;
}

/* ============================================================
   COMPARE card info panel (car, airport, days below bars)
============================================================ */
.cmp-info-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: var(--text-meta);
  color: var(--ink-2);
}
.cmp-info-label {
  font-weight: 500;
  color: var(--ink-3);
}
.cmp-info-val {
  font-weight: 600;
  color: var(--ink-1);
}
.cmp-info-val strong {
  color: var(--aegean);
}
html.dark .cmp-info-panel {
  border-top-color: rgba(255,255,255,0.12);
}
html.dark .cmp-info-row { color: rgba(255,255,255,0.8); }
html.dark .cmp-info-label { color: rgba(255,255,255,0.6); }
html.dark .cmp-info-val { color: rgba(255,255,255,0.95); }
html.dark .cmp-info-val strong { color: #4DBEFF; }

/* ============================================================
   INTERNATIONAL — pre-book notice, rating stars, schedule btn
============================================================ */
.intl-prebook-notice {
  margin: 14px 0 24px;
  padding: 12px 18px;
  background: rgba(76, 175, 80, 0.08);
  border-left: 4px solid #4CAF50;
  border-radius: 8px;
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.55;
}
.intl-prebook-notice strong { color: var(--ink-1); }
html.dark .intl-prebook-notice {
  background: rgba(76, 175, 80, 0.12);
  color: rgba(255,255,255,0.85);
}
html.dark .intl-prebook-notice strong { color: rgba(255,255,255,0.95); }

.intl-destination-block {
  margin: 14px 0 10px;
  padding: 12px 14px;
  background: rgba(11, 143, 172, 0.05);
  border-radius: 10px;
}
.intl-destination-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.intl-destination-label {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.intl-stars {
  display: inline-flex;
  gap: 1px;
  font-size: var(--text-small);
}
.intl-star { color: rgba(0,0,0,0.15); }
.intl-star.on { color: #DDB13C; }
.intl-destination-context {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--ink-2);
  line-height: 1.55;
}
html.dark .intl-destination-block {
  background: rgba(77, 190, 255, 0.08);
}
html.dark .intl-destination-context { color: rgba(255,255,255,0.8); }
html.dark .intl-destination-label { color: rgba(255,255,255,0.6); }
html.dark .intl-star { color: rgba(255,255,255,0.2); }
html.dark .intl-star.on { color: #FFCB52; }

.intl-route-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.intl-route-footer .intl-route-note {
  flex: 1;
  margin: 0;
  min-width: 200px;
}
.intl-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(11,143,172,0.25);
}
.intl-schedule-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,143,172,0.4);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   HOW WE SCORE — Mission page section
============================================================ */
.why-scoring h2 {
  font-family: var(--serif);
  font-size: var(--text-hero);
  margin: 0 0 20px;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.why-scoring h3 {
  font-family: var(--serif);
  font-size: var(--text-sub);
  margin: 32px 0 12px;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.why-scoring .why-lead {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.why-dims dt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--ink-1);
  margin: 18px 0 6px;
  letter-spacing: 0.01em;
}
.why-dims dt:first-child {
  margin-top: 4px;
}
.why-dims dd {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  padding-left: 0;
}
.why-dims dd em {
  font-style: italic;
  color: var(--ink-1);
}
.why-scoring strong {
  color: var(--ink-1);
  font-weight: 700;
}

/* "how we score" link — appears near ratings on detail page and data table */
.how-we-score-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--aegean);
  text-decoration: underline;
  text-decoration-color: rgba(11, 143, 172, 0.4);
  text-underline-offset: 2px;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.15s, text-decoration-color 0.15s;
  margin: 2px 0 10px;
}
.how-we-score-link:hover {
  opacity: 1;
  text-decoration-color: rgba(11, 143, 172, 1);
}
/* Inside the detail sidebar, place it immediately under the h3 */
.sidebar-box h3 + .how-we-score-link {
  margin-top: -6px;
  margin-bottom: 12px;
}
/* On the data table hint row */
.how-we-score-link.table-how-link {
  margin-left: 6px;
}

@media (max-width: 640px) {
  .why-scoring h2 { font-size: var(--text-section); }
  .why-scoring h3 { font-size: var(--text-sub); margin-top: 24px; }
  .why-scoring .why-lead { font-size: var(--text-body); }
  .why-dims dd { font-size: var(--text-small); }
}

/* ============================================================
   MISSION PAGE — v2 (redesigned)
============================================================ */
.mission-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.mission-section {
  margin-bottom: 64px;
}

.mission-section-title {
  font-family: var(--serif);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--ink-1);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mission-subsection-title {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--ink-1);
  margin: 40px 0 14px;
  letter-spacing: -0.01em;
}

.mission-para {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.mission-para strong { color: var(--ink-1); font-weight: 700; }
.mission-para em { font-style: italic; color: var(--ink-1); }

.mission-para-emphasis {
  font-style: italic;
  color: var(--ink-1);
  padding-left: 16px;
  border-left: 3px solid var(--aegean);
  margin-top: 20px;
}

.mission-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-section);
  line-height: 1.4;
  color: var(--ink-1);
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--aegean);
  background: var(--aegean-pale);
  border-radius: 0 8px 8px 0;
}

/* Author card */
.mission-author-section .mission-author-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  background: var(--marble-2);
  border-radius: 12px;
  margin: 20px 0 24px;
}
.mission-author-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mission-author-text { flex: 1; min-width: 0; }
.mission-author-name {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.mission-author-role {
  font-family: var(--sans);
  font-size: var(--text-meta);
  color: var(--ink-3);
  margin: 2px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.mission-author-bio {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* Triptych (one hotel / one itinerary / one dinner) */
.mission-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.mission-triptych-card {
  background: var(--marble);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
}
.mission-triptych-icon {
  font-size: var(--text-hero);
  line-height: 1;
  margin-bottom: 12px;
}
.mission-triptych-label {
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mission-triptych-text {
  font-family: var(--sans);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.mission-kicker-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-sub);
  color: var(--ink-1);
  text-align: center;
  margin: 24px 0 0;
}

/* Scoring section — anchor offset for #how-we-score link */
.mission-score-section { scroll-margin-top: 100px; }

/* Sources list */
.mission-sources-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 8px;
}
.mission-sources-list li {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  padding: 12px 16px 12px 44px;
  margin-bottom: 8px;
  background: var(--marble-2);
  border-left: 3px solid var(--aegean);
  border-radius: 0 8px 8px 0;
  position: relative;
}
.mission-sources-list li::before {
  content: "→";
  position: absolute;
  left: 16px;
  top: 12px;
  color: var(--aegean);
  font-weight: 700;
  font-size: var(--text-body);
}
.mission-sources-list li strong {
  color: var(--ink-1);
  font-weight: 700;
  margin-right: 4px;
}

/* Rubric grid */
.mission-rubric-intro {
  font-size: var(--text-body);
  color: var(--ink-3);
  margin-bottom: 20px;
}
.mission-rubric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 32px;
}
.mission-rubric-card {
  background: var(--marble);
  border: 1px solid var(--ink-5);
  border-radius: 12px;
  padding: 18px 18px 14px;
}
.mission-rubric-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mission-rubric-icon {
  font-size: var(--text-sub);
}
.mission-rubric-name {
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.mission-rubric-desc {
  font-family: var(--sans);
  font-size: var(--text-meta);
  color: var(--ink-3);
  margin: 0 0 12px;
  line-height: 1.4;
  font-style: italic;
}
.mission-rubric-anchors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mission-rubric-anchor {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--ink-2);
}
.mission-rubric-score {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--white);
  font-family: var(--sans);
}
.mrs-5 { background: #1B5E20; } /* deep green */
.mrs-3 { background: #C4962A; } /* gold */
.mrs-1 { background: #C0522A; } /* terracotta */
/* mrs-neutral: car reliance is a fact, not a quality score, so the 5/3/1
   badges should be value-neutral grey rather than green/gold/red. */
.mrs-neutral { background: #6B7280; } /* slate grey */

/* Limits list */
.mission-limits-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.mission-limits-list li {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  padding: 10px 14px 10px 34px;
  margin-bottom: 6px;
  position: relative;
  background: transparent;
}
.mission-limits-list li::before {
  content: "⚠";
  position: absolute;
  left: 10px;
  top: 10px;
  color: var(--terracotta);
  font-size: var(--text-small);
}

/* Disagree box */
.mission-disagree-box {
  margin-top: 48px;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, var(--aegean-pale) 0%, var(--marble-2) 100%);
  border-radius: 16px;
  border: 1px solid var(--aegean-light);
}
.mission-disagree-title {
  font-family: var(--serif);
  font-size: var(--text-section);
  font-weight: 700;
  color: var(--ink-1);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .mission-body { padding: 32px 20px 56px; }
  .mission-section { margin-bottom: 48px; }
  .mission-section-title { font-size: var(--text-section); }
  .mission-subsection-title { font-size: var(--text-sub); margin-top: 32px; }
  .mission-para { font-size: var(--text-body); }
  .mission-pullquote { font-size: var(--text-sub); padding: 16px 18px; }
  .mission-author-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 20px; }
  .mission-author-photo { width: 100px; height: 100px; }
  .mission-triptych { grid-template-columns: 1fr; gap: 12px; }
  .mission-rubric-grid { grid-template-columns: 1fr; gap: 12px; }
  .mission-disagree-box { padding: 22px 20px 18px; }
  .mission-disagree-title { font-size: var(--text-sub); }
}

/* Dark mode */
html.dark .mission-pullquote {
  background: rgba(11, 143, 172, 0.12);
  color: var(--ink-1);
}
html.dark .mission-author-section .mission-author-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-5);
}
html.dark .mission-triptych-card,
html.dark .mission-rubric-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ink-5);
}
html.dark .mission-sources-list li {
  background: rgba(255, 255, 255, 0.04);
}
html.dark .mission-disagree-box {
  background: linear-gradient(135deg, rgba(11, 143, 172, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(11, 143, 172, 0.3);
}

/* ============================================================
   WHEN-TO-VISIT SECTION — 12-month grid
============================================================ */
.wtv-section {
  margin: 24px 0 32px;
  padding: 0;                                 /* padding moved to summary + content */
  background: rgba(11, 143, 172, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(11, 143, 172, 0.10);
}
.wtv-title {
  /* native <summary> styling */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--serif);
  font-size: var(--text-sub);
  font-weight: 700;
  margin: 0;
  color: var(--ink-1);
  user-select: none;
  transition: background 0.15s;
}
.wtv-title::-webkit-details-marker { display: none; }   /* hide native triangle (Safari) */
.wtv-title::marker { content: ''; }                     /* hide native triangle (others) */
.wtv-title:hover { background: rgba(11, 143, 172, 0.06); border-radius: 8px; }
.wtv-title::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.wtv-section[open] > .wtv-title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.wtv-section[open] > .wtv-title { border-bottom: 1px solid rgba(11, 143, 172, 0.10); }

/* Content padding when open — applied to the children that follow summary */
.wtv-section[open] > .wtv-summary,
.wtv-section[open] > .wtv-ribbon-wrap,
.wtv-section[open] > .wtv-vertical,
.wtv-section[open] > .wtv-legend {
  margin-left: 20px;
  margin-right: 20px;
}
.wtv-section[open] > .wtv-summary { margin-top: 16px; }
.wtv-section[open] > .wtv-legend { margin-bottom: 20px; }
.wtv-summary {
  margin: 0 0 20px;
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: 1.55;
}

/* ============================================================
   Ribbon layout — 12 segments with alternating above/below captions
============================================================ */
.wtv-ribbon-wrap {
  margin: 0 0 16px;
  overflow: visible;
}
.wtv-ribbon {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2px;
  border-radius: 6px;
  overflow: hidden;
}
/* Highlights line above the ribbon — answers "when should I come" in plain
   text. Each item is "Best: Jun, Sep" style; separators are subtle dots. */
.wtv-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: var(--text-small);
  line-height: 1.5;
}
.wtv-hl-item { color: var(--ink-2); }
.wtv-hl-item strong {
  margin-right: 4px;
  font-weight: 700;
}
.wtv-hl-perfect strong { color: #0B5460; }
.wtv-hl-great   strong { color: #0B8FAC; }
.wtv-hl-ok      strong { color: #888; }
.wtv-hl-avoid   strong { color: #B04A2A; }
.wtv-hl-sep     { color: var(--ink-3); opacity: 0.5; }

/* Vertical layout — used only on mobile */
.wtv-vertical { display: none; }

/* Mobile: hide horizontal ribbon, show clean vertical list */
@media (max-width: 700px) {
  .wtv-ribbon-wrap { display: none; }
  .wtv-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
  }
  .wtv-vrow {
    display: grid;
    grid-template-columns: 44px 6px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .wtv-vrow:last-child { border-bottom: none; }
  .wtv-vmonth {
    font-family: var(--sans);
    font-size: var(--text-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-2);
  }
  .wtv-vbar {
    height: 28px;
    border-radius: 3px;
  }
  .wtv-vwhy {
    font-family: var(--sans);
    font-size: var(--text-meta);
    color: var(--ink-1);
    line-height: 1.4;
  }
  .wtv-v-perfect .wtv-vwhy { font-weight: 700; }
  .wtv-v-avoid   .wtv-vwhy { color: var(--ink-3); }
  .wtv-v-ok      .wtv-vwhy { color: var(--ink-3); }
  .wtv-section { padding: 0; }
  .wtv-title { padding: 14px 14px; }
  .wtv-section[open] > .wtv-summary,
  .wtv-section[open] > .wtv-vertical,
  .wtv-section[open] > .wtv-legend { margin-left: 14px; margin-right: 14px; }
  .wtv-section[open] > .wtv-legend { margin-bottom: 14px; }
  .wtv-vrow { grid-template-columns: 38px 5px 1fr; gap: 8px; padding: 6px 0; }
}

/* Cells — the actual ribbon segments. The colored month strip is the visual
   identity of the When-to-Visit block; the cap labels above/below were retired
   because the floating layout was visually noisy. Tooltips (title=) provide
   the per-month detail on hover; the .wtv-highlights line above summarises
   the months by tag. */
.wtv-cell {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  cursor: help;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.wtv-cell:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Tag colors — Variant A palette: red → pale teal → mid teal → dark teal */
.wtv-perfect { background: var(--aegean-dark, #076880); }
.wtv-great   { background: var(--aegean,      #0B8FAC); }
.wtv-ok      { background: #B8DCE5; color: #07424F; }
.wtv-avoid   { background: #C25450; }

/* Limited service — dims the cell + small diagonal stripe overlay.
   Orthogonal to the perfect/great/ok/avoid tag: an island can be
   "Great in March" AND have limited service (shoulder season). */
.wtv-cell.wtv-limited,
.cwtv-cell.wtv-limited {
  position: relative;
  opacity: 0.55;
}
.wtv-cell.wtv-limited::after,
.cwtv-cell.wtv-limited::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.20) 3px,
    rgba(255,255,255,0.20) 4px
  );
  pointer-events: none;
}
/* Compare-view WTV legend swatch for the limited-service marker.
   Shows a striped + dimmed grey rectangle that matches the cell treatment. */
.cwtv-leg.cwtv-leg-limited {
  background: #b5b5b5;
  opacity: 0.55;
  position: relative;
}
.cwtv-leg.cwtv-leg-limited::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.40) 3px,
    rgba(255,255,255,0.40) 4px
  );
}
.wtv-limited-note {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--ink-3);
  line-height: 1.5;
}
.wtv-limited-note strong {
  color: var(--ink-2);
  font-weight: 700;
  margin-right: 4px;
}
.wtv-v-limited-badge {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
  color: var(--ink-3);
  margin-right: 4px;
}

.wtv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--text-small);
  color: var(--ink-3);
  font-family: var(--sans);
}
.wtv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wtv-legend-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
}

/* Dark mode */
html.dark .wtv-section {
  background: rgba(11, 143, 172, 0.08);
  border-color: rgba(11, 143, 172, 0.25);
}
html.dark .wtv-summary { color: var(--ink-2); }
html.dark .wtv-highlights .wtv-hl-item { color: var(--ink-2); }
html.dark .wtv-hl-perfect strong { color: #5BC9E0; }
html.dark .wtv-hl-great   strong { color: #4CB4D3; }
html.dark .wtv-hl-avoid   strong { color: #E08070; }
html.dark .wtv-ok { background: #6FA9B8; color: #042631; }

/* Visually hidden but accessible — used for the SEO island list at the bottom
   of the homepage, so search-engine crawlers and screen readers see all 78
   island links even though they're not part of the visual UI. Standard
   sr-only / visually-hidden pattern; do not change without checking that
   the block is still discoverable in the rendered DOM. */
/* Aliases — .sr-only is the conventional name (Tailwind/Bootstrap),
   .visually-hidden is the more semantic name. Same rules. */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop-only AdSense — hide all ad containers below 900px.
   The .adsbygoogle class is what AdSense applies to ad slots (both manual
   <ins> elements and Auto Ads injections). The google-auto-placed class
   wraps Auto Ads' container divs.
   The JS in <head> already prevents adsbygoogle.push() from firing on
   mobile, but this CSS is a safety net for any case where Auto Ads injects
   a slot before the guard runs. */
@media (max-width: 899.98px) {
  .adsbygoogle,
  ins.adsbygoogle,
  .google-auto-placed,
  [data-anchor-status],
  [data-google-query-id] {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Hide Leaflet zoom buttons on touch devices. Touch users zoom with
   pinch gestures anyway; the +/- buttons just take map real estate
   and overlap content. Covers all maps in the SPA (main map, mini
   map on island detail, comparison map, ferry planner, itinerary). */
@media (hover: none) {
  .leaflet-control-zoom { display: none !important; }
}

/* ============================================================
   HOMEPAGE CONTENT SECTION (below the map)
   Provides the "About this site" prose + featured islands grid
   + how-this-works block. Sits below the full-viewport map so
   visitors who scroll see real prose content — needed both for
   AdSense reviewer readability and for SEO (Google parses text
   on the homepage to understand what the site is about).
============================================================ */
.home-about-btn {
  /* Floats over the map, bottom-centre. Clicking smooth-scrolls down to
     the homepage content section — needed because the map captures the
     mouse wheel and a plain scroll never reaches the content. */
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--aegean);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-about-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.home-about-btn-arrow {
  display: inline-block;
  animation: home-scroll-bob 2s ease-in-out infinite;
}
@keyframes home-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.home-backtop-btn {
  /* Sits at the top of the content section — jumps back up to the map. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 7px 14px;
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--text-meta);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.home-backtop-btn:hover {
  border-color: var(--aegean);
  color: var(--aegean);
}

.home-content {
  background: var(--bg);
  padding: 24px 24px 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.home-block {
  margin-bottom: 56px;
}
.home-block:last-child { margin-bottom: 0; }

.home-block-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  margin: 0 0 16px;
  color: var(--ink);
  line-height: 1.25;
}
.home-block-sub {
  font-size: var(--text-small);
  color: var(--ink-3);
  margin: -8px 0 24px;
}

.home-intro p {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 760px;
}
.home-intro p:last-child { margin-bottom: 0; }

.home-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.home-featured-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.home-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--aegean);
}
/* Photo media (Style B: photo on top, info panel below) */
.hfc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--aegean-pale);
  overflow: hidden;
}
.hfc-photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.home-featured-card:hover .hfc-photo { transform: scale(1.04); }
/* Fallback when an island has no photo — big initial on a soft tint */
.hfc-media.hfc-nophoto .hfc-photo { display: none; }
.hfc-media.hfc-nophoto::after {
  content: attr(data-initial);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 44px; font-weight: 700;
  color: var(--aegean); opacity: 0.5;
}
.hfc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,20,30,0.34), rgba(10,20,30,0) 42%);
}
.hfc-score {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 1px;
  background: var(--aegean-dark); color: #fff;
  font-family: var(--serif); font-weight: 800; font-size: var(--text-small);
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.hfc-score small { font-weight: 700; font-size: var(--text-tiny); opacity: 0.85; }
.hfc-group {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(255,255,255,0.92); color: var(--aegean-dark);
  font-weight: 700; font-size: var(--text-tiny); letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.hfc-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 13px 16px 16px;
}
.home-featured-card-name {
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.home-featured-card-excerpt {
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.home-featured-card-tag {
  display: inline-block;
  /* margin-top: auto pushes the tag to the bottom of the flex column,
     so pills line up across all cards regardless of how long the excerpt
     above them is. The 16px above gives breathing room from the excerpt. */
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
}
/* The actual pill is rendered as a span. We need an inner inline-block
   for the visual chip so margin-top:auto can act on the outer span. */
.home-featured-card-tag::before {
  content: attr(data-tag-label);
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--aegean-pale);
  color: var(--aegean);
}
/* Per-tag colour variations — six muted, low-saturation hues at roughly
   matching lightness. The text color is a darker shade of the same hue
   for legibility. Keys map by the data-tag-key attribute set in JS. */
.home-featured-card-tag[data-tag-key="folegandros"]::before { background: #E8F1F6; color: #2E6F8F; } /* dusty teal — Quiet escape */
.home-featured-card-tag[data-tag-key="milos"]::before       { background: #FFEFE2; color: #B45B1A; } /* warm sand — Beach trip */
.home-featured-card-tag[data-tag-key="santorini"]::before   { background: #F2EAF6; color: #6B4083; } /* dusty mauve — Iconic */
.home-featured-card-tag[data-tag-key="hydra"]::before       { background: #ECE6DC; color: #6B5A3C; } /* muted khaki — No cars */
.home-featured-card-tag[data-tag-key="symi"]::before        { background: #E5EEDD; color: #4E6B3A; } /* sage — Off-radar */
.home-featured-card-tag[data-tag-key="naxos"]::before       { background: #FBE9EA; color: #9A3E47; } /* dusty rose — Family-friendly */

/* One-line footer (was 3 stacked divs). The empty-state `.footer-updated:empty`
   rule already hides the build-stamp span; the leading " · " separator now
   lives inside the textContent set by renderBuildStamp() so it hides too. */
.footer-line {
  font-size: var(--text-meta);
  color: var(--ink-4);
}
.footer-line a {
  color: var(--ink-4);
  text-decoration: none;
}
.footer-line a:hover {
  color: var(--teal);
  text-decoration: underline;
}

.home-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 32px;
}
.home-how-item h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.home-how-item p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.home-how-item a { color: var(--aegean); }

@media (max-width: 700px) {
  .home-content { padding: 20px 18px 40px; }
  .home-block { margin-bottom: 40px; }
  .home-block-title { font-size: 1.45rem; }
  .home-intro p { font-size: 1rem; }
  .home-featured-grid { grid-template-columns: 1fr; }
  .home-how-grid { gap: 24px; }
}

/* "Good for / Maybe skip if" orientation block on island detail (SPA). Two
   columns of short bullet lists, helps a reader self-select before diving in. */
.itin-suited {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.itin-suited-col {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
}
.itin-suited-good { border-left: 3px solid #2E7D32; }
.itin-suited-skip { border-left: 3px solid #C0522A; }
.itin-suited-title {
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  color: var(--ink-2);
}
.itin-suited-good .itin-suited-title { color: #2E7D32; }
.itin-suited-skip .itin-suited-title { color: #C0522A; }
.itin-suited ul {
  margin: 0;
  padding-left: 18px;
}
.itin-suited li {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.itin-suited li:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .itin-suited { grid-template-columns: 1fr; gap: 12px; }
}

/* Per-day nightlife — rendered as an optional, party-styled final itinerary stop */
.itin-stop-num--nightlife{background:linear-gradient(135deg,#e64980,#7048e8);font-size:15px}
.itin-stop-name--nightlife{color:#d6336c}
html.dark .itin-stop-name--nightlife{color:#f783ac}
.itin-stop--nightlife .itin-stop-desc a{color:#d6336c;text-decoration:underline}
html.dark .itin-stop--nightlife .itin-stop-desc a{color:#f783ac}
.seo-stop-nightlife{list-style:none;margin-top:10px;padding-top:10px;border-top:1px dashed #e6a8c4}

/* Site-wide ferry + car affiliate CTA (footer area) */
.cta-affiliate{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:24px 16px 8px;}
@media print{.cta-affiliate{display:none !important;}}

/* Characteristic hero photo on the island detail view (SPA) */
.island-hero{position:relative;margin:0 0 20px;}
.island-hero-img{width:100%;max-height:360px;object-fit:cover;border-radius:12px;display:block;box-shadow:0 2px 12px rgba(0,0,0,.10);cursor:zoom-in;}
@media (max-width:600px){.island-hero-img{max-height:240px;}}

/* Per-day Eat & Drink panel (food + nightlife), separated from routed itinerary stops */
.itin-eatdrink{margin:14px 0 0;padding:14px 16px;background:var(--marble,#f6f4ee);border-radius:12px}
.itin-eatdrink .ed-title{font-family:var(--serif,Georgia),serif;font-size:15px;font-weight:700;margin:0 0 10px;color:var(--ink,#222)}
.itin-eatdrink .ed-row{display:flex;gap:10px;margin-top:12px}
.itin-eatdrink .ed-row:first-of-type{margin-top:0}
.itin-eatdrink .ed-icon{font-size:18px;line-height:1.45;flex-shrink:0}
.itin-eatdrink .ed-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--aegean-dark,#076880);margin-bottom:3px}
.itin-eatdrink .ed-body{font-size:14px;line-height:1.55;color:var(--ink-1,#444)}
.itin-eatdrink .ed-body a{color:#d6336c;text-decoration:underline}
html.dark .itin-eatdrink{background:#2a2a2a}
html.dark .itin-eatdrink .ed-body{color:#ddd}
html.dark .itin-eatdrink .ed-title{color:#eee}

/* In-route meal-timing cue + per-leg drive note */
.itin-meal-cue{margin:10px 0;padding:7px 12px;background:rgba(214,51,108,.07);border-left:3px solid #d6336c;border-radius:0 6px 6px 0;font-size:13px;font-weight:600;color:#b02a5b}
html.dark .itin-meal-cue{background:rgba(214,51,108,.16);color:#f3a6c4}
.itin-stop-drive{font-size:12px;color:var(--ink-3,#888);margin-top:2px}
.seo-meal-cue{list-style:none;margin:8px 0;padding:6px 10px;background:rgba(214,51,108,.07);border-left:3px solid #d6336c;font-size:13px;font-weight:600;color:#b02a5b}
.seo-stop-drive{font-size:12px;color:#888}