/* ============================================================
   WHA Tour Poster — main stylesheet

   Ported from the original static design:
     base.css       -> the "Base" section
     components.css -> the "Components" section
     theme-c.css    -> the "Poster variant" section
   The .theme-c prefixes were dropped (the rules now apply unconditionally)
   and the rules of the unused variants were removed. After that come the
   WordPress menu integration, the content typography and the required
   WordPress core classes from Underscores (_s).

   The tokens live in assets/css/tokens.css and are loaded first.
   ============================================================ */

/* ============================================================
   Base: reset, typography, container, utilities
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--section-alt-bg); }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: var(--space-6); }
.section__head h2 { max-width: 22ch; }
.section__head .lead { margin-top: 8px; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* Horizontal rail on mobile, grid on desktop */
.rail { display: grid; gap: var(--space-5); }
@media (max-width: 767px) {
  .rail {
    grid-auto-flow: column; grid-auto-columns: min(78vw, 320px);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter));
    padding-bottom: 8px; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .rail { cursor: grab; }
  .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .rail.is-dragging * { pointer-events: none; }
}
/* Rail indicator: dots plus counter, on mobile only */
.rail-dots { display: none; }
[role="tabpanel"][hidden] + .rail-dots { display: none !important; }
@media (max-width: 767px) {
  .rail-dots { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
  .rail-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width var(--dur) var(--ease), background var(--dur); }
  .rail-dots i.is-on { width: 20px; background: var(--accent); }
  .rail-dots span { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }
}
@media (min-width: 768px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rail { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .rail--4 { grid-template-columns: repeat(4, 1fr); } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The inline icon sprite (assets/images/icons.svg) is not rendered. */
.wha-tour-poster-icon-sprite { display: none; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Reveal on load / on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}
/* ============================================================
   Components
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-btn); border: 1.5px solid transparent;
  font-weight: 600; font-size: var(--fs-body); line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); color: var(--ink); }
.btn--secondary { background: var(--accent-soft); color: var(--accent-deep); }
.btn--secondary:hover { background: var(--accent); color: #fff; }
.btn--outline { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost { color: var(--accent-deep); padding-inline: 8px; }
.btn--ghost:hover { color: var(--accent); }
.btn--ghost .icon { transition: transform var(--dur) var(--ease); }
.btn--ghost:hover .icon { transform: translateX(4px); }
.btn--on-dark { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.btn--on-dark:hover { background: rgba(255,255,255,.18); }
.btn--sm { min-height: 40px; padding-inline: 16px; font-size: var(--fs-small); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* ---------- Chips (filters, seasons) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-chip);
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-2);
  font-size: var(--fs-small); font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-active, .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) { .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .chips--scroll::-webkit-scrollbar { display: none; } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--radius-chip);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(20, 19, 28, .55); color: #fff; backdrop-filter: blur(6px);
}
.badge--cat-camps     { background: var(--pink); }
.badge--cat-europe    { background: var(--blue); }
.badge--cat-ukraine   { background: #1E8F5E; }
.badge--cat-adventure { background: #C8541D; }
.badge--hit { background: var(--sun); color: var(--ink); }
.badge--ok  { background: var(--ok-soft); color: #0B7A4C; text-transform: none; letter-spacing: 0; }
.badge--few { background: #FFF1DE; color: #9A5A00; text-transform: none; letter-spacing: 0; }
.badge .icon { width: 14px; height: 14px; }

/* Variant A: category badge as a sticker (slightly rotated) */

/* ---------- Route line (route caption) ---------- */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--fs-small); color: var(--ink-2); }
.route__stop { display: inline-flex; align-items: center; }
.route__stop + .route__stop::before {
  content: ""; display: inline-block; width: 18px; height: 1.5px; margin-inline: 6px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px);
}
.route__stop:first-child::before, .route__stop:last-child::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px;
}
.route__stop:last-child::after { margin: 0 0 0 6px; }
.route__stop:first-child:last-child::after { display: none; }

