/* =========================================================
   content.css — guides, FAQs, glossaries, breadcrumbs
   Reading pages. Everything takes its colours from the side
   theme tokens in base.css, so a wedding guide reads light and
   a property guide reads dark without separate rules.
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  margin-bottom: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.crumbs a { color: var(--fg-muted); border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.crumbs a:hover { color: var(--fg); border-color: var(--accent); }
.crumbs span[aria-hidden] { color: var(--fg-faint); }
.page-head .crumbs { justify-content: center; }
.page-head--left { text-align: left; }
.page-head--left h1 { margin-inline: 0; max-width: 20ch; }
.page-head--left p { margin-inline: 0; }
.page-head--left .crumbs { justify-content: flex-start; }

/* ---------- Article (guides) ---------- */
.article { padding-block: clamp(1rem, 3vw, 2rem) var(--section-y); background: var(--bg); color: var(--fg); }
.article__body { max-width: 68ch; }
.article__body > * + * { margin-top: 1.1rem; }
.article__body h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.2;
}
.article__body h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-top: 1.75rem; }
.article__body p, .article__body li { font-size: 1rem; line-height: 1.75; color: var(--fg); }
.article__body ul, .article__body ol { padding-left: 1.25rem; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: .4rem; }
.article__body li::marker { color: var(--accent); }
.article__body a { color: var(--fg); border-bottom: 1px solid var(--accent); }
.article__body a:hover { border-bottom-width: 2px; }
.article__body strong { font-weight: 600; }

.article__lead { font-size: var(--fs-lead) !important; line-height: 1.6 !important; font-weight: 300; }

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: .04em;
  color: var(--fg-muted);
}
.byline a { color: var(--fg-muted); border-bottom: 1px solid var(--line); }

/* The short answer up top: what an answer engine or a skimming reader should take away. */
.keyfacts {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
}
.keyfacts h2 {
  margin: 0 0 .75rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--font-body);
  font-size: 0.6875rem !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.keyfacts ul { margin: 0; }
.keyfacts li { font-size: .9375rem !important; }

.sources { font-size: .875rem; }
.sources li { font-size: .875rem !important; color: var(--fg-muted) !important; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap table { min-width: 480px; }
.table-wrap th, .table-wrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .9375rem; }
.table-wrap thead th { font-size: .625rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--line); }
.table-wrap td { font-variant-numeric: tabular-nums; }

/* ---------- Related / hub cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bg);
  color: var(--fg);
  transition: background .4s var(--ease);
}
.card:hover { background: var(--bg-alt); }
.card__kind { font-size: .625rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.card h2, .card h3 { font-size: 1.25rem; line-height: 1.25; }
.card p { font-size: .9375rem; color: var(--fg-muted); }
.card__go { margin-top: auto; padding-top: .5rem; font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.card__go::after { content: " \2192"; letter-spacing: 0; }

.related { margin-top: clamp(3rem, 6vw, 4.5rem); }
.related > h2 { border: 0 !important; padding: 0 !important; margin-bottom: 1.5rem !important; }

/* ---------- FAQ ---------- */
.faq { max-width: 72ch; }
.faq__group + .faq__group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq__group > h2 {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.faq__item { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.faq__item h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.3; margin-bottom: .75rem; }
.faq__item p, .faq__item li { font-size: 1rem; line-height: 1.75; color: var(--fg); }
.faq__item p + p { margin-top: .75rem; }
.faq__item a { border-bottom: 1px solid var(--accent); }

/* ---------- Glossary ---------- */
.glossary { max-width: 72ch; }
.glossary dt {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.375rem;
  scroll-margin-top: 110px;
}
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin-top: .5rem; font-size: 1rem; line-height: 1.75; color: var(--fg); }
.glossary dd a { border-bottom: 1px solid var(--accent); }
.glossary__index { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.glossary__index a { padding: .4rem .75rem; font-size: .75rem; border: 1px solid var(--line); color: var(--fg-muted); }
.glossary__index a:hover { color: var(--fg); border-color: var(--accent); }

/* ---------- Towns list ---------- */
.towns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.towns li { padding: .4rem .8rem; font-size: .8125rem; color: var(--fg-muted); border: 1px solid var(--line); }
@media (max-width: 600px) { .towns { gap: .375rem; } .towns li { padding: .3rem .55rem; font-size: .75rem; } }

/* ---------- Front door, below the fold ----------
   The splitter still fills the first screen on its own. This strip only
   appears on scroll: one paragraph of plain text and the routes into
   each side, for people who want more than two doors and for search. */
.front-more {
  background: var(--black);
  color: var(--ivory);
  border-top: 1px solid rgba(247, 245, 242, .12);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.front-more__intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.front-more__intro h2 { color: var(--ivory); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.front-more__intro p { margin-top: 1rem; color: rgba(247, 245, 242, .72); font-size: 1rem; line-height: 1.75; }
.front-more__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 900px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
@media (max-width: 700px) { .front-more__cols { grid-template-columns: 1fr; } }
.front-more__col h3 {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1rem;
}
.front-more__col li + li { margin-top: .6rem; }
.front-more__col a { color: rgba(247, 245, 242, .85); font-size: .9375rem; border-bottom: 1px solid rgba(247, 245, 242, .2); }
.front-more__col a:hover { color: var(--ivory); border-color: var(--taupe); }

/* ---------- Coverage blocks on the side homes and About ---------- */
.w-coverage, .about-area {
  max-width: 760px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  text-align: center;
}
.w-coverage h3, .about-area h3 { font-size: var(--fs-h3, 1.5rem); }
.w-coverage p, .about-area p { margin-top: 1rem; color: var(--fg-muted); }
.w-coverage .towns, .about-area .towns, .p-coverage + p + .towns { justify-content: center; }

.about-side__links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }

.p-more { margin-top: clamp(2rem, 4vw, 3rem); font-size: .9375rem; color: var(--fg-muted); text-align: center; }
.p-more a { color: var(--fg); border-bottom: 1px solid var(--accent); }
.p-more span { margin-inline: .35rem; color: var(--fg-faint); }

/* Guide titles are sentences, not slogans: smaller than the display h1. */
.page-head--left h1 { max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.12; }
@media (max-width: 600px) {
  .p-more { line-height: 2; }
  .p-more a { display: table; margin: .35rem auto 0; }
  .p-more span { display: none; }
}
/* The email address button on About is wider than a 320px screen at full letter-spacing. */
@media (max-width: 360px) { .cta-band .btn { max-width: 100%; padding-inline: 1.25rem; letter-spacing: .08em; } }