/* =================================================================
   doineedanadapter.com — Phase 2 stylesheet (Phase 7 uplift on top).
   Design language: Apple-blue accents, soft radial gradients, card
   surfaces with subtle shadows. BEM-ish class names. Work Sans is
   the site typeface; Caballeros orange/teal appears only at the
   parent-brand touchpoints (header CTA, footer, trip CTA).
   ================================================================= */

/* Work Sans — self-hosted variable font (weights 100–900).
   Fetched from Google Fonts CSS v2 as two subsets: latin and latin-ext.
   Two subsets keep country-name accents rendering without pulling in
   cyrillic / vietnamese we don't need. font-display:swap prevents FOIT. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public-assets/fonts/WorkSans-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public-assets/fonts/WorkSans-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand: #0a84ff;
  --brand-dark: #0a6ed6;
  --ink: #1f2937;
  --muted: #6b7280;
  --bg: #f6f9ff;
  --card: #ffffff;
  --surface-2: #fcfdff;  /* secondary card surface (verdict tiles, device buckets, trip recs) */
  --surface-3: #f5f9ff;  /* tertiary surface (country stats, trip rec accent) */
  --input-bg:  #ffffff;
  --input-border: #d0d7e2;
  --border: #e6edf7;
  --border-soft: #eef2f7;
  --bg-grad-1: #eaf2ff;
  --bg-grad-2: #eef1ff;

  --ok:   #12b981;
  --ok-bg:#e7f9f1;
  --warn: #ef4444;
  --warn-bg:#fee7e7;
  --amber:#f59e0b;
  --amber-bg:#fff5e5;

  --ring: rgba(10, 132, 255, 0.16);
  --shadow-card: 0 10px 30px rgba(2, 24, 98, 0.05);
  --shadow-lift: 0 14px 34px rgba(2, 24, 98, 0.10);

  --radius-card: 20px;
  --radius-el:   12px;

  /* Caballeros Vacations brand tokens. After several iterations the only
     active parent-brand surface is the footer "Book a free consultation"
     outlined button (--caballeros-orange + --caballeros-orange-dark for
     the text) and the "Caballeros Vacations" wordmark in the footer
     pitch (--caballeros-teal). The warm surface tokens (--warm-bg-1/2,
     --warm-border, --warm-ink) are kept defined for possible future use
     but are currently NOT applied anywhere visible. Removing them would
     only save a few bytes; leaving them means a future warm accent
     doesn't need to re-derive the palette. */
  --caballeros-orange:      #F4A329;
  --caballeros-orange-dark: #D88E1F;
  --caballeros-teal:        #023D35;
  --caballeros-teal-dark:   #012420;
  --warm-bg-1:              #FFF7EA;
  --warm-bg-2:              #FFEFD4;
  --warm-border:            #F4D9A8;
  --warm-ink:               #5C3A0F;
}

