/* css/article-refresh.css — refresh P3: typography bridge for the blog tree.
   Loaded AFTER the legacy stack on blog pages only. Remaps the legacy font
   tokens onto the refresh faces (Newsreader/Hanken Grotesk) so the whole
   legacy component system flips register without touching content markup.
   (08 Article template is REFERENTIAL for inner content; binding aspects
   here are faces, heading weight, and reading measure.) */

:root {
  --font-display: var(--font-display-editorial);
  --font-heading: var(--font-display-editorial);
  --font-body: var(--font-body-grotesk);
}

/* Newsreader is loaded at 400/500/600 — legacy 700/800 headings would render
   faux-bold. Editorial register = 500 with tight tracking. */
h1, h2, h3, h4,
.article-title, .card__title, .section__title {
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Reading measure + body rhythm inside articles (08 template: 17px/1.75).
   max-width guards full-width containers (About's essay ran ~1360px wide —
   walkthrough 2026-07-10); article containers are already narrower. */
.article-content p,
.content-block p {
  font-size: 17px;
  line-height: 1.75;
  max-width: 75ch;
}

/* Links in running text take the sage register. */
.article-content a:not(.btn),
.content-block a:not(.btn) {
  color: var(--color-primary-dark);
}

/* Legacy hero + article section paddings stack to ~350px of dead air —
   tighten the seam without touching the section system globally. */
.article-hero { padding-bottom: 28px; }
.article-hero + article.section { padding-top: 28px; }

/* ── Long-form reading flow (refinement 2026-07-10) ──────────────────────
   layout.css centers any `.section > .container > h2` (+ its next <p>,
   max-width 50ch) — a MARKETING section-header rule that leaked into every
   long-form article, centering Q&A headings and narrowing first answers.
   Long-form containers carry .content-page: restore the editorial reading
   flow there; marketing sections elsewhere keep their centered headers. */
.section > .container.content-page > h2,
.section > .container.content-page > h2 + p {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}
.section > .container.content-page > h2 + p {
  margin-bottom: var(--space-lg);
}

/* ── Unified Q&A register (matches svc-faq on services/calculator/invest) ─
   One visual language for every question-answer surface:
   left-aligned bordered rows, Hanken bold questions, 72ch answers. */

/* Blog long-form FAQ (h3+p pairs, wrapped in .faq-list by
   scripts/refresh-blog-wrappers or the faq-wrap pass) */
.content-page .faq-list {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--space-lg);
  padding-bottom: 6px;
}
.content-page .faq-list h3 {
  font-family: var(--font-body-grotesk);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0;
  color: var(--charcoal-900, var(--color-text));
  text-align: left;
  margin: 0;
  padding: 20px 4px 8px;
  border-top: 1px solid var(--color-border);
}
.content-page .faq-list h3:first-of-type { border-top: none; }
.content-page .faq-list p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--charcoal-600, var(--color-text-light));
  text-align: left;
  max-width: 72ch;
  margin: 0;
  padding: 0 4px 16px;
}

/* Legacy .faq-item <details> component (regulations, stay regionals,
   owner-faqs) — content.css gives it a boxed-card look in one block and a
   flat look in another; unify to the svc-faq row register. */
.faq-item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  overflow: visible;
}
.faq-item:first-of-type { border-top: 1px solid var(--color-border); }
.faq-item__question {
  font-family: var(--font-body-grotesk);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--charcoal-900, var(--color-text));
  padding: 20px 4px;
  background: none;
}
.faq-item__question::after {
  background-image: none;
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--color-primary);
  width: auto;
  height: auto;
  line-height: 1;
  transform: none;
}
.faq-item[open] .faq-item__question::after {
  content: "\2212";
  transform: none;
}
.faq-item__answer,
.faq-item > div {
  padding: 0 4px 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--charcoal-600, var(--color-text-light));
  max-width: 72ch;
}
.faq-item__answer p:last-child { margin-bottom: 0; }

/* Bare <details> Q&A (stay regional traveler FAQs, owner-faqs post) — the
   same register. Classless only: form__details, faq-item, svc-faq__item and
   the nav's details all carry classes and keep their own styling. */
main details:not([class]) {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}
main details[open]:not([class]) {
  box-shadow: none;
  border-color: var(--color-border);
}
main details:not([class]) > summary:hover { background: transparent; }
main details:not([class]) > summary::after {
  background-image: none;
  width: auto;
  height: auto;
}
main details[open]:not([class]) > summary::after { transform: none; }
main details:not([class]):first-of-type { border-top: 1px solid var(--color-border); }
main details:not([class]) > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  font-family: var(--font-body-grotesk);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--charcoal-900, var(--color-text));
  text-align: left;
}
main details:not([class]) > summary::-webkit-details-marker { display: none; }
main details:not([class]) > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--color-primary);
  flex: none;
  line-height: 1;
}
main details[open]:not([class]) > summary::after { content: "\2212"; }
main details:not([class]) > :not(summary) {
  padding: 0 4px 22px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--charcoal-600, var(--color-text-light));
  max-width: 72ch;
  text-align: left;
}

/* Long-prose marketing sections (opt-in via .container--prose): the lede
   stays centered per layout.css; every later paragraph becomes a readable
   75ch left-aligned column instead of running the full container width
   (walkthrough 2026-07-10; used on locations/halifax "Born in Halifax"). */
.section > .container--prose > h2 ~ p ~ p {
  max-width: 75ch;
  margin-inline: auto;
  text-align: left;
}

/* FAQ section headings are LEFT-aligned universally (owner ruling
   2026-07-10) — including on marketing-layout pages whose other section
   headers stay centered. Specificity beats layout.css's
   `.section > .container > h2` centering. */
.section > .container > h2.faq-heading,
h2.faq-heading {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}