/* Outfit (claude-design): used inside .goa-cream-block only. Must
   stay at file top - mid-file @import is silently ignored. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

/* ================================================================
   Get Out Already - getoutalready.com
   v1.0 - Forked from View Norway template
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/* ── Tokens — Variant A (Coastal editorial, coral ↔ teal) ──── */
:root {
  /* Backgrounds: warm sand cream family */
  --bg:         #F5ECD9;
  --bg-warm:    #EFE3C9;
  --surface:    #FBF5E6;
  --surface-alt:#F5ECD9;
  --border:     #D4B98C;
  --border-lt:  #E6D9BB;

  /* Ink scale: deep teal-ink */
  --ink:        #0D2A33;
  --ink-soft:   #1F3E47;
  --ink-muted:  #5A6B70;
  --ink-faint:  #8A9296;

  /* Water teal (--navy stays as the name for backwards compatibility) */
  --navy:       #0D2A33;       /* page-ink dark */
  --navy-mid:   #0F7E8A;       /* water teal, links */
  --navy-lt:    #D4ECEC;       /* tinted background for water-themed sections */
  --navy-faint: #EBF6F5;

  /* Coral sun (--red stays as the name) */
  --red:        #FF5A3C;       /* pure red-orange, primary accent */
  --red-dark:   #E8421F;
  --red-lt:     #FFD8CC;
  --red-faint:  #FFEFE9;

  /* Sand neutral — used for muted dividers, card top-borders */
  --accent:     #D4B98C;

  /* Typography */
  --f-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --w-page:   900px;
  --w-wide:   960px;
  --r:        8px;
  --r-lg:     12px;

  /* Shadows */
  --sh-1: 0 1px 3px rgba(13,42,51,.06);
  --sh-2: 0 3px 12px rgba(13,42,51,.07), 0 0 0 1px rgba(13,42,51,.03);
  --sh-3: 0 8px 28px rgba(13,42,51,.1), 0 0 0 1px rgba(13,42,51,.04);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Base ────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body.goa-site {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Prevent any rogue wide child element (long URL, oversized grid,
     unbounded preformatted text) from pushing the page wider than the
     viewport and breaking the footer's centered container. */
  overflow-x: clip;
  max-width: 100vw;
}

.goa-container {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding-left: clamp(1rem, 5vw, 2.5rem);
  padding-right: clamp(1rem, 5vw, 2.5rem);
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 400;
}

h4, h5, h6 {
  font-family: var(--f-body);
  color: var(--ink);
  font-weight: 600;
}

h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  line-height: 1.18;
  margin-top: 2.4rem;
  margin-bottom: .5rem;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-top: 1.6rem;
  margin-bottom: .4rem;
}

h4 { font-size: 1rem; margin-top: 1.3rem; margin-bottom: .3rem; }
h5 { font-size: .88rem; margin-bottom: .2rem; }

p { margin-bottom: 1.1rem; }
strong, b { font-weight: 600; color: var(--ink); }
a strong, a b { color: inherit; }

hr {
  border: none;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── Search highlight ───────────────────────────────────────── */
mark, mark[data-markjs] {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .2em;
  border-radius: 3px;
  border-bottom: 1.5px solid var(--red);
}

/* ── Links ──────────────────────────────────────────────────── */
/* Excludes .goa-btn so the 3 hero CTA variants (primary/ghost/play) keep
   their own colors instead of being painted teal by this catch-all. */
.goa-content a:not(.btn):not(.goa-btn):not(.mod-articles-link):not(.goa-stay-link):not(.goa-stay-icon),
.com-content-article__body a:not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon),
.com-content-category a:not(.btn):not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon),
.goa-below-content a:not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon) {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color .15s var(--ease);
}

.goa-content a:not(.btn):not(.goa-btn):not(.mod-articles-link):not(.goa-stay-link):not(.goa-stay-icon):hover,
.com-content-article__body a:not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon):hover,
.com-content-category a:not(.btn):not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon):hover,
.goa-below-content a:not(.goa-btn):not(.goa-stay-link):not(.goa-stay-icon):hover {
  color: var(--red);
}

/* ── Stay22 table-cell house icon (dimmed, no underline) ─── */
.goa-stay-icon {
  display: inline-block;
  margin-left: .35em;
  font-size: .85em;
  line-height: 1;
  text-decoration: none !important;
  border-bottom: 0 !important;
  opacity: .35;
  filter: grayscale(.4);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
  vertical-align: baseline;
}
.goa-stay-icon:hover,
.goa-stay-icon:focus {
  opacity: .9;
  filter: none;
  transform: translateY(-1px);
}

.com-content-article__body a[target="_blank"]::after {
  content: '\2197';
  font-size: .6em;
  vertical-align: super;
  opacity: .35;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   HEADER — bold navy band with breathing room
   ══════════════════════════════════════════════════════════════ */
.goa-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: white;
}

.goa-header.scrolled {
  box-shadow: 0 4px 20px rgba(14,34,64,.25);
}

.goa-header__inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0.5rem clamp(1rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 76px;
}

.goa-logo { flex-shrink: 0; display: flex; align-items: center; }

.goa-logo__text {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: white;
  transition: opacity .15s;
}

.goa-logo:hover .goa-logo__text { opacity: .8; }
.goa-logo__img { height: 60px; width: auto; display: block; }
.goa-logo:hover .goa-logo__img { opacity: 0.85; }

/* Norwegian flag dot + emoji */
.goa-flag-dot {
  margin: 0 .15em;
  opacity: .4;
}

.goa-flag {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-style: normal;
  font-size: .525em;          /* 30% smaller than .75em baseline */
  vertical-align: baseline;
}

.goa-tagline {
  display: none;
}

/* Tagline hidden — reclaimed for nav space */

/* ── Red accent line below header ───────────────────────────── */
.goa-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}

/* ── Mobile Toggle ──────────────────────────────────────────── */
.goa-nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  z-index: 101;
  margin-left: auto;
  align-self: center;
}

.goa-nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: white;
  border-radius: 1px;
  transition: all .3s var(--ease);
  transform-origin: center;
}

.goa-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.goa-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.goa-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 768px) { .goa-nav-toggle { display: none; } }

/* ── Nav ────────────────────────────────────────────────────── */
.goa-nav { display: none; margin-left: auto; }

.goa-nav.open {
  display: block;
  position: fixed;
  inset: 60px 0 0 0;
  background: var(--navy);
  padding: 1rem 1.5rem;
  overflow-y: auto;
  z-index: 99;
  animation: slideIn .2s var(--ease);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) { .goa-nav { display: flex; align-items: center; } }

.goa-nav .mod-menu,
.goa-nav .nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .goa-nav .mod-menu, .goa-nav .nav { flex-direction: row; gap: 1.25rem; align-items: center; }
}

.goa-nav .nav-item a {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  padding: .35rem .7rem;
  border-radius: 4px;
  transition: all .15s var(--ease);
}

.goa-nav .nav-item a:hover {
  color: white;
  background: rgba(255,255,255,.1);
}

.goa-nav .nav-item.active > a,
.goa-nav .nav-item.current > a {
  color: white;
  background: rgba(255,255,255,.12);
  font-weight: 600;
}

.goa-nav.open .nav-item a {
  font-size: .95rem;
  padding: .65rem 1rem;
  color: rgba(255,255,255,.7);
}

.goa-nav.open .nav-item a:hover { color: white; }

/* ── Header Search ─────────────────────────────────────────── */

/* Search icon button — visible on mobile, hidden on desktop */
.goa-search-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  padding: 6px;
  margin-left: auto;
  transition: color .15s;
}

.goa-search-toggle:hover { color: white; }

@media (max-width: 767px) {
  .goa-search-toggle { display: flex; align-items: center; }
}

/* Search bar — slides down below header */
.goa-search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--navy);
  padding: .5rem clamp(1rem, 5vw, 2.5rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 16px rgba(14,34,64,.3);
  display: none;
  z-index: 98;
}

.goa-search-bar.open { display: block; animation: slideIn .2s var(--ease); }

/* On desktop, search bar is always visible inline in the header */
@media (min-width: 768px) {
  .goa-search-bar {
    position: static;
    display: block;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    margin-left: .5rem;
    flex-shrink: 0;
  }
}

.goa-search-bar input[type="search"],
.goa-search-bar .mod-finder__input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: white;
  font-size: .78rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  width: 100%;
  transition: all .2s var(--ease);
}

@media (min-width: 768px) {
  .goa-search-bar input[type="search"],
  .goa-search-bar .mod-finder__input {
    width: 140px;
  }
  .goa-search-bar input[type="search"]:focus,
  .goa-search-bar .mod-finder__input:focus {
    width: 180px;
  }
}

.goa-search-bar input[type="search"]::placeholder {
  color: rgba(255,255,255,.35);
}

.goa-search-bar input[type="search"]:focus,
.goa-search-bar .mod-finder__input:focus {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  outline: none;
  box-shadow: none;
}

/* Hide search button visually but keep it functional */
.goa-search-bar .mod-finder__button,
.goa-search-bar button[type="submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Search form needs relative positioning for the hidden button */
.goa-search-bar form {

}

/* Also hide any label Joomla might render */
.goa-search-bar label {
  display: none;
}

/* ── Awesomplete search suggestions dropdown ──────────────── */
.awesomplete > ul {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin-top: 0;
  padding: .3rem 0;
  min-width: 220px;
}
.awesomplete > ul::before { display: none; }
.awesomplete > ul > li {
  padding: .45rem .75rem;
  font-size: .82rem;
  font-family: var(--f-body);
  color: rgba(255,255,255,.8);
  border-radius: 0;
  transition: background .12s;
}
.awesomplete > ul > li:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.awesomplete > ul > li[aria-selected="true"] {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.awesomplete > ul mark {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .15em;
  border-radius: 2px;
  border-bottom: none;
}
.awesomplete > ul li:hover mark {
  background: rgba(184,25,46,.35);
  color: #fff;
}
.awesomplete > ul li[aria-selected="true"] mark {
  background: rgba(184,25,46,.35);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--navy-lt);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--navy-lt) var(--bg);
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════ */
body.itemid-101 .goa-breadcrumbs { display: none; }
.goa-breadcrumbs { background: var(--surface-alt); border-bottom: 1px solid var(--border-lt); }

.goa-breadcrumbs .mod-breadcrumbs,
.goa-breadcrumbs .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  padding: .4rem 0;
  margin: 0;
  font-size: .73rem;
}

.goa-breadcrumbs .mod-breadcrumbs__here { display: none; }
.goa-breadcrumbs a { color: var(--ink-muted); transition: color .15s; }
.goa-breadcrumbs a:hover { color: var(--navy-mid); }
.goa-breadcrumbs .breadcrumb-item.active { color: var(--ink-soft); }
.goa-breadcrumbs .divider,
.goa-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--border);
  padding-right: .2rem;
  font-size: .85rem;
}

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ══════════════════════════════════════════════════════════════ */
.goa-main {
  flex: 1;
  padding: 2rem 0 2.5rem;
  min-height: 50vh;
}
body.itemid-101 .goa-main {
  min-height: auto;
}

.goa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .goa-grid { grid-template-columns: 1fr 230px; }
  .goa-above-content, .goa-below-content { grid-column: 1 / -1; }
}