:root[data-theme="dark"] {
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --bg: #0a1828;
  --card: #111f33;
  --surface-2: #16263c;
  --surface-3: #14243c;
  --input-bg: #16263c;
  --input-border: #2a3a56;
  --border: #243652;
  --border-soft: #1c2a44;
  /* Phase 7D: warmer gradient anchors in dark mode so the page keeps some
     dimensionality instead of collapsing into a single near-black tone. */
  --bg-grad-1: #14263f;
  --bg-grad-2: #192842;

  --ok-bg:    #0e3a2c;
  --warn-bg:  #3b1a1a;
  --amber-bg: #3b2a10;

  --ring: rgba(10, 132, 255, 0.32);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.45);

  /* Caballeros tokens in dark mode: orange is unchanged (legible on dark);
     cream surfaces shift to warm-dark so the parent-brand moments still
     read as a warm island, not a washed-out patch. */
  --warm-bg-1:    #2a1f10;
  --warm-bg-2:    #342613;
  --warm-border:  #5a4418;
  --warm-ink:     #ffd591;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background:
    radial-gradient(900px 460px at 0% 0%,   var(--bg-grad-1) 0%, transparent 65%),
    radial-gradient(900px 460px at 100% 0%, var(--bg-grad-2) 0%, transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* Utilities -------------------------------------------------------- */
.container { width: min(1100px, 92%); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a { color: var(--brand); }

/* Skip-to-content link: invisible until focused with keyboard. */
.skip-link {
  position: absolute;
  top: -40px; left: 8px;
  background: var(--brand); color: #fff;
  padding: .55rem .9rem;
  border-radius: 8px;
  font-weight: 600; text-decoration: none;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 3px solid rgba(10,132,255,.35); }

/* Consistent focus ring for interactive elements. */
:where(a, button, select, [role="button"]):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: padding .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.header-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem;
  padding: .75rem 1rem;
}
.header-left { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 38px; width: auto; object-fit: contain; }
.site-header.is-scrolled .brand-logo { height: 30px; }
.header-center { text-align: center; display: flex; flex-direction: column; line-height: 1.3; }
.brand-name {
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.brand-sub {
  font-size: .9rem; color: var(--muted); margin-top: .15rem;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease, color .15s ease;
}
.brand-sub:hover { color: var(--ink); border-bottom-color: var(--muted); }
.header-right { display: flex; justify-content: flex-end; }
.cta-btn {
  background: var(--brand); color: #fff;
  padding: .65rem 1.1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
  white-space: nowrap; font-size: .95rem;
  border: 1px solid var(--brand);
}
.cta-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.cta-btn:active { transform: translateY(1px); }
/* Outline variant (used in header so it doesn't compete with in-page primary CTAs). */
.cta-btn--outline { background: transparent; color: var(--brand); }
.cta-btn--outline:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Caballeros variants — parent-brand orange. Two treatments:
   - filled (--caballeros): saturated pill, white on orange. Defined for
     possible future use but NOT currently applied anywhere on the site.
     A pill that loud on a utility tool dominated the page at every size
     we tried it.
   - outline (--caballeros-outline): transparent bg, orange border, dark-
     orange text. The only orange on the site — used on the footer
     "Book a free consultation" button. Reads as a secondary action, not
     a hero CTA. */
.cta-btn--caballeros {
  background: var(--caballeros-orange);
  color: #fff;
  border-color: var(--caballeros-orange);
}
.cta-btn--caballeros:hover {
  background: var(--caballeros-orange-dark);
  border-color: var(--caballeros-orange-dark);
  color: #fff;
}
.cta-btn--caballeros-outline {
  background: transparent;
  color: var(--caballeros-orange-dark);
  border-color: var(--caballeros-orange);
  padding: .55rem 1rem;
  font-size: .9rem;
}
.cta-btn--caballeros-outline:hover {
  background: var(--caballeros-orange);
  color: #fff;
  border-color: var(--caballeros-orange);
}
.cta-btn__short { display: none; }

/* Hero ------------------------------------------------------------- */
.hero { padding: 2rem 0 1rem; }
.hero-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.hero-card h1 {
  margin: 0 0 .5rem; font-weight: 800;
  font-size: clamp(1.55rem, 1rem + 2vw, 2.1rem);
  letter-spacing: -0.01em; line-height: 1.2;
}
.hero-card .lead { margin: 0 0 1.25rem; color: var(--muted); font-size: 1.05rem; }

/* Form controls ---------------------------------------------------- */
.check-form { margin: 0 0 1rem; }
.controls {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: .75rem; align-items: center;
}
select {
  width: 100%; max-width: 100%; min-width: 0;
  /* Vertical padding matches .btn-primary so the inline form reads as one
     row when the three controls sit side by side. */
  padding: 1rem 1rem;
  border: 1px solid var(--input-border); border-radius: var(--radius-el);
  font-size: 1rem; background: var(--input-bg); color: var(--ink);
  outline: none;
}
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
.btn-primary {
  padding: .95rem 1.15rem; border: none; border-radius: var(--radius-el);
  background: var(--brand); color: #fff; font-weight: 700;
  cursor: pointer; font-size: 1rem;
  transition: background .2s ease, transform .06s ease;
}
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:active { transform: translateY(1px); }
.form-error {
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid #fbcdcd; border-radius: var(--radius-el);
  padding: .55rem .75rem; margin-top: .6rem; font-size: .95rem;
}

/* Popular chips ---------------------------------------------------- */
.popular { margin: .6rem 0 1.2rem; }
.popular__title {
  font-weight: 700; color: var(--ink); margin-bottom: .45rem;
}
.popular__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 600px) {
  .popular__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .popular__chips .chip { text-align: center; }
}
.chip {
  display: inline-block; text-decoration: none;
  border: 1px solid #dbe7ff; background: #eef4ff;
  color: #243b7b;
  padding: .42rem .75rem; border-radius: 999px;
  font: inherit; cursor: pointer;
  transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.chip:hover { border-color: #c7d9ff; box-shadow: 0 4px 14px rgba(10,132,255,.15); }
.chip:active { transform: translateY(1px); }

/* Reference chart (no-verdict state) ------------------------------- */
.reference { margin-top: 1.25rem; }
.reference__heading { margin: 0 0 .35rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.reference__lede    { margin: 0 0 .75rem; color: var(--muted); }
.reference__img {
  width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-el);
  background: #fff; box-shadow: 0 6px 20px rgba(10,132,255,.08);
}

/* Verdict block ---------------------------------------------------- */
.verdict { margin-top: 1.25rem; }
.verdict__heading {
  margin: 0 0 .75rem; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--muted); font-weight: 600;
}
.verdict__pair { color: var(--ink); font-weight: 800; }

.verdict__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.verdict-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-el);
  padding: 1rem 1.1rem;
  background: var(--surface-2);
}
.verdict-tile__head {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: .4rem;
}
.verdict-tile__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
  background: var(--surface-3);
}
.verdict-tile__kicker {
  text-transform: uppercase; letter-spacing: .05em;
  font-size: .72rem; color: var(--muted); font-weight: 700;
}
.verdict-tile__label {
  font-size: 1.375rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: .1rem;
}
@media (max-width: 600px) {
  .verdict-tile__label { font-size: 1.25rem; }
}
.verdict-tile__body {
  margin: .2rem 0 0; font-size: .95rem; color: #334155;
}
.verdict-tile--ok    { border-color: #bfecd9; background: var(--ok-bg); }
.verdict-tile--ok    .verdict-tile__icon { background: var(--ok);    color: #fff; }
.verdict-tile--amber { border-color: #fcd58b; background: var(--amber-bg); }
.verdict-tile--amber .verdict-tile__icon { background: var(--amber); color: #fff; }
.verdict-tile--warn  { border-color: #fbcdcd; background: var(--warn-bg); }
.verdict-tile--warn  .verdict-tile__icon { background: var(--warn);  color: #fff; }

/* Phase 7D: subtle entrance animation on the verdict tiles. The verdict is
   the payoff of the whole page — a 200ms fade + 6px Y translate, staggered
   100ms between the two tiles, makes the answer feel arrived-at rather
   than just rendered. Respects prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .verdict-tile {
    animation: verdict-tile-in .28s cubic-bezier(.2, .7, .2, 1) both;
  }
  .verdict-tile:nth-child(2) { animation-delay: .09s; }
  @keyframes verdict-tile-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Plug visual row inside verdict */
.verdict__plug-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem; align-items: center;
  padding: 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-el); background: #fff;
}
.verdict__plug-col { text-align: center; }
.verdict__plug-col-label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--muted); margin-bottom: .45rem;
}
.verdict__plugs {
  display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .45rem;
}
.verdict__plug-col-meta { color: var(--muted); font-size: .9rem; }
.verdict__arrow {
  font-size: 1.6rem; color: var(--brand);
  align-self: center;
}
.verdict__note {
  margin-top: .9rem; padding: .7rem .85rem;
  border-radius: var(--radius-el);
  background: #fff7e6; border: 1px solid #fde3ad;
  color: #664400; font-size: .95rem;
}

/* Plug visual component ------------------------------------------- */
.plug-visual {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .35rem; margin: 0; color: var(--brand);
}
.plug-visual__svg { width: 64px; height: 64px; }
.plug-visual--sm .plug-visual__svg { width: 40px; height: 40px; }
.plug-visual--lg .plug-visual__svg { width: 96px; height: 96px; }
.plug-visual__caption {
  font-size: .82rem; font-weight: 700; color: var(--ink);
}

/* Device-guidance panel ------------------------------------------- */
.device-section { padding: 1rem 0 1.5rem; }
.device-panel {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.device-panel__heading {
  margin: 0 0 .35rem; font-weight: 800; letter-spacing: -0.01em;
  font-size: 1.3rem;
}
.device-panel__lede { margin: 0 0 1rem; color: var(--muted); }
/* Phase 7: single column. The buckets are now an accordion (only one
   open at a time, driven by <details>) so three empty collapsed columns
   read as wasted space. Stacking them full-width makes the open bucket
   breathe and the closed two read as tidy rows. */
.device-panel__grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.device-bucket {
  border: 1px solid var(--border);
  border-radius: var(--radius-el);
  padding: 1rem 1.1rem; background: #fff;
}
.device-bucket > summary { list-style: none; cursor: pointer; }
.device-bucket > summary::-webkit-details-marker { display: none; }
.device-bucket__head {
  display: flex; align-items: center; gap: .55rem; margin-bottom: 0;
  cursor: pointer;
}
.device-bucket__icon { font-size: 1.4rem; }
.device-bucket__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.device-bucket__chev { display: inline-block; margin-left: auto; color: var(--muted); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.device-bucket__chev::before { content: '+'; }
.device-bucket[open] .device-bucket__chev::before { content: '\2212'; }
/* Phase 7D: accordion behavior on every viewport (previously mobile-only).
   The first bucket (the "safe" green one) stays open by default via the
   `open` attribute on that <details>; the other two tap-to-expand. */
.device-bucket:not([open]) .device-bucket__panel { display: none; }
.device-bucket[open] .device-bucket__head { margin-bottom: .5rem; }
.device-bucket__body { margin: 0 0 .6rem; color: #334155; font-size: .95rem; }
.device-bucket__items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.device-bucket__items li {
  font-size: .82rem; padding: .2rem .55rem;
  background: #f1f5fb; border-radius: 999px; color: #243b7b;
}
.device-bucket--ok    { border-color: #bfecd9; }
.device-bucket--amber { border-color: #fcd58b; }
.device-bucket--warn  { border-color: #fbcdcd; }

@media (max-width: 600px) {
  .device-bucket { padding: .75rem .9rem; }
}

/* Products grid --------------------------------------------------- */
.products-section { padding: .5rem 0 1.5rem; }
.products {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.products__heading {
  margin: 0 0 .35rem; font-weight: 800; letter-spacing: -0.01em;
  font-size: 1.25rem;
}
.products__disclosure {
  margin: 0 0 1rem; font-size: .85rem; color: var(--muted);
}
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.product-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #fcfdff; border: 1px solid var(--border);
  border-radius: var(--radius-el); padding: 1rem;
  transition: box-shadow .2s ease, transform .06s ease, border-color .2s ease;
}
.product-card:hover {
  border-color: #cfe0ff; box-shadow: var(--shadow-lift); transform: translateY(-1px);
}
.product-card__img-wrap {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; overflow: hidden;
  margin-bottom: .6rem;
}
.product-card__img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card__name { font-weight: 700; margin-bottom: .25rem; }
.product-card__tagline { color: var(--muted); font-size: .9rem; margin-bottom: .4rem; flex-grow: 1; }
.product-card__cta { color: var(--brand); font-weight: 700; font-size: .95rem; }

/* Region tips ----------------------------------------------------- */
.region-tips-section { padding: .5rem 0 1.5rem; }
.region-tips {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.region-tips__header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  margin-bottom: .75rem;
}
.region-tips__title { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.region-tips__sub { color: var(--muted); font-size: .95rem; }
.region-tips__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.region-card {
  background: #fcfdff; border: 1px solid var(--border);
  border-radius: var(--radius-el);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .06s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.region-card:hover {
  border-color: #cfe0ff; box-shadow: var(--shadow-lift); transform: translateY(-1px);
}
.region-card__img-wrap { aspect-ratio: 16 / 9; overflow: hidden; }
.region-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.region-card__body { padding: .8rem; display: flex; flex-direction: column; gap: .2rem; }
.region-card__tag {
  align-self: flex-start;
  font-size: .78rem; background: #eef4ff; border: 1px solid #dbe7ff;
  color: #243b7b; padding: .15rem .5rem; border-radius: 999px;
  margin-bottom: .2rem;
}
.region-card__name { font-weight: 700; }
.region-card__desc { color: #475569; font-size: .9rem; line-height: 1.45; }

/* Explainer content block ----------------------------------------- */
.content { padding: .5rem 0 2.5rem; }
.content-card {
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.content-card h2 { margin: 0 0 .5rem; font-weight: 800; letter-spacing: -0.01em; }
.content-card h3 { margin: 1rem 0 .35rem; font-weight: 700; font-size: 1.1rem; }
.content-card p  { margin: 0 0 .6rem; color: #334155; }

/* Editorial variant — on the home page, the explainer is SEO prose, not a
   peer of the decision tool. Strip the card shell so it reads as long-form
   reference below the action area. */
.content-card--editorial {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-left: 3px solid var(--brand);
  border-radius: 0;
  padding: .5rem 0 .5rem 1.5rem;
}
.content-card--editorial h2 { font-size: 1.3rem; }
.content-card--editorial h3 { color: var(--ink); }

/* Footer ---------------------------------------------------------- */
/* Masthead-style footer: the whole site is cool-blue from top to bottom,
   and the Caballeros handshake is a single small outlined button on the
   right. No warm surface, no hero headline — reads as an editorial
   colophon ("who made this") rather than a conversion block. */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--border-soft);
  margin-top: 2rem;
}
.footer-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 1rem;
}
.footer-pitch {
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.55;
  flex: 1 1 320px;
}
.footer-pitch strong { color: var(--caballeros-teal); font-weight: 700; }
.footer-brand {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-brand:hover { border-bottom-color: var(--caballeros-teal); }
[data-theme="dark"] .footer-brand:hover { border-bottom-color: var(--caballeros-orange); }
.footer-action { margin: 0; flex: 0 0 auto; }

.footer-meta-row {
  padding: .65rem 0 1rem;
  border-top: 1px solid var(--border-soft);
}
.footer-meta {
  margin: 0;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 600px) {
  .footer-masthead {
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
    padding: 1rem 0 .85rem;
  }
  .footer-pitch { flex: 1 1 auto; }
  .footer-action .cta-btn { display: block; text-align: center; }
}

/* Pair page: hero, breadcrumb, body layout ------------------------ */
.pair-hero {
  padding: 1.5rem 0 .5rem;
}
.breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: #4b5563; font-size: .95rem; margin-bottom: .5rem;
}
.breadcrumb a { color: #4b5563; text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.pair-hero__h1 {
  margin: 0 0 .25rem;
  font-weight: 800;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.3rem);
  letter-spacing: -0.015em; line-height: 1.15;
}
.pair-hero__meta {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.pair-hero__meta time { color: #4b5563; font-weight: 600; }

.pair-body { padding: 1rem 0; }
.pair-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
}
.pair-body__main {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.pair-body__aside {
  display: flex; flex-direction: column; gap: 1rem;
  position: sticky; top: calc(56px + 12px);
  align-self: start;
}
/* Only .verdict keeps the full card shell — it's the answer and earns the
   visual weight. Everything else in the main column is a section block that
   inherits the page surface and separates with vertical rhythm + a soft rule.
   See CLAUDE.md "Phase 7" for the rationale. */
.pair-body__main .verdict {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-top: 0;
}
.pair-body__main .device-panel,
.pair-body__main .pair-prose,
.pair-body__main .faq,
.pair-body__main .check-form--secondary {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 1.5rem 0 .25rem;
  box-shadow: none;
  margin-top: 0;
}

/* Pair-prose explainer -------------------------------------------- */
.pair-prose__h2 { margin: 0 0 .6rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; }
.pair-prose p { margin: 0 0 .75rem; color: #334155; }
.pair-prose p:last-child { margin-bottom: 0; }
.pair-prose__note {
  padding: .7rem .85rem;
  border-radius: var(--radius-el);
  background: #fff7e6; border: 1px solid #fde3ad;
  color: #664400;
}

/* FAQ accordion --------------------------------------------------- */
.faq__heading { margin: 0 0 .75rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-el);
  padding: .75rem 1rem;
  background: #fff;
  margin-bottom: .5rem;
}
.faq__item[open] { border-color: #cfe0ff; box-shadow: 0 6px 20px rgba(10,132,255,.06); }
.faq__q {
  cursor: pointer; font-weight: 700; color: var(--ink);
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; font-weight: 700; font-size: 1.3rem; color: var(--brand); }
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__a { padding-top: .5rem; color: #334155; }

/* Secondary form (on pair pages) ---------------------------------- */
.check-form--secondary { margin: 0; }
.check-form__heading {
  margin: 0 0 .75rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem;
}

/* Internal-link sidebar. Phase 7D: one card, three chip clusters — replaces
   three stacked cards. Chip styling inherits .chip so the home-page +
   pair-sidebar vocabulary stays consistent. */
.link-block {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-card);
}
.link-block__heading {
  margin: 0 0 .8rem;
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
}
.link-block__group + .link-block__group { margin-top: .9rem; }
.link-block__group-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--muted); margin-bottom: .4rem;
}
.link-block__chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.link-block__chips .chip { font-size: .85rem; padding: .3rem .6rem; }

/* Keep the legacy .link-block__list working in case any caller still uses
   it — but the chip layout is now the default. */
.link-block__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.link-block__list a {
  display: inline-block;
  color: var(--ink); text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  padding: .15rem 0;
}
.link-block__list a:hover { color: var(--brand); border-bottom-color: var(--brand); }

@media (max-width: 900px) {
  .pair-body__grid { grid-template-columns: 1fr; }
  .pair-body__aside { position: static; }
}

/* Trip planner ---------------------------------------------------- */
.trip-body { padding: 1rem 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.trip-form,
.trip-plan {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.trip-form__home,
.trip-form__stop {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  margin-bottom: .6rem;
}
.trip-form__label {
  font-weight: 700; color: var(--muted);
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}
.trip-form__stops { margin-top: .6rem; }
.trip-form__remove {
  background: transparent; border: 1px solid #d0d7e2;
  border-radius: 999px;
  width: 34px; height: 34px;
  font-size: 1.2rem; line-height: 1; color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.trip-form__remove:hover { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.trip-form__actions {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: space-between;
}
.btn-secondary {
  padding: .85rem 1.1rem;
  border: 1px solid #d0d7e2; border-radius: var(--radius-el);
  background: #fff; color: var(--ink); font-weight: 600;
  cursor: pointer; font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.btn-secondary:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

.trip-plan__heading {
  margin: 0 0 .6rem; font-weight: 800; letter-spacing: -0.01em;
  font-size: 1.2rem; line-height: 1.35;
}
.trip-plan__arrow { color: var(--brand); margin: 0 .15rem; }
.trip-plan__summary { margin: 0 0 1.1rem; color: #334155; }

/* Trip recommendations — a hierarchy, not a row of peers. The primary rec
   (adapter answer) spans full width; voltage guidance + power strip share
   a 2-column secondary row below. Matches the real importance of each. */
.trip-recs { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1.1rem; }
.trip-recs__secondary-row { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .trip-recs__secondary-row { grid-template-columns: 1fr 1fr; }
}
.trip-rec {
  border: 1px solid var(--border);
  border-radius: var(--radius-el);
  padding: 1rem 1.1rem;
  background: #fcfdff;
  display: flex; flex-direction: column; justify-content: space-between; gap: .6rem;
}
.trip-rec__headline { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.trip-rec__explain  { margin: 0; color: #334155; font-size: .95rem; }
.trip-rec__cta {
  align-self: flex-start;
  color: var(--brand); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.trip-rec__cta:hover { border-bottom-color: var(--brand); }

/* Priority variants — drive visual weight, not colour. */
.trip-rec--primary {
  padding: 1.35rem 1.6rem;
  border-width: 1px;
  box-shadow: var(--shadow-card);
}
.trip-rec--primary .trip-rec__headline { font-size: 1.2rem; }
.trip-rec--tertiary {
  padding: .85rem 1rem;
  background: transparent;
}
.trip-rec--tertiary .trip-rec__headline { font-size: .95rem; }
.trip-rec--tertiary .trip-rec__explain { font-size: .9rem; }

/* Kind variants — drive colour/surface. */
.trip-rec--universalAdapter { border-color: #cfe0ff; background: #f5f9ff; }
.trip-rec--typeAdapter      { border-color: #cfe0ff; background: #f5f9ff; }
.trip-rec--voltageGuidance  { border-color: #fcd58b; background: var(--amber-bg); }
.trip-rec--powerStrip       { border-color: var(--border); background: transparent; }

.trip-stops-table { margin-top: 1.25rem; }
.trip-stops-table__heading { margin: 0 0 .5rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.trip-stops-table table { width: 100%; border-collapse: collapse; }
.trip-stops-table th, .trip-stops-table td {
  text-align: left; padding: .55rem .6rem;
  border-bottom: 1px solid var(--border-soft); font-size: .95rem;
}
.trip-stops-table th { font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.trip-stops-table tr:last-child td { border-bottom: 0; }
.trip-stops-table a { color: var(--ink); text-decoration: none; font-weight: 600; }
.trip-stops-table a:hover { color: var(--brand); text-decoration: underline; }

.trip-badge {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid;
  margin-right: .25rem;
}
.trip-badge--ok    { background: var(--ok-bg);    border-color: #bfecd9; color: #0b5a3f; }
.trip-badge--amber { background: var(--amber-bg); border-color: #fcd58b; color: #7a4b07; }
.trip-badge--warn  { background: var(--warn-bg);  border-color: #fbcdcd; color: #7a1f1f; }

.trip-plan__share {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
  color: var(--muted); font-size: .9rem;
}
.trip-plan__share-url {
  display: inline-block; padding: .2rem .45rem;
  background: #f1f5fb; border: 1px solid var(--border-soft); border-radius: 6px;
  color: var(--ink); word-break: break-all;
}

@media (max-width: 600px) {
  .trip-form__home,
  .trip-form__stop {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
  }
  .trip-form__remove {
    justify-self: end;
    width: 44px; height: 44px;
  }
}

/* Trip planner: stops stack in one column at every width. Two-column was
   tried but made the form read as a grid of half-inputs rather than an
   ordered itinerary. Itinerary = linear list, always. */

/* Country landing page -------------------------------------------- */
.country-body {
  padding: 1rem 0 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.country-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.country-card__h2 {
  margin: 0 0 .5rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem;
}
.country-card__lede { margin: 0 0 1rem; color: var(--muted); }

.country-stats {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  background: #f5f9ff;
  border: 1px solid #dbe7ff;
  border-radius: var(--radius-el);
  margin-bottom: 1rem;
}
.country-stats__label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--muted); margin-bottom: .4rem;
}
.country-stats__value { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.country-stats__plug-row {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}

.country-overview p { margin: 0 0 .6rem; color: #334155; }
.country-overview__note {
  padding: .7rem .85rem;
  border-radius: var(--radius-el);
  background: #fff7e6; border: 1px solid #fde3ad;
  color: #664400;
}

.country-table { width: 100%; border-collapse: collapse; }
.country-table th, .country-table td {
  text-align: left; padding: .55rem .6rem;
  border-bottom: 1px solid var(--border-soft); font-size: .95rem;
}
.country-table th {
  font-weight: 700; color: var(--muted); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.country-table tr:last-child td { border-bottom: 0; }
.country-table a { color: var(--ink); text-decoration: none; font-weight: 600; }
.country-table a:hover { color: var(--brand); text-decoration: underline; }
.country-table__sub { font-size: .78rem; color: var(--muted); margin-top: .1rem; }

/* Card-per-row equivalent of the table, shown only on mobile. */
.country-cards { display: none; list-style: none; padding: 0; margin: 0; }
.country-card-row {
  display: block;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-el);
  padding: .85rem 1rem;
  background: #fff;
  margin-bottom: .6rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.country-card-row:last-child { margin-bottom: 0; }
.country-card-row:hover,
.country-card-row:focus-visible {
  border-color: #cfe0ff;
  box-shadow: 0 6px 18px rgba(10, 132, 255, .08);
}
.country-card-row__head {
  font-weight: 700; color: var(--ink); margin-bottom: .45rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.country-card-row__chev { color: var(--brand); font-weight: 700; }
.country-card-row__meta { font-size: .78rem; color: var(--muted); margin-bottom: .45rem; }
.country-card-row__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--muted);
  padding: .1rem 0;
}
.country-card-row__row + .country-card-row__row { margin-top: .25rem; }
.country-card-row__row-label {
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .72rem; font-weight: 700;
}

@media (max-width: 600px) {
  .country-stats { grid-template-columns: 1fr; }
  .country-table { display: none; }
  .country-cards { display: block; }
}

/* Small CTA block linking to /trip/ from home + pair pages. This is
   in-product navigation (not a parent-brand moment), so it uses the cool
   brand-blue palette — matches the rest of the tool. */
.trip-cta {
  background: linear-gradient(120deg, #eaf2ff 0%, #eef1ff 100%);
  border: 1px solid #dbe7ff;
  border-radius: var(--radius-el);
  padding: 1rem 1.2rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.trip-cta__text { margin: 0; color: #243b7b; font-size: .95rem; }
.trip-cta__text strong { color: #243b7b; }
.trip-cta__link {
  color: var(--brand); font-weight: 700; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.trip-cta__link:hover { border-bottom-color: var(--brand); }
.trip-cta__btn {
  flex-shrink: 0;
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.trip-cta__btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
@media (max-width: 600px) {
  .trip-cta { flex-direction: column; align-items: stretch; }
  .trip-cta__btn { text-align: center; }
}

/* Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .6rem;
    padding: .5rem .75rem;
    text-align: left;
  }
  .brand-logo { height: 28px; }
  .site-header.is-scrolled .brand-logo { height: 24px; }
  .header-center {
    text-align: left;
    align-items: flex-start;
    min-width: 0;
  }
  .brand-name {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .brand-sub { display: none; }
  .cta-btn {
    padding: .45rem .75rem;
    font-size: .85rem;
  }
  .cta-btn__long { display: none; }
  .cta-btn__short { display: inline; }

  .controls { grid-template-columns: 1fr; }
  .verdict__tiles { grid-template-columns: 1fr; }
  .verdict__plug-row { grid-template-columns: 1fr; }
  .verdict__arrow { transform: rotate(90deg); }
}

/* Very small viewports: hide the brand-name text entirely, logo is enough. */
@media (max-width: 420px) {
  .header-center { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .product-card, .region-card { transition: none; }
}

/* =================================================================
   Dark-mode overrides. Variables above handle chrome colors; this
   block catches the hand-tuned surfaces and accent tints that didn't
   go through the variable system. Scoped to [data-theme="dark"] on
   <html> — see the pre-paint script in views/layout.php that reads
   localStorage and sets the attribute. Default is light.
   ================================================================= */
[data-theme="dark"] a { color: #62b5ff; }
[data-theme="dark"] .verdict__note,
[data-theme="dark"] .pair-prose__note,
[data-theme="dark"] .country-overview__note {
  background: #3b2a10;
  border-color: #5a4418;
  color: #ffd591;
}
[data-theme="dark"] .chip {
  background: #16263c;
  border-color: #2d4064;
  color: #9fc6ff;
}
[data-theme="dark"] .chip:hover { border-color: #3d5680; box-shadow: 0 4px 14px rgba(10,132,255,.25); }
[data-theme="dark"] .region-card__tag { background: #16263c; border-color: #2d4064; color: #9fc6ff; }
[data-theme="dark"] .trip-badge--ok    { color: #9be8c6; }
[data-theme="dark"] .trip-badge--amber { color: #ffd591; }
[data-theme="dark"] .trip-badge--warn  { color: #ffb3b3; }
[data-theme="dark"] .verdict-tile--ok    { background: #0e3a2c; border-color: #1f6b4e; }
[data-theme="dark"] .verdict-tile--amber { background: #3b2a10; border-color: #7a5410; }
[data-theme="dark"] .verdict-tile--warn  { background: #3b1a1a; border-color: #7a2020; }
/* Any element still using hardcoded white/offwhite surfaces falls back
   to the dark card tone automatically. */
[data-theme="dark"] .verdict__plug-row,
[data-theme="dark"] .faq__item,
[data-theme="dark"] .device-bucket,
[data-theme="dark"] .products,
[data-theme="dark"] .region-tips,
[data-theme="dark"] .content-card,
[data-theme="dark"] .country-card,
[data-theme="dark"] .trip-form,
[data-theme="dark"] .trip-plan,
[data-theme="dark"] .check-form--secondary,
[data-theme="dark"] .pair-body__main .verdict,
[data-theme="dark"] .link-block,
[data-theme="dark"] .hero-card {
  background: var(--card);
}
/* Pair-page section blocks (demoted out of cards) inherit the page surface. */
[data-theme="dark"] .pair-body__main .device-panel,
[data-theme="dark"] .pair-body__main .pair-prose,
[data-theme="dark"] .pair-body__main .faq,
[data-theme="dark"] .pair-body__main .check-form--secondary,
[data-theme="dark"] .content-card--editorial {
  background: transparent;
  border-top-color: var(--border-soft);
}
[data-theme="dark"] .content-card--editorial { border-left-color: var(--brand); }
[data-theme="dark"] .product-card,
[data-theme="dark"] .region-card,
[data-theme="dark"] .trip-rec,
[data-theme="dark"] .country-card-row {
  background: var(--surface-2);
}
[data-theme="dark"] .product-card__img-wrap { background: var(--surface-3); }
[data-theme="dark"] .trip-rec--universalAdapter,
[data-theme="dark"] .trip-rec--typeAdapter { background: var(--surface-3); border-color: #2a4468; }
[data-theme="dark"] .country-stats { background: var(--surface-3); border-color: #2a4468; }
[data-theme="dark"] .trip-plan__share-url { background: var(--surface-3); border-color: var(--border-soft); }
[data-theme="dark"] .btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--input-border); }
[data-theme="dark"] .btn-secondary:hover { border-color: var(--brand); }
[data-theme="dark"] .trip-cta { background: linear-gradient(120deg, #16263c 0%, #1c2a44 100%); border-color: #2a4468; }
[data-theme="dark"] .trip-cta__text { color: #bcd4ff; }
[data-theme="dark"] .trip-cta__text strong { color: #e5e7eb; }
[data-theme="dark"] .trip-cta__link { color: #62b5ff; }
[data-theme="dark"] .trip-cta__link:hover { border-bottom-color: #62b5ff; }
[data-theme="dark"] .trip-cta__btn { background: var(--brand); color: #fff; border-color: var(--brand); }
[data-theme="dark"] .trip-cta__btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
[data-theme="dark"] .device-bucket__items li { background: var(--surface-3); color: #9fc6ff; }
[data-theme="dark"] .pair-prose p,
[data-theme="dark"] .verdict-tile__body,
[data-theme="dark"] .device-bucket__body,
[data-theme="dark"] .content-card p,
[data-theme="dark"] .region-card__desc,
[data-theme="dark"] .country-overview p,
[data-theme="dark"] .product-card__tagline,
[data-theme="dark"] .trip-rec__explain,
[data-theme="dark"] .trip-plan__summary { color: #c9d1dc; }
[data-theme="dark"] .verdict-tile__kicker { color: var(--muted); }
[data-theme="dark"] img.brand-logo,
[data-theme="dark"] img.reference__img { background: transparent; }
[data-theme="dark"] .site-header { background: rgba(17, 31, 51, 0.85); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(17, 31, 51, 0.95); }

/* Hardcoded light-mode body-copy colors scattered across the sheet.
   Lift them to a single readable tone in dark mode. */
[data-theme="dark"] .faq__a { color: #c9d1dc; }
[data-theme="dark"] .faq__q { color: #e5e7eb; }

/* Footer in dark mode: inherits the page bg (no warm surface). Hairlines
   follow --border-soft. "Caballeros" wordmark flips to the orange for
   legibility against the dark page. */
[data-theme="dark"] .site-footer { background: transparent; border-top-color: var(--border-soft); }
[data-theme="dark"] .footer-pitch { color: var(--ink); }
[data-theme="dark"] .footer-pitch strong { color: var(--caballeros-orange); }
[data-theme="dark"] .footer-meta-row { border-top-color: var(--border-soft); }
[data-theme="dark"] .footer-meta { color: var(--muted); }
[data-theme="dark"] .cta-btn--caballeros-outline {
  background: transparent;
  color: var(--caballeros-orange);
  border-color: var(--caballeros-orange);
}
[data-theme="dark"] .cta-btn--caballeros-outline:hover {
  background: var(--caballeros-orange);
  color: var(--caballeros-teal-dark);
  border-color: var(--caballeros-orange);
}

/* =================================================================
   Theme toggle button.
   ================================================================= */
/* Phase 7: ghost icon button — sits in the header as a native control rather
   than a bordered box. Avoids competing with the Caballeros CTA next to it. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--border-soft); color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle__icon--sun  { display: none; }
.theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle { color: var(--muted); }
[data-theme="dark"] .theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }