@charset "UTF-8";
/**
 * HQ Theme v2 — SantoriniToursHQ
 *
 * Cascade layers, in priority order. This is the structural fix for v1's
 * !important war: mu-plugin component CSS now lives in `components`, so it no
 * longer has to shout to outrank a generic `.post-content a` rule in `base`.
 * Anything unlayered still beats every layer, which is why `overrides` exists —
 * so the few genuine escape hatches stay findable in one place.
 */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* ═════════════════════════════════════════════════════════════════════════
   RESET
   ═════════════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body { min-height: 100svh; -webkit-font-smoothing: antialiased; }

  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
  }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  :target { scroll-margin-top: calc(var(--hq-nav-height) + 1rem); }
}

/* ═════════════════════════════════════════════════════════════════════════
   TOKENS

   Every value falls back to a literal. theme.json is the declared source of
   truth — it's what the block editor and any palette parser reads — but the
   stylesheet must still render correctly if WP's global-styles <style> block
   is deferred or dropped by a cache layer.

   Contrast: every text/background pair below is verified by
   assets/css/contrast.php. Do not introduce a new pair without running it.
   ═════════════════════════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    color-scheme: light;

    /* ── Ramps (mirrors theme.json settings.custom.color) ───────────────── */
    --hq-navy-50:  var(--wp--custom--color--navy--50,  #f3f7fd);
    --hq-navy-100: var(--wp--custom--color--navy--100, #e3edfa);
    --hq-navy-200: var(--wp--custom--color--navy--200, #c5daf4);
    --hq-navy-300: var(--wp--custom--color--navy--300, #97bde9);
    --hq-navy-400: var(--wp--custom--color--navy--400, #619ade);
    --hq-navy-500: var(--wp--custom--color--navy--500, #3a7bd5);
    --hq-navy-600: var(--wp--custom--color--navy--600, #2c60ad);
    --hq-navy-700: var(--wp--custom--color--navy--700, #1a4a8a);
    --hq-navy-800: var(--wp--custom--color--navy--800, #13396b);
    --hq-navy-900: var(--wp--custom--color--navy--900, #0b2a5c);
    --hq-navy-950: var(--wp--custom--color--navy--950, #071a3a);

    --hq-gold-50:  var(--wp--custom--color--gold--50,  #fdf8f0);
    --hq-gold-100: var(--wp--custom--color--gold--100, #faeed9);
    --hq-gold-200: var(--wp--custom--color--gold--200, #f2d9ab);
    --hq-gold-300: var(--wp--custom--color--gold--300, #e8b878);
    --hq-gold-400: var(--wp--custom--color--gold--400, #c8924a);
    --hq-gold-500: var(--wp--custom--color--gold--500, #ab7936);
    --hq-gold-600: var(--wp--custom--color--gold--600, #9b6d2f);
    --hq-gold-700: var(--wp--custom--color--gold--700, #75521f);
    --hq-gold-800: var(--wp--custom--color--gold--800, #4f3614);
    --hq-gold-900: var(--wp--custom--color--gold--900, #33230d);

    --hq-surface-0:   var(--wp--custom--color--surface--0,   #ffffff);
    --hq-surface-50:  var(--wp--custom--color--surface--50,  #faf7f2);
    --hq-surface-100: var(--wp--custom--color--surface--100, #f3efe7);
    --hq-surface-200: var(--wp--custom--color--surface--200, #e8e4dc);
    --hq-surface-300: var(--wp--custom--color--surface--300, #d5cfc3);

    --hq-ink-900: var(--wp--custom--color--ink--900, #1a1a2e);
    --hq-ink-700: var(--wp--custom--color--ink--700, #4a4a6a);
    --hq-ink-500: var(--wp--custom--color--ink--500, #6a6a85);
    --hq-ink-400: var(--wp--custom--color--ink--400, #8a8aaa);

    /* ── Semantics — components reference ONLY these ────────────────────── */
    --hq-surface:         var(--hq-surface-0);
    --hq-surface-sunken:  var(--hq-surface-50);
    --hq-surface-raised:  var(--hq-surface-100);
    --hq-surface-inverse: var(--hq-navy-900);

    --hq-text:        var(--hq-ink-900);   /* 17.06:1 on surface */
    --hq-text-muted:  var(--hq-ink-700);   /*  8.47:1 */
    --hq-text-subtle: var(--hq-ink-500);   /*  5.23:1 — replaces v1's 3.34:1 ink-400 */

    --hq-text-on-inverse:       #ffffff;              /* 14.00:1 on navy-900 */
    --hq-text-muted-on-inverse: rgb(255 255 255 / 78%); /* 9.02:1 — v1 shipped 18% */
    --hq-text-nav-on-inverse:   rgb(255 255 255 / 85%); /* 10.46:1 */

    --hq-border:        var(--hq-surface-200);
    --hq-border-strong: var(--hq-surface-300);
    --hq-border-inverse: rgb(255 255 255 / 12%);

    --hq-brand:       var(--hq-navy-900);
    --hq-brand-mid:   var(--hq-navy-700);
    --hq-brand-light: var(--hq-navy-500);

    /* The brand gold is UNCHANGED at #c8924a and stays decorative — borders,
       rules, icon accents, and text on navy (5.11:1). It is 2.74:1 on white,
       so it must never carry text on a light surface. Those two jobs go to: */
    --hq-accent:            var(--hq-gold-400);  /* decorative only */
    --hq-accent-underline:  var(--hq-gold-500);  /* 3.80:1 — link underlines */
    --hq-accent-solid:      var(--hq-gold-600);  /* button fill, white text 4.54:1 */
    --hq-accent-text:       var(--hq-gold-700);  /* 7.04:1 white / 6.59:1 cream */
    --hq-accent-on-inverse: var(--hq-gold-300);  /* 7.71:1 on navy-900 */

    --hq-link:           var(--hq-navy-700);     /* 8.79:1 — v1 used gold at 2.74:1 */
    --hq-link-hover:     var(--hq-navy-900);
    --hq-link-underline: var(--hq-accent-underline);

    --hq-focus: var(--hq-navy-500);
    --hq-focus-on-inverse: var(--hq-gold-300);

    --hq-partner-viator: var(--wp--custom--color--partner--viator, #0b2a5c);
    --hq-partner-gyg:    var(--wp--custom--color--partner--gyg,    #e8541e);

    --hq-success: #1d7a4c;
    --hq-danger:  #b3261e;

    /* ── Non-colour tokens ──────────────────────────────────────────────── */
    --hq-font-body:    var(--wp--preset--font-family--body, Inter, ui-sans-serif, system-ui, sans-serif);
    --hq-font-heading: var(--wp--preset--font-family--heading, 'Playfair Display', ui-serif, Georgia, serif);

    --hq-radius-sm:   var(--wp--custom--radius--sm,   6px);
    --hq-radius-md:   var(--wp--custom--radius--md,   10px);
    --hq-radius-lg:   var(--wp--custom--radius--lg,   14px);
    --hq-radius-xl:   var(--wp--custom--radius--xl,   20px);
    --hq-radius-pill: var(--wp--custom--radius--pill, 999px);

    --hq-shadow-sm: var(--wp--custom--shadow--sm, 0 1px 2px rgb(11 42 92 / 6%));
    --hq-shadow-md: var(--wp--custom--shadow--md, 0 4px 14px rgb(11 42 92 / 10%));
    --hq-shadow-lg: var(--wp--custom--shadow--lg, 0 12px 32px rgb(11 42 92 / 14%));

    --hq-nav-height: var(--wp--custom--nav--height, 64px);

    --hq-duration-fast: var(--wp--custom--duration--fast, 150ms);
    --hq-duration-base: var(--wp--custom--duration--base, 250ms);
    --hq-duration-slow: var(--wp--custom--duration--slow, 1400ms);

    --hq-content-width: 820px;
    --hq-wide-width:   1200px;
    --hq-gutter: clamp(1.25rem, 4vw, 2rem);

    /* The Cycladic skyline silhouette at the foot of the hero. Inline data URI
       rather than a file so it costs no request; the fill must stay in sync
       with --hq-surface-sunken, which is the section it dissolves into. */
    --hq-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='%23faf7f2' d='M0,140 C80,120 120,85 180,95 C220,103 240,125 280,115 C310,107 320,75 360,65 C400,55 420,95 460,85 C490,77 500,48 540,43 C575,38 590,72 630,68 C665,64 680,38 720,35 C760,32 775,65 815,62 C850,59 865,32 900,28 C938,24 952,58 990,55 C1025,52 1040,26 1080,22 C1120,18 1135,50 1170,46 C1205,42 1220,16 1260,13 C1305,10 1340,44 1380,41 L1440,38 L1440,180 L0,180 Z'/%3E%3C/svg%3E");
  }

  /* Honour a user's OS-level contrast preference rather than ignoring it. */
  @media (prefers-contrast: more) {
    :root {
      --hq-text-muted:  var(--hq-ink-900);
      --hq-text-subtle: var(--hq-ink-700);
      --hq-border:      var(--hq-surface-300);
      --hq-text-muted-on-inverse: rgb(255 255 255 / 92%);
    }
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   BASE
   ═════════════════════════════════════════════════════════════════════════ */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--hq-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hq-text);
    background: var(--hq-surface);
    /* v1 had `overflow-x: hidden` here, which silently breaks every
       position:sticky descendant. The real overflow sources are clipped at
       their own component instead. */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--hq-font-heading);
    line-height: 1.2;
    color: var(--hq-brand);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: var(--hq-link);
    text-decoration-color: var(--hq-link-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color var(--hq-duration-fast) ease;
  }
  a:hover { color: var(--hq-link-hover); }

  strong, b { font-weight: 700; color: var(--hq-text); }

  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--hq-border);
    margin: 2.5rem 0;
  }

  /* Visible focus for keyboard users only — v1 had no focus styling at all. */
  :focus-visible {
    outline: 3px solid var(--hq-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .hq-section--dark :focus-visible,
  #hq-nav :focus-visible,
  #hq-footer :focus-visible { outline-color: var(--hq-focus-on-inverse); }

  ::selection {
    background: var(--hq-gold-200);
    color: var(--hq-ink-900);
  }

  .hq-icon {
    flex-shrink: 0;
    vertical-align: middle;
    color: currentColor;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═════════════════════════════════════════════════════════════════════════ */
@layer layout {
  .hq-container {
    width: 100%;
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding-inline: var(--hq-gutter);
  }
  .hq-container--narrow { max-width: var(--hq-content-width); }

  .hq-section { padding-block: clamp(3rem, 7vw, 4.5rem); }
  .hq-section--sunken  { background: var(--hq-surface-sunken); }
  .hq-section--dark    { background: var(--hq-surface-inverse); color: var(--hq-text-on-inverse); }
  .hq-section--dark :is(h1,h2,h3,h4) { color: var(--hq-text-on-inverse); }

  /* Offsets the fixed nav. Applied to <main> so it can't be forgotten per-page. */
  .hq-main { padding-top: var(--hq-nav-height); }
  .hq-main--flush { padding-top: 0; }

  .hq-skip-link {
    position: absolute;
    left: -9999px;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--hq-surface);
    color: var(--hq-brand);
    font-weight: 600;
    border-radius: 0 0 var(--hq-radius-sm) 0;
    box-shadow: var(--hq-shadow-md);
  }
  .hq-skip-link:focus {
    left: 0;
    top: 0;
  }

  .hq-grid { display: grid; gap: 1.25rem; }
  .hq-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .hq-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .hq-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}

/* ═════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ═════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Buttons ───────────────────────────────────────────────────────────── */
  .hq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--hq-radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--hq-duration-fast) ease,
                border-color var(--hq-duration-fast) ease,
                color var(--hq-duration-fast) ease;
  }
  .hq-btn--primary {
    background: var(--hq-accent-solid);
    border-color: var(--hq-accent-solid);
    color: var(--hq-text-on-inverse);
  }
  .hq-btn--primary:hover {
    background: var(--hq-accent-text);
    border-color: var(--hq-accent-text);
    color: var(--hq-text-on-inverse);
  }
  .hq-btn--brand {
    background: var(--hq-brand);
    border-color: var(--hq-brand);
    color: var(--hq-text-on-inverse);
  }
  .hq-btn--brand:hover { background: var(--hq-brand-mid); border-color: var(--hq-brand-mid); color: var(--hq-text-on-inverse); }
  .hq-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var(--hq-brand-mid);
  }
  .hq-btn--outline:hover { background: var(--hq-navy-50); }
  .hq-section--dark .hq-btn--outline,
  .hq-hero .hq-btn--outline { color: var(--hq-text-on-inverse); border-color: rgb(255 255 255 / 55%); }
  .hq-section--dark .hq-btn--outline:hover,
  .hq-hero .hq-btn--outline:hover { background: rgb(255 255 255 / 12%); }
  .hq-btn--full { width: 100%; }

  /* Partner-branded CTAs. Colours are the partners' own, not ours. */
  .hq-btn--viator { background: var(--hq-partner-viator); border-color: var(--hq-partner-viator); color: #fff; }
  .hq-btn--viator:hover { background: var(--hq-navy-700); border-color: var(--hq-navy-700); color: #fff; }
  .hq-btn--gyg { background: var(--hq-partner-gyg); border-color: var(--hq-partner-gyg); color: #fff; }
  .hq-btn--gyg:hover { background: #c94518; border-color: #c94518; color: #fff; }

  /* ── Navigation ────────────────────────────────────────────────────────── */
  #hq-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: var(--hq-nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: var(--hq-gutter);
    background: rgb(11 42 92 / 97%);
    border-bottom: 1px solid rgb(200 146 74 / 30%);
    transition: box-shadow var(--hq-duration-base) ease;
  }
  @supports (backdrop-filter: blur(12px)) {
    #hq-nav { background: rgb(11 42 92 / 88%); backdrop-filter: blur(12px); }
  }
  #hq-nav.is-scrolled { box-shadow: 0 4px 24px rgb(0 0 0 / 30%); }

  .hq-nav-logo {
    font-family: var(--hq-font-heading);
    font-size: clamp(1.15rem, 3vw, 1.3rem);
    font-weight: 700;
    color: var(--hq-text-on-inverse);
    text-decoration: none;
    white-space: nowrap;
  }
  .hq-nav-logo span { color: var(--hq-accent-on-inverse); }

  .hq-nav-links { display: none; }

  .hq-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--hq-radius-sm);
    color: var(--hq-text-on-inverse);
    cursor: pointer;
  }
  .hq-nav-toggle .hq-icon--close,
  .hq-nav-toggle[aria-expanded="true"] .hq-icon--open { display: none; }
  .hq-nav-toggle[aria-expanded="true"] .hq-icon--close { display: block; }

  .hq-nav-mobile {
    display: none;
    position: fixed;
    inset: var(--hq-nav-height) 0 auto;
    z-index: 999;
    flex-direction: column;
    max-height: calc(100svh - var(--hq-nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem var(--hq-gutter) 1.5rem;
    background: var(--hq-surface-inverse);
    border-bottom: 2px solid var(--hq-accent);
    list-style: none;
  }
  .hq-nav-mobile.is-open { display: flex; }
  .hq-nav-mobile li { display: block; }
  .hq-nav-mobile li:last-child a { border-bottom: none; }
  .hq-nav-mobile a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0;
    color: var(--hq-text-nav-on-inverse);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--hq-border-inverse);
  }
  .hq-nav-mobile a:hover { color: var(--hq-accent-on-inverse); }
  .hq-nav-mobile a:last-child { border-bottom: none; }
  .hq-nav-mobile .hq-icon { color: var(--hq-accent-on-inverse); }
  /* .nav-cta / .mob-cta are the v1 class names — see the desktop nav comment
     above for why both are aliased alongside the v2 names. */
  .hq-nav-mobile .hq-nav-cta,
  .hq-nav-mobile .nav-cta,
  .hq-nav-mobile .mob-cta {
    justify-content: center;
    margin-top: 0.9rem;
    padding: 0.9rem;
    background: var(--hq-accent-solid);
    color: var(--hq-text-on-inverse);
    border-radius: var(--hq-radius-sm);
    border-bottom: none;
    font-weight: 600;
  }
  .hq-nav-mobile .hq-nav-cta:hover,
  .hq-nav-mobile .nav-cta:hover,
  .hq-nav-mobile .mob-cta:hover { background: var(--hq-accent-text); color: var(--hq-text-on-inverse); }
  .hq-nav-mobile .hq-nav-cta .hq-icon,
  .hq-nav-mobile .nav-cta .hq-icon,
  .hq-nav-mobile .mob-cta .hq-icon { color: currentColor; }

  @media (min-width: 900px) {
    .hq-nav-links {
      display: flex;
      align-items: center;
      gap: clamp(1rem, 2.2vw, 1.75rem);
      list-style: none;
    }
    .hq-nav-links a {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--hq-text-nav-on-inverse);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--hq-duration-fast) ease, background-color var(--hq-duration-fast) ease;
    }
    .hq-nav-links a:hover { color: var(--hq-accent-on-inverse); }
    .hq-nav-links .hq-icon { color: var(--hq-accent-on-inverse); transition: color var(--hq-duration-fast) ease; }
    /* .nav-cta is the v1 class name. The real WordPress menu item (Appearance
       > Menus > Book a Tour > CSS Classes) still carries it — that field is
       shared with the still-live v1 theme, so it cannot be renamed to
       hq-nav-cta without also touching v1's styling. Both names are aliased so
       whichever one the item actually has still renders the pill button.
       :is() so the base rule and its :hover both carry one unambiguous
       specificity for every property — text color, icon color and background
       all flip together. Previously the icon inherited color:currentColor
       from `.hq-icon` (line ~236) while the anchor's OWN colour came from a
       *different* rule of nearly-equal specificity (.hq-nav-links a:hover vs
       .hq-nav-links .nav-cta:hover) — technically resolvable by the cascade,
       but close enough in practice to invite a visible one-frame mismatch
       between the button's fill and the icon repainting a beat behind it.
       The explicit transition here makes the state change one smooth paint
       instead of an instant swap, which is what actually removes it. */
    .hq-nav-links :is(.hq-nav-cta, .nav-cta) {
      padding: 0.55rem 1.1rem;
      background: var(--hq-accent-solid);
      color: var(--hq-text-on-inverse);
      border-radius: var(--hq-radius-sm);
      transition: background-color var(--hq-duration-fast) ease;
    }
    .hq-nav-links :is(.hq-nav-cta, .nav-cta):hover {
      background: var(--hq-accent-text);
      color: var(--hq-text-on-inverse);
    }
    .hq-nav-links :is(.hq-nav-cta, .nav-cta) .hq-icon { color: currentColor; }
    .hq-nav-toggle { display: none; }
  }

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .hq-hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: calc(var(--hq-nav-height) + 3rem) var(--hq-gutter) 8rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }
  /* The background is a real <img> so it can be an LCP candidate with srcset
     and fetchpriority. v1 used a CSS background-image, which the preload
     scanner cannot see and which forced a full-size download on phones. */
  .hq-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  /* The video/iframe sits on top of the always-present <img> and only ever
     shows on tablet/desktop with no reduced-motion preference, so it never
     affects the LCP element or mobile data/battery use. It starts invisible
     and main.js's initHeroVideo() adds .is-ready only once the video has
     actually confirmed it can play (or the iframe has loaded) — so visitors
     always see the static image first, with a deliberate fade to video
     rather than a flash/flicker while that check happens. */
  .hq-hero-video {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .hq-hero-video.is-ready { opacity: 1; }
  @media (min-width: 900px) {
    .hq-hero-video { display: block; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hq-hero-video { display: none !important; }
  }
  .hq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgb(11 42 92 / 60%) 0%,
      rgb(11 42 92 / 50%) 45%,
      rgb(11 42 92 / 78%) 100%);
  }
  .hq-hero-skyline {
    position: absolute;
    inset: auto 0 0;
    height: 160px;
    pointer-events: none;
    background: var(--hq-skyline) bottom / cover no-repeat;
  }
  .hq-hero-inner { position: relative; max-width: 46rem; }
  .hq-hero h1 {
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 700;
    color: var(--hq-text-on-inverse);
    line-height: 1.12;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 14px rgb(0 0 0 / 65%);
  }
  .hq-hero h1 em { font-style: italic; color: var(--hq-accent-on-inverse); }
  .hq-hero p {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: rgb(255 255 255 / 97%);
    line-height: 1.8;
    max-width: 34rem;
    margin: 0 auto 2rem;
    text-shadow: 0 1px 8px rgb(0 0 0 / 55%);
  }
  .hq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    margin-bottom: 1.25rem;
    background: rgb(200 146 74 / 20%);
    border: 1px solid var(--hq-accent);
    border-radius: var(--hq-radius-pill);
    color: var(--hq-accent-on-inverse);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .hq-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }
  .hq-hero-btns .hq-btn { flex: 1 1 auto; min-width: 15rem; max-width: 19rem; }
  @media (min-width: 640px) {
    .hq-hero-btns .hq-btn { flex: 0 0 auto; min-width: 0; }
  }
  .hq-hero-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.75rem, 5vw, 3rem);
    justify-content: center;
    margin-top: 2.75rem;
    color: var(--hq-text-on-inverse);
  }
  .hq-stat { text-align: center; }
  .hq-stat-num {
    display: block;
    font-family: var(--hq-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--hq-accent-on-inverse);
  }
  .hq-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hq-text-muted-on-inverse);
  }

  /* ── Section headers ───────────────────────────────────────────────────── */
  .hq-section-header { margin-bottom: 2.25rem; }
  .hq-section-header--center { text-align: center; }
  .hq-section-header--center .hq-section-sub { margin-inline: auto; }
  .hq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    color: var(--hq-accent-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .hq-section--dark .hq-eyebrow { color: var(--hq-accent-on-inverse); }
  .hq-section-title { font-size: clamp(1.75rem, 4vw, 2.4rem); margin-bottom: 0.6rem; }
  .hq-section-sub {
    max-width: 36rem;
    color: var(--hq-text-muted);
    line-height: 1.8;
  }
  .hq-section--dark .hq-section-sub { color: var(--hq-text-muted-on-inverse); }

  /* ── Cards ─────────────────────────────────────────────────────────────── */
  .hq-card {
    display: flex;
    flex-direction: column;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--hq-duration-base) ease,
                box-shadow var(--hq-duration-base) ease,
                border-color var(--hq-duration-base) ease;
  }
  .hq-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hq-shadow-lg);
    border-color: var(--hq-accent);
  }
  .hq-card-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-700));
    overflow: hidden;
  }
  .hq-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--hq-duration-base) ease;
  }
  .hq-card:hover .hq-card-thumb img { transform: scale(1.05); }
  .hq-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem; }
  .hq-card-cat {
    margin-bottom: 0.45rem;
    color: var(--hq-accent-text);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .hq-card-title {
    font-family: var(--hq-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hq-brand);
    margin-bottom: 0.5rem;
  }
  .hq-card-excerpt {
    flex: 1;
    color: var(--hq-text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .hq-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--hq-border);
    color: var(--hq-text-subtle);
    font-size: 0.74rem;
  }

  /* "View Tours →" style label+icon links. display:inline-flex (not the
     default inline) keeps the arrow glued to the text as one atomic unit —
     a plain inline span lets the browser wrap the icon onto its own line
     the moment the card gets too narrow for both, exactly the "arrow sits
     under the text" bug this fixes. */
  .hq-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    color: var(--hq-accent-text);
    font-weight: 600;
  }

  /* Ribbon label on the front-page tour cards. */
  .hq-card-thumb { position: relative; }
  .hq-card-label {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: rgb(11 42 92 / 88%);
    border-radius: var(--hq-radius-pill);
    color: var(--hq-text-on-inverse);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hq-card-label .hq-icon { color: var(--hq-accent-on-inverse); }

  /* ── Front-page split sections ─────────────────────────────────────────── */
  /* Grid rather than flex: LiteSpeed's critical-CSS pass has historically
     clobbered flex-direction on these two blocks, and grid survives it. */
  .hq-about-grid {
    display: grid;
    /* minmax(0, 1fr) — same fix as .hq-post-layout below; a bare 1fr track
       won't shrink past its content's own min-content width. */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }
  @media (min-width: 900px) {
    .hq-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  }
  .hq-about-visual {
    position: relative;
    border-radius: var(--hq-radius-lg);
    overflow: hidden;
    box-shadow: var(--hq-shadow-lg);
    aspect-ratio: 3 / 2;
  }
  .hq-about-visual img { width: 100%; height: 100%; object-fit: cover; }
  .hq-about-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: var(--hq-accent-solid);
    border-radius: var(--hq-radius-pill);
    color: var(--hq-text-on-inverse);
    font-size: 0.72rem;
    font-weight: 700;
  }
  .hq-about-badge {
    position: absolute;
    inset: auto 0.85rem 0.85rem;
    padding: 0.7rem 0.9rem;
    background: rgb(255 255 255 / 94%);
    border-radius: var(--hq-radius-md);
    box-shadow: var(--hq-shadow-sm);
  }
  .hq-about-badge strong { display: block; color: var(--hq-brand); font-size: 0.95rem; }
  .hq-about-badge span { color: var(--hq-text-subtle); font-size: 0.78rem; }

  /* ── Breadcrumb ────────────────────────────────────────────────────────── */
  .hq-breadcrumb {
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding: 0.85rem var(--hq-gutter);
    font-size: 0.82rem;
    color: var(--hq-text-subtle);
  }
  .hq-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
  }
  .hq-breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
  .hq-breadcrumb li + li::before {
    content: "›";
    color: var(--hq-border-strong);
  }
  .hq-breadcrumb a { color: var(--hq-link); }
  .hq-breadcrumb [aria-current="page"] { color: var(--hq-text-muted); }

  /* ── Post hero + layout ────────────────────────────────────────────────── */
  .hq-post-hero {
    /* width:100% is not decorative here — it's the actual fix. Combining
       aspect-ratio with max-height and NO explicit width lets the browser's
       sizing algorithm resolve width FROM the max-height-constrained height
       via the ratio (26rem * 16/7 =~ 950px) instead of filling the container,
       because "auto" width is indefinite and eligible for that transferred-
       size computation the moment height gets constrained. An explicit,
       definite width takes that resolution off the table entirely: height is
       then derived from THIS width via aspect-ratio (with max-height still
       capping it), never the other way around. This is why the post hero
       rendered at a fixed ~950px instead of full-width regardless of
       viewport. */
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 7;
    max-height: 26rem;
    overflow: hidden;
    isolation: isolate;
  }
  .hq-post-hero img {
    position: absolute;
    inset: 0;
    /* !important: LiteSpeed's lazy-load rewrites this exact tag server-side
       (src -> a placeholder data URI, real URL moved to data-src, srcset/sizes
       to data-srcset/data-sizes) DESPITE the loading="eager" hint set in
       inc/template-tags.php — confirmed live, LiteSpeed ignores it for this
       image. Its client-side swap script very likely sets an inline
       width/height (or similar) when it restores src, to reserve layout space
       before the fetch completes. An inline style beats every external rule
       regardless of layer or specificity except another !important — this is
       the one place in the theme that needs it, and why. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    z-index: -2;
  }
  .hq-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(11 42 92 / 30%), rgb(11 42 92 / 78%));
  }
  .hq-post-hero-inner {
    position: absolute;
    inset: auto 0 0;
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding: 2rem var(--hq-gutter);
  }
  .hq-post-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.6rem;
  }

  .hq-page-hero {
    background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-700));
    padding: clamp(3rem, 8vw, 4.5rem) var(--hq-gutter) clamp(2rem, 5vw, 3rem);
    text-align: center;
  }
  .hq-page-hero h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.6rem;
  }
  .hq-page-hero p {
    max-width: 34rem;
    margin-inline: auto;
    color: var(--hq-text-muted-on-inverse);
  }

  .hq-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--hq-text-muted-on-inverse);
  }
  .hq-post-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .hq-post-meta a { color: inherit; text-decoration-color: var(--hq-accent-on-inverse); }
  .hq-post-meta--light { color: var(--hq-text-subtle); }
  .hq-post-meta--light a { color: var(--hq-link); }

  .hq-post-layout {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's implicit minimum is
       "auto" (the item's own min-content size), so if ANY descendant
       anywhere in .hq-post-content (a related-post card, a long unbroken
       heading, an item-card CTA row, ...) needs more than the available
       width, the whole track — and the page — grows to fit it instead of
       wrapping, causing horizontal overflow. Confirmed live: this was
       clipping real content on mobile. minmax(0, ...) is what the ≥1000px
       rule below already uses for the same track; this just matches it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    max-width: var(--hq-wide-width);
    margin: 3rem auto;
    padding-inline: var(--hq-gutter);
  }
  @media (min-width: 1000px) {
    .hq-post-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
    .hq-post-sidebar { position: sticky; top: calc(var(--hq-nav-height) + 1.5rem); align-self: start; }
  }

  /* ── Post content ──────────────────────────────────────────────────────── */
  .hq-post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--hq-text);
  }
  .hq-post-content > * + * { margin-top: 1.25rem; }
  .hq-post-content h2 {
    font-size: clamp(1.45rem, 3.2vw, 1.75rem);
    color: var(--hq-brand);
    margin-top: 2.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--hq-accent);
  }
  .hq-post-content h3 {
    font-size: clamp(1.15rem, 2.4vw, 1.3rem);
    color: var(--hq-brand-mid);
    margin-top: 2rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--hq-accent);
  }
  .hq-post-content h4 {
    font-family: var(--hq-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hq-text);
    margin-top: 1.5rem;
  }
  .hq-post-content ul, .hq-post-content ol { padding-left: 1.5rem; }
  .hq-post-content li + li { margin-top: 0.5rem; }
  .hq-post-content ul { list-style: none; padding-left: 0; }
  .hq-post-content ul > li {
    position: relative;
    padding-left: 1.5rem;
  }
  .hq-post-content ul > li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.72em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hq-accent);
  }
  .hq-post-content strong { color: var(--hq-brand); }
  .hq-post-content img { border-radius: var(--hq-radius-md); }
  .hq-post-content blockquote {
    padding: 1rem 1.25rem;
    background: var(--hq-surface-sunken);
    border-left: 3px solid var(--hq-accent);
    border-radius: 0 var(--hq-radius-sm) var(--hq-radius-sm) 0;
    font-style: italic;
    color: var(--hq-text-muted);
  }
  .hq-post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }
  .hq-post-content :is(th, td) {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--hq-border);
    text-align: left;
  }
  .hq-post-content th {
    background: var(--hq-surface-sunken);
    font-weight: 700;
    color: var(--hq-brand);
  }
  /* Wide tables scroll inside their own box instead of blowing out the page. */
  .hq-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Sidebar ───────────────────────────────────────────────────────────── */
  .hq-post-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
  .hq-widget {
    padding: 1.4rem;
    background: var(--hq-surface-sunken);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-lg);
  }
  .hq-widget h2, .hq-widget h3 {
    font-size: 1.1rem;
    color: var(--hq-brand);
    margin-bottom: 0.85rem;
  }
  .hq-widget p { color: var(--hq-text-muted); font-size: 0.9rem; }
  .hq-widget ul { display: flex; flex-direction: column; gap: 0.6rem; }
  .hq-widget li a { font-size: 0.9rem; }
  .hq-widget .hq-btn + .hq-btn { margin-top: 0.6rem; }

  /* ── Inline figures ────────────────────────────────────────────────────── */
  .hq-inline-figure {
    margin-block: 2rem;
    border-radius: var(--hq-radius-md);
    overflow: hidden;
    box-shadow: var(--hq-shadow-md);
  }
  .hq-inline-figure img { width: 100%; }
  .hq-inline-figure figcaption {
    padding: 0.5rem 0.9rem;
    background: var(--hq-surface-sunken);
    border-top: 1px solid var(--hq-border);
    color: var(--hq-text-subtle);
    font-size: 0.76rem;
  }

  /* ── Affiliate disclosure ──────────────────────────────────────────────── */
  .hq-disclosure {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.75rem;
    background: var(--hq-gold-50);
    border-left: 4px solid var(--hq-accent);
    border-radius: 0 var(--hq-radius-sm) var(--hq-radius-sm) 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--hq-text-muted);
  }
  .hq-disclosure .hq-icon { color: var(--hq-accent-text); margin-top: 0.15rem; }
  .hq-disclosure a { color: var(--hq-accent-text); }

  /* ── Booking card — replaces v1's separate Viator box + GYG box ────────── */
  .hq-booking {
    margin-block: 2.5rem;
    padding: 1.6rem;
    background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-700));
    border: 1px solid rgb(200 146 74 / 30%);
    border-radius: var(--hq-radius-lg);
    text-align: center;
    color: var(--hq-text-on-inverse);
  }
  .hq-booking h2, .hq-booking h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.5rem;
  }
  .hq-booking h2 .hq-icon, .hq-booking h3 .hq-icon { color: var(--hq-accent-on-inverse); }
  .hq-booking p {
    max-width: 34rem;
    margin: 0 auto 1.25rem;
    color: var(--hq-text-muted-on-inverse);
    font-size: 0.94rem;
  }
  .hq-booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }
  .hq-booking-actions .hq-btn { flex: 1 1 14rem; max-width: 20rem; }
  .hq-booking-note {
    margin-top: 0.9rem;
    font-size: 0.76rem;
    /* v1 shipped this at 30% white on navy = 2.55:1. */
    color: var(--hq-text-muted-on-inverse);
  }

  /* ── More things to do ─────────────────────────────────────────────────── */
  .hq-more-tours {
    margin-block: 2.25rem;
    padding: 1.5rem;
    background: var(--hq-surface-sunken);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-lg);
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
  .hq-more-tours h2, .hq-more-tours h3 { font-size: 1.35rem; margin-bottom: 0.25rem; }
  .hq-more-tours > p { color: var(--hq-text-muted); font-size: 0.92rem; margin-bottom: 1rem; }
  .hq-more-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.75rem;
  }
  /* 2026-08-22, deferred item 9: brought up to the same hover-lift +
     staggered-reveal language Phase 1 gave .hq-item, instead of the plain
     bordered box this shipped with — reuses existing tokens/JS only
     (initReveal() from Phase 0, same --hq-reveal-delay idiom as .hq-item). */
  .hq-more-tour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0.6rem;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-md);
    text-align: center;
    transition: transform var(--hq-duration-fast) ease, box-shadow var(--hq-duration-fast) ease;
  }
  .hq-more-tour:hover { transform: translateY(-3px); box-shadow: var(--hq-shadow-md); }
  .hq-more-tour-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--hq-gold-50);
  }
  .hq-more-tour-icon .hq-icon { color: var(--hq-accent-text); }
  .hq-more-tour-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--hq-text);
    min-height: 2.4em;
    display: flex;
    align-items: center;
  }
  /* Real .hq-btn/.hq-btn--viator/.hq-btn--gyg elements (same classes as the
     booking card and the roundup item-card CTAs), just scaled down to fit
     this compact grid — same colours, hover states and icon layout as
     everywhere else on the site, not a bespoke look. */
  .hq-more-tour-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
  .hq-more-tour-links .hq-btn {
    flex: 1 1 auto;
    padding: 0.4rem 0.75rem;
    font-size: 0.74rem;
  }

  /* ── FAQ — native <details>, so it works with JS disabled ───────────────── */
  .hq-faq { margin-block: 2.75rem; }
  .hq-faq-title { font-size: clamp(1.4rem, 3vw, 1.6rem); margin-bottom: 1.25rem; }
  .hq-faq-item {
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-sm);
    margin-bottom: 0.7rem;
    background: var(--hq-surface);
    overflow: hidden;
  }
  .hq-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--hq-text);
    cursor: pointer;
    list-style: none;
  }
  .hq-faq-item summary::-webkit-details-marker { display: none; }
  .hq-faq-item summary:hover { background: var(--hq-surface-sunken); }
  .hq-faq-item summary .hq-icon {
    color: var(--hq-accent-text);
    transition: transform var(--hq-duration-fast) ease;
  }
  .hq-faq-item[open] summary .hq-icon { transform: rotate(180deg); }
  .hq-faq-answer {
    padding: 0.9rem 1.15rem 1.1rem;
    border-top: 1px solid var(--hq-border);
    background: var(--hq-surface-sunken);
    color: var(--hq-text-muted);
    font-size: 0.94rem;
    line-height: 1.75;
  }

  /* ── Newsletter signup ─────────────────────────────────────────────────── */
  .hq-signup {
    margin-block: 3rem;
    padding: clamp(1.75rem, 5vw, 2.75rem);
    background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-700));
    border-radius: var(--hq-radius-xl);
    box-shadow: var(--hq-shadow-lg);
    text-align: center;
    color: var(--hq-text-on-inverse);
  }
  .hq-signup-title {
    font-family: var(--hq-font-heading);
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    font-weight: 700;
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.7rem;
  }
  .hq-signup-sub {
    max-width: 32rem;
    margin: 0 auto 1.5rem;
    color: var(--hq-text-muted-on-inverse);
    line-height: 1.7;
  }
  .hq-signup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 30rem;
    margin-inline: auto;
  }
  .hq-signup-input {
    flex: 1 1 14rem;
    padding: 0.85rem 1.2rem;
    /* A plain `border: none` white pill read as a generic, unbranded form
       control dropped into an otherwise fully gold/navy card. A gold ring in
       the same accent used for borders/rules elsewhere ties it back into the
       palette without needing a background tint (which would fight the
       typed text's contrast). */
    border: 2px solid var(--hq-accent);
    border-radius: var(--hq-radius-pill);
    background: var(--hq-surface);
    color: var(--hq-text);
    font-size: 1rem;
    transition: border-color var(--hq-duration-fast) ease, box-shadow var(--hq-duration-fast) ease;
  }
  .hq-signup-input::placeholder { color: var(--hq-text-subtle); }
  .hq-signup-input:hover { border-color: var(--hq-accent-solid); }
  .hq-signup-input:focus-visible {
    border-color: var(--hq-accent-solid);
    outline-color: var(--hq-focus-on-inverse);
    box-shadow: 0 0 0 4px rgb(200 146 74 / 25%);
  }
  .hq-signup .hq-btn { border-radius: var(--hq-radius-pill); padding-inline: 1.6rem; }
  .hq-signup-privacy {
    margin-top: 0.8rem;
    font-size: 0.78rem;
    color: var(--hq-text-muted-on-inverse);
  }
  .hq-signup-msg { margin-top: 0.9rem; font-weight: 600; font-size: 0.94rem; }
  .hq-signup-msg[data-state="ok"]    { color: #7fe0a8; }
  .hq-signup-msg[data-state="error"] { color: #ffb4ae; }
  /* Honeypot — off-screen, never display:none (bots skip hidden fields). */
  .hq-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
  }

  /* ── Sister-site cross-link (hq-sister-site.php) ───────────────────────── */
  .hq-sister-box {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-block: 1.75rem;
    padding: 1rem 1.25rem;
    background: var(--hq-gold-50);
    border: 1px solid var(--hq-gold-200);
    border-left: 4px solid var(--hq-accent);
    border-radius: 0 var(--hq-radius-md) var(--hq-radius-md) 0;
  }
  .hq-sister-box .hq-icon { color: var(--hq-accent-text); }
  .hq-sister-box p { margin: 0; color: var(--hq-text-muted); font-size: 0.95rem; }
  .hq-sister-box a { font-weight: 700; }

  /* ── Related posts ─────────────────────────────────────────────────────── */
  .hq-related {
    margin-top: 3rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
  }
  .hq-related h2 { font-size: 1.4rem; margin-bottom: 1.15rem; }
  .hq-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.15rem;
  }

  /* ── Archive ───────────────────────────────────────────────────────────── */
  .hq-archive-hero {
    background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-700), var(--hq-navy-500));
    padding: clamp(2.75rem, 7vw, 3.5rem) var(--hq-gutter) clamp(1.75rem, 4vw, 2.25rem);
    text-align: center;
  }
  .hq-archive-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.5rem;
  }
  .hq-archive-hero p { color: var(--hq-text-muted-on-inverse); }
  .hq-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3rem) var(--hq-gutter);
  }
  .hq-pagination {
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding: 0 var(--hq-gutter) 3rem;
    text-align: center;
  }
  .hq-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.6rem;
    margin: 0 0.15rem;
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-sm);
    text-decoration: none;
    color: var(--hq-text-muted);
  }
  .hq-pagination .page-numbers:hover { border-color: var(--hq-accent); }
  .hq-pagination .page-numbers.current {
    background: var(--hq-brand);
    border-color: var(--hq-brand);
    color: var(--hq-text-on-inverse);
  }

  /* ── Search form ───────────────────────────────────────────────────────── */
  .hq-search-form { display: flex; gap: 0.5rem; max-width: 26rem; margin-inline: auto; }
  .hq-search-form input[type="search"] {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-sm);
    background: var(--hq-surface);
  }

  /* ── Footer ────────────────────────────────────────────────────────────── */
  #hq-footer {
    background: var(--hq-surface-inverse);
    color: var(--hq-text-muted-on-inverse);
    padding: clamp(2.5rem, 6vw, 3.5rem) var(--hq-gutter) 1.25rem;
  }
  .hq-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 2rem;
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding-bottom: 2.5rem;
  }
  .hq-footer-brand { grid-column: span 1; }
  @media (min-width: 1024px) { .hq-footer-brand { grid-column: span 2; } }
  .hq-footer-logo {
    display: inline-block;
    font-family: var(--hq-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hq-text-on-inverse);
    margin-bottom: 0.7rem;
    text-decoration: none;
  }
  .hq-footer-logo span { color: var(--hq-accent-on-inverse); }
  .hq-footer-desc { max-width: 28rem; font-size: 0.92rem; line-height: 1.7; }
  .hq-footer-contact { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
  .hq-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hq-text-muted-on-inverse);
    text-decoration: none;
  }
  .hq-footer-contact a:hover { color: var(--hq-accent-on-inverse); }
  .hq-footer-contact .hq-icon { color: var(--hq-accent-on-inverse); }
  .hq-footer-col h2 {
    font-family: var(--hq-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hq-accent-on-inverse);
    margin-bottom: 1rem;
  }
  .hq-footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
  .hq-footer-col a {
    color: var(--hq-text-muted-on-inverse);
    font-size: 0.92rem;
    text-decoration: none;
  }
  .hq-footer-col a:hover { color: var(--hq-accent-on-inverse); }
  .hq-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    max-width: var(--hq-wide-width);
    margin-inline: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hq-border-inverse);
    font-size: 0.85rem;
  }
  .hq-footer-bottom a { color: var(--hq-text-muted-on-inverse); text-decoration: none; }
  .hq-footer-bottom a:hover { color: var(--hq-accent-on-inverse); }
  .hq-affiliate-note {
    max-width: var(--hq-wide-width);
    margin: 0.9rem auto 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hq-border-inverse);
    /* v1: rgba(255,255,255,.18) = 1.72:1, effectively invisible. */
    color: var(--hq-text-muted-on-inverse);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
  }

  /* ── Back to top ───────────────────────────────────────────────────────── */
  #hq-top-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--hq-brand);
    border: 2px solid var(--hq-accent);
    border-radius: 50%;
    color: var(--hq-text-on-inverse);
    cursor: pointer;
    box-shadow: var(--hq-shadow-md);
    transition: background var(--hq-duration-fast) ease;
  }
  #hq-top-btn.is-visible { display: flex; }
  #hq-top-btn:hover { background: var(--hq-accent-solid); border-color: var(--hq-accent-solid); }

  /* ── Cookie banner ─────────────────────────────────────────────────────── */
  #hq-cookie-banner {
    position: fixed;
    inset: auto 0 0;
    z-index: 9999;
    padding: 1rem var(--hq-gutter);
    background: rgb(7 15 30 / 97%);
    border-top: 2px solid rgb(200 146 74 / 35%);
    color: var(--hq-text-muted-on-inverse);
    font-size: 0.85rem;
    line-height: 1.6;
  }
  .hq-cookie-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    max-width: 56rem;
    margin-inline: auto;
  }
  .hq-cookie-inner p { flex: 1 1 16rem; margin: 0; }
  .hq-cookie-inner a { color: var(--hq-accent-on-inverse); }
  .hq-cookie-actions { display: flex; gap: 0.6rem; }

  /* ── 404 ───────────────────────────────────────────────────────────────── */
  .hq-404 {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: clamp(3rem, 8vw, 4rem) var(--hq-gutter);
    background: var(--hq-surface-sunken);
    text-align: center;
  }
  .hq-404-inner { max-width: 34rem; }
  .hq-404 .hq-icon--hero { color: var(--hq-accent); margin: 0 auto 1rem; }
  .hq-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
  .hq-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-pill);
    font-size: 0.82rem;
    color: var(--hq-text);
    text-decoration: none;
    transition: border-color var(--hq-duration-fast) ease;
  }
  .hq-chip:hover { border-color: var(--hq-accent); color: var(--hq-text); }
  .hq-chip .hq-icon { color: var(--hq-accent-text); }

  /* ══════════════════════════════════════════════════════════════════════
     ARTICLE TEMPLATE COMPONENTS
     Rendered by the shortcodes in inc/shortcodes.php. See
     mu-plugins/hq-data/article-templates.json for which template uses what.
     ══════════════════════════════════════════════════════════════════════ */

  /* Key facts / at-a-glance — destination, activity, seasonal */
  .hq-keyfacts {
    margin-block: 1.75rem;
    padding: 1.25rem 1.4rem;
    background: var(--hq-surface-sunken);
    border: 1px solid var(--hq-border);
    border-left: 4px solid var(--hq-accent);
    border-radius: 0 var(--hq-radius-md) var(--hq-radius-md) 0;
  }
  .hq-keyfacts-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--hq-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hq-accent-text);
    margin-bottom: 0.9rem;
  }
  .hq-keyfacts dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
  }
  .hq-keyfact { display: flex; gap: 0.6rem; align-items: flex-start; }
  .hq-keyfact .hq-icon { color: var(--hq-accent-text); margin-top: 0.15rem; }
  .hq-keyfact dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hq-text-subtle);
  }
  .hq-keyfact dd {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hq-text);
    line-height: 1.45;
  }
  /* Difficulty dot — reuses existing tokens only, no new colours. */
  .hq-diff-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
  }
  .hq-keyfact-diff--easy .hq-diff-dot        { background: var(--hq-success); }
  .hq-keyfact-diff--moderate .hq-diff-dot    { background: var(--hq-gold-400); }
  .hq-keyfact-diff--challenging .hq-diff-dot { background: var(--hq-gold-600); }
  .hq-keyfact-diff--expert .hq-diff-dot      { background: var(--hq-danger); }

  /* Table of contents */
  .hq-toc {
    margin-block: 1.75rem;
    padding: 1.15rem 1.35rem;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-md);
  }
  .hq-toc-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--hq-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hq-text-subtle);
    margin-bottom: 0.75rem;
  }
  .hq-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 0.45rem; padding: 0; }
  .hq-toc li { counter-increment: toc; }
  .hq-toc a {
    display: flex;
    gap: 0.6rem;
    font-size: 0.94rem;
    text-decoration: none;
    color: var(--hq-link);
  }
  .hq-toc a::before {
    content: counter(toc) ".";
    color: var(--hq-accent-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .hq-toc a:hover { text-decoration: underline; }

  /* Exactly one of the two instances is visible at a time — never both, never
     neither. Breakpoint matches .hq-post-layout's own switch to a two-column
     grid (main.css, ~line 899): below it the sidebar is normal-flow content
     stacked AFTER the article, so a reader needs the TOC where they actually
     are — near the top, inline. At/above it the sidebar goes sticky, so the
     TOC lives there instead and stays in view for the whole scroll. */
  .hq-toc--sidebar { display: none; }
  /* Hide the WRAPPER too, not just the .hq-toc--sidebar content inside it.
     Hiding only the inner element left .hq-widget--toc's own padding
     rendering as an empty rounded box above "Plan Your Santorini Trip" on
     any screen narrower than the sidebar breakpoint — the box has no content
     to size itself by once its one child is display:none, but padding alone
     still gives it visible height. */
  .hq-widget--toc { display: none; }
  @media (min-width: 1000px) {
    .hq-toc--inline  { display: none; }
    .hq-toc--sidebar { display: block; }
    .hq-widget--toc  { display: block; }
  }
  /* The sidebar copy sits inside a .hq-widget, which already supplies the
     box (background/border/padding/radius) shared with "Plan Your Santorini
     Trip" and "Latest Guides" — strip .hq-toc's own so the three widgets read
     as one consistent set, not a mismatched fourth wrapper nested inside. */
  .hq-widget--toc .hq-toc--sidebar {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  /* Verdict box — comparison template, answers the question above the fold */
  .hq-verdict {
    margin-block: 1.75rem;
    padding: 1.35rem 1.5rem;
    background: var(--hq-navy-50);
    border: 1px solid var(--hq-navy-200);
    border-radius: var(--hq-radius-md);
  }
  .hq-verdict-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: var(--hq-brand);
    margin-bottom: 0.6rem;
  }
  .hq-verdict-title .hq-icon { color: var(--hq-accent-text); }
  .hq-verdict p { color: var(--hq-text); font-size: 1rem; line-height: 1.7; }
  .hq-verdict p + p { margin-top: 0.6rem; }

  /* Comparison table */
  .hq-compare { margin-block: 1.75rem; }
  .hq-compare table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
  .hq-compare :is(th, td) {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--hq-border);
    text-align: left;
    vertical-align: top;
  }
  .hq-compare thead th {
    background: var(--hq-brand);
    color: var(--hq-text-on-inverse);
    font-family: var(--hq-font-heading);
    font-size: 1rem;
  }
  .hq-compare tbody th {
    background: var(--hq-surface-sunken);
    color: var(--hq-brand);
    font-weight: 700;
    white-space: nowrap;
  }
  .hq-compare tbody tr:nth-child(even) td { background: var(--hq-surface-sunken); }

  /* Pros / cons */
  .hq-proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin-block: 1.75rem;
  }
  .hq-proscons-col {
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-md);
    background: var(--hq-surface);
  }
  .hq-proscons-col h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--hq-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    padding: 0;
    border: none;
  }
  .hq-proscons--pros { border-top: 3px solid var(--hq-success); }
  .hq-proscons--cons { border-top: 3px solid var(--hq-danger); }
  .hq-proscons--pros h3 { color: var(--hq-success); }
  .hq-proscons--cons h3 { color: var(--hq-danger); }
  .hq-proscons ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
  .hq-proscons li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--hq-text-muted);
    padding: 0;
  }
  .hq-proscons li::before { content: none; }
  .hq-proscons--pros .hq-icon { color: var(--hq-success); margin-top: 0.2rem; }
  .hq-proscons--cons .hq-icon { color: var(--hq-danger); margin-top: 0.2rem; }

  /* Ranked item card — roundup template */
  .hq-item {
    position: relative;
    margin-block: 1.75rem;
    padding: 1.4rem 1.5rem;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-lg);
    box-shadow: var(--hq-shadow-sm);
    transition: transform var(--hq-duration-base) ease, box-shadow var(--hq-duration-base) ease;
  }
  .hq-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--hq-shadow-md);
  }
  .hq-item-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
  }
  .hq-item-rank {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    background: var(--hq-brand);
    color: var(--hq-text-on-inverse);
    border-radius: 50%;
    font-family: var(--hq-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* Top-3 ring — decorative box-shadow, not text, so --hq-accent-solid needs
     no separate contrast entry (it's the same token used for button fills). */
  .hq-item:nth-of-type(-n+3) .hq-item-rank {
    box-shadow: 0 0 0 3px var(--hq-surface), 0 0 0 4px var(--hq-accent-solid);
  }
  .hq-item-title {
    font-size: 1.25rem;
    color: var(--hq-brand);
    margin: 0;
    padding: 0;
    border: none;
  }
  .hq-item-tagline { color: var(--hq-text-subtle); font-size: 0.88rem; margin-top: 0.15rem; }
  .hq-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.2rem 0.65rem;
    background: var(--hq-accent-solid);
    color: var(--hq-text-on-inverse);
    border-radius: var(--hq-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .hq-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-bottom: 0.85rem;
    padding-block: 0.7rem;
    border-block: 1px solid var(--hq-border);
    font-size: 0.85rem;
    color: var(--hq-text-muted);
  }
  .hq-item-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .hq-item-meta .hq-icon { color: var(--hq-accent-text); }
  .hq-item-body { color: var(--hq-text); }
  .hq-item-body > * + * { margin-top: 0.75rem; }
  .hq-item-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
  .hq-item-actions .hq-btn { flex: 1 1 12rem; font-size: 0.86rem; padding-block: 0.7rem; }

  /* At-a-glance table — seasonal template */
  .hq-glance { margin-block: 1.75rem; }
  .hq-glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: 0.75rem;
  }
  .hq-glance-cell {
    padding: 1rem 0.85rem;
    background: var(--hq-surface-sunken);
    border: 1px solid var(--hq-border);
    border-radius: var(--hq-radius-md);
    text-align: center;
  }
  .hq-glance-cell .hq-icon { color: var(--hq-accent-text); margin: 0 auto 0.4rem; }
  .hq-glance-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hq-text-subtle);
    margin-bottom: 0.2rem;
  }
  .hq-glance-value {
    display: block;
    font-family: var(--hq-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hq-brand);
    line-height: 1.25;
  }
  /* Crowds/prices rank dot — same 5-stop idiom as the difficulty dot
     (.hq-keyfact-diff), reusing existing tokens only: green (best) through
     the gold ramp to red (busiest/priciest). */
  .hq-glance-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
  }
  .hq-glance-dot--1 { background: var(--hq-success); }
  .hq-glance-dot--2 { background: var(--hq-gold-300); }
  .hq-glance-dot--3 { background: var(--hq-gold-400); }
  .hq-glance-dot--4 { background: var(--hq-gold-600); }
  .hq-glance-dot--5 { background: var(--hq-danger); }
  /* "What's open" is a sentence, not a stat -- it doesn't belong inside the
     card grid pretending to be one more tile (2026-08-22 revision of the
     2026-08-21 fix, which only stopped the wrapping bug; this is the
     promised follow-up visual pass). It renders as its own quiet line below
     the grid instead, sharing the wrapper's fade-in but reading as a caption,
     not a 6th stat. */
  .hq-glance-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hq-border);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--hq-text);
  }
  .hq-glance-note .hq-icon { color: var(--hq-accent-text); margin-top: 0.2rem; flex-shrink: 0; }
  .hq-glance-note-label {
    font-weight: 700;
    color: var(--hq-text-subtle);
  }

  /* Trip-at-a-glance day strip — itinerary template, 2026-08-22 */
  .hq-itinerary { margin-block: 1.75rem; }
  .hq-itinerary-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--hq-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hq-text-subtle);
    margin-bottom: 0.6rem;
  }
  .hq-itinerary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 0.86rem;
    color: var(--hq-text-muted);
    margin: 0 0 0.9rem;
  }
  .hq-itinerary-meta strong { color: var(--hq-text); font-weight: 600; }
  .hq-itinerary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.85rem;
  }
  .hq-day-card {
    padding: 1.1rem 1.2rem;
    background: var(--hq-surface);
    border: 1px solid var(--hq-border);
    border-left: 3px solid var(--hq-accent-solid);
    border-radius: var(--hq-radius-md);
  }
  .hq-day-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hq-accent-text);
    margin-bottom: 0.4rem;
  }
  .hq-day-card-title {
    font-family: var(--hq-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hq-text);
    margin: 0 0 0.4rem;
    line-height: 1.3;
  }
  .hq-day-card-highlight {
    font-size: 0.9rem;
    color: var(--hq-text-muted);
    line-height: 1.5;
    margin: 0;
  }

  /* Callout — shared by several templates */
  .hq-callout {
    display: flex;
    gap: 0.85rem;
    margin-block: 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--hq-radius-md);
    border: 1px solid var(--hq-border);
    background: var(--hq-surface-sunken);
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .hq-callout .hq-icon { margin-top: 0.15rem; color: var(--hq-accent-text); }
  .hq-callout--warn { background: var(--hq-gold-50); border-color: var(--hq-gold-200); }
  .hq-callout--warn .hq-icon { color: var(--hq-accent-text); }
  .hq-callout-title { display: block; font-weight: 700; color: var(--hq-text); margin-bottom: 0.2rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═════════════════════════════════════════════════════════════════════════ */
@layer utilities {
  .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .screen-reader-text:focus {
    position: static !important;
    width: auto; height: auto;
    clip-path: none;
    white-space: normal;
  }

  .hq-stack > * + * { margin-top: var(--hq-stack-gap, 1rem); }
  .hq-center { text-align: center; }
  .hq-muted { color: var(--hq-text-muted); }
  .hq-subtle { color: var(--hq-text-subtle); }
  .hq-nowrap { white-space: nowrap; }
  .hq-mt-0 { margin-top: 0 !important; }

  /* WordPress core alignment classes */
  .alignleft  { float: left;  margin: 0.5rem 1.5rem 1rem 0; }
  .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
  .aligncenter { display: block; margin-inline: auto; }
  .alignwide  { max-width: var(--hq-wide-width); }
  .alignfull  { max-width: none; }
  .wp-caption-text { color: var(--hq-text-subtle); font-size: 0.8rem; }

  /* Scroll-reveal. The class is only added by JS when motion is allowed, so a
     no-JS or reduced-motion visitor never sees opacity:0 content. */
  .hq-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--hq-reveal-delay, 0ms); }
  .hq-reveal.is-visible { opacity: 1; transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   OVERRIDES — the only place !important is allowed to live
   ═════════════════════════════════════════════════════════════════════════ */
@layer overrides {
  /* Admin bar vs the fixed nav. backdrop-filter creates a stacking context, so
     the bar needs an explicit z-index to stay on top. */
  .admin-bar #hq-nav { top: 32px; }
  .admin-bar .hq-nav-mobile { top: calc(var(--hq-nav-height) + 32px); }
  @media screen and (max-width: 782px) {
    .admin-bar #hq-nav { top: 46px; }
    .admin-bar .hq-nav-mobile { top: calc(var(--hq-nav-height) + 46px); }
  }
  #wpadminbar { z-index: 100000; }

  /* Prevent background scroll while the mobile menu is open. */
  body.hq-nav-open { overflow: hidden; }
}