.goa-content { min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER — with red accent
   ══════════════════════════════════════════════════════════════ */
.page-header { margin-bottom: 1rem; }

.page-header h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin-top: .5rem;
  margin-bottom: .3rem;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE BODY
   ══════════════════════════════════════════════════════════════ */
.article-info .category-name { font-size: 0; }
.article-info .category-name .icon-folder-open { font-size: .73rem; }
.article-info .category-name a { font-size: .73rem; }
.article-info,
.com-content-article__info {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  font-size: .73rem;
  color: var(--ink-muted);
  padding: .5rem 0 1rem;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 1.4rem;
}

.com-content-article__body {
  font-size: .97rem;
  line-height: 1.76;
}

.com-content-article__body > p:first-child,
.com-content-article__body > article > p:first-child {
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.com-content-article__body h1 {
  margin-bottom: .75rem;
}

/* Themes grid — frontpage */
.goa-themes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin: .75rem 0 1rem;
}
.goa-themes-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  gap: .2rem;
  padding: .25rem .55rem;
  background: rgba(255,255,255,.7);
  color: var(--navy, #1e293b) !important;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 3px;
  font-size: .82rem;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.goa-themes-grid a:hover {
  color: var(--navy-dark, #0f1a2e) !important;
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.18);
}

/* Section headings with left red bar */
.com-content-article__body h2 {
  padding-left: .75rem;
  border-left: 3px solid var(--red);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.com-content-article__body h2:first-child { margin-top: 1.5em; }
.goa-mobile-only { display: none; }
@media (max-width: 767px) { .goa-mobile-only { display: block; } }

/* Explore links (photos + maps) under headings */
.com-content-article__body .goa-explore {
  font-size: .9em;
  margin-top: -.25rem;
  margin-bottom: .6rem;
  color: var(--ink-muted, #7d796f);
}
.com-content-article__body .goa-explore a {
  color: var(--navy-mid, #0e6b78) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,0,0,.15) !important;
  text-underline-offset: 2px;
}
.com-content-article__body .goa-explore a:hover {
  text-decoration-color: var(--red) !important;
}

.com-content-article__body h3 {
  color: var(--navy-mid);
}

/* Lists */
.com-content-article__body ul,
.com-content-article__body ol {
  padding-left: 1.2em;
  margin-bottom: 1.1rem;
}

.com-content-article__body li {
  margin-bottom: .35rem;
  line-height: 1.68;
  transition: background .15s;
}

.com-content-article__body li:has(> a:only-child):hover,
.com-content-article__body p:has(> a:only-child):hover,
.mod-articles-items li:hover {
  background: rgba(14,34,64,.04);
}

.com-content-article__body li::marker { color: var(--red); }

/* Attraction/experience name emphasis — strong inside links */
.com-content-article__body li a strong {
  font-weight: 600;
  color: var(--navy-mid, #0e6b78);
}
.com-content-article__body li a,
.com-content-article__body p a {
  color: var(--ink-muted, #7d796f);
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.com-content-article__body li a strong {
  color: var(--navy-mid, #0e6b78);
}

/* Blockquotes */
blockquote,
.com-content-article__body blockquote {

  border: none;
  background: var(--navy-lt);
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 1.1rem 1.5rem;
  border-radius: var(--r);
  font-style: italic;
  color: var(--navy);
}

blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--navy-mid);
  border-radius: var(--r) 0 0 var(--r);
}

blockquote p:last-child { margin-bottom: 0; }

/* Article hero image */
.item-image {
  margin: 0 0 .5rem;
}

.item-image img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}

.item-image figcaption {
  font-size: .7rem;
  color: var(--ink-muted);
  margin-top: .3rem;
  text-align: right;
}

/* Images */
.com-content-article__body img {
  border-radius: var(--r);
  margin: 1.2rem 0;
  box-shadow: var(--sh-1);
}

/* Iframes */
.com-content-article__body iframe,
iframe {
  max-width: 100%;
  border: none;
  border-radius: var(--r);
  margin: 1.2rem 0;
  box-shadow: var(--sh-1);
}

/* ══════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════ */
.com-content-article__body table,
table.category,
.com-content-category__table {
  width: 100%;
  margin: 1.3rem 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.com-content-article__body th,
table.category thead th,
.com-content-category__table thead th {
  background: var(--navy);
  color: white;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem .9rem;
  text-align: left;
  border-bottom: none;
}

/* Category list row <th> — NOT header, these are row titles */
table.category tbody th,
.com-content-category__table tbody th {
  background: rgba(255,255,255,.7) !important;
  color: inherit;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .88rem;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid var(--border-lt);
}

table.category tbody th a,
.com-content-category__table tbody th a {
  display: block;
  padding: .3rem .9rem;
}

.com-content-article__body td,
table.category td,
.com-content-category__table td {
  padding: .3rem .9rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}

.com-content-article__body tr:last-child td,
table.category tr:last-child td { border-bottom: none; }

/* Article body table rows — clickable row when link present */
.com-content-article__body tr:hover td {
  background: var(--red-faint);
}

.com-content-article__body tbody tr:has(a[href]) {
  cursor: pointer;
}

.com-content-article__body tbody tr:has(a[href]) td {
  transition: background .15s var(--ease);
}

.emoji { display: inline-block; padding: 0 .2rem; font-size: 1.15rem; }

/* Category article list */
table.category a, .list-title a {
  color: var(--navy-mid);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}

table.category a:hover, .list-title a:hover {
  color: var(--red);
}

table.category tbody tr,
.com-content-category__table tbody tr {
  cursor: pointer;
  transition: background .1s var(--ease);
}

table.category tbody tr:hover th,
table.category tbody tr:hover td,
.com-content-category__table tbody tr:hover th,
.com-content-category__table tbody tr:hover td {
  background: var(--surface-alt);
}

table.category tbody tr:hover a,
.com-content-category__table tbody tr:hover a {
  color: var(--red);
}

.cat-list-row0 { background: var(--surface); }
.cat-list-row1 { background: var(--surface-alt); }
.list-date { color: var(--ink-muted); white-space: nowrap; }

.municipality-table { table-layout: fixed; }
.municipality-table td { width: 33.33%; }
.municipality-table a { color: var(--navy-mid); font-weight: 500; }
.municipality-table a:hover { color: var(--red); }
.municipality-table tr:nth-child(even) { background: var(--surface-alt); }

/* ══════════════════════════════════════════════════════════════
   SVG MAP — with visual framing
   ══════════════════════════════════════════════════════════════ */
.region {
  fill: var(--navy);
  transition: fill .25s var(--ease);
  cursor: pointer;
}

.region:hover { fill: var(--red); }

svg text {
  fill: white;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}

/* Frame the map SVG area */
.com-content-article__body svg[viewBox] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  margin: 1.5rem 0;
  box-shadow: var(--sh-1);
}
/* Per-card map pin: override the global figure-style framing above.
   Must be more specific than .com-content-article__body svg[viewBox] AND
   the global img,svg{display:block;height:auto} reset, hence the
   double-class selector + explicit overrides. */
.com-content-article__body .goa-card__links a.goa-card__map svg,
.com-content-article__body ul.goa-listings .goa-card__links a.goa-card__map svg {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  vertical-align: -2px;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.goa-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.goa-sidebar .moduletable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.goa-sidebar .moduletable h3 {
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 400;
  color: white;
  margin: 0;
  padding: .5rem .8rem;
  background: var(--navy);
}

.goa-sidebar .mod-menu,
.goa-sidebar .nav { list-style: none; padding: .3rem; margin: 0; }

.goa-sidebar li a {
  display: block;
  padding: .35rem .6rem;
  font-size: .83rem;
  color: var(--ink-soft);
  border-radius: 4px;
  transition: all .15s;
}

.goa-sidebar li a:hover { background: var(--navy-faint); color: var(--navy-mid); }
.goa-sidebar li.active > a,
.goa-sidebar li.current > a { background: var(--navy-lt); color: var(--navy); font-weight: 600; }

.goa-sidebar .custom { padding: .75rem; font-size: .85rem; line-height: 1.6; }
.goa-sidebar .custom a { color: var(--navy-mid); }

/* ══════════════════════════════════════════════════════════════
   BOTTOM SECTIONS
   ══════════════════════════════════════════════════════════════ */
.goa-bottom { padding: 2.5rem 0; }

.goa-bottom--a {
  background: var(--surface);
  border-top: 3px solid var(--navy);
}

.goa-bottom--b {
  background: var(--bg);
  border-top: 1px solid var(--border-lt);
}

/* Two-column grid — 70/30 split */
.goa-bottom--a .goa-container {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 2rem;
}

@media (max-width: 700px) {
  .goa-bottom--a .goa-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.goa-bottom .moduletable { margin-bottom: 0; }

.goa-bottom .moduletable > h2,
.goa-bottom .moduletable > h3 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}

.goa-bottom .moduletable > h2::after,
.goa-bottom .moduletable > h3::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  margin: .5rem auto 1.2rem;
}

/* ── Article Cards ────────────────────────────────────────────── */
.mod-articles-items.mod-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mod-articles-item {
  background: rgba(255,255,255,.7) !important;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: background .15s var(--ease);
}

.goa-bottom .mod-articles-items li {
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.goa-bottom .mod-articles-items li:last-child { border-bottom: none; }

.mod-articles-item:hover {
  background: var(--surface-alt);
}

.mod-articles-title {
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.mod-articles-title a,
a.mod-articles-link {
  display: block;
  padding: .55rem .6rem;
  color: var(--ink);
  transition: color .15s;
}

.mod-articles-title a:hover,
a.mod-articles-link:hover { color: var(--navy-mid); }

/* ── Sidebar Recent Articles (mod_articles_news) ──────────── */
.goa-sidebar .mod-articles-items.mod-list {
  display: block;
  margin: 0;
  padding: 0;
}

.goa-sidebar .mod-articles-items > li {
  border-bottom: 1px solid var(--border-lt);
  border-left: 3px solid transparent;
  padding: 0;
  margin: 0;
  transition: border-left-color .2s ease, background .2s ease;
}

.goa-sidebar .mod-articles-items > li:last-child {
  border-bottom: none;
}

.goa-sidebar .mod-articles-items > li:hover {
  border-left-color: var(--red);
  background: rgba(14, 34, 64, 0.04);
}

.goa-sidebar .mod-articles-items a:hover {
  background: transparent !important;
}

.goa-sidebar .mod-articles-item {
  background: transparent !important;
  padding: 0;
}

.goa-sidebar .mod-articles-item-content {
  padding: .7rem .85rem;
}

.goa-sidebar .mod-articles-title {
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.22;
  margin: 0;
  letter-spacing: .005em;
}

.goa-sidebar .mod-articles-title a,
.goa-sidebar a.mod-articles-link {
  display: block;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}

.goa-sidebar .mod-articles-items > li:hover .mod-articles-title a,
.goa-sidebar .mod-articles-items > li:hover a.mod-articles-link {
  color: var(--navy);
}

.goa-sidebar .list-unstyled {
  margin: .35rem 0 0;
  padding: 0;
}

.goa-sidebar .article-info-term {
  display: none;
}

.goa-sidebar .mod-articles-date {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.goa-sidebar .mod-articles-date .icon-calendar {
  display: none;
}

/* ── Inline "Where to stay" sibling links (city pages) ──── */
.goa-stay-link {
  margin-left: .4em;
  font-size: .85em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.goa-stay-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ── Related Articles block (plg_system_vnrelated) ─────────────── */
.goa-related-block {
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--border-lt);
}

.goa-related-block__title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1.2rem;
  letter-spacing: .01em;
  position: relative;
  padding: 0 0 .5rem;
  text-align: left;
}

.goa-related-block__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--red);
  margin-top: .5rem;
}

.goa-related-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}

.goa-related-block__item {
  list-style: none;
  background: var(--surface-alt);
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  transition: border-left-color .2s ease, background .2s ease;
}

.goa-related-block__item:hover {
  border-left-color: var(--red);
  background: var(--border-lt);
}

.goa-related-block__link {
  display: block;
  padding: .85rem 1rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}

.goa-related-block__item:hover .goa-related-block__link {
  color: var(--navy);
}

/* ── Hide mid-article book promo when sidebar is visible (≥900px) ── */
@media (min-width: 900px) {
  #mod-custom130,
  .goa-mid-promo {
    display: none !important;
  }
}

/* ── Bottom article lists — accent-bordered hover ──────────── */
.mod1 .mod-articles-items li,
.mod2 .mod-articles-items li {
  border-bottom: none;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: border-color .2s, background .2s;
}
.mod1 .mod-articles-items li:hover,
.mod2 .mod-articles-items li:hover {
  border-left-color: var(--red);
  background: rgba(255,255,255,.7) !important;
}
.mod1 .mod-articles-title a,
.mod2 .mod-articles-title a {
  padding: .5rem .7rem;
  font-size: .84rem;
  font-weight: 450;
  color: var(--ink-soft);

  padding-right: 1.8rem;
}
.mod1 .mod-articles-title a::after,
.mod2 .mod-articles-title a::after {
  content: '→';
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--red);
  font-size: .8rem;
  transition: opacity .2s, transform .2s;
}
.mod1 .mod-articles-items li:hover .mod-articles-title a::after,
.mod2 .mod-articles-items li:hover .mod-articles-title a::after {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}
.mod1 .mod-articles-title a:hover,
.mod2 .mod-articles-title a:hover {
  color: var(--ink);
}

/* Action buttons */
.goa-tac-actions {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .75rem;
}
.goa-tac-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .6rem;
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 5px;
  transition: all .2s;
  white-space: nowrap;
}
.goa-tac-btn--surprise {
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
}
.goa-tac-btn--surprise:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 2px 8px rgba(216,70,43,.35);
}
.goa-tac-btn--search {
  color: var(--ink-soft);
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(0,0,0,.12);
}
.goa-tac-btn--search:hover {
  color: var(--ink);
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════
   BLOCK LINKS — all list items clickable as full row
   ══════════════════════════════════════════════════════════════ */
.com-content-article__body ul a,
.com-content-article__body ol a,
.com-tags__category .list-group-item a,
.goa-bottom .moduletable a {
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   BLOG / CATEGORY BLOG
   ══════════════════════════════════════════════════════════════ */
.blog .item,
.com-content-category-blog__item {
  background: var(--surface) !important;
  border: 1px solid var(--border-lt);
  border-radius: var(--r);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.blog .item:last-child,
.com-content-category-blog__item:last-child { margin-bottom: 0; }

.blog .item:hover,
.com-content-category-blog__item:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(13,42,51,.08);
}

.blog .item .page-header,
.com-content-category-blog__item .page-header {
  margin: 0 0 0.4rem;
  border: none;
  padding: 0;
}
.blog .item h2,
.com-content-category-blog__item h2 {
  font-size: 1.35rem;
  margin: 0;
  border: none;
  padding: 0;
  line-height: 1.25;
}

.blog .item h2 a { color: var(--ink); }
.blog .item h2 a:hover { color: var(--red); }

/* On category-blog pages, suppress most of the inline article meta - the
   wrapper card is the read-more affordance. */
.blog .item dl.article-info,
.com-content-category-blog__item dl.article-info {
  margin: 0.2rem 0 0.9rem;
  padding: 0;
  border: none;
  font-size: 0.7rem;
}
.blog .item dl.article-info dt,
.com-content-category-blog__item dl.article-info dt { display: none; }

/* ══════════════════════════════════════════════════════════════
   TAGS
   ══════════════════════════════════════════════════════════════ */
.com-tags__category .list-group { list-style: none; padding: 0; }

.com-tags__category .list-group-item {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border-lt);
  background: rgba(255,255,255,.7) !important;
}

.com-tags__category .list-group-item:last-child { border-bottom: none; }

.com-tags__category .list-group-item:hover { background: var(--surface-alt); }

.com-tags__category .list-group-item h3 {
  font-family: var(--f-body);
  font-size: .88rem;
  font-weight: 500;
  margin: 0;
}

.com-tags__category .list-group-item h3 a {
  display: block;
  padding: .5rem .6rem;
  color: var(--navy-mid);
  transition: color .15s;
}

.com-tags__category .list-group-item h3 a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   CATEGORY LIST — block links for table rows
   ══════════════════════════════════════════════════════════════ */
table.category td a,
.list-title a {
  display: block;
  padding: .1rem 0;
}

/* ── Municipality index (/go) — multi-column card grid ────── */
.itemid-102 .com-content-category__table {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.itemid-102 .com-content-category__table thead { display: none; }
.itemid-102 .com-content-category__table tbody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.itemid-102 .com-content-category__table tbody tr {
  display: contents;
}
.itemid-102 .com-content-category__table tbody th {
  padding: 0;
  font-weight: 400;
  border-bottom: 1px solid rgba(0,0,0,.04);
  border-right: 1px solid rgba(0,0,0,.04);
}
.itemid-102 .com-content-category__table tbody th:nth-child(4n) {
  border-right: none;
}
.itemid-102 .com-content-category__table tbody th a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy-mid);
  text-align: center;
  transition: all .12s var(--ease);
}
.itemid-102 .com-content-category__table tbody th a:hover {
  background: rgba(184,25,46,.04);
  color: var(--red);
}
.itemid-102 .com-content-category__table tbody tr:hover th,
.itemid-102 .com-content-category__table tbody tr:hover td {
  background: rgba(255,255,255,.7) !important;
}
@media (max-width: 767px) {
  .itemid-102 .com-content-category__table tbody {
    grid-template-columns: repeat(2, 1fr);
  }
  .itemid-102 .com-content-category__table tbody th:nth-child(2n) {
    border-right: none;
  }
  .itemid-102 .com-content-category__table tbody th:nth-child(4n) {
    border-right: 1px solid rgba(0,0,0,.04);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .itemid-102 .com-content-category__table tbody {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — navy base with red top line
   ══════════════════════════════════════════════════════════════ */
.goa-footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding: 2rem 0 1.25rem;
  border-top: 3px solid var(--red);
}

.goa-footer .goa-container {

  max-width: 1100px;
}

/* Footer body: 2-column grid on desktop.
   Left: brand (wordmark + secondary nav).  Right: legal disclaimer + credit.
   The continents nav above spans full width (it's outside .goa-footer__inner).
   Mobile (<700px): stacks back to single column, left-aligned legal text. */
.goa-footer__inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 2.5rem;
  align-items: start;
  padding-top: 2rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
.goa-footer__brand {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-start;
}
.goa-footer__legal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 700px) {
  .goa-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 1.5rem;
  }
  .goa-footer__brand { align-items: center; text-align: center; }
}

.goa-footer__logo {
  display: inline-block;
  line-height: 0;
}
/* Bumped from 30 -> 40px so the wordmark has presence next to the larger
   nav row + disclaimer column. Width auto-scales with the 11:2 aspect ratio. */
.goa-footer__logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;         /* override the global img max-width:100% */
  opacity: 0.92;
  transition: opacity 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-footer__logo:hover img,
.goa-footer__logo:focus-visible img { opacity: 1; }

.goa-footer__tagline {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  margin: 0;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Footer modules */
.goa-footer__modules {

  font-size: .75rem;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  width: 100%;
  margin-top: .3rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.goa-footer__modules .moduletable {
  margin-bottom: .6rem;
}

.goa-footer__modules .moduletable:last-child { margin-bottom: 0; }

.goa-footer__modules a {
  color: rgba(255,255,255,.6);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.15);
  transition: color .15s;
}

.goa-footer__modules a:hover { color: rgba(255,255,255,.95); }

.goa-footer__modules strong {
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

.goa-footer__modules p { margin-bottom: .35rem; }
.goa-footer__modules p:last-child { margin-bottom: 0; }

/* Disclaimer text — smaller, subtler */
.goa-footer__modules .goa-footer-disclaimer {
  font-size: .68rem;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
}

/* Footer secondary nav (About / Privacy / Contact) - sits under the wordmark
   in the left column. Size + line-height + color match the disclaimer opposite
   so the two columns visually align as one calm footer row. */
.goa-footer-nav {
  font-size: .85rem;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,.5);
}
.goa-footer-nav a {
  text-decoration: none;
  color: rgba(255,255,255,.65);
  transition: color 140ms cubic-bezier(.2,.7,.2,1);
  padding-left: 9px;
}
.goa-footer-nav a:first-child { padding-left: 0; }
.goa-footer-nav a:hover { color: rgba(255,255,255,.95); }

/* Disclaimer: legal-text vibe. Lives in the right column of the 2-column
   footer grid. Same size/line-height/color as the nav opposite it so both
   columns read as one horizontal row of footer text. */
.goa-footer__disclaimer {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
  text-align: left;
}
.goa-footer__disclaimer a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color 140ms cubic-bezier(.2,.7,.2,1);
}
.goa-footer__disclaimer a:hover,
.goa-footer__disclaimer a:focus-visible {
  color: rgba(255,255,255,.95);
}
.goa-footer__credit {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 248, 236, 0.55);
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
}
.goa-footer__credit a {
  color: rgba(255, 248, 236, 0.78);
  text-decoration: none;
  transition: color 140ms cubic-bezier(.2,.7,.2,1);
}
.goa-footer__credit a:hover,
.goa-footer__credit a:focus-visible {
  color: var(--goa-cream, #FFF8EC);
}

@media (max-width: 700px) {
  .goa-footer__disclaimer { font-size: .8rem; }
  .goa-footer-nav        { font-size: .8rem; }
}















.goa-footer__credit a {
  color: rgba(255,255,255,.45);
  text-decoration: none;
}
.goa-footer__credit a:hover {
  color: rgba(255,255,255,.75);
}
/* Copyright + weblio row */
.goa-footer__modules .goa-footer-copy {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: .63rem;
  color: rgba(255,255,255,.3);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.goa-footer__modules .goa-footer-copy a {
  color: rgba(255,255,255,.35);
  font-size: .63rem;
}

.goa-footer__modules .goa-footer-copy a:hover {
  color: rgba(255,255,255,.65);
}

/* Partner strip — Weblio */
.goa-partner-strip {
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: var(--sand-light, #f0ece4);
  padding: 2rem 0;
}
.goa-partner-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.goa-partner-brand {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
  min-width: 120px;
}
.goa-partner-label {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted, #8a857c);
}
.goa-partner-wordmark {
  font-family: var(--f-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: opacity .2s ease;
  line-height: 1;
}
.goa-partner-wordmark:hover { opacity: .8; }
.goa-partner-tagline {
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--ink-muted, #8a857c);
  margin-top: .15rem;
}
.goa-partner-desc {
  flex: 1;
  font-size: .85rem;
  color: var(--ink-soft, #5c574f);
  line-height: 1.65;
  margin: 0;
  min-width: 200px;
}
.goa-partner-cta {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  padding: .5rem 1.2rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  color: var(--ink-soft, #5c574f);
  text-decoration: none;
  font-size: .8rem;
  transition: background .15s, color .15s;
}
.goa-partner-cta:hover {
  background: var(--navy, #1e293b);
  color: #fff;
  border-color: var(--navy, #1e293b);
}
@media (max-width: 640px) {
  .goa-partner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .goa-partner-cta { align-self: flex-start; }
}

/* RSS syndicate — bottom-left, aligned with the weblio copy row */
.goa-footer__modules > .moduletable:has(.syndicate-module) {
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}
.goa-footer__modules .syndicate-module {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .63rem;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .15s;
}

.goa-footer__modules .syndicate-module:hover { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════════════════════════════════
   BACK TO TOP
   ══════════════════════════════════════════════════════════════ */
.goa-back-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border: none;
  border-radius: 50%;
  color: white;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .3s var(--ease);
  z-index: 50;
}

.goa-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.goa-back-top:hover { background: var(--red); box-shadow: var(--sh-3); }
.goa-back-top.near-footer { bottom: 3rem; }

/* ══════════════════════════════════════════════════════════════
   ERROR PAGE
   ══════════════════════════════════════════════════════════════ */
.goa-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 2rem;
}

.goa-error h1 { font-size: 5rem; color: var(--border); line-height: 1; }
.goa-error__message { font-size: 1rem; color: var(--ink-muted); margin: .5rem 0 1.5rem; }

.goa-error__home {
  display: inline-block;
  background: var(--navy);
  color: white;
  padding: .5rem 1.2rem;
  border-radius: 5px;
  font-weight: 500;
  font-size: .84rem;
  transition: background .15s;
}

.goa-error__home:hover { background: var(--red); }

/* ══════════════════════════════════════════════════════════════
   JOOMLA SYSTEM
   ══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--r);
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  border: 1px solid;
}

.alert-success { background: #edf7ee; border-color: #b8deb8; color: #1a5c1a; }
.alert-warning { background: #fdf7ec; border-color: #efd88a; color: #7a5600; }
.alert-danger  { background: var(--red-lt); border-color: #e8bfc4; color: var(--red-dark); }
.alert-info    { background: var(--navy-faint); border-color: var(--navy-lt); color: var(--navy); }

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  gap: .15rem;
  justify-content: center;
}

.page-item .page-link {
  display: block;
  padding: .3rem .6rem;
  font-size: .78rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all .15s;
}

.page-item .page-link:hover { background: var(--navy-faint); color: var(--navy-mid); border-color: var(--navy-lt); }
.page-item.active .page-link,
.com-content-category .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: #fff !important; text-decoration: none; }
.page-item.disabled .page-link { opacity: .3; pointer-events: none; }

/* Pagination arrow icons (Joomla uses icon-angle-* but no icon font loaded) */
.page-link .icon-angle-left::before   { content: '‹'; }
.page-link .icon-angle-right::before  { content: '›'; }
.page-link .icon-angle-double-left::before  { content: '«'; }
.page-link .icon-angle-double-right::before { content: '»'; }
.page-link [class^="icon-"] { font-style: normal; font-size: 1rem; line-height: 1; }

/* Pagination limit dropdown */
select#limit {
  width: auto;
  min-width: 4.5rem;
  padding: .3rem 1.8rem .3rem .5rem;
  font-size: .78rem;
}
.com-content-category__pagination.btn-group.float-end {
  float: right;
  margin-bottom: .5rem;
}
.com-content-category__counter.counter {
  float: right;
  clear: right;
  font-size: .75rem;
  color: var(--ink-soft);
  margin: 0;
  padding: .2rem 0;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: var(--f-body);
  font-size: .85rem;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(27,58,107,.08);
}

.btn, button[type="submit"] {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-radius: 4px;
  border: none;
  transition: all .15s;
}

.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--red); }
.btn-secondary { background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--navy-faint); color: var(--navy-mid); border-color: var(--navy-lt); }

/* ══════════════════════════════════════════════════════════════
   SMART SEARCH / com_finder
   ══════════════════════════════════════════════════════════════ */
.com-finder .search-results { list-style: none; padding: 0; margin: 1rem 0; }

.com-finder .result__item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-lt);
}

.com-finder .result__item:last-child { border-bottom: none; }

.com-finder .result__title-text {
  font-family: var(--f-display);
  font-size: 1.1rem;
  margin: 0 0 .25rem;
}

.com-finder .result__title-link {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color .15s;
}

.com-finder .result__title-link:hover { color: var(--red); }

.com-finder .result__description {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: .25rem 0;
}

.com-finder .result__date,
.com-finder .result__taxonomy {
  font-size: .73rem;
  color: var(--ink-muted);
}
.com-finder .result__taxonomy--Type,
.com-finder .result__taxonomy--Author { display: none !important; }
.com-finder .result__taxonomy--Category::before { content: none !important; }

.com-finder .result__taxonomy-item {
  display: inline-block;
  font-size: .7rem;
  background: var(--navy-faint);
  color: var(--navy-mid);
  padding: .15rem .45rem;
  border-radius: 3px;
  margin: .15rem .15rem 0 0;
}

.com-finder mark[data-markjs] {
  background: var(--red-lt);
  color: var(--ink);
  padding: .05em .2em;
  border-radius: 3px;
  border-bottom: 1.5px solid var(--red);
}

/* Search form */
.com-finder .input-group {
  display: flex;
  gap: 0;
}

.com-finder .input-group input[type="search"],
.com-finder .input-group input[type="text"] {
  flex: 1;
  border-radius: 5px 0 0 5px;
}

.com-finder .input-group .btn {
  border-radius: 0 5px 5px 0;
}

/* Hide search clutter — people just want results */
.com-finder__tips.card,
.com-finder__filter,
#search-sorting,
#search-query-explained p a,
.com-finder fieldset { display: none; }

#search-query-explained p {
  font-size: .82rem;
  color: var(--ink-muted);
  margin-bottom: .5rem;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT / com_contact
   ══════════════════════════════════════════════════════════════ */
.com-contact .contact {
  margin-bottom: 1.5rem;
}

.com-contact .contact-address,
.com-contact .contact-miscinfo,
.com-contact .contact-links {
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.com-contact .contact-links a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-contact .contact-links a:hover { color: var(--red); }

.com-contact form.form-validate .control-group {
  margin-bottom: .75rem;
}

.com-contact form.form-validate .control-label label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}

.com-contact form.form-validate textarea {
  min-height: 120px;
  resize: vertical;
}

/* Contact category list */
.com-contact-category .list-title a {
  color: var(--navy-mid);
  font-weight: 500;
}

.com-contact-category .list-title a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   LOGIN / com_users
   ══════════════════════════════════════════════════════════════ */
.com-users-login .com-users-login__form,
.com-users-login .well,
.com-users-profile .well,
.com-users-registration .well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.com-users-login .control-group,
.com-users-registration .control-group {
  margin-bottom: .75rem;
}

.com-users-login .control-label label,
.com-users-registration .control-label label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}

.com-users-login__remember .form-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0;
}