/* Large route ribbon (hero) */
.ribbon { --stop: rgba(255,255,255,.9); display: flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); letter-spacing: .04em; color: var(--stop); white-space: nowrap; overflow: hidden; }
.ribbon__stop { display: inline-flex; align-items: center; gap: 10px; }
.ribbon__stop::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.ribbon__gap { flex: 1 0 40px; height: 2px; margin: 0 12px; background: repeating-linear-gradient(90deg, var(--stop) 0 6px, transparent 6px 12px); background-size: 200% 100%; opacity: .7; }
.ribbon.is-in .ribbon__gap { animation: ribbon-flow 1.4s linear infinite; }
@keyframes ribbon-flow { to { background-position: -24px 0; } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header--overlay { position: absolute; inset: 0 0 auto 0; background: transparent; border-bottom-color: rgba(255,255,255,.14); color: #fff; }
.header__row { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.header__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.header__logo img { width: 72px; height: auto; }
.header--overlay .header__logo img { filter: brightness(0) invert(1); }
.header__brand { display: none; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .02em; line-height: 1.05; }
.header__brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 1024px) { .header__brand { display: block; max-width: 128px; } }
.nav { display: none; gap: 4px; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a { padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 500; font-size: var(--fs-small); opacity: .92; transition: background var(--dur), opacity var(--dur); }
.nav a:hover { opacity: 1; background: rgba(127,127,127,.12); }
.nav a.is-cat { position: relative; }
.nav a.is-cat::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav a.is-cat:hover::after { transform: scaleX(1); }
.header__phone { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
@media (min-width: 768px) { .header__phone { display: inline-flex; } }
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Mobile menu */
.mnav { position: fixed; inset: 0; z-index: 60; background: var(--night); color: #fff; padding: 24px var(--gutter); display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform .35s var(--ease); visibility: hidden; }
.mnav.is-open { transform: none; visibility: visible; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__top img { width: 56px; filter: brightness(0) invert(1); }
.mnav__list a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; }
.mnav__list a.is-cat { color: #fff; }
.mnav__list a:not(.is-cat) { font-family: var(--font-body); font-size: 1rem; color: rgba(255,255,255,.75); }
.mnav__bottom { margin-top: auto; display: grid; gap: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(92svh, 860px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,19,28,.45) 0%, rgba(20,19,28,.1) 30%, rgba(20,19,28,.55) 60%, rgba(20,19,28,.85) 100%); }

.hero__body { min-width: 0; padding-top: 140px; padding-bottom: clamp(32px, 5vw, 72px); display: grid; gap: 28px; }
.hero h1 { max-width: 15ch; text-shadow: 0 2px 24px rgba(0,0,0,.25); overflow-wrap: anywhere; }

.hero .lead { color: rgba(255,255,255,.88); }
.hero__ribbon { max-width: 720px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Search bar */
/* `:not(body)`: WordPress adds a `search` class to <body> on search results,
   which must not pick up the search bar component. */
.search:not(body) { display: grid; gap: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-3); }
@media (min-width: 768px) { .search:not(body) { grid-template-columns: 1fr 1fr 1fr auto; align-items: stretch; } }
/* The filter bar has two selects (season, country): side by side from a large
   phone up, with the button underneath, then in one row with the button. */
@media (min-width: 560px) { .search--pair:not(body) { grid-template-columns: 1fr 1fr; } .search--pair:not(body) .btn { grid-column: 1 / -1; } }
@media (min-width: 768px) { .search--pair:not(body) { grid-template-columns: 1fr 1fr auto; } .search--pair:not(body) .btn { grid-column: auto; } }
.search__field { display: grid; gap: 2px; padding: 10px 16px; border-radius: calc(var(--radius-md) - 4px); transition: background var(--dur); }
.search__field:hover { background: var(--paper-2); }
.search__field label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.search__field select { appearance: none; border: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234A4858' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4 6 4 4 4-4'/></svg>") no-repeat right center; padding: 0 24px 0 0; font-weight: 500; font-size: 1rem; width: 100%; }
@media (min-width: 768px) { .search__field + .search__field { border-left: 1px solid var(--line); border-radius: 0; } }
.search:not(body) .btn { min-height: 56px; }
@media (min-width: 768px) { .search:not(body) .btn { height: 100%; } }

/* ---------- Category tiles ---------- */
.cats { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cats { grid-template-columns: repeat(4, 1fr); } }
.cat { position: relative; display: grid; align-items: end; aspect-ratio: 16 / 10; border-radius: var(--radius-card); overflow: hidden; color: #fff; isolation: isolate; }
@media (min-width: 600px) { .cat { aspect-ratio: 4 / 5; } }
@media (min-width: 1024px) { .cat { aspect-ratio: 3 / 4; } }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cat:hover img { transform: scale(1.05); }
.cat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,19,28,0) 40%, rgba(20,19,28,.78) 100%); }
.cat__body { padding: 20px; display: grid; gap: 4px; }
.cat__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.1; }
.cat__desc { font-size: var(--fs-small); opacity: .85; }
.cat__count { position: absolute; top: 16px; left: 16px; }
.cat__arrow { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); transition: background var(--dur), transform var(--dur) var(--ease); }
.cat:hover .cat__arrow { background: var(--accent); transform: rotate(45deg); }

/* ---------- Program card ---------- */
.card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.card__body { display: grid; gap: 10px; padding: 16px 16px 8px; }
.card__title { font-size: 1.0625rem; line-height: 1.3; }

.card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--ink-2); }
.card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.card__meta .icon { color: var(--ink-3); }
.card__dates { display: flex; flex-wrap: wrap; gap: 6px; }
/* `:not(body)`: WordPress adds a `date` class to <body> on date archives. */
.date:not(body) { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-chip); background: var(--paper-2); font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.date--ok { background: var(--ok-soft); color: #0B7A4C; }
.date--few { background: #FFF1DE; color: #9A5A00; }
.date--req { background: transparent; border: 1px dashed var(--line); font-weight: 500; }
.card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 8px 16px 16px; }
.price { display: grid; line-height: 1.1; }
.price small { font-size: var(--fs-caption); color: var(--ink-3); }
.price strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; letter-spacing: -0.01em; }

.price--req strong { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink-2); }
.card__actions { display: flex; gap: 6px; margin-left: auto; }

/* ---------- Tabs (seasons) ---------- */
.tabs { display: flex; gap: 8px; }
[role="tabpanel"][hidden] { display: none; }

/* ---------- Feature tiles ---------- */
.feature { display: grid; gap: 14px; padding: 24px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--line); }

.feature__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.feature__icon .icon { width: 24px; height: 24px; }
.feature h3 { font-size: 1.125rem; }
.feature p { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- About ---------- */
.about { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .about { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.about__media { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__body { display: grid; gap: 20px; }
.about__body p { color: var(--ink-2); max-width: 55ch; }
.stats { display: flex; flex-wrap: wrap; gap: 24px 40px; padding-top: 8px; }
.stat strong { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; line-height: 1; color: var(--accent); }
.stat span { font-size: var(--fs-small); color: var(--ink-3); }

/* Sticker (variant A) */
.sticker { position: absolute; top: 20px; right: 20px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--sun); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .8rem; line-height: 1.15; transform: rotate(8deg); box-shadow: var(--shadow-2); padding: 12px; }
.sticker strong { display: block; font-size: 1.75rem; }

/* ---------- Lead form ---------- */
.lead-block { display: grid; gap: 32px; border-radius: var(--radius-card); overflow: hidden; background: var(--night); color: #fff; }
@media (min-width: 1024px) { .lead-block { grid-template-columns: 1fr 1fr; } }

.lead-block__text { padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; align-content: center; }
.lead-block__text .lead { color: rgba(255,255,255,.8); }
.lead-block__contacts { display: grid; gap: 10px; padding-top: 8px; font-size: var(--fs-small); }
.lead-block__contacts a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.form { padding: clamp(28px, 4vw, 56px); display: grid; gap: 14px; background: rgba(255,255,255,.06); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.field input, .field textarea, .field select { min-height: 52px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; width: 100%; transition: border-color var(--dur); }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
/* `outline: none` of the reference stylesheet was dropped here: the focus ring is
   required for keyboard users. The ring itself is set in "Review fixes" below. */
.field input:focus, .field textarea:focus { border-color: #fff; }
.form__note { font-size: var(--fs-caption); opacity: .7; }
.form .btn--primary { margin-top: 4px; }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: rgba(255,255,255,.8); padding-block: 56px 32px; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__logo img { width: 64px; filter: brightness(0) invert(1); }
.footer h4 { margin: 0 0 12px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer li + li { margin-top: 8px; }
.footer a:hover { color: #fff; }
.footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--fs-caption); color: rgba(255,255,255,.5); }
.social { display: flex; gap: 8px; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.social a:hover { background: var(--accent); color: #fff; }

/* In the 4-column rail keep a single button: the card and the title already link to the programme */
@media (min-width: 1280px) { .rail--4 .card__actions .btn--outline { display: none; } }
/* ============================================================
   Poster variant - its own composition: a hero of 4 category panels,
   a dark blue base and poster cards.
   ============================================================ */
h1, h2, .display { text-transform: var(--display-transform); line-height: 1; }
h3 { text-transform: none; }
.eyebrow { letter-spacing: .18em; }
.btn { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); font-weight: 700; }
.chip { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-caption); font-weight: 700; }

/* Header - white, with a two-colour logo stripe at the bottom */
.header { position: sticky; background: var(--paper); color: var(--ink); border-bottom: 0; }
.header::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--pink) 0 50%, var(--blue) 50% 100%); }
.header__phone { color: var(--pink); }
.nav a.is-cat::after { background: var(--pink); }
.header__cta { background: var(--pink); color: #fff; border-color: var(--pink); backdrop-filter: none; }
.header__cta:hover { background: var(--cta-hover); color: var(--ink); border-color: var(--cta-hover); }

/* Hero: title on white plus 4 category panels over photos */
.hero-c { background: var(--paper); color: var(--ink); }
.hero-c__head .eyebrow { color: var(--pink); }
.hero-c__head { display: grid; gap: 16px; padding-block: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 32px); }
@media (min-width: 1024px) { .hero-c__head { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.hero-c__head h1 { max-width: 14ch; }
.hero-c__head h1 em { font-style: normal; color: var(--pink); }
.hero-c__head .lead { color: var(--ink-2); }
.panels { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0 4px 4px; }
@media (min-width: 600px) { .panels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .panels { display: flex; height: min(68vh, 640px); } }
.panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 210px; padding: 20px; color: #fff; isolation: isolate; overflow: hidden; border-radius: var(--radius-card); }
@media (min-width: 1024px) { .panel { flex: 1 1 0; padding: 32px 28px; transition: flex .6s var(--ease); } .panel:hover { flex: 1.8 1 0; } }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease), filter .6s; filter: saturate(.85); }
.panel:hover img { transform: scale(1.04); filter: saturate(1); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,30,61,.1) 0%, rgba(10,30,61,.15) 45%, rgba(10,30,61,.92) 100%); }
.panel__count { align-self: flex-start; margin-bottom: auto; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 3px; }
.panel__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.panel__desc { margin-top: 8px; font-size: var(--fs-small); color: rgba(255,255,255,.8); max-width: 28ch; }
.panel__go { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.panel__go .icon { transition: transform var(--dur) var(--ease); }
.panel:hover .panel__go .icon { transform: translateX(4px); }

/* Search - a light strip under the hero */
.searchbar { background: var(--paper-2); border-block: 1px solid var(--line); }
.searchbar .search { box-shadow: none; padding: 12px 0; border-radius: 0; }
.searchbar .search__field { border-radius: 0; }
.searchbar .search__field + .search__field { border-left: 1px solid var(--line); }
.searchbar .search__field:hover { background: transparent; }

/* Poster card */
.poster { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden; color: #fff; isolation: isolate; background: var(--navy); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.poster:hover img { transform: scale(1.05); }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,30,61,0) 30%, rgba(10,30,61,.55) 60%, rgba(10,30,61,.96) 100%); }
.poster__link { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; }
.poster__top { display: flex; justify-content: space-between; gap: 8px; }
.poster__body { margin-top: auto; display: grid; gap: 8px; }
.poster .route { color: rgba(255,255,255,.75); font-size: var(--fs-caption); }
.poster .route__stop:first-child::before, .poster .route__stop:last-child::after { background: var(--pink); }
.poster .route__stop + .route__stop::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 3px, transparent 3px 6px); }
.poster__title { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.1; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.poster__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-caption); color: rgba(255,255,255,.8); }
.poster__meta span { display: inline-flex; align-items: center; gap: 5px; }
.poster__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); }
.poster__price { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; }
.poster__price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.poster__date { font-size: var(--fs-caption); font-weight: 700; padding: 5px 8px; border-radius: 3px; background: rgba(255,255,255,.14); }
.poster__date--ok { background: var(--ok); }
.poster__date--few { background: #D97706; }
.poster__cta { position: absolute; right: 14px; bottom: 14px; opacity: 0; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur) var(--ease); }
@media (hover: hover) { .poster:hover .poster__cta { opacity: 1; transform: none; } }

/* Dark seasons section */
.section--dark { background: var(--navy); color: #fff; }
.section--dark .eyebrow { color: var(--pink); }
.section--dark .chip { border-color: rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.8); }
.section--dark .chip.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }
.section--dark .rail-dots i { background: rgba(255,255,255,.2); }
.section--dark .rail-dots i.is-on { background: var(--pink); }
.section--dark .rail-dots span { color: rgba(255,255,255,.5); }

/* Benefits - a strip with large figures */
.facts { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--paper); padding: 28px 24px; display: grid; gap: 10px; align-content: start; }
.fact strong { font-family: var(--font-display); font-weight: 600; font-size: 3rem; line-height: .95; color: var(--navy); letter-spacing: .01em; }
.fact strong em { font-style: normal; color: var(--pink); }
.fact h3 { font-size: 1.0625rem; font-weight: 700; }
.fact p { font-size: var(--fs-small); color: var(--ink-2); }

/* About us, lead form, footer */
.about__media { border-radius: var(--radius-card); }
.stat strong { color: var(--navy); }
.lead-block { background: var(--navy); border-radius: var(--radius-card); }
.footer { background: var(--navy); }
.social a:hover { background: var(--pink); }

/* ============================================================
   WordPress menu integration
   wp_nav_menu() wraps the links in <ul>/<li>, the reference markup did not,
   so the flex row moves from .nav to .nav__list. The .nav a rules above are
   untouched.
   ============================================================ */
.nav .nav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 4px; }
.nav .nav__list li { margin: 0; padding: 0; list-style: none; }
.nav .current-menu-item > a, .nav .current-menu-ancestor > a, .nav [aria-current="page"] { opacity: 1; }
.nav .current-menu-item > a.is-cat::after, .nav .current-menu-ancestor > a.is-cat::after { transform: scaleX(1); }
.mnav__list li { margin: 0; padding: 0; list-style: none; }

/* Logo and brand: the_custom_logo() prints its own link, so when there is
   no logo the text brand stays visible at every size. */
.icon--lg { width: 26px; height: 26px; }
.header__logo .custom-logo-link { display: flex; align-items: center; }
.header__brand .site-title { display: block; }
body:not(.wp-custom-logo) .header__brand { display: block; }
.mnav__brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; text-transform: uppercase; letter-spacing: var(--display-tracking); }

/* Footer */
.footer__brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; text-transform: uppercase; letter-spacing: var(--display-tracking); color: #fff; }
.footer__tagline { margin-top: 16px; max-width: 36ch; }
.footer .social { margin-top: 16px; }
.footer .footer__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer .footer__legal li { margin: 0; }
.footer__credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Content - posts, pages, comments, navigation
   (not in the reference: editor typography for the classic templates)
   ============================================================ */

/* Page / archive header
--------------------------------------------- */
.page-header { display: grid; gap: 10px; margin-bottom: var(--space-6); }
.page-header .page-title { font-size: var(--fs-h2); }
.page-header .archive-description { color: var(--ink-2); max-width: 60ch; }
.page-header .archive-description p { margin: 0 0 1em; }
.page-header .archive-description > *:last-child { margin-bottom: 0; }

/* Entry
--------------------------------------------- */
.site-main > .container > .entry + .entry,
.site-main > .container > article + article { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.entry-header { display: grid; gap: 10px; margin-bottom: var(--space-5); }
.entry-title { font-size: var(--fs-h2); }
.entry-title a:hover { color: var(--accent); }
.entry-meta,
.entry-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--fs-small); color: var(--ink-3); }
.entry-meta a:hover,
.entry-footer a:hover { color: var(--accent); }
.entry-footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.post-thumbnail { display: block; margin-bottom: var(--space-5); border-radius: var(--radius-card); overflow: hidden; }
.post-thumbnail img { width: 100%; height: auto; }
.updated:not(.published) { display: none; }

/* Entry content typography
--------------------------------------------- */
.entry-content,
.entry-summary,
.page-content { max-width: 100%; }
.entry-content > *,
.entry-summary > *,
.page-content > * { max-width: 720px; margin-inline: auto; }
.entry-content > * + *,
.entry-summary > * + *,
.page-content > * + * { margin-top: 1.25em; }

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	line-height: var(--lh-tight);
	text-wrap: balance;
	margin-top: 1.6em;
}
.entry-content h1 { font-size: var(--fs-h1); }
.entry-content h2 { font-size: var(--fs-h2); }
.entry-content h3 { font-size: var(--fs-h3); text-transform: none; }
.entry-content h4 { font-size: 1.125rem; text-transform: none; }
.entry-content h5 { font-size: 1rem; text-transform: none; }
.entry-content h6 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.entry-content p { line-height: var(--lh-body); text-wrap: pretty; }
.entry-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--accent); }
.entry-content strong, .entry-content b { font-weight: 700; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .4em; }
.entry-content li > ul, .entry-content li > ol { margin-top: .4em; }
.entry-content blockquote {
	margin-inline: auto;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--accent);
	font-size: var(--fs-lead);
	color: var(--ink-2);
}
.entry-content blockquote cite { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); font-style: normal; }
.entry-content code, .entry-content kbd, .entry-content samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--paper-2); padding: .15em .35em; border-radius: var(--radius-sm); }
.entry-content pre { overflow-x: auto; padding: 16px; background: var(--paper-2); border-radius: var(--radius-md); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.5; }
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); }
.entry-content figure { margin: 0; }
.entry-content figure img { border-radius: var(--radius-card); }
.entry-content figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.entry-content img { height: auto; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.entry-content table th, .entry-content table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.entry-content table th { background: var(--paper-2); font-weight: 700; }
.entry-content table caption { margin-bottom: 8px; font-size: var(--fs-small); color: var(--ink-3); }

/* Wide and full alignments inside .container */
.entry-content > .alignwide { max-width: var(--container); }
.entry-content > .alignfull { max-width: none; width: auto; margin-inline: calc(50% - 50vw); }
.entry-content > .alignfull > img,
.entry-content > .alignfull > figure > img { width: 100%; }
.entry-content > .alignfull img { border-radius: 0; }

.page-links { clear: both; margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-small); }
.page-links a, .page-links > span:not(.page-links-title) {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 36px; padding: 0 10px;
	border: 1.5px solid var(--line); border-radius: var(--radius-chip);
}
.page-links a:hover { border-color: var(--ink-3); }

/* Post / posts navigation, pagination
--------------------------------------------- */
.post-navigation,
.posts-navigation,
.pagination { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.post-navigation .nav-links,
.posts-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.post-navigation .nav-next,
.posts-navigation .nav-next { margin-left: auto; text-align: right; }
.nav-subtitle { display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.nav-title { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.2; }
.nav-links a:hover .nav-title { color: var(--accent); }

.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 36px; padding: 0 14px; border-radius: var(--radius-chip);
	border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-2);
	font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	transition: all var(--dur) var(--ease);
}
.page-numbers:hover { border-color: var(--ink-3); color: var(--ink); }
.page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-numbers.dots { border-color: transparent; }

/* Comments
--------------------------------------------- */
.comments-area { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.comments-title,
.comment-reply-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--display-tracking); margin-bottom: var(--space-5); }
.comment-reply-title small { display: inline-block; margin-left: 12px; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; text-transform: none; letter-spacing: 0; }
.comment-list { display: grid; gap: var(--space-5); }
.comment-list .children { display: grid; gap: var(--space-5); margin-top: var(--space-5); padding-left: var(--space-5); border-left: 2px solid var(--line); }
.comment-body { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-small); }
.comment-author { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.comment-author img.avatar { border-radius: 50%; }
.comment-metadata { color: var(--ink-3); font-size: var(--fs-caption); }
.comment-metadata a:hover { color: var(--accent); }
.comment-awaiting-moderation { font-size: var(--fs-small); color: var(--ink-3); }
.comment-content a { word-wrap: break-word; }
.comment-content > * + * { margin-top: 1em; }
.comment-content ul, .comment-content ol { padding-left: 1.4em; }
.comment-content ul { list-style: disc; }
.comment-content ol { list-style: decimal; }
.comment-reply-link {
	display: inline-flex; align-items: center;
	min-height: 32px; padding: 0 12px; border-radius: var(--radius-chip);
	border: 1.5px solid var(--line); color: var(--ink-2);
	font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	transition: all var(--dur) var(--ease);
}
.comment-reply-link:hover { border-color: var(--ink); color: var(--ink); }
.comment-navigation { margin-bottom: var(--space-5); }
.no-comments { color: var(--ink-3); font-size: var(--fs-small); }

/* Comment form - light variant of .field with .btn--primary */
.comment-form { display: grid; gap: 14px; margin-top: var(--space-5); }
.comment-form p { display: grid; gap: 6px; margin: 0; }
.comment-form label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; min-height: 52px; padding: 12px 16px;
	border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	background: var(--paper); color: var(--ink);
	transition: border-color var(--dur);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--ink); }
.comment-form .comment-form-cookies-consent { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.comment-form .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.comment-form .comment-notes,
.comment-form .form-submit { margin: 0; }
.comment-form .comment-notes { font-size: var(--fs-small); color: var(--ink-3); }
.comment-form input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 22px; width: fit-content;
	border-radius: var(--radius-btn); border: 1.5px solid transparent;
	background: var(--cta); color: #fff;
	font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.comment-form input[type="submit"]:hover { background: var(--cta-hover); color: var(--ink); }

/* Widgets / sidebar
--------------------------------------------- */
.widget { margin: 0 0 var(--space-6); }
.widget:last-child { margin-bottom: 0; }
.widget select,
.widget input[type="search"] { max-width: 100%; }
.widget-area .widget-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--display-tracking); margin: 0 0 12px; }
.widget-area ul li + li { margin-top: 8px; }
.widget-area ul ul { margin-top: 8px; padding-left: 16px; }
.widget-area a:hover { color: var(--accent); }
.widget-area { padding-block: var(--section-y); }
.widget-area > .container { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .widget-area > .container { grid-template-columns: repeat(3, 1fr); } }

/* Search form (searchform.php) */
.search-form .search { box-shadow: var(--shadow-2); }
@media (min-width: 768px) { .search-form .search { grid-template-columns: 1fr auto; } }
.search__field input[type="search"] { appearance: none; border: 0; background: transparent; padding: 0; font-weight: 500; font-size: 1rem; width: 100%; }
/* `outline: none` of the reference stylesheet was dropped here as well; the field
   keeps its focus ring, see "Review fixes" below. */
.search__field:focus-within { background: var(--paper-2); }

/* ============================================================
   WordPress core required classes
   Ported verbatim from the Underscores (_s) style.css,
   (C) 2012-2020 Automattic, Inc., GNU GPL v2 or later.
   ============================================================ */

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ============================================================
   Home (WordPress additions)
   Rules the reference solved with inline styles or with markup that
   WordPress generates differently. The reference rules above stay untouched.
   ============================================================ */

/* The reference marked up the first two headings with inline margins. */
.hero-c__head .eyebrow + h1 { margin-top: 12px; }
.section__head .eyebrow + h2 { margin-top: 8px; }
.lead-block__text .eyebrow { color: var(--pink); }

/* Reveal animations are driven by JavaScript: keep the content visible when
   scripting is unavailable. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Category panel without a term image, poster without a featured image. */
.panel--noimg { background: linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%); }
.poster__img--empty { position: absolute; inset: 0; z-index: -2; background: linear-gradient(160deg, var(--navy) 0%, var(--night) 100%); }

/* wp_dropdown_categories() emits its own <select>; the reference styles the
   element, so only the WordPress default class needs neutralising. */
.search__field select.postform { appearance: none; }

/* Single column variants: the "about" page has no featured image, or the
   enquiry block has no form to show. */
@media (min-width: 1024px) {
  .about--single { grid-template-columns: 1fr; }
  .lead-block--single { grid-template-columns: 1fr; }
}
.lead-block--single .lead-block__text { max-width: 60ch; }

/* The enquiry form may arrive from a widget, which adds a wrapper around it. */
.lead-block .widget { display: grid; }
.lead-block .widget .form { height: 100%; }

/* ============================================================
   Templates (WordPress additions)
   Catalogue, single programme, blog list, entry column and sidebar.
   Built from the reference components (.section, .chips, .rail, .poster,
   .card, .route, .btn) with the tokens of tokens.css; the rules above are
   not edited, the few overrides needed carry a comment.
   ============================================================ */

/* ---------- Catalogue filters ---------- */
.filters { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
/* The reference chips are <button>s; as links they must not be underlined
   and they need the same hover feedback. */
a.chip { text-decoration: none; }
/* In a scrolling chip row a two-word label ("All countries") must not shrink
   and wrap; the row scrolls instead. */
.chips--scroll .chip { flex-shrink: 0; white-space: nowrap; }
a.chip.is-active:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* The catalogue is a paginated grid, not a carousel: on a phone the posters
   stack instead of scrolling sideways, and the rail dots the script adds to
   every .rail are hidden. */
@media (max-width: 767px) {
  .rail--grid { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-inline: 0; margin-inline: 0; cursor: auto; }
  .rail--grid + .rail-dots { display: none; }
}

/* ---------- Single programme: hero ---------- */
.tour-hero { position: relative; background: var(--navy); color: #fff; isolation: isolate; overflow: hidden; }
.tour-hero__media { position: absolute; inset: 0; z-index: -2; }
.tour-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Same gradient treatment as .panel, so the programme page opens like a poster. */
.tour-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,30,61,.35) 0%, rgba(10,30,61,.5) 45%, rgba(10,30,61,.95) 100%); }
.tour-hero__inner { display: grid; gap: var(--space-4); align-content: end; min-height: min(56vh, 520px); padding-block: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px); }
.tour-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-hero h1 { max-width: 18ch; text-shadow: 0 2px 24px rgba(0,0,0,.25); overflow-wrap: anywhere; }
.tour-hero .route { color: rgba(255,255,255,.8); }
.tour-hero .route__stop:first-child::before, .tour-hero .route__stop:last-child::after { background: var(--pink); }
.tour-hero .route__stop + .route__stop::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 3px, transparent 3px 6px); }

/* ---------- Single programme: content and aside ---------- */
.tour-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .tour-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-7); } }
/* The entry typography centres its blocks in a 720px measure; inside the
   two-column layout the column itself sets the measure. */
.tour-layout .entry-content > * { margin-inline: 0; max-width: 100%; }

.tour-card { display: grid; gap: var(--space-4); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper-2); }
@media (min-width: 1024px) { .tour-card { position: sticky; top: 96px; } }
.tour-card__price strong { font-size: 1.75rem; color: var(--navy); }
.tour-card__label { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tour-card__group { display: grid; gap: 8px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tour-card__dates { display: grid; gap: 8px; }
.tour-card__date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tour-card__status { font-size: var(--fs-small); color: var(--ink-2); }
.date--closed { background: transparent; border: 1px dashed var(--line); color: var(--ink-3); }
.tour-card__countries a { text-decoration: underline; text-underline-offset: 3px; }
.tour-card__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--pink); }

/* ---------- Reading column, content + sidebar ---------- */
.entry { max-width: 760px; margin-inline: auto; }
.entry-header .eyebrow { text-decoration: none; }
.layout { display: grid; }
.layout--sidebar { gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); } }
/* The widget area is a column here, not the full-width band the rule above
   styles: it brings its own section padding and its own container grid. */
.layout--sidebar .widget-area { padding-block: 0; }
.layout--sidebar .entry { margin-inline: 0; }
/* Block based widgets print their own headings and ignore the `before_title`
   of register_sidebar(), so the display sizes are capped inside the column. */
.layout--sidebar .widget-area h2,
.layout--sidebar .widget-area h3 { font-size: var(--fs-h3); }
.layout__main > .post-navigation,
.layout__main > .comments-area { max-width: 760px; margin-inline: auto; }
.layout--sidebar .layout__main > .post-navigation,
.layout--sidebar .layout__main > .comments-area { margin-inline: 0; }

/* ---------- Blog cards in a grid ---------- */
.card--post { border: 1px solid var(--line); }
.card--post .card__body { gap: 8px; padding-bottom: 16px; }
.card--post .card__cat { justify-self: start; }
/* The list heading is an <h2> for the document outline: .entry-title of the
   content section would otherwise give it the display size of a page title. */
.card--post .card__title { font-size: 1.0625rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.card--post .card__title a:hover { color: var(--accent); }
.card--post .card__excerpt { font-size: var(--fs-small); color: var(--ink-2); }
.card--post .card__foot { border-top: 1px solid var(--line); margin-top: auto; padding-top: 12px; }
.card--post .entry-footer { margin-top: auto; }
/* The poster keeps its own 3 / 4 canvas when it lands between blog cards. */
.grid .poster { border-radius: var(--radius-card); }

/* ---------- Empty states ---------- */
.no-results .page-content { display: grid; gap: var(--space-4); justify-items: start; max-width: 60ch; }
.no-results .page-content p { margin: 0; }
.no-results .search-form { width: 100%; }
.error-404 { display: grid; gap: var(--space-4); justify-items: center; text-align: center; max-width: 640px; margin-inline: auto; }
.error-404 .search-form { width: 100%; text-align: left; }

/* ===== Review fixes ===== */

/* The default focus ring (--blue) does not reach 3:1 against the dark
   surfaces of the theme, so those surfaces switch it to white. */
.section--dark,
.mnav,
.footer,
.lead-block,
.tour-hero { --focus: #FFFFFF; }

/* Visible focus ring for the form fields whose reference rules used to
   suppress it. The inset offset keeps the ring inside the rounded field. */
.field input:focus-visible,
.field textarea:focus-visible,
.search__field input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Without scripting the season tabs never switch, so the tab strip is hidden
   and every panel is shown as the grid it is. */
@media (scripting: none) {
  [role="tabpanel"][hidden] { display: grid !important; }
  .tabs[role="tablist"] { display: none; }
}

/* Where the chips and the rail scroll horizontally, overflow clips the focus
   ring of the item at the edge: the padding gives the ring room and the
   negative margin takes the space back, so nothing shifts. */
@media (max-width: 599px) {
  .chips--scroll { padding-block: 6px; margin-block: -6px; }
}
@media (max-width: 767px) {
  .rail { padding-block: 6px 8px; margin-block: -6px 0; }
}

/* ============================================================
   1.0.2 - Theme Unit Test fixes
   Multi-level menus, long menus, content edge cases, widgets,
   comments and the admin bar. Built from the existing tokens and
   components; the reference rules above are not redesigned.
   ============================================================ */

/* ---------- Header: long menus ----------
   The menu shares the row with the logo, the phone and the button. It may
   shrink and wrap onto more lines instead of being clipped or pushing the
   phone and the button out of the row. */
.nav { flex: 0 1 auto; min-width: 0; }
.header__logo { flex: none; }
.header__phone,
.header__cta { flex: none; white-space: nowrap; }
.header__brand { overflow-wrap: anywhere; }
/* A menu that wraps onto a second line keeps clear of the header edges. */
.header__row { padding-block: 8px; }

/* ---------- Header: dropdowns ---------- */
.nav .nav__list > li { position: relative; display: flex; align-items: center; }
.nav .nav__list > li.menu-item-has-children > a { padding-right: 4px; }
.nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; margin-right: 4px; border-radius: var(--radius-sm); color: inherit; }
.nav__toggle::before { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.nav__toggle:hover { background: rgba(127,127,127,.12); }
.nav .nav__list > li.is-open > .nav__toggle::before { margin-top: 4px; transform: rotate(-135deg); }

.nav .sub-menu { margin: 0; padding: 0; list-style: none; }
.nav .nav__list > li > .sub-menu {
	position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
	width: max-content; min-width: 220px; max-width: 320px;
	max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
	padding: 8px; background: var(--paper); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* Bridges the gap between the item and its panel so the hover is not lost. */
.nav .nav__list > li.menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav .nav__list > li:hover > .sub-menu,
.nav .nav__list > li:focus-within > .sub-menu,
.nav .nav__list > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .nav__list > li.is-dismissed > .sub-menu { opacity: 0; visibility: hidden; }
/* The last items open their panel towards the left so it stays on screen. */
.nav .nav__list > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
.nav .sub-menu a { display: block; padding: 8px 12px; opacity: 1; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.nav .sub-menu a:hover,
.nav .sub-menu .current-menu-item > a { background: var(--paper-2); color: var(--accent-deep); }
/* Deeper levels are listed inside the same panel as an indented tree, so a
   ten level menu never runs off the screen. */
.nav .sub-menu .sub-menu { margin: 2px 0 2px 12px; padding-left: 4px; border-left: 1px solid var(--line); }
.nav .sub-menu li + li { margin-top: 2px; }

/* ---------- Mobile drawer: long and nested menus ---------- */
.mnav { overflow-y: auto; overscroll-behavior: contain; }
.mnav__list a { overflow-wrap: anywhere; }
.mnav__list .sub-menu { margin: 0 0 0 4px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
.mnav__list .sub-menu .sub-menu { padding-left: 12px; }
.mnav__list .sub-menu a { padding-block: 10px; font-family: var(--font-body); font-size: .9375rem; color: rgba(255,255,255,.75); }

/* ---------- Admin bar ----------
   The sticky header sits below the toolbar instead of under it; the drawer
   covers the toolbar so its close button is always reachable. */
@media (min-width: 783px) { .admin-bar .header { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (min-width: 1024px) { .admin-bar .tour-card { top: 128px; } }
.mnav { z-index: 100000; }

/* ---------- Layout: grid columns may shrink below their content ---------- */
.site { overflow-x: clip; }
.layout { grid-template-columns: minmax(0, 1fr); }
.layout__main,
.layout .widget-area,
.grid > *,
.footer__grid > * { min-width: 0; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }

/* ---------- Long titles and unbroken words ---------- */
.entry-title,
.page-title,
.card__title,
.nav-title,
.comments-title,
.comment-reply-title,
.entry-meta,
.entry-footer,
.comment-author,
.widget,
.footer__bottom,
.panel__name,
.poster__title,
.cat__title,
.hero-c__head h1 { overflow-wrap: anywhere; }
.panel { min-width: 0; }
.entry-content,
.entry-summary,
.page-content,
.comment-content { overflow-wrap: break-word; }
/* Wide tables scroll inside the column instead of squeezing every cell. */
.entry-content > table,
.comment-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content td,
.entry-content th { overflow-wrap: break-word; min-width: 4.5em; }

/* ---------- Sticky posts ---------- */
.card__labels { display: flex; flex-wrap: wrap; gap: 6px; }
/* The _s `.sticky { display: block }` rule above must not undo the card's flex column. */
.card--post.sticky { display: flex; border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

/* ---------- Reading column ----------
   Inside the 760px article every block shares the measure of the title, so
   text, images and captions line up instead of sitting 20px in. */
.entry .entry-content > :not(.alignwide):not(.alignfull),
.entry .entry-summary > * { max-width: 100%; }
.entry-content::after { content: ""; display: table; clear: both; }

/* Wide and full blocks: inside the sidebar layout they stay in the column;
   in the single column layout they break out of the 760px article. */
.layout--sidebar .entry-content > .alignwide,
.layout--sidebar .entry-content > .alignfull,
.tour-layout .entry-content > .alignwide,
.tour-layout .entry-content > .alignfull { width: auto; max-width: 100%; margin-inline: 0; }
.layout--sidebar .entry-content > .alignfull img,
.tour-layout .entry-content > .alignfull img { border-radius: var(--radius-card); }
.layout:not(.layout--sidebar) .entry .entry-content > .alignwide,
.site-main > .section > .container > .entry .entry-content > .alignwide {
	--wha-tour-poster-wide: calc(min(var(--container), 100vw) - 2 * var(--gutter));
	width: var(--wha-tour-poster-wide); max-width: var(--wha-tour-poster-wide);
	margin-inline: calc(50% - var(--wha-tour-poster-wide) / 2);
}

/* ---------- Image alignments and captions ---------- */
.entry-content .alignleft,
.comment-content .alignleft { float: left; margin: .35em 1.5em 1em 0; }
.entry-content .alignright,
.comment-content .alignright { float: right; margin: .35em 0 1em 1.5em; }
.entry-content > .alignleft,
.entry-content > .alignright { max-width: 50%; }
.entry-content .aligncenter,
.comment-content .aligncenter { margin-inline: auto; }
.entry-content .alignleft + *,
.entry-content .alignright + * { margin-top: 0; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption img { margin-inline: auto; }
.entry-content .wp-caption-text,
.entry-content .gallery-caption { margin: 8px 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.entry-content .gallery { margin-inline: auto; }
.entry-content .gallery-item { margin: 0; }
.entry-content .gallery-item img { margin-inline: auto; }
@media (max-width: 599px) {
	.entry-content > .alignleft,
	.entry-content > .alignright { float: none; max-width: 100%; margin: 1.25em 0 0; }
	.gallery-columns-4, .gallery-columns-5, .gallery-columns-6,
	.gallery-columns-7, .gallery-columns-8, .gallery-columns-9 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Core blocks inside the content ---------- */
.entry-content .page-links a { text-decoration: none; color: var(--ink-2); }
.entry-content .page-links a:hover { color: var(--ink); }
.page-links > span:not(.page-links-title):not(:first-child) { background: var(--ink); border-color: var(--ink); color: #fff; }
.entry-content .wp-block-button__link,
.entry-content .wp-element-button { text-decoration: none; }
.entry-content .wp-block-cover a,
.entry-content .has-background a { color: inherit; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content .wp-block-pullquote { padding: 1.5em 0; border-block: 3px solid var(--accent); text-align: center; }
.entry-content .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.entry-content .wp-block-pullquote p { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; }
.entry-content .wp-block-quote.has-text-align-right { border-left: 0; border-right: 3px solid var(--accent); padding: 4px 20px 4px 0; }
.entry-content .wp-block-quote.has-text-align-center { border-left: 0; padding-left: 0; }
.entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--line); }
.entry-content .wp-block-separator.is-style-dots { border: 0; }
.entry-content .wp-block-columns,
.entry-content .wp-block-group,
.entry-content .wp-block-media-text { overflow-wrap: break-word; }
.entry-content .wp-block-column > * + *,
.entry-content .wp-block-group__inner-container > * + * { margin-top: 1em; }
.entry-content dl dt { font-weight: 700; }
.entry-content dl dd { margin: 0 0 .75em 1.25em; }
.entry-content abbr[title] { text-decoration: underline dotted; cursor: help; }
.entry-content mark,
.entry-content ins { background: var(--sun, #FFE58F); color: var(--ink); text-decoration: none; padding: 0 .15em; }
.entry-content sup,
.entry-content sub { line-height: 0; }
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video { max-width: 100%; }

/* Password protected posts: same field and button as the comment form. */
.post-password-form { display: grid; gap: 12px; }
.post-password-form p { margin: 0; }
.post-password-form label { display: grid; gap: 6px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.post-password-form p:has(input[type="submit"]) { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.post-password-form input[type="password"] { min-height: 52px; width: min(100%, 320px); padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.post-password-form input[type="password"]:focus { border-color: var(--ink); }
.post-password-form input[type="submit"] {
	min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--radius-btn);
	background: var(--cta); color: #fff; cursor: pointer;
	font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.post-password-form input[type="submit"]:hover { background: var(--cta-hover); color: var(--ink); }

/* ---------- Comments ---------- */
.comment-list,
.comment-list .children { grid-template-columns: minmax(0, 1fr); }
.comment-list > li,
.comment-list .children > li,
.comment-body,
.comment-body > * { min-width: 0; }
.comment-body { grid-template-columns: minmax(0, 1fr); }
.comment-author .says { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bypostauthor > .comment-body { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.comment-respond { margin-top: var(--space-6); }
.comment-list + .comment-respond,
.comment-navigation + .comment-respond { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.comment-content > *:first-child { margin-top: 0; }
.comment-content h1, .comment-content h2, .comment-content h3,
.comment-content h4, .comment-content h5, .comment-content h6 {
	font-family: var(--font-display); font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking); line-height: var(--lh-tight); text-transform: none;
}
.comment-content h1 { font-size: 1.75rem; }
.comment-content h2 { font-size: 1.5rem; }
.comment-content h3 { font-size: 1.25rem; }
.comment-content h4 { font-size: 1.125rem; }
.comment-content h5 { font-size: 1rem; }
.comment-content h6 { font-size: var(--fs-small); }
.comment-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.comment-content blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.comment-content code,
.comment-content kbd,
.comment-content tt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--paper-2); padding: .15em .35em; border-radius: var(--radius-sm); }
.comment-content pre { max-width: 100%; overflow-x: auto; padding: 16px; background: var(--paper-2); border-radius: var(--radius-md); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.5; }
.comment-content pre code { background: none; padding: 0; }
.comment-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.comment-content th,
.comment-content td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; overflow-wrap: break-word; min-width: 4.5em; }
.comment-content hr { border: 0; border-top: 1px solid var(--line); }
.comment-content img { border-radius: var(--radius-sm); }
.comment-content dl dt { font-weight: 700; }
.comment-content dl dd { margin: 0 0 .5em 1.25em; }
.comment-content::after { content: ""; display: table; clear: both; }
/* Threads ten levels deep: the indent stops growing after a few levels so
   the deepest replies keep a readable width on a phone. */
@media (max-width: 599px) {
	.comment-list .children { padding-left: 12px; }
	.comment-body { padding: 16px; }
	.comment-list .children .children .children .children { padding-left: 0; border-left: 0; }
}
@media (min-width: 600px) {
	.comment-list .children .children .children .children .children .children { padding-left: 0; border-left: 0; }
}

/* ---------- Widgets ---------- */
.widget table { width: 100%; border-collapse: collapse; }
.widget_calendar table,
.wp-block-calendar table { table-layout: fixed; text-align: center; font-size: var(--fs-small); }
.widget_calendar caption,
.wp-block-calendar caption { padding-bottom: 8px; font-weight: 700; text-align: left; }
.widget_calendar th,
.widget_calendar td,
.wp-block-calendar th,
.wp-block-calendar td { padding: 6px 0; border: 1px solid var(--line); }
.widget_calendar th,
.wp-block-calendar th { background: var(--paper-2); font-weight: 700; }
.widget_calendar td a,
.wp-block-calendar td a { font-weight: 700; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.widget_calendar #today,
.wp-block-calendar #today { background: var(--accent-soft); }
.wp-calendar-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-small); }
.footer .widget_calendar th,
.footer .widget_calendar td,
.footer .wp-block-calendar th,
.footer .wp-block-calendar td { border-color: rgba(255,255,255,.14); }
.footer .widget_calendar th,
.footer .wp-block-calendar th { background: rgba(255,255,255,.06); }
.footer .widget_calendar td a,
.footer .wp-block-calendar td a { color: #fff; }
.footer .widget_calendar #today,
.footer .wp-block-calendar #today { background: rgba(255,255,255,.12); }
.tagcloud,
.wp-block-tag-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.widget select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.footer ul ul { margin-top: 8px; padding-left: 16px; }
.footer .widget + .widget { margin-top: var(--space-5); }

/* ---------- Footer bottom: long legal menus wrap in their own row ---------- */
.footer__legal-nav { flex: 0 1 auto; min-width: 0; }