/* aeo-design.css — the design system for the custom (non-mirrored) pages.
   Loaded sitewide AFTER the mirrored Elementor stylesheet and aeo-overrides.css,
   and BEFORE Astro's per-page scoped styles, so a template can still tweak
   locally without fighting this layer.

   Why the `.page-main` prefix on component classes: the mirrored Elementor kit
   carries class-level rules (`.elementor-kit-514 a`, 0-2-0). A bare `.a-btn`
   (0-1-0) would lose to them; `.page-main .a-btn` matches their specificity and
   wins on source order. `.page-main` is SiteShell's <main>, which wraps every
   custom page, so the scope is exactly right.

   Tokens are prefixed `--u-` to stay clear of Elementor's `--e-global-*`. */

/* Design tokens live in /aeo-overrides.css (loaded first, and also injected into
   the mirrored WordPress pages) so the shared components can use them on both
   kinds of page. This file is only the component layer built on top of them. */

/* ── Layout ─────────────────────────────────────────────────────────────── */

.page-main .a-wrap { max-width: var(--u-page-w); margin: 0 auto; padding: 0 var(--u-4); }
.page-main .a-wrap--narrow { max-width: var(--u-narrow); }
.page-main .a-wrap--wide { max-width: var(--u-wide); }

.page-main .a-section { margin: 0 0 var(--u-6); }
.page-main .a-section--tight { margin-bottom: var(--u-5); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.page-main .a-crumb { font-size: var(--u-tiny); color: var(--u-faint); margin: 0 0 var(--u-3); }
.page-main .a-crumb a { color: var(--u-gold); text-decoration: none; }
.page-main .a-crumb a:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.page-main .a-hero { text-align: center; padding: var(--u-2) 0 var(--u-5); }
.page-main .a-hero--left { text-align: left; }
.page-main .a-eyebrow {
  color: var(--u-gold); font-size: var(--u-eyebrow); letter-spacing: 2.5px;
  text-transform: uppercase; font-weight: 600; margin: 0 0 var(--u-2);
}
.page-main .a-hero h1, .page-main .a-h1 {
  font-family: var(--u-serif); font-weight: 600; font-size: var(--u-h1);
  line-height: 1.15; color: var(--u-ink); margin: 0 0 var(--u-2);
}
.page-main .a-hero h1 em, .page-main .a-h1 em {
  color: var(--u-gold); font-style: italic; font-size: .62em; display: inline-block;
}
.page-main .a-dek {
  color: var(--u-muted); font-size: 1.1rem; line-height: 1.55;
  margin: 0 auto var(--u-4); max-width: 600px;
}
.page-main .a-hero--left .a-dek { margin-left: 0; }
.page-main .a-rating { color: var(--u-gold-deep); font-weight: 600; margin: 0 0 var(--u-3); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.page-main .a-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                     /* tap target */
  background: var(--u-gold); color: #111;
  padding: .7rem 1.5rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; text-transform: uppercase;
  letter-spacing: .5px; font-size: .8rem; border: 1px solid transparent;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.page-main .a-btn:hover { background: var(--u-gold-hover); color: #111; }
.page-main .a-btn:active { transform: translateY(1px); }
.page-main .a-btn--ghost { background: var(--u-surface); color: #5a4a2a; border-color: #e3d4b5; }
.page-main .a-btn--ghost:hover { background: #fdfaf3; border-color: var(--u-gold); color: #5a4a2a; }
.page-main .a-btn--onDark { background: var(--u-gold); color: #111; }
.page-main .a-btn--onDark:hover { background: #d0b076; }
.page-main .a-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.page-main .a-hero--left .a-btns { justify-content: flex-start; }

/* Text links that act as navigation ("Read the guide →") */
.page-main .a-links { display: flex; flex-wrap: wrap; gap: var(--u-4); margin: 0 0 var(--u-3); }
.page-main .a-links a, .page-main .a-textlink {
  color: var(--u-gold); font-weight: 600; text-decoration: none; font-size: var(--u-small);
}
.page-main .a-links a:hover, .page-main .a-textlink:hover { color: var(--u-gold-hover); text-decoration: underline; }
.page-main .a-back { margin: var(--u-3) 0 0; }
.page-main .a-back a { color: var(--u-gold); text-decoration: none; font-size: .88rem; }

/* Visible keyboard focus everywhere in the custom pages. */
.page-main a:focus-visible, .page-main button:focus-visible, .page-main [tabindex]:focus-visible {
  outline: 2px solid var(--u-gold); outline-offset: 2px; border-radius: 6px;
}

/* ── Prose ──────────────────────────────────────────────────────────────── */

.page-main .a-prose { font-size: var(--u-lead); line-height: 1.7; color: var(--u-body); }
.page-main .a-prose p { margin: 0 0 var(--u-3); }
.page-main .a-prose p:last-child { margin-bottom: 0; }
.page-main .a-prose a { color: var(--u-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.page-main .a-prose a:hover { color: var(--u-gold-hover); }
.page-main .a-prose ul, .page-main .a-prose ol { margin: 0 0 var(--u-3); padding-left: 1.2rem; line-height: 1.85; }

.page-main .a-h2 {
  font-family: var(--u-serif); font-weight: 600; font-size: var(--u-h2);
  color: var(--u-ink); line-height: 1.25; margin: 0 0 var(--u-2);
}
.page-main .a-h2--center { text-align: center; margin-bottom: var(--u-4); }
.page-main .a-h3 { font-family: var(--u-serif); font-weight: 600; font-size: var(--u-h3); color: var(--u-ink); margin: 0 0 var(--u-1); }

/* ── Panels (bordered / tinted / accented boxes) ────────────────────────── */

.page-main .a-panel {
  background: var(--u-surface); border: 1px solid var(--u-line);
  border-radius: var(--u-radius); padding: var(--u-4) 1.75rem; margin: 0 0 var(--u-5);
}
.page-main .a-panel > :last-child { margin-bottom: 0; }
.page-main .a-panel h2 { font-family: var(--u-serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 var(--u-2); }
.page-main .a-panel ul { margin: 0; padding-left: 1.2rem; line-height: 1.85; color: var(--u-body); }
.page-main .a-panel--tint { background: var(--u-tint); }
.page-main .a-panel--accent { border-left: 4px solid var(--u-gold); }
.page-main .a-panel--plain { border: none; background: var(--u-tint); }
/* :not(.a-btn) — a button inside a panel must keep its own colours, otherwise
   the gold link colour lands on the gold pill and the label disappears. */
.page-main .a-panel a:not(.a-btn) { color: var(--u-gold); text-decoration: none; font-weight: 600; }
.page-main .a-panel a:not(.a-btn):hover { color: var(--u-gold-hover); text-decoration: underline; }
.page-main .a-cols .a-panel { margin: 0; }

/* The AEO "answer box": the short, direct answer a search engine can lift. */
.page-main .a-answer {
  font-size: 1.22rem; line-height: 1.55; color: var(--u-ink); font-weight: 500;
  border-left: 4px solid var(--u-gold); padding: .4rem 0 .4rem 1.1rem;
  margin: var(--u-3) 0 var(--u-5);
}

.page-main .a-note {
  font-size: .85rem; color: var(--u-faint); background: var(--u-tint);
  border-radius: var(--u-radius-sm); padding: var(--u-3) 1.25rem; line-height: 1.55;
}

/* ── Grids and cards ────────────────────────────────────────────────────── */

.page-main .a-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-4) var(--u-6); margin: 0 0 var(--u-5); }
.page-main .a-cols h2 { font-family: var(--u-serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 var(--u-2); }
.page-main .a-cols p { color: var(--u-muted); line-height: 1.65; margin: 0; }
.page-main .a-cols ul { margin: 0; padding-left: 1.2rem; line-height: 1.8; color: var(--u-body); }

.page-main .a-grid {
  list-style: none; margin: 0 0 var(--u-5); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem;
}
.page-main .a-grid--tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.page-main .a-grid--wide { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }

.page-main .a-card {
  display: flex; flex-direction: column; background: var(--u-surface);
  border: 1px solid var(--u-line); border-radius: var(--u-radius);
  padding: 1.4rem; text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.page-main .a-card:hover { transform: translateY(-3px); box-shadow: var(--u-shadow-hover); border-color: #e0d3b6; }
.page-main .a-card h2, .page-main .a-card h3, .page-main .a-card strong {
  font-family: var(--u-serif); font-weight: 600; font-size: var(--u-h3);
  color: var(--u-ink); margin: 0 0 var(--u-1); display: block;
}
.page-main .a-card p, .page-main .a-card span {
  color: var(--u-muted); line-height: 1.55; margin: 0 0 var(--u-2); font-size: .92rem; flex: 1;
}
.page-main .a-card .a-more, .page-main .a-more {
  color: var(--u-gold); font-weight: 700; font-size: .82rem; flex: none; margin: 0;
}
/* Compact card = one bold link, no body copy (city lists, service lists). */
.page-main .a-card--compact {
  padding: var(--u-3) 1.25rem; font-weight: 600; font-size: var(--u-small); color: var(--u-ink);
}
.page-main .a-card--compact:hover { border-color: var(--u-gold); transform: translateY(-2px); box-shadow: var(--u-shadow); }
.page-main .a-card em { color: var(--u-gold); font-style: italic; font-size: .8em; }
/* Card whose top edge is an image: the padding moves inside. */
.page-main .a-card--media { padding: 0; overflow: hidden; }
/* Flat card: a tinted box that is not a link, so it never lifts on hover. */
.page-main .a-card--flat { background: var(--u-tint); border-color: transparent; }
.page-main .a-card--flat:hover { transform: none; box-shadow: none; border-color: transparent; }
/* Small uppercase label at the top of a card ("Winter", "Our home", "Aftercare") */
.page-main .a-tag {
  align-self: flex-start; text-transform: uppercase; letter-spacing: 1.4px;
  font-size: .64rem; font-weight: 700; color: var(--u-gold); margin: 0 0 var(--u-1);
  flex: none;
}
/* Hub pages: the grid runs to the page bottom, so give it a gutter. */
.page-main .a-hub { padding-bottom: var(--u-8); }

/* ── Chips ──────────────────────────────────────────────────────────────── */

.page-main .a-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 var(--u-3); padding: 0; list-style: none; }
.page-main .a-chips--left { justify-content: flex-start; }
.page-main .a-chips span, .page-main .a-chips a, .page-main .a-chip {
  font-size: var(--u-tiny); color: #5a4a2a; border: 1px solid #e3d4b5; background: var(--u-surface);
  padding: .38rem .85rem; border-radius: 999px; text-decoration: none; line-height: 1.4; display: inline-block;
}
.page-main .a-chips a:hover, .page-main a.a-chip:hover { border-color: var(--u-gold); background: #fdfaf3; }
.page-main .a-chips button, .page-main button.a-chip { cursor: pointer; font-family: inherit; }
.page-main .a-chips button:hover, .page-main button.a-chip:hover { border-color: var(--u-gold); background: #fdfaf3; }
/* Active filter chip: dark ink on gold. White on this gold is ~2.3:1 and fails
   contrast, so the selected state stays readable instead of just bright. */
.page-main .a-chips .is-active, .page-main .a-chip.is-active {
  background: var(--u-gold); color: #111; border-color: var(--u-gold); font-weight: 600;
}

/* ── Comparison table ───────────────────────────────────────────────────── */

.page-main .a-tablewrap { overflow-x: auto; margin: var(--u-5) 0; -webkit-overflow-scrolling: touch; }
.page-main .a-table {
  width: 100%; border-collapse: collapse; background: var(--u-surface);
  border-radius: var(--u-radius); overflow: hidden; box-shadow: var(--u-shadow);
}
.page-main .a-table th, .page-main .a-table td {
  padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--u-line-soft);
  font-size: .92rem; vertical-align: top;
}
.page-main .a-table thead th {
  background: var(--u-dark); color: #fff; font-family: var(--u-serif); font-weight: 600; font-size: 1.05rem;
}
.page-main .a-table tbody th { color: var(--u-gold); font-weight: 700; width: 130px; }
.page-main .a-table td { color: #444; }

/* ── Dark CTA band (the "book" block every page ends with) ──────────────── */

.page-main .a-cta {
  text-align: center; background: var(--u-dark); color: #fff;
  border-radius: var(--u-radius-lg); padding: var(--u-6);
  margin: var(--u-7) auto var(--u-8); max-width: var(--u-page-w);
}
.page-main .a-cta--narrow { max-width: var(--u-narrow); }
.page-main .a-cta--flush { margin-top: 0; }
.page-main .a-cta h2 { font-family: var(--u-serif); font-weight: 600; font-size: var(--u-h2); color: #fff; margin: 0 0 var(--u-2); }
.page-main .a-cta p { color: var(--u-dark-copy); line-height: 1.65; margin: 0 auto 1.25rem; max-width: 620px; }
.page-main .a-cta a:not(.a-btn) { color: #e8d5a8; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .page-main .a-cols { grid-template-columns: 1fr; gap: var(--u-4); }
  .page-main .a-cta { padding: var(--u-5) var(--u-4); margin: var(--u-6) auto var(--u-7); border-radius: var(--u-radius); }
  .page-main .a-wrap { padding: 0 1.15rem; }
  .page-main .a-btns { gap: .5rem; }
  .page-main .a-btn { width: 100%; }              /* full-width, thumb-friendly */
  .page-main .a-btns .a-btn { width: auto; flex: 1 1 100%; }
  .page-main .a-grid { grid-template-columns: 1fr; }
  .page-main .a-grid--tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Let the comparison table scroll instead of squeezing cells into 3-word
     columns — the wrapper already scrolls, the table just has to stay wide. */
  .page-main .a-table { min-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-main .a-card, .page-main .a-btn { transition: none; }
  .page-main .a-card:hover { transform: none; }
}