.com-users-login__remember .form-check-input {
  width: auto;
  margin: 0;
}

.com-users-login__remember .form-check-label {
  font-size: .8rem;
  color: var(--ink-soft);
}

.com-users-login__submit { margin-top: 1rem; }

.com-users-login__options.list-group {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--border-lt);
  padding-top: .75rem;
}

.com-users-login__options .list-group-item {
  background: rgba(255,255,255,.7) !important;
  border: none;
  padding: .2rem 0;
  font-size: .82rem;
}

.com-users-login__options .list-group-item a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-users-login__options .list-group-item a:hover { color: var(--red); }

/* Sidebar login */
.goa-sidebar .com-users-login form { padding: .5rem; }
.goa-sidebar .com-users-login .control-group { margin-bottom: .5rem; }
.goa-sidebar .com-users-login input { font-size: .8rem; padding: .35rem .5rem; }
.goa-sidebar .com-users-login button[type="submit"] { width: 100%; margin-top: .4rem; }

/* ══════════════════════════════════════════════════════════════
   TAGS / com_tags (enhanced)
   ══════════════════════════════════════════════════════════════ */
.com-tags-tag-list.tag-category > h1 { margin-bottom: .35rem; }
.com-tags-tag .tag-category { margin-bottom: 1.5rem; }

.com-tags-tag .tag-category h3 {
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--ink);
}

.com-tags-tags__filter.btn-group {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

.com-tags-tags__filter .inputbox {
  font-size: .82rem;
}

/* Tag badges inline */
.tags.inline,
.tags.list-inline { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .75rem 0; }

.tags.inline li a,
.tags.list-inline li a,
span.tag-body a {
  display: inline-block;
  font-size: .88rem;
  background: var(--navy-faint);
  color: var(--navy-mid);
  padding: .35rem .7rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all .15s;
  border: 1px solid var(--border-lt);
}

.tags.inline li a:hover,
.tags.list-inline li a:hover,
span.tag-body a:hover {
  background: var(--navy-lt);
  color: var(--navy);
  border-color: var(--navy-lt);
}

/* Override Bootstrap btn styles on tag pills */
.tags .btn-info {
  background: var(--navy-faint);
  color: var(--navy-mid);
  border: 1px solid var(--border-lt);
}
.tags .btn-info:hover {
  background: var(--navy-lt);
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════
   RELATED ITEMS MODULE
   ══════════════════════════════════════════════════════════════ */
ul.mod-relateditems {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.mod-relateditems li {
  border-bottom: 1px solid var(--border-lt);
}

ul.mod-relateditems li:last-child { border-bottom: none; }

ul.mod-relateditems li a {
  display: block;
  padding: .45rem .3rem;
  font-size: .85rem;
  color: var(--navy-mid);
  text-decoration: none;
  transition: all .15s;
}

ul.mod-relateditems li a:hover {
  color: var(--red);
  padding-left: .6rem;
}

/* ══════════════════════════════════════════════════════════════
   CODE BLOCKS
   ══════════════════════════════════════════════════════════════ */
.goa-code-wrap {

  margin: 1rem 0 1.25rem;
}
.goa-code-wrap pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 1.2rem 1rem .9rem;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  border: 1px solid rgba(255,255,255,.06);
}
.goa-code-wrap code {
  font-family: 'Courier New', Consolas, monospace;
  background: none;
  padding: 0;
  color: inherit;
}
.goa-code-copy {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  padding: .25rem .6rem;
  border-radius: 4px;
  font-size: .65rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.goa-code-copy:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE NAVIGATION (prev/next)
   ══════════════════════════════════════════════════════════════ */
.pagenavigation,
nav.pagenavigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-lt);
}

nav.pagenavigation > .pagination {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pagenavigation .btn {
  font-size: .78rem;
  padding: .4rem .8rem;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: all .15s;
}

.pagenavigation .btn:hover {
  background: var(--navy-faint);
  color: var(--navy-mid);
  border-color: var(--navy-lt);
}

/* ══════════════════════════════════════════════════════════════
   NEWSFEEDS / com_newsfeeds
   ══════════════════════════════════════════════════════════════ */
.com-newsfeeds-categories .categories-list,
.com-newsfeeds-categories__items {
  list-style: none;
  padding: 0;
}

.com-newsfeeds-categories__items {
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-lt);
  transition: background .15s;
}

.com-newsfeeds-categories__items:hover { background: var(--surface-alt); }

.com-newsfeeds-categories__items h3.item-title {
  font-family: var(--f-body);
  font-size: .88rem;
  font-weight: 500;
  margin: 0;
}

.com-newsfeeds-categories__items h3.item-title a {
  color: var(--navy-mid);
  text-decoration: none;
}

.com-newsfeeds-categories__items h3.item-title a:hover { color: var(--red); }

.com-newsfeeds-newsfeed .feed-description { margin-bottom: 1.5rem; }

.com-newsfeeds-newsfeed .feed-items {
  list-style: none;
  padding: 0;
}

.com-newsfeeds-newsfeed .feed-item-title a {
  color: var(--navy-mid);
  font-weight: 500;
}

.com-newsfeeds-newsfeed .feed-item-description {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: .25rem 0 .75rem;
}

/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP FORM COMPONENTS
   ══════════════════════════════════════════════════════════════ */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > input,
.input-group > select {
  flex: 1;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: .45rem .7rem;
  font-size: .85rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  white-space: nowrap;
}

.form-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}

.form-check-inline { display: inline-flex; margin-right: .75rem; }

.form-check-input {
  width: auto;
  margin: 0;
  accent-color: var(--navy);
}

.form-check-label {
  font-size: .85rem;
  color: var(--ink-soft);
}

/* List group */
.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-lt);
  background: rgba(255,255,255,.7) !important;
}

.list-group-item:last-child { border-bottom: none; }

.list-group-item-action {
  cursor: pointer;
  transition: background .15s;
}

.list-group-item-action:hover { background: var(--surface-alt); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card-header {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding: .6rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}

.card-body { padding: .9rem; }

.card-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: .5rem .9rem;
  font-size: .8rem;
}

/* Well (legacy Joomla) */
.well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Theme grid & intro
   ══════════════════════════════════════════════════════════════ */
.goa-hero-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 720px;
}

.goa-quick-links {
  font-size: .9rem;
  color: var(--ink-muted);
}

.goa-quick-links a {
  font-weight: 600;
  text-decoration-color: rgba(27,58,107,.3) !important;
}

.goa-map-intro {
  font-size: .88rem;
  color: var(--ink-muted);
  margin-top: 1.5rem;
  font-style: italic;
}

.goa-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .3rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.goa-theme-grid a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: all .2s var(--ease);
  white-space: nowrap;
}

.goa-theme-grid a:hover {
  background: var(--navy-faint);
  border-color: var(--navy-lt);
  color: var(--navy);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}

.goa-theme-grid a::after { display: none !important; } /* no external link icon */

.goa-theme-grid .goa-theme-emoji {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 480px) {
  .goa-theme-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
.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;
}

span.badge.bg-danger.featured-article-badge { display: none; }
.table-bordered, .table-bordered td, .table-bordered th { border: none !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.7) !important; }

::selection { background: var(--navy-lt); color: var(--navy); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

.desktop-view { display: block; }
.mobile-view { display: none; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .goa-main { padding: 1.5rem 0 2rem; }
  .goa-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .goa-header__inner { min-height: 60px; padding: 0.4rem clamp(1rem, 5vw, 2.5rem); }
  .goa-logo__img { height: 44px; }
  .goa-logo__text { font-size: 1.15rem; }
  .goa-nav.open { top: 60px; }
  .goa-main { padding: 1.25rem 0 1.5rem; }
  .com-content-article__body { font-size: .92rem; }
  .blog .item { padding: .9rem 0; }
  .mod-articles-items.mod-list { grid-template-columns: 1fr; }
  .goa-bottom { padding: 1.75rem 0; }

  /* Tables: horizontal scroll on small screens */
  .com-content-article__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer stays readable */
  .goa-footer .goa-container { max-width: 100%; }

  .goa-footer__modules .goa-footer-copy {
    flex-direction: column;
    gap: .2rem;
    align-items: center;
  }

  /* Pagination wraps nicely */
  .pagination { flex-wrap: wrap; gap: .25rem; }
}

@media (max-width: 600px) {
  .desktop-view { display: none !important; }
  .mobile-view { display: block !important; }
  .municipality-table td { width: 100%; display: block; text-align: center; padding: .3rem; }

  /* Article body images full bleed */
  .com-content-article__body img {
    border-radius: 0;
    margin-left: calc(-1 * clamp(1rem, 5vw, 2.5rem));
    margin-right: calc(-1 * clamp(1rem, 5vw, 2.5rem));
    max-width: calc(100% + 2 * clamp(1rem, 5vw, 2.5rem));
    width: calc(100% + 2 * clamp(1rem, 5vw, 2.5rem));
  }

  /* Category list: hide date column on very small screens */
  .list-date { display: none; }

  /* Tighter headings */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; margin-top: 1.8rem; }

  /* SVG map responsive */
  .com-content-article__body svg[viewBox] { padding: .5rem; }
  .com-content-article__body .goa-card__links a.goa-card__map svg { padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   FILMSTRIP — thumbnail row below hero image
   ══════════════════════════════════════════════════════════════ */
.goa-filmstrip-wrap {

}
.goa-filmstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.goa-filmstrip::-webkit-scrollbar {
  display: none;
}
.goa-filmstrip .goa-thumb {
  width: 80px;
  min-width: 80px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--r, 6px);
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
  flex-shrink: 0;
}
.goa-filmstrip .goa-thumb:hover {
  opacity: .85;
}
.goa-filmstrip .goa-thumb.goa-thumb-active {
  opacity: 1;
  border-color: var(--accent, #0e6b78);
}
/* Prev/next buttons on hero image */
figure.item-image { position: relative; }
.goa-filmstrip-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  border: none;
  background: rgba(255,255,255,.7) !important;
  color: rgba(255,255,255,.85);
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s;
  border-radius: 0;
  padding: 0;
}
.goa-filmstrip-btn:hover {
  background: rgba(0,0,0,.07);
  color: #fff;
}
.goa-filmstrip-btn--left { left: 0; }
.goa-filmstrip-btn--right { right: 0; }
.goa-filmstrip-more {
  text-align: right;
  font-size: .72rem;
  margin-top: -4px;
  margin-bottom: .5rem;
}
.goa-filmstrip-more a {
  color: var(--ink-muted, #6b7280);
  text-decoration: none;
  font-style: italic;
}
.goa-filmstrip-more a:hover {
  color: var(--accent, #0e6b78);
}

.goa-photo-credit {
  font-size: .68rem;
  color: var(--ink-muted, #9ca3af);
  font-style: italic;
  text-align: right;
  margin-top: .2rem;
  margin-bottom: .3rem;
  line-height: 1.4;
}
.goa-photo-disclaimer {
  font-size: .72rem;
  color: var(--ink-muted, #9ca3af);
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.goa-photo-disclaimer a {
  color: var(--ink-muted, #9ca3af);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   AD BANNERS
   ══════════════════════════════════════════════════════════════ */

/* ── Shared ad slot ───────────────────────────────────────── */
.goa-ad {
  display: block;
  text-align: center;
  margin: 1.5rem 0;

}
.goa-ad a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.goa-ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
.goa-ad-label {
  display: block;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .25rem;
}

/* ── Demo ad (placeholder) ────────────────────────────────── */
.goa-ad--demo {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  background: var(--surface-alt);
  transition: border-color .2s, background .2s;
}
.goa-ad--demo:hover {
  border-color: var(--red);
  background: var(--red-faint);
}
.goa-ad--demo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.goa-ad--demo .goa-ad__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.goa-ad--demo .goa-ad__headline {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.goa-ad--demo .goa-ad__sub {
  font-size: .78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.goa-ad--demo .goa-ad__cta {
  display: inline-block;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: .02em;
}
.goa-ad--demo:hover .goa-ad__cta {
  text-decoration: underline;
}

/* ── Active ad (client banner) ────────────────────────────── */
.goa-ad--active {
  border-radius: var(--r);
  overflow: hidden;
}
.goa-ad--active a {
  transition: opacity .2s;
}
.goa-ad--active a:hover {
  opacity: .92;
}

/* ── Top banner (wide, below title) ───────────────────────── */
.goa-ad--top {
  margin: 1rem 0 1.5rem;
}

/* ── Mid-article (after intro paragraph) ──────────────────── */
.goa-ad--mid {
  margin: 1.5rem 0;
}

/* ── Bottom banner (below article) ────────────────────────── */
.goa-ad--bottom {
  margin: 2rem 0 1rem;
}

/* ── Sidebar ad ───────────────────────────────────────────── */
.goa-ad--sidebar {
  margin: 0 0 1.25rem;
}
.goa-ad--sidebar.goa-ad--demo {
  padding: 1rem;
}
.goa-ad--sidebar .goa-ad__headline {
  font-size: .9rem;
}
.goa-ad--sidebar .goa-ad__sub {
  font-size: .72rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .goa-ad--demo { padding: 1rem; }
  .goa-ad--demo .goa-ad__headline { font-size: .88rem; }
  .goa-ad--demo .goa-ad__sub { font-size: .72rem; }
}

/* Hide ads in print */
@media print {
  .goa-ad { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */
@media print {
  body { background: white; color: black; font-size: 11pt; }
  .goa-header, .goa-footer, .goa-back-top, .goa-breadcrumbs,
  .goa-sidebar, .goa-bottom { display: none; }
  a { color: black; }
  h1, h2, h3 { color: black; page-break-after: avoid; }
  .page-header h1::after { display: none; }
}

/* ── Sidebar book promo — tame navy intensity (override module 133 inline styles) ── */
.goa-sidebar .moduletable h3.goa-book-promo__title {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
  margin: 0 0 .4rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
/* CTA matches the "Free" preview buttons below for visual coherence:
   light red tint + thin red border + ink text. Hover fills red. */
.goa-sidebar .custom a.goa-book-promo__cta {
  background: var(--red-faint) !important;
  color: var(--ink) !important;
  border: 1px solid var(--red) !important;
  padding: .55rem .6rem .5rem !important;
}
.goa-sidebar .custom a.goa-book-promo__cta:hover,
.goa-sidebar .custom a.goa-book-promo__cta:focus {
  background: var(--red) !important;
  color: #fff !important;
}
.goa-sidebar .custom a.goa-book-promo__cta .goa-book-promo__cta-title,
.goa-sidebar .custom a.goa-book-promo__cta .goa-book-promo__cta-price,
.goa-sidebar .custom a.goa-book-promo__cta .goa-book-promo__cta-save {
  color: inherit;
}

/* ── Browse pages (/cities, /countries) ─────────────────────── */
.goa-browse { margin: 1.5rem 0; }
.goa-browse__region {
  margin: 2.5rem 0 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-lt);
}
.goa-browse__region:first-child { border-top: 0; padding-top: 0; }
.goa-browse__region-title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--red);
  margin: 0 0 .9rem;
  letter-spacing: .02em;
}
.goa-browse__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .35rem .8rem;
}
.goa-browse__list--countries li a {
  display: block;
  padding: .35rem 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.goa-browse__list--countries li a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}
.goa-browse__country {
  margin: 1rem 0 1.5rem;
}
.goa-browse__country-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .3rem;
  color: var(--ink);
}
.goa-browse__country-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint);
}
.goa-browse__country-title a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}
.goa-browse__list--cities {
  margin-top: .15rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .2rem .7rem;
}
.goa-browse__list--cities li a {
  display: block;
  padding: .15rem 0;
  font-size: .92rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.goa-browse__list--cities li a:hover {
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════════
   Variant A homepage hero + featured grid + Random button
   ════════════════════════════════════════════════════════════════ */

/* Hero block on /home */
.goa-hero {
  padding: 3rem 0 1rem;
  max-width: 760px;
}
.goa-hero__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.goa-hero__title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.goa-hero__accent {
  color: var(--red);
}
.goa-hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 1.1rem 0 0;
  max-width: 560px;
}
.goa-hero__ctas {
  display: flex;
  flex-direction: row;          /* side-by-side on desktop + tablet */
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
/* Phone-only: stack the 3 CTAs vertically so they're easy to tap. */
@media (max-width: 560px) {
  .goa-hero__ctas { flex-direction: column; align-items: stretch; }
  .goa-hero__ctas .goa-btn { text-align: center; }
}

/* Hero CTA buttons. Three variants with clear visual hierarchy:
   - primary:   coral filled, white text, dark border-tone on hover (Browse cities)
   - secondary: transparent, ink-outlined, ink text, fills warm-ink on hover (Browse countries)
   - playful:   transparent, teal-outlined, teal text, fills coral on hover (Surprise me)

   Selectors are doubled (.goa-btn.goa-btn) + the global .com-content-article__body
   prefix where needed so they beat the sitewide "all anchors inherit navy-mid"
   rule that was painting the primary's hover text teal-on-coral (unreadable). */
.goa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 140ms cubic-bezier(.2,.7,.2,1),
              color 140ms cubic-bezier(.2,.7,.2,1),
              border-color 140ms cubic-bezier(.2,.7,.2,1),
              transform 140ms cubic-bezier(.2,.7,.2,1);
}

/* Primary: solid coral, white text. Hover deepens to a darker red for visibly
   stronger feedback (the previous --red-dark step is only ~3% darker than coral
   and reads as no-op on warm-shifted screens like Redshift / Night Shift / f.lux). */
.com-content-article__body a.goa-btn.goa-btn--primary,
a.goa-btn.goa-btn--primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.com-content-article__body a.goa-btn.goa-btn--primary:hover,
.com-content-article__body a.goa-btn.goa-btn--primary:focus-visible,
a.goa-btn.goa-btn--primary:hover,
a.goa-btn.goa-btn--primary:focus-visible {
  background: #C8330F;            /* noticeably darker than --red, still warm */
  color: #fff;
  border-color: #C8330F;
  transform: translateY(-1px);
  outline: none;
}

/* Secondary (ghost): transparent, ink outline, ink text. Hover fills warm-ink. */
.com-content-article__body a.goa-btn.goa-btn--ghost,
a.goa-btn.goa-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.com-content-article__body a.goa-btn.goa-btn--ghost:hover,
.com-content-article__body a.goa-btn.goa-btn--ghost:focus-visible,
a.goa-btn.goa-btn--ghost:hover,
a.goa-btn.goa-btn--ghost:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  outline: none;
}

/* Playful (tertiary): ink text + coral outline, fills coral on hover.
   Used for the Hit-or-Miss / Random button - discovery action.
   Color choices are warm-screen safe: teal (the original choice) loses its
   blue component on Redshift / Night Shift / f.lux and washes out to brown-grey.
   Ink text on cream stays high-contrast in any color temperature; coral border
   stays vivid because warm-shift doesn't reduce red. */
.com-content-article__body a.goa-btn.goa-btn--play,
a.goa-btn.goa-btn--play {
  background: transparent;
  color: var(--ink);
  border-color: var(--red);
}
.com-content-article__body a.goa-btn.goa-btn--play:hover,
.com-content-article__body a.goa-btn.goa-btn--play:focus-visible,
a.goa-btn.goa-btn--play:hover,
a.goa-btn.goa-btn--play:focus-visible {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-1px);
  outline: none;
}

/* "Most popular destinations" section */
.goa-featured-section {
  margin: 2.4rem 0 3rem;
}
.goa-featured-section__title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.goa-featured-section__sub {
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin: 0 0 1.2rem;
}

/* Featured destination grid */
.goa-featured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}
.goa-featured__card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--r);
  padding: 1.05rem 1.1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.goa-featured__card:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(13,42,51,.08);
  transform: translateY(-1px);
}
.goa-featured__swatch {
  display: block;
  width: 32px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 0.8rem;
}
.goa-featured__heading {
  display: block;
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink-soft);
  z-index: 1;
}
.goa-featured__city {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.goa-featured__country {
  font-weight: 700;
  color: var(--ink-soft);
}
.goa-featured__cta {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-mid);  /* water teal */
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

/* Flag emoji watermark on each card. Bottom-right corner, large and
   transparent so it reads as subtle pattern not a foreground element. */
.goa-featured__card .goa-flag {
  position: absolute;
  right: 0.5rem;            /* inset from the card edge instead of bleeding off */
  bottom: 0.5rem;
  font-size: 3.2rem;        /* 20% smaller than the prior 4rem */
  line-height: 1;
  opacity: 0.22;
  pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', sans-serif;
  filter: saturate(1.05);
  z-index: 0;
}
.goa-featured__card { position: relative; overflow: hidden; }

/* Random button styled in the header nav (gets the goa-nav-random class
   from the Joomla menu item params) */
.goa-nav .nav-item a.goa-nav-random,
.goa-nav .nav-item a[class*="goa-nav-random"] {
  background: var(--red);
  color: var(--ink);
  border-radius: 4px;
  padding: 0.45rem 0.85rem !important;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.goa-nav .nav-item a.goa-nav-random:hover {
  background: var(--red-dark);
  color: #fff;
}

/* Inline country flag emoji used in /countries and /cities listings */
.goa-browse__flag {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', sans-serif;
  font-size: 1.05em;
  margin-right: 0.2em;
  vertical-align: -0.05em;
  filter: saturate(1.05);
}

/* ════════════════════════════════════════════════════════════════
   Where to Stay - Stay22 hotel cards
   ════════════════════════════════════════════════════════════════ */
.goa-hotels {
  margin: 2.5rem 0 2rem;
}
.goa-hotels__title {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.goa-hotels__sub {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
}
.goa-hotels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}
.goa-hotels__card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--r);
  padding: 0;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.goa-hotels__card:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(13,42,51,.08);
  transform: translateY(-1px);
}
.goa-hotels__label {
  position: absolute;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  margin: 0.6rem;
  z-index: 2;
}
.goa-hotels__card { position: relative; }
.goa-hotels__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--bg-warm);
}
.goa-hotels__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0.7rem 0.9rem 0;
  letter-spacing: -0.01em;
}
.goa-hotels__rating {
  font-size: 0.78rem;
  color: var(--ink-muted);
  padding: 0 0.9rem;
}
.goa-hotels__price {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-mid);
  padding: 0.2rem 0.9rem 0.9rem;
}
.goa-hotels__price small {
  font-weight: 500;
  color: var(--ink-faint);
  font-size: 0.78rem;
}



/* Hotel-price line on featured card. "🏨 from $204 / night".
   Populated only for cities in the warmed featured pool. */
.goa-featured__price {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--navy-faint);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  width: max-content;
  position: relative;
  z-index: 1;
}
.goa-featured__price strong {
  font-weight: 800;
  color: var(--navy-mid);
}
.goa-featured__price .goa-featured__icon {
  font-size: 0.95rem;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', sans-serif;
}

/* Hide the Joomla-rendered article-info block + page-header H1/H2 + the
   "Home" nav button's active background — but ONLY on the home article
   (itemid-101). On every other article we still want the heading + info. */
body.itemid-101 .page-header,
body.itemid-101 dl.article-info {
  display: none !important;
}
body.itemid-101 .goa-nav .nav-item.active > a,
body.itemid-101 .goa-nav .nav-item.current > a {
  background: transparent !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
}
body.itemid-101 .goa-nav .nav-item.active > a:hover,
body.itemid-101 .goa-nav .nav-item.current > a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

/* Joomla article-info: keep only Published line, strip everything else.
   Applies to all articles (city / country / about). */
dl.article-info dt.article-info-term,
dl.article-info dd.createdby,
dl.article-info dd.create,
dl.article-info dd.category-name,
dl.article-info dd.parent-category-name,
dl.article-info dd.modified,
dl.article-info dd.hits,
dl.article-info dd.tags {
  display: none !important;
}
dl.article-info dd.published .icon-calendar { display: none; }
dl.article-info dd.published time {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

/* Hide the entire info block on home + about (no published date needed there) */
body.itemid-101 dl.article-info,
body.itemid-219 dl.article-info,
body.itemid-220 dl.article-info {
  display: none !important;
}

/* "See photos of X on Google Images" link below intro paragraph */
.goa-photos-link {
  margin: -0.4rem 0 2rem !important;
  font-size: 0.88rem;
}
.goa-photos-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--navy-mid) !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.goa-photos-link a:hover {
  color: var(--red) !important;
}
.goa-photos-link a::before {
  content: "📷";
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   Featured destinations: Grid / List + sort controls
   ═══════════════════════════════════════════════════════════════ */
.goa-featured-wrap { margin: 0.5rem 0 1.5rem; }

.goa-featured-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  align-items: center;
}
.goa-featured-controls__group {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--r);
  overflow: hidden;
}
.goa-featured-controls__btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-lt);
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.goa-featured-controls__btn:last-child { border-right: 0; }
.goa-featured-controls__btn:hover { color: var(--ink); background: var(--bg-warm); }
.goa-featured-controls__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* List-view rendering — cards stack as a single column, each compact and
   horizontal. Swatch + city/country left, price + cta right. */
.goa-featured[data-view="list"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.goa-featured[data-view="list"] .goa-featured__card {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  min-height: 56px;
}
.goa-featured[data-view="list"] .goa-featured__swatch {
  width: 6px;
  height: 28px;
  margin: 0;
  border-radius: 3px;
}
.goa-featured[data-view="list"] .goa-flag {
  position: static;
  font-size: 1.4rem;
  opacity: 1;
  order: 99;     /* push flag to the far right */
  margin-left: 0.5rem;
}
.goa-featured[data-view="list"] .goa-featured__heading {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
}
.goa-featured[data-view="list"] .goa-featured__city {
  font-size: 1rem;
}
.goa-featured[data-view="list"] .goa-featured__price {
  margin: 0;
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
}
.goa-featured[data-view="list"] .goa-featured__cta {
  margin: 0;
  font-size: 0.78rem;
}

/* Cards without a price line should align nicely with priced ones in list view */
.goa-featured[data-view="list"] .goa-featured__card:not(:has(.goa-featured__price))::after {
  content: "";
}

/* Hide Joomla's auto-rendered article meta (Published / Created dates).
   These dates are auto-generated, not editorial; they add noise to every
   destination page. */
.com-content-article .article-info,
.com-content-article > dl.article-info {
  display: none;
}

/* =========================================================================
   Editorial cards for Top Attractions + Unique Experiences (dark-on-dark).
   Stripped-back take: no per-card icon, no per-card buttons. Eyebrow +
   title + desc, one section-level CTA pair below the grid. Lives on the
   existing dark page bg, no cream wrapper.
   ========================================================================= */

/* Override the template's global h2 (coral border-left + padding-left)
   so our section-title sits flush-left and reads as editorial display. */
.com-content-article__body .goa-section-title,
.com-content-article__body .goa-hotels__title {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink, #e8eef0);
  margin: 2rem 0 0.75rem;
  padding: 0;
  border-left: 0;
  border-bottom: 0;
}

/* Grid */
.com-content-article__body ul.goa-listings {
  list-style: none;
  margin: 0.75rem 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .com-content-article__body ul.goa-listings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .com-content-article__body ul.goa-listings { grid-template-columns: 1fr; } }

/* Each card */
.com-content-article__body ul.goa-listings li.goa-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 14px 4px 8px;
  margin: 0;
  border-top: 2px solid var(--accent, #ff6b4a);
  background: transparent;
  border-radius: 0;
  line-height: 1.4;
  transition: border-top-color 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-card:hover,
.goa-card:focus-within { border-top-color: var(--teal, #1d8a99); }

.com-content-article__body ul.goa-listings .goa-card__title {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0 0 6px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink, #e8eef0);
  border: 0;
}
/* Title wraps a Tripadvisor link (direct POI page if known, search URL fallback).
   Keep ink color so it still reads as a title; hover into coral as affordance. */
.com-content-article__body ul.goa-listings .goa-card__title a {
  color: inherit;
  text-decoration: none;
}
.com-content-article__body ul.goa-listings .goa-card__title a:hover,
.com-content-article__body ul.goa-listings .goa-card__title a:focus-visible {
  color: var(--accent, #ff6b4a);
}
.com-content-article__body ul.goa-listings .goa-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-muted, #6b7a80);
  text-wrap: pretty;
}
.com-content-article__body ul.goa-listings .goa-card__desc::first-letter {
  text-transform: uppercase;
}

/* Per-card external links row: small, muted, dot-separated. Sits below the
   description; underlined-on-hover so it scans as secondary text first.
   margin-top:auto pushes the links block to the bottom of the flex column so
   that when CSS grid stretches a row to match the tallest card (e.g. a 2-line
   title), the links across that row line up at the same baseline. */
.com-content-article__body ul.goa-listings .goa-card__links {
  margin: auto 0 0;
  padding-top: 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-muted, #6b7a80);
  letter-spacing: 0.01em;
}
.com-content-article__body ul.goa-listings .goa-card__links a {
  color: var(--ink-muted, #6b7a80);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.com-content-article__body ul.goa-listings .goa-card__links a:hover,
.com-content-article__body ul.goa-listings .goa-card__links a:focus-visible {
  color: var(--accent, #ff6b4a);
  border-bottom-color: var(--accent, #ff6b4a);
}
.com-content-article__body ul.goa-listings .goa-card__links a.goa-card__map {
  border-bottom: none;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
}
.com-content-article__body ul.goa-listings .goa-card__links a.goa-card__map:hover,
.com-content-article__body ul.goa-listings .goa-card__links a.goa-card__map:focus-visible {
  color: var(--accent, #ff6b4a);
  border-bottom: none;
}

/* 6th-tile "More" card: same chrome as a regular card. Just a title and
   one descriptive sentence with a hyperlink. Teal top-rule distinguishes
   it from the 5 attraction cards. Fills the orphan slot in the 3-col grid. */
.com-content-article__body ul.goa-listings li.goa-card--more {
  border-top-color: var(--teal, #1d8a99);
}
.com-content-article__body ul.goa-listings li.goa-card--more .goa-card__desc a {
  color: var(--teal, #1d8a99);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.com-content-article__body ul.goa-listings li.goa-card--more .goa-card__desc a:hover {
  color: var(--accent, #ff6b4a);
}

/* "Notable cities in {Country}" section cards (country-hub pages only).
   Same chrome as attraction cards but with a navy-mid top-rule so the row
   visually reads as a different category of content. Title is clickable;
   description is short flavor text. */
.com-content-article__body ul.goa-listings li.goa-card--city {
  border-top-color: var(--navy-mid, #0a4d68);
}
.com-content-article__body ul.goa-listings li.goa-card--city .goa-card__title a {
  color: inherit;
  text-decoration: none;
}
.com-content-article__body ul.goa-listings li.goa-card--city .goa-card__title a:hover,
.com-content-article__body ul.goa-listings li.goa-card--city .goa-card__title a:focus-visible {
  color: var(--accent, #ff6b4a);
}

/* Section-level CTA row below the grid. Three buttons, one row. All three
   share the SAME visual language (outlined ghost button on dark) so they
   read as a single set of equal options instead of "primary/secondary/
   tertiary" competing visually. Coral accent bar appears on hover only -
   no aggressive filled-button states. */
/* ───────────────────────────────────────────────────────────────────────
   GOA CTA buttons - Editorial Chip variant (Claude Design v2 · 2026-05-25)
   Cream-on-cream button, partner identity carried by a small coloured dot
   (left) and a tinted wordmark in the subtitle (right). No partner brand
   colour is ever used as a button background - this is what was breaking
   the previous design.
   ─────────────────────────────────────────────────────────────────────── */

/* Brand tokens (additive - older --ink, --accent, --coral kept intact) */
:root {
  --goa-cream:     #FFF8EC;
  --goa-paper:     #FFFBF3;
  --goa-coral:     #E8501F;
  --goa-coral-hover: #C8330F;
  --goa-coral-tint:  rgba(232, 80, 31, 0.08);
  --goa-teal:      #0F7E8A;
  --goa-teal-tint: rgba(15, 126, 138, 0.08);
  --goa-ink:       #1A1A1A;
  --goa-body:      #2F3A3D;
  --goa-muted:     #5A6B70;
  --goa-rule:      rgba(26, 26, 26, 0.10);
  --goa-rule-soft: rgba(26, 26, 26, 0.06);
  --goa-partner-tripadvisor:  #00AA6C;
  --goa-partner-getyourguide: #FF5533;
  --goa-partner-booking:      #003580;
  --goa-partner-kayak:        #FF690F;
  --goa-font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --goa-font-sans:    "Outfit", system-ui, -apple-system, sans-serif;
  --goa-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --goa-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --goa-dur-quick: 140ms;
  --goa-radius-md: 6px;
}

/* Grid - 3-up desktop, 2-up tablet, 1-up phone */
.goa-cta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.goa-cta-row + .goa-cta-row { margin-top: 10px; }
/* Adapt the grid to actual child count. Booking row may show 1, 2 or 3
   buttons depending on which booking_skip_* attribs the destination
   article has set. Without these rules the grid stretches a lone button
   to full width or leaves empty cells. */
.goa-cta-row:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.goa-cta-row:has(> :only-child) {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
/* Skip 2-up tier for 3-button rows (Booking Hotels/Tours/Flights) so the
   third button never strands in an empty cell. Drop straight from 3-up
   to 1-up at narrow widths. */
@media (max-width: 640px) {
  .goa-cta-row,
  .goa-cta-row:has(> :nth-child(2):last-child),
  .goa-cta-row:has(> :only-child) { grid-template-columns: 1fr; }
}

/* Button - editorial chip, cream-on-cream, partner colour as accent only */
.com-content-article__body .goa-cta-row .goa-cta-btn,
.com-content-article__body .goa-cta-row a.goa-cta-btn {
  --partner-color: var(--goa-coral);
  position: relative;
  display: block;
  min-height: 64px;
  padding: 14px 38px 14px 38px;
  box-sizing: border-box;
  /* Page-bg-aware paper. Claude Design speced #FFFBF3 against a #FFF8EC
     page (1.3pt lightness elevation). Our page is the warmer #F5ECD9, so
     #FBF6E9 reproduces the same subtle "paper above cream" relationship
     in this palette. Math: HSL(39°, 60%, 94%). */
  background: #FBF6E9;
  border: 1px solid var(--goa-rule);
  border-top: 2px solid var(--goa-rule);
  border-radius: var(--goa-radius-md);
  color: var(--goa-ink) !important;
  font-family: var(--goa-font-sans);
  text-decoration: none !important;
  text-align: left;
  transition: border-color var(--goa-dur-quick) var(--goa-ease),
              transform   var(--goa-dur-quick) var(--goa-ease);
}

/* Brand dot - left */
.com-content-article__body .goa-cta-row .goa-cta-btn__dot {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--partner-color);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--partner-color) 18%, transparent);
  transition: width var(--goa-dur-quick) var(--goa-ease),
              height var(--goa-dur-quick) var(--goa-ease),
              margin var(--goa-dur-quick) var(--goa-ease);
}

/* Arrow - right (data-URL SVG, no network request) */
.com-content-article__body .goa-cta-row .goa-cta-btn__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M3 9 H14 M10 5 L14 9 L10 13" fill="none" stroke="%231A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  opacity: 0.45;
  transition: opacity var(--goa-dur-quick) var(--goa-ease),
              transform var(--goa-dur-quick) var(--goa-ease);
}

/* Text block */
.com-content-article__body .goa-cta-row .goa-cta-btn__main {
  display: block;
  font-family: var(--goa-font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--goa-ink);
  /* Allow wrap for long destination names ("San Francisco", "Bosnia and
     Herzegovina"). CSS Grid auto-equalises row heights so all 3 cards in
     a row stay aligned. Better than truncation, no per-destination logic. */
  text-wrap: balance;
  overflow-wrap: break-word;
}
.com-content-article__body .goa-cta-row .goa-cta-btn__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--goa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--goa-muted);
}
.com-content-article__body .goa-cta-row .goa-cta-btn__sub strong {
  color: var(--partner-color);
  font-weight: 700;
}

/* Hover / focus / active */
.com-content-article__body .goa-cta-row .goa-cta-btn:hover,
.com-content-article__body .goa-cta-row .goa-cta-btn:focus-visible {
  border-color: var(--goa-ink);
  border-top-color: var(--partner-color);
  transform: translateY(-1px);
  outline: none;
}
.com-content-article__body .goa-cta-row .goa-cta-btn:hover .goa-cta-btn__dot,
.com-content-article__body .goa-cta-row .goa-cta-btn:focus-visible .goa-cta-btn__dot {
  width: 12px;
  height: 12px;
  margin-top: -6px;
}
.com-content-article__body .goa-cta-row .goa-cta-btn:hover .goa-cta-btn__arrow,
.com-content-article__body .goa-cta-row .goa-cta-btn:focus-visible .goa-cta-btn__arrow {
  opacity: 1;
  transform: translateX(2px);
}
.com-content-article__body .goa-cta-row .goa-cta-btn:active { transform: translateY(0); }

/* Partner variants - dot + subtitle accent colour.
   Both `.goa-cta-btn--X` and `a.goa-cta-btn--X` forms needed because the
   base rule above includes `a.goa-cta-btn` (tag+class = higher specificity).
   Without `a.` here the base coral default would beat the partner override. */
.com-content-article__body .goa-cta-row .goa-cta-btn--tripadvisor,
.com-content-article__body .goa-cta-row a.goa-cta-btn--tripadvisor  { --partner-color: var(--goa-partner-tripadvisor); }
.com-content-article__body .goa-cta-row .goa-cta-btn--getyourguide,
.com-content-article__body .goa-cta-row a.goa-cta-btn--getyourguide { --partner-color: var(--goa-partner-getyourguide); }
.com-content-article__body .goa-cta-row .goa-cta-btn--booking,
.com-content-article__body .goa-cta-row a.goa-cta-btn--booking      { --partner-color: var(--goa-partner-booking); }

/* =========================================================================
   Continent index page - "Open atlas" CSS multi-column flow.
   Each country is a no-break block in a 2-col flow (>=720px) / 1-col below.
   Claude Design v2 (2026-05-26). See:
     claudedesign/continent pages/design_handoff_goa/continent/
   ========================================================================= */

/* Hide Joomla's plain page-header H1 on pages where the plugin emits its
   own H1 - prevents duplicate H1s for SEO + cleaner visual layout.
   Itemid map:
     217=cities, 218=countries, 220=random (plugin owns hero),
     227..233=continents (plugin owns hero).
   NOT hidden on 219=about, 248=privacy, 249=contact - those articles
   don't emit their own H1, so we keep Joomla's so SEO sees one. */
body.com_content.itemid-217 .page-header,
body.com_content.itemid-218 .page-header,
body.com_content.itemid-220 .page-header,
body.com_content.itemid-227 .page-header,
body.com_content.itemid-228 .page-header,
body.com_content.itemid-229 .page-header,
body.com_content.itemid-230 .page-header,
body.com_content.itemid-231 .page-header,
body.com_content.itemid-232 .page-header,
body.com_content.itemid-233 .page-header {
  display: none;
}
.goa-continent-header {
  max-width: 820px;
  margin: 0 auto 28px;
  padding: 0;
}
.goa-continent-header h1,
.goa-continent-header .goa-continent-header__title {
  margin: 0 0 12px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw + 1rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--goa-ink, #1A1A1A);
  text-wrap: balance;
}
.goa-continent-header h1 em,
.goa-continent-header .goa-continent-header__accent {
  color: var(--goa-coral, #E8501F);
  font-style: italic;
}
/* The article-body intro <p> follows the header. Style it as the spec's
   subtitle paragraph. */
body.com_content.itemid-227 .com-content-article__body > p:first-child,
body.com_content.itemid-228 .com-content-article__body > p:first-child,
body.com_content.itemid-229 .com-content-article__body > p:first-child,
body.com_content.itemid-230 .com-content-article__body > p:first-child,
body.com_content.itemid-231 .com-content-article__body > p:first-child,
body.com_content.itemid-232 .com-content-article__body > p:first-child,
body.com_content.itemid-233 .com-content-article__body > p:first-child {
  margin: 0 0 22px;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.125rem);
  line-height: 1.5;
  color: var(--goa-body, #2F3A3D);
  max-width: 56ch;
  text-wrap: pretty;
}

.goa-continent-surprise { margin: 8px 0 22px; }

.goa-surprise-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 14px 22px 14px 50px;
  background-color: var(--goa-coral, #E8501F);
  border: 1px solid var(--goa-coral, #E8501F);
  border-radius: var(--goa-radius-md, 6px);
  color: var(--goa-cream, #FFF8EC);
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="%23FFF8EC" stroke-width="1.6"/><path d="M3.5 12 H20.5 M12 3 C15 6 15 18 12 21 M12 3 C9 6 9 18 12 21" fill="none" stroke="%23FFF8EC" stroke-width="1.3" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 22px 22px;
  transition: background-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-surprise-btn:hover,
.goa-surprise-btn:focus-visible {
  background-color: var(--goa-coral-hover, #C8330F);
  border-color: var(--goa-coral-hover, #C8330F);
  transform: translateY(-1px);
  outline: none;
}
.goa-surprise-btn:focus-visible { outline: 2px solid var(--goa-ink, #1A1A1A); outline-offset: 2px; }
.goa-surprise-btn:active { transform: translateY(0); }

/* Atlas grid - CSS grid 2-col so blocks in the same row align horizontally.
   (Multi-column flow packs tighter but doesn't row-align - rejected after
   user feedback 2026-05-27.) */
.goa-browse.goa-browse--continent {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 0;
  list-style: none;
  align-items: start;
}
@media (max-width: 720px) {
  .goa-browse.goa-browse--continent { grid-template-columns: 1fr; }
}

.goa-browse--continent .goa-browse__country {
  margin: 0 0 28px;
  padding: 0 0 24px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: 0;
  display: block;
}
/* Remove bottom-border on the last row's tiles (left + right cells of the
   final row). In CSS grid we can't reliably know "last row" without :nth-last
   tricks. Easiest: keep all borders, accept the final row has a rule too. */

/* Country header row. */
.goa-browse--continent .goa-browse__country-title,
.goa-browse--continent .goa-browse__country h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
}
/* Higher-specificity override: the global .com-content-article__body a
   rule sets color: var(--navy-mid) which would leak teal in here. We use
   the body-context chained selector to win. */
.com-content-article__body .goa-browse--continent .goa-browse__country-title a {
  color: var(--goa-ink, #1A1A1A);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.com-content-article__body .goa-browse--continent .goa-browse__country-title a:hover,
.com-content-article__body .goa-browse--continent .goa-browse__country-title a:focus-visible {
  color: var(--goa-coral, #E8501F);
  outline: none;
}

/* Flag - 1.4em with small baseline tweak. */
.goa-browse--continent .goa-browse__flag {
  display: inline-block;
  font-size: 1.4em;
  line-height: 1;
  position: relative;
  top: 2px;
  flex: 0 0 auto;
}

/* "N cities" caps tag right-aligned. */
.goa-browse--continent .goa-browse__count {
  flex: 0 0 auto;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goa-muted, #5A6B70);
  white-space: nowrap;
  align-self: center;
}

/* City list. */
.goa-browse--continent .goa-browse__list--cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.goa-browse--continent .goa-browse__list--cities li { margin: 0; padding: 0; }
.com-content-article__body .goa-browse--continent .goa-browse__list--cities a,
.com-content-article__body .goa-browse--continent .goa-browse__list--cities li a {
  display: inline-block;
  padding: 3px 0;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--goa-body, #2F3A3D);
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.com-content-article__body .goa-browse--continent .goa-browse__list--cities a:hover,
.com-content-article__body .goa-browse--continent .goa-browse__list--cities li a:hover,
.com-content-article__body .goa-browse--continent .goa-browse__list--cities a:focus-visible {
  color: var(--goa-coral, #E8501F);
  outline: none;
}

/* "All of {Country} ->" capper. */
.goa-browse--continent .goa-browse__more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--goa-water, var(--goa-teal, #0F7E8A));
  text-decoration: none;
  border-bottom: 0;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-browse--continent .goa-browse__more:hover,
.goa-browse--continent .goa-browse__more:focus-visible {
  color: var(--goa-coral, #E8501F);
  outline: none;
}

/* Single-city countries - bigger / bolder so they don't read as empty. */
.goa-browse--continent .goa-browse__country[data-cities="1"] .goa-browse__list--cities a {
  font-size: 15px;
  font-weight: 600;
  color: var(--goa-ink, #1A1A1A);
}

/* =========================================================================
   Footer continents row: 7 continent links above the existing footer-nav.
   Single horizontal flex row, wraps on small screens.
   ========================================================================= */
.goa-footer-continents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
}
.goa-footer-continents__label {
  display: inline-block;
  color: rgba(255, 248, 236, 0.45);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 0;
  margin-right: 28px;
}
@media (max-width: 900px) {
  .goa-footer-continents__label { display: none; }
}
.goa-footer-continents a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-footer-continents a:hover,
.goa-footer-continents a:focus-visible {
  color: var(--red, #ff5a3c);
  outline: none;
}

/* =========================================================================
   Browse search input - lives above the country/city grid on /countries
   and /cities. Vanilla JS-filtered, no framework.
   ========================================================================= */
.goa-browse-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1.5rem;
  padding: 0;
}
.goa-browse-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink, #e8eef0);
  background: var(--card, #141d22);
  border: 1px solid var(--border, #243137);
  border-radius: 8px;
  outline: none;
  transition: border-color 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.goa-browse-search__input::placeholder { color: var(--ink-muted, #6b7a80); }
.goa-browse-search__input:focus,
.goa-browse-search__input:focus-visible {
  border-color: var(--accent, #ff6b4a);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.12);
}
.goa-browse-search__count {
  font-size: 0.8rem;
  color: var(--ink-muted, #6b7a80);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
}

/* "Surprise me" button on continent pages. Sits between the H1 and the
   country grid. Outlined ghost-style to match the section-level CTA buttons. */
.goa-continent-surprise {
  margin: 8px 0 22px;
}
.goa-surprise-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: transparent;
  color: var(--ink, #e8eef0);
  border: 1px solid var(--accent, #D4B98C);
  border-radius: 6px;
  cursor: pointer;
  transition: color 140ms cubic-bezier(.2,.7,.2,1),
              background 140ms cubic-bezier(.2,.7,.2,1),
              border-color 140ms cubic-bezier(.2,.7,.2,1);
}
.goa-surprise-btn:hover,
.goa-surprise-btn:focus-visible {
  color: var(--red, #ff5a3c);
  background: rgba(255, 107, 74, 0.06);
  border-color: var(--red, #ff5a3c);
  outline: none;
}

/* ───────────────────────────────────────────────────────────────────────
   GOA · "Been there, done that" bottom CTAs (Claude Design v2 · 2026-05-25)
   Paper-on-cream cards with monochrome icons. Random + AI subdomain link
   share visual weight; AI button distinguished only by its icon.
   ─────────────────────────────────────────────────────────────────────── */
.goa-random-cta {
  display: block;
  max-width: 1100px;
  margin: 48px auto 24px;
  padding: 0;
}
.goa-random-cta__inner {
  position: relative;
  background: #FBF6E9; /* page-bg-aware paper, see CTA notes above */
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-top: 2px solid var(--goa-ink, #1A1A1A);
  border-radius: var(--goa-radius-lg, 8px);
  padding: 28px 28px 24px;
  box-sizing: border-box;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
}
.goa-random-cta__kicker {
  margin: 0 0 18px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
}
/* Two-up grid: country-carousel + worldwide-random. On country-hub articles
   that have no cities, only the random button renders and the grid still
   centers it. */
.goa-random-cta__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.goa-random-cta__buttons:has(> :only-child) {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
@media (max-width: 640px) {
  .goa-random-cta__buttons { grid-template-columns: 1fr; }
  .goa-random-cta__buttons:has(> :only-child) { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .goa-random-cta__btn {
    justify-content: center;
    text-align: center;
  }
}
.goa-random-cta__btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 22px 18px 60px;     /* 60px left = 20px gutter + 28px icon + 12px gap */
  background-color: var(--goa-cream, #FFF8EC);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 28px 28px;
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.18));
  border-radius: var(--goa-radius-md, 6px);
  color: var(--goa-ink, #1A1A1A);
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              transform var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
/* Die icon for the random button (default for buttons without a modifier) */
.goa-random-cta__btn:not(.goa-random-cta__btn--carousel) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3.5" fill="none" stroke="%231A1A1A" stroke-width="1.6"/><circle cx="8" cy="8" r="1.4" fill="%231A1A1A"/><circle cx="16" cy="8" r="1.4" fill="%231A1A1A"/><circle cx="12" cy="12" r="1.4" fill="%231A1A1A"/><circle cx="8" cy="16" r="1.4" fill="%231A1A1A"/><circle cx="16" cy="16" r="1.4" fill="%231A1A1A"/></svg>');
  border-top: 2px solid var(--goa-rule, rgba(26,26,26,0.18));
}
/* Carousel/cycle icon for the country-next button (circular arrow) */
.goa-random-cta__btn--carousel {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.34-5.66" fill="none" stroke="%231A1A1A" stroke-width="1.8" stroke-linecap="round"/><path d="M20 4v4h-4" fill="none" stroke="%231A1A1A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  border-top: 2px solid var(--goa-rule, rgba(26,26,26,0.18));
}
.goa-random-cta__btn:hover,
.goa-random-cta__btn:focus-visible {
  background-color: var(--goa-paper, #FFFBF3);
  border-color: var(--goa-ink, #1A1A1A);
  transform: translateY(-1px);
  outline: none;
}
.goa-random-cta__btn:active { transform: translateY(0); }
.goa-random-cta__btn:focus-visible { outline: 2px solid var(--goa-ink, #1A1A1A); outline-offset: 2px; }
/* Hover: both random + carousel buttons share the same ink top-rule on hover */
.goa-random-cta__btn:hover,
.goa-random-cta__btn:focus-visible {
  border-top-color: var(--goa-ink, #1A1A1A);
}
/* Override global anchor color rules for the carousel button (it's an <a>).
   Needs !important to beat .com-content-article__body a:hover { color: red }
   which would otherwise paint the link coral on hover. */
.com-content-article__body a.goa-random-cta__btn,
.com-content-article__body a.goa-random-cta__btn--carousel,
.com-content-article__body a.goa-random-cta__btn:hover,
.com-content-article__body a.goa-random-cta__btn--carousel:hover,
.com-content-article__body a.goa-random-cta__btn:focus-visible,
.com-content-article__body a.goa-random-cta__btn--carousel:focus-visible {
  color: var(--goa-ink, #1A1A1A) !important;
  text-decoration: none !important;
}

/* Float-right country flag at the top of every destination article.
   Sized to read clearly at a glance but not overwhelm the H1. Wraps the
   intro paragraph naturally because of float:right. Responsive: shrinks
   on tablet, shrinks further + tightens spacing on phone. Clickable
   (country flag -> country hub; country-hub flag -> continent page). */
.com-content-article__body a.goa-flag-float {
  float: right;
  display: inline-block;
  line-height: 1;
  font-size: 3rem;                /* desktop: ~48px */
  padding: 9px;
  margin: 0 0 0.5rem 1rem;        /* breathing room from H1/intro on left + below */
  text-decoration: none;
  border-radius: 8px;
  transition: transform 140ms cubic-bezier(.2,.7,.2,1),
              background-color 140ms cubic-bezier(.2,.7,.2,1);
  background: transparent;
}
.com-content-article__body a.goa-flag-float:hover,
.com-content-article__body a.goa-flag-float:focus-visible {
  background: rgba(255, 107, 74, 0.08);  /* faint coral tint */
  transform: scale(1.05);
  outline: none;
}
.com-content-article__body a.goa-flag-float span { display: inline-block; }

/* Tablet: ~40px */
@media (max-width: 900px) {
  .com-content-article__body a.goa-flag-float {
    font-size: 2.5rem;
    padding: 9px;
    margin: 0 0 0.4rem 0.75rem;
  }
}

/* Phone: ~32px + tighter spacing. Still float-right so the intro reads naturally. */
@media (max-width: 560px) {
  .com-content-article__body a.goa-flag-float {
    font-size: 2rem;
    padding: 6px;
    margin: 0 0 0.3rem 0.5rem;
    border-radius: 6px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   GOA · Plan This Trip panel (Claude Design v2 · 2026-05-25)
   Ink-filled active pill, single coral fill on the Kayak CTA. Editorial
   worksheet style; pulls from the v2 tokens established above.
   ─────────────────────────────────────────────────────────────────────── */
.goa-planner {
  /* Panel paper: ~1.4pt lighter than page bg (#F5ECD9) - matches Claude
     Design's "subtle worksheet, not a card" intent. Buttons sit on the
     slightly-brighter #FBF6E9 which gives them more pop than the panel. */
  background: #F7EFDD;
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: var(--goa-radius-lg, 8px);
  padding: 24px 24px 20px;
  margin: 40px auto 24px;
  max-width: 1100px;
  box-sizing: border-box;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
}
/* Selector scoped under .com-content-article__body to beat the inherited
   article-body h2 styles (top margin + coral left-rule). */
.com-content-article__body .goa-planner .goa-planner__title,
.goa-planner__title {
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  margin: 0 0 4px;
  padding-left: 0;
  border-left: 0;
  border-bottom: 0;
}
.goa-planner__sub {
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--goa-muted, #5A6B70);
  margin: 0 0 18px;
  max-width: 64ch;
}
.goa-planner__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.goa-planner__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--goa-rule-soft, rgba(26,26,26,0.06));
}
.goa-planner__row:first-child { border-top: none; padding-top: 4px; }
.goa-planner__label {
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  padding-top: 7px;     /* aligns label baseline with pill text */
}
.goa-planner__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.goa-planner__opt {
  appearance: none;
  -webkit-appearance: none;
  background: #FBF6E9; /* page-bg-aware paper */
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.18));
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--goa-body, #2F3A3D);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-planner__opt:hover {
  border-color: var(--goa-ink, #1A1A1A);
  color: var(--goa-ink, #1A1A1A);
}
.goa-planner__opt:focus-visible {
  outline: 2px solid var(--goa-ink, #1A1A1A);
  outline-offset: 2px;
}
.goa-planner__opt.active {
  background: var(--goa-ink, #1A1A1A);
  border-color: var(--goa-ink, #1A1A1A);
  color: var(--goa-paper, #FFFBF3);
}
.goa-planner__opt.active:hover {
  background: #000;
  border-color: #000;
}
.goa-planner__preview {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 14px 16px 14px 18px;
  /* Persistent editable affordance: faint ink-tint bg + coral pull-quote
     rule at rest. Tells the user it's an editor, not just a passive quote. */
  background: rgba(26,26,26,0.025);
  border: none;
  border-left: 2px solid var(--goa-coral, #E8501F);
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--goa-body, #2F3A3D);
  font-style: italic;
  resize: none;
  text-wrap: pretty;
  cursor: text;
  transition: background var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              border-left-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-planner__preview:hover {
  background: rgba(26,26,26,0.04);
}
.goa-planner__preview:focus {
  outline: none;
  border-left-color: var(--goa-ink, #1A1A1A);
  background: rgba(26,26,26,0.055);
}
/* Selection highlight: neutral ink wash, not coral. Coral-on-cream
   becomes unreadable salmon under Redshift / warm-screen filters; the
   ink wash maintains text contrast in both standard and warm modes. */
.goa-planner__preview::selection {
  background: rgba(26, 26, 26, 0.14);
  color: var(--goa-ink, #1A1A1A);
}
.goa-planner__preview::-moz-selection {
  background: rgba(26, 26, 26, 0.14);
  color: var(--goa-ink, #1A1A1A);
}
.goa-planner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--goa-rule-soft, rgba(26,26,26,0.06));
}
.goa-planner__copy {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--goa-ink, #1A1A1A);
  border-radius: var(--goa-radius-sm, 4px);
  padding: 9px 16px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  cursor: pointer;
  transition: background var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-planner__copy:hover {
  background: var(--goa-ink, #1A1A1A);
  color: var(--goa-paper, #FFFBF3);
}
.goa-planner__copy:focus-visible {
  outline: 2px solid var(--goa-ink, #1A1A1A);
  outline-offset: 2px;
}
/* Live JS toggles .copied (existing) - matches Claude Design's [data-copied]
   + .is-copied + we keep our legacy .copied so all three resolve identically. */
.goa-planner__copy[data-copied],
.goa-planner__copy.is-copied,
.goa-planner__copy.copied {
  background: var(--goa-ink, #1A1A1A);
  color: var(--goa-paper, #FFFBF3);
}
.goa-planner__kayak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--goa-coral, #E8501F);
  border: 1px solid var(--goa-coral, #E8501F);
  border-radius: var(--goa-radius-sm, 4px);
  padding: 9px 18px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--goa-cream, #FFF8EC) !important;
  text-decoration: none !important;
  transition: background var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              transform var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-planner__kayak:hover {
  background: var(--goa-coral-hover, #C8330F);
  border-color: var(--goa-coral-hover, #C8330F);
  transform: translateY(-1px);
}
.goa-planner__kayak:focus-visible {
  outline: 2px solid var(--goa-ink, #1A1A1A);
  outline-offset: 2px;
}
/* Override global article-body link color rule (a.goa-planner__kayak is an <a>) */
.com-content-article__body a.goa-planner__kayak,
.com-content-article__body a.goa-planner__kayak:hover {
  color: var(--goa-cream, #FFF8EC);
  text-decoration: none;
}

@media (max-width: 640px) {
  .goa-planner { padding: 20px 18px 16px; }
  .goa-planner__row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .goa-planner__label { padding-top: 0; }
  .goa-planner__actions { justify-content: stretch; }
  .goa-planner__copy,
  .goa-planner__kayak { flex: 1; justify-content: center; }
  /* Phone: drop the leading "Open " so the Kayak button reads "Kayak AI →"
     and stops looking cramped on narrow screens. */
  .goa-planner__kayak-open { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   GOA · Site footer (Claude Design v2 · 2026-05-25)
   Coral signature stripe, single-line continents with CSS-dot separators,
   2-col brand+legal grid that stacks at 720px. Cream-on-navy throughout.
   Appended last in source so it wins over earlier .goa-footer rules.
   ─────────────────────────────────────────────────────────────────────── */
.goa-footer {
  background: #0d2a33;
  border-top: 3px solid var(--goa-coral, #E8501F);
  color: var(--goa-cream, #FFF8EC);
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  padding: 40px 0 28px;
}
.goa-footer .goa-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.goa-footer-continents {
  display: block;
  text-align: center;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 2;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 248, 236, 0.12);
  flex-wrap: unset;
  align-items: unset;
  justify-content: unset;
  gap: unset;
}
.goa-footer-continents a {
  display: inline-block;
  color: var(--goa-cream, #FFF8EC);
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  transition: color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-footer-continents a + a {
  margin-left: 20px;
  padding-left: 16px;
  /* Dot opacity bumped 0.4 → 0.55 for visibility on the navy bg. */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><circle cx="3" cy="3" r="2.4" fill="%23FFF8EC" fill-opacity="0.55"/></svg>');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 6px 6px;
}
.goa-footer-continents a:hover,
.goa-footer-continents a:focus-visible {
  color: rgba(255, 248, 236, 0.65);
  outline: none;
}
.goa-footer-continents a:focus-visible {
  text-decoration: underline; text-underline-offset: 4px;
}
@media (max-width: 560px) {
  .goa-footer-continents { line-height: 1.7; font-size: 13px; text-align: left; }
  .goa-footer-continents a + a { margin-left: 12px; padding-left: 12px; }
}
.goa-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  gap: 48px;
  align-items: start;
  /* Override the legacy rule that adds padding-top + margin-top + a top
     border. The continents row above already has its own bottom border
     - the legacy combo was producing a double-line. Single source of
     truth here: no extra margin/padding/border on top. */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 720px) {
  .goa-footer__inner { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .goa-footer__legal { align-items: center; text-align: center; }
  .goa-footer__disclaimer { margin-left: auto; margin-right: auto; text-align: center; }
}
.goa-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
@media (max-width: 700px) {
  .goa-footer__brand {
    align-items: center;
    text-align: center;
  }
}
.goa-footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.goa-footer__logo img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 165px;
}
.goa-footer-nav {
  margin: 0;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 248, 236, 0.7);
}
.goa-footer-nav a {
  display: inline-block;
  color: var(--goa-cream, #FFF8EC);
  text-decoration: none;
  padding-left: 0;  /* override earlier rule */
  transition: color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-footer-nav a + a {
  margin-left: 16px;
  padding-left: 14px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="2.5" cy="2.5" r="2" fill="%23FFF8EC" fill-opacity="0.55"/></svg>');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 5px 5px;
}
.goa-footer-nav a:hover,
.goa-footer-nav a:focus-visible {
  color: rgba(255, 248, 236, 0.65);
  outline: none;
}
.goa-footer-nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.goa-footer__legal {
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  min-height: 80px;
}
.goa-footer__brand {
  padding-left: 32px;
  border-left: 1px solid rgba(255, 248, 236, 0.22);
  min-height: 80px;
}
@media (max-width: 720px) {
  .goa-footer__brand {
    padding-left: 0;
    border-left: 0;
    min-height: 0;
  }
}
.goa-footer__disclaimer {
  margin: 0;
  max-width: 56ch;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 248, 236, 0.62);
  text-wrap: pretty;
}
@media (min-width: 721px) {
  .goa-footer__disclaimer {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
.goa-footer__disclaimer a {
  color: var(--goa-cream, #FFF8EC);
  text-decoration: underline;
  text-decoration-color: rgba(255, 248, 236, 0.4);
  text-underline-offset: 2px;
  transition: color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              text-decoration-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-footer__disclaimer a:hover,
.goa-footer__disclaimer a:focus-visible {
  color: rgba(255, 248, 236, 0.7);
  text-decoration-color: var(--goa-cream, #FFF8EC);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE MODULES (Claude Design v2 · 2026-05-26)
   Hero + Featured + Section Header. Appended last so they override the
   pre-v2 .goa-hero, .goa-featured__card, etc. by source-order. Paper
   surfaces use #FBF6E9 directly to match the page-bg-aware relationship
   established on the affiliate row.
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────────────────── */
.goa-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: left;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
}
.goa-hero__title {
  margin: 0 0 18px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw + 1rem, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--goa-ink, #1A1A1A);
  text-wrap: balance;
  max-width: 18ch;
}
.goa-hero__accent {
  color: var(--goa-coral, #E8501F);
  font-style: italic;
}
.goa-hero__lede {
  margin: 0 0 36px;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--goa-body, #2F3A3D);
  max-width: 38ch;
  text-wrap: pretty;
}
.goa-hero__ctas {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 12px;
  justify-content: start;
}
@media (max-width: 720px) {
  .goa-hero__ctas { grid-template-columns: 1fr 1fr; }
  .goa-hero__ctas .goa-btn--play { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .goa-hero__ctas { grid-template-columns: 1fr; }
  .goa-hero__ctas .goa-btn--play { grid-column: 1; order: -1; }
}
.goa-hero .goa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--goa-radius-md, 6px);
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              transform var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-hero .goa-btn:focus-visible {
  outline: 2px solid var(--goa-ink, #1A1A1A);
  outline-offset: 2px;
}
/* Primary - Hit or Miss (coral fill, the only filled button).
   Selectors bumped with .com-content-article__body + body.goa-site to
   beat the legacy .com-content-article__body a.goa-btn.goa-btn--play rule
   that was wiping the background-image. */
body.goa-site .goa-hero .goa-btn--play,
.com-content-article__body .goa-hero a.goa-btn--play {
  background-color: var(--goa-coral, #E8501F) !important;
  border: 1px solid var(--goa-coral, #E8501F) !important;
  color: var(--goa-cream, #FFF8EC) !important;
  padding-left: 46px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3.5" fill="none" stroke="%23FFF8EC" stroke-width="1.6"/><circle cx="8" cy="8" r="1.4" fill="%23FFF8EC"/><circle cx="16" cy="8" r="1.4" fill="%23FFF8EC"/><circle cx="12" cy="12" r="1.4" fill="%23FFF8EC"/><circle cx="8" cy="16" r="1.4" fill="%23FFF8EC"/><circle cx="16" cy="16" r="1.4" fill="%23FFF8EC"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-size: 20px 20px !important;
}
body.goa-site .goa-hero .goa-btn--play:hover,
.com-content-article__body .goa-hero a.goa-btn--play:hover {
  background-color: var(--goa-coral-hover, #C8330F) !important;
  border-color: var(--goa-coral-hover, #C8330F) !important;
  transform: translateY(-1px);
}
body.goa-site .goa-hero .goa-btn--play:active { transform: translateY(0); }

/* Secondaries - twin ink-outlined buttons. Same specificity bump. */
body.goa-site .goa-hero .goa-btn--primary,
body.goa-site .goa-hero .goa-btn--ghost,
.com-content-article__body .goa-hero a.goa-btn--primary,
.com-content-article__body .goa-hero a.goa-btn--ghost {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--goa-ink, #1A1A1A) !important;
  color: var(--goa-ink, #1A1A1A) !important;
}
body.goa-site .goa-hero .goa-btn--primary:hover,
body.goa-site .goa-hero .goa-btn--ghost:hover,
.com-content-article__body .goa-hero a.goa-btn--primary:hover,
.com-content-article__body .goa-hero a.goa-btn--ghost:hover {
  background-color: var(--goa-ink, #1A1A1A) !important;
  color: var(--goa-paper, #FFFBF3) !important;
  border-color: var(--goa-ink, #1A1A1A) !important;
  transform: translateY(-1px);
}
body.goa-site .goa-hero .goa-btn--primary:active,
body.goa-site .goa-hero .goa-btn--ghost:active { transform: translateY(0); }

/* ────────────────────────────────────────────────────────────────────────
   SECTION HEADER (canonical pattern - DM Serif title + Inter caption)
   ──────────────────────────────────────────────────────────────────────── */
.goa-section-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.goa-section-header__eyebrow {
  margin: 0 0 6px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goa-muted, #5A6B70);
}
.goa-section-header__title {
  margin: 0 0 6px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4vw + 1rem, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  text-wrap: balance;
}
.goa-section-header__sub {
  margin: 0 0 24px;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--goa-muted, #5A6B70);
  text-wrap: pretty;
  max-width: 56ch;
}
.goa-section-header--inline { padding: 0; }
.goa-section-header--inline .goa-section-header__title {
  font-size: clamp(1.5rem, 0.8vw + 1rem, 1.75rem);
}
.goa-section-header--ruled .goa-section-header__title {
  padding-left: 14px;
  border-left: 2px solid var(--goa-coral, #E8501F);
}

/* ────────────────────────────────────────────────────────────────────────
   FEATURED DESTINATIONS GRID
   Note: card bg uses #FBF6E9 (page-bg-aware paper) directly, NOT the
   stock --goa-paper #FFFBF3 - matches the elevation relationship on the
   warm #F5ECD9 page bg, same fix applied to the affiliate row.
   Section title overrides applied with higher specificity to beat the
   article-body coral left-rule the old h2 inherits.
   ──────────────────────────────────────────────────────────────────────── */
.goa-featured-section {
  padding: 16px 0 32px;
}
.com-content-article__body .goa-featured-section__title,
.goa-featured-section__title {
  max-width: 1100px;
  margin: 0 auto 6px;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4vw + 1rem, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  border-left: 0;
  border-bottom: 0;
  text-wrap: balance;
}
.goa-featured-section__sub {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  color: var(--goa-muted, #5A6B70);
  line-height: 1.5;
}
.goa-featured-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.goa-featured {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) { .goa-featured { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .goa-featured { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px) { .goa-featured { grid-template-columns: 1fr; } }

.goa-featured__card {
  --price-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 18px;
  background-color: #FBF6E9; /* page-bg-aware paper */
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-top: 2px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: var(--goa-radius-md, 6px);
  color: var(--goa-ink, #1A1A1A);
  text-decoration: none;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  text-wrap: pretty;
  box-sizing: border-box;
  transition: border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              transform var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-featured__card:hover,
.goa-featured__card:focus-visible {
  border-color: var(--goa-ink, #1A1A1A);
  border-top-color: var(--goa-coral, #E8501F);
  transform: translateY(-1px);
  outline: none;
  box-shadow: none;
}
.goa-featured__card:focus-visible .goa-featured__cta { text-decoration: underline; }
.goa-featured__card:active { transform: translateY(0); }

/* Swatch hidden in v2 (kept in markup for future hover-price overlay) */
.goa-featured__card .goa-featured__swatch {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.goa-featured__card .goa-flag {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 4px;
  display: inline-block;
}
.goa-featured__heading {
  display: block;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--goa-muted, #5A6B70);
}
/* City breaks to its own line under the "Top attractions in" prefix.
   Country follows inline after the city. Long names no longer mid-word
   wrap with the prefix. */
.goa-featured__city {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 800;
  color: var(--goa-ink, #1A1A1A);
  letter-spacing: -0.015em;
}
.goa-featured__country {
  display: inline;
  font-size: 19px;
  font-weight: 600;
  color: var(--goa-body, #2F3A3D);
  letter-spacing: -0.005em;
}
/* Collapse the hero → featured section gap. Legacy stack of hero
   padding-bottom 56px + section margin-top 38.4px + section padding-top
   16px was ~110px of dead space between the hero CTAs and the section
   title. Bottom of section + footer untouched - that gap reads fine. */
.com-content-article__body .goa-featured-section,
.goa-featured-section {
  margin-top: 0;
  padding-top: 0;
}
.goa-hero {
  padding-bottom: 32px;
}
.goa-featured__cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--goa-rule-soft, rgba(26,26,26,0.06));
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--goa-teal, #0F7E8A);
  transition: color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-featured__card:hover .goa-featured__cta,
.goa-featured__card:focus-visible .goa-featured__cta {
  color: var(--goa-coral, #E8501F);
}

/* Override global article-body link colour for the card (it's an <a>) */
.com-content-article__body a.goa-featured__card,
.com-content-article__body a.goa-featured__card:hover {
  color: var(--goa-ink, #1A1A1A);
  text-decoration: none;
}

/* =========================================================================
   Directory pages: /cities (itemid-217) + /countries (itemid-218)
   Claude Design v2 (2026-05-27).
   ========================================================================= */

/* Hide Joomla's page-header on the two directory itemids; plugin emits
   its own .goa-browse-header with coral-italic accent. */
body.com_content.itemid-217 .page-header,
body.com_content.itemid-218 .page-header { display: none; }

/* ───────────────────────────────────────────────────────────────────────
   GOA · Directory pages (/cities + /countries)
   Drop-in. Depends on ../tokens.css and the existing continent.css
   patterns (we extend them, not rewrite).

   Recommended: search-first layout. Sticky-ish search bar with a live
   result count chip. /cities reuses the "open atlas" 2-column flow
   from continent pages (consistent visual language). /countries
   becomes a denser 3-column grid of country chips because 75 items
   need less per-country real-estate than 297 cities do.

   All selectors scoped to .goa-browse--cities or .goa-browse--countries
   so they don't bleed into the continent pages.

   Class names match what the existing PHP plugin emits. The live JS
   filter (toggles display:none on .goa-browse__country,
   .goa-browse__list--cities > li, .goa-browse__list--countries > li,
   .goa-browse__region) keeps working unchanged.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   Page hero (shared between /cities and /countries)
   ───────────────────────────────────────────────────────────────────── */
.goa-browse-header {
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 0;
}
.goa-browse-header h1,
.goa-browse-header__title {
  margin: 0 0 12px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw + 1rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--goa-ink, #1A1A1A);
  text-wrap: balance;
}
.goa-browse-header h1 em,
.goa-browse-header__accent {
  color: var(--goa-coral, #E8501F);
  font-style: italic;
}
.goa-browse-header > p {
  margin: 0 0 22px;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.125rem);
  line-height: 1.5;
  color: var(--goa-body, #2F3A3D);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────
   Search box - markup preserved as-is so the live JS filter keeps
   working. We just restyle.
   ───────────────────────────────────────────────────────────────────── */
/* Higher specificity to win over the older .goa-browse-search { display: flex }
   rule that was collapsing this container to inline width. */
.com-content-article__body .goa-browse-search,
.goa-browse-search {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 5;
  max-width: 820px;
  margin: 0 auto 28px;
  padding: 16px 0;
  background: linear-gradient(180deg, #F5ECD9 0%, #F5ECD9 85%, rgba(245,236,217,0) 100%);
  gap: 0;
  align-items: initial;
}
.goa-browse-search__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--goa-paper, #FFFBF3);
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: var(--goa-radius-md, 6px);
  padding: 4px 14px 4px 44px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5" fill="none" stroke="%231A1A1A" stroke-width="1.6"/><path d="M16 16 L20 20" stroke="%231A1A1A" stroke-width="1.6" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px 18px;
  transition: border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-browse-search__inner:focus-within {
  border-color: var(--goa-ink, #1A1A1A);
}
/* Win against older .goa-browse-search__input rule + Joomla's
   input[type=search] base styling. */
.com-content-article__body .goa-browse-search__inner .goa-browse-search__input,
.goa-browse-search__inner .goa-browse-search__input {
  flex: 1 1 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--goa-ink, #1A1A1A);
  letter-spacing: -0.005em;
  min-width: 0;
  border-radius: 0;
  width: 100%;
}
.goa-browse-search__input:focus { outline: none; }
.goa-browse-search__input::placeholder {
  color: var(--goa-muted, #5A6B70);
  font-weight: 400;
}
.goa-browse-search__count {
  flex: 0 0 auto;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goa-paper, #FFFBF3);
  background: var(--goa-ink, #1A1A1A);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Region (continent) grouping - the H2 stops being a giant coral
   shout and becomes a quiet rule: small caps eyebrow + hairline
   underline. Keeps the structure but gets out of the scan's way.
   ───────────────────────────────────────────────────────────────────── */
.goa-browse--cities .goa-browse__region,
.goa-browse--countries .goa-browse__region {
  max-width: 820px;
  margin: 48px auto 36px;
  padding: 0;
}
.goa-browse--cities .goa-browse__region:first-of-type,
.goa-browse--countries .goa-browse__region:first-of-type {
  margin-top: 0;
}
/* H2 region eyebrow per Claude Design. We must explicitly null out the
   global .com-content-article__body h2 rule that adds:
     border-left: 3px solid var(--accent) + padding-left: 0.75rem
   - otherwise we get the inherited coral bar against EUROPE. */
.com-content-article__body .goa-browse--cities .goa-browse__region > h2,
.com-content-article__body .goa-browse--countries .goa-browse__region > h2,
.goa-browse--cities .goa-browse__region > h2,
.goa-browse--countries .goa-browse__region > h2 {
  margin: 0 0 20px;
  padding: 0 0 8px;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goa-muted, #5A6B70);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
}

/* ─────────────────────────────────────────────────────────────────────
   /cities — open-atlas 2-column flow, same vocabulary as continent
   pages. Reuses .goa-browse__country structure from continent.css.
   ───────────────────────────────────────────────────────────────────── */
/* CSS grid 2-col so blocks in the same row align horizontally regardless
   of city count. Singapore (4 cities) and Korea (5 cities) on the same
   row both reserve the row's max height. Trade-off: short blocks leave
   blank space below; the user explicitly chose row-alignment over
   tight-packing here. */
.goa-browse--cities .goa-browse__region {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 0;
  align-items: stretch;
}
.goa-browse--cities .goa-browse__region > h2 {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .goa-browse--cities .goa-browse__region { grid-template-columns: 1fr; }
}

.goa-browse--cities .goa-browse__country {
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
}
/* Note: every country gets a border-bottom (page-line). Removing it on
   `:last-child` was firing per-region and orphaning Wales / Singapore /
   etc., not just the very last block site-wide. */
.goa-browse--cities .goa-browse__country h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--goa-font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
}
/* Higher-specificity override - .com-content-article__body a:not(...) leaks teal. */
.com-content-article__body .goa-browse--cities .goa-browse__country h3 a {
  color: var(--goa-ink, #1A1A1A);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.com-content-article__body .goa-browse--cities .goa-browse__country h3 a:hover,
.com-content-article__body .goa-browse--cities .goa-browse__country h3 a:focus-visible {
  color: var(--goa-coral, #E8501F);
  outline: none;
  border-bottom: 0;
}
.goa-browse--cities .goa-browse__flag {
  display: inline-block;
  font-size: 1.35em;
  line-height: 1;
  position: relative;
  top: 2px;
  flex: 0 0 auto;
}
.goa-browse--cities .goa-browse__count {
  flex: 0 0 auto;
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goa-muted, #5A6B70);
  white-space: nowrap;
}
.goa-browse--cities .goa-browse__list--cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.goa-browse--cities .goa-browse__list--cities a {
  display: inline-block;
  padding: 2px 0;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--goa-body, #2F3A3D);
  text-decoration: none;
  transition: color var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-browse--cities .goa-browse__list--cities a:hover,
.goa-browse--cities .goa-browse__list--cities a:focus-visible {
  color: var(--goa-coral, #E8501F);
  outline: none;
}

/* Hidden state — the live JS filter sets display:none on filtered-out
   .goa-browse__country / .goa-browse__list--cities > li / region. We
   add a "no results" empty state via a sibling element the plugin
   can emit (or JS can inject) — see the .goa-browse__empty rule below. */

/* ─────────────────────────────────────────────────────────────────────
   /countries — denser grid because 75 items, not 297. Each country
   becomes a small chip with flag + name + N cities count.
   ───────────────────────────────────────────────────────────────────── */
.goa-browse--countries .goa-browse__region { padding: 0; }

.goa-browse--countries .goa-browse__list--countries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .goa-browse--countries .goa-browse__list--countries { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .goa-browse--countries .goa-browse__list--countries { grid-template-columns: 1fr; }
}
.goa-browse--countries .goa-browse__list--countries li { margin: 0; }
.goa-browse--countries .goa-browse__list--countries a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--goa-paper, #FFFBF3);
  border: 1px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-left: 2px solid var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: var(--goa-radius-md, 6px);
  font-family: var(--goa-font-sans, "Outfit", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--goa-ink, #1A1A1A);
  text-decoration: none;
  transition: border-color var(--goa-dur-quick, 140ms) var(--goa-ease, ease),
              transform var(--goa-dur-quick, 140ms) var(--goa-ease, ease);
}
.goa-browse--countries .goa-browse__list--countries a:hover,
.goa-browse--countries .goa-browse__list--countries a:focus-visible {
  border-color: var(--goa-ink, #1A1A1A);
  border-left-color: var(--goa-coral, #E8501F);
  transform: translateY(-1px);
  outline: none;
}
.goa-browse--countries .goa-browse__list--countries .goa-browse__flag {
  font-size: 1.4em;
  line-height: 1;
  flex: 0 0 auto;
}
.goa-browse--countries .goa-browse__list--countries .goa-browse__country-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goa-browse--countries .goa-browse__list--countries .goa-browse__count {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--goa-muted, #5A6B70);
}

/* ─────────────────────────────────────────────────────────────────────
   Empty state - when JS filter eliminates everything
   ───────────────────────────────────────────────────────────────────── */
.goa-browse__empty {
  max-width: 820px;
  margin: 24px auto;
  padding: 32px 24px;
  text-align: center;
  font-family: var(--goa-font-body, "Inter", system-ui, sans-serif);
  font-size: 15px;
  color: var(--goa-muted, #5A6B70);
  border: 1px dashed var(--goa-rule, rgba(26,26,26,0.10));
  border-radius: var(--goa-radius-md, 6px);
}