/* ==========================================================================
   Family Advice Centre , reading layer
   Loaded after style.css on hub pages and the long-form guides.

   Register: "accessible and ethical". The audience is adult sons and
   daughters reading 2,000 words about a parent they are worried about,
   often on a phone, often late at night. Every decision here favours
   legibility and calm over decoration.

   Nothing in this file changes page structure, so it degrades to the
   existing design if it fails to load.
   ========================================================================== */

:root {
  --fac-measure: 68ch;          /* 65 to 75 characters is the readable range */
  --fac-ink: #1a2129;           /* near-black, warmed slightly toward the brand */
  --fac-ink-soft: #4a5761;
  --fac-ink-faint: #7b8894;
  --fac-rule: #e6e3de;
  --fac-surface: #faf8f5;       /* warm paper, not clinical white */
  --fac-focus: #0b6ea8;         /* focus ring, distinct from the orange CTA */
  --fac-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Reading measure and rhythm
   -------------------------------------------------------------------------- */

.bp-body .container { max-width: 720px; }

.bp-content p,
.bp-content li {
  font-size: 1.0625rem;         /* 17px, comfortable without shouting */
  line-height: 1.75;
  color: var(--fac-ink-soft);
  max-width: var(--fac-measure);
}

.bp-content > p:first-of-type {
  font-size: 1.1875rem;         /* the opening paragraph carries the reader in */
  line-height: 1.7;
  color: var(--fac-ink);
}

.bp-content h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fac-ink);
  margin: 56px 0 14px;
  text-wrap: balance;
  scroll-margin-top: 96px;      /* so anchor jumps clear the sticky header */
}

/* A hairline above each section gives the eye a resting point on a long page. */
.bp-content h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--orange, #f48222);
  margin-bottom: 18px;
  border-radius: 2px;
}

.bp-content h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--fac-ink);
  margin: 32px 0 10px;
  scroll-margin-top: 96px;
}

.bp-content strong { color: var(--fac-ink); font-weight: 650; }

/* Links in running prose: underlined, because colour alone is not a signal. */
.bp-content p > a,
.bp-content li > a {
  color: #b35610;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms var(--fac-ease), text-decoration-color 180ms var(--fac-ease);
}
.bp-content p > a:hover,
.bp-content li > a:hover { color: #8f430a; text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   2. Contents panel
   -------------------------------------------------------------------------- */

.bp-content .toc {
  background: var(--fac-surface);
  border: 1px solid var(--fac-rule);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 40px;
}
.bp-content .toc h2 { margin: 0 0 12px; font-size: 0.7rem; letter-spacing: 0.14em; }
.bp-content .toc h2::before { display: none; }
.bp-content .toc ol { counter-reset: toc; list-style: none; padding: 0; margin: 0; }
.bp-content .toc ol li { counter-increment: toc; margin: 0; list-style: none; }
.bp-content .toc ol li a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 4px;              /* 40px+ tall, comfortable on a phone */
  min-height: 40px;
  font-size: 0.975rem;
  line-height: 1.4;
  color: var(--fac-ink-soft);
  text-decoration: none;
  border-radius: 7px;
  transition: background 160ms var(--fac-ease), color 160ms var(--fac-ease);
}
.bp-content .toc ol li a::before {
  content: counter(toc);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fac-ink-faint);
  min-width: 1.2em;
}
.bp-content .toc ol li a:hover { background: #fff; color: var(--fac-ink); }

/* On a wide screen the contents can follow the reader down the page. */
@media (min-width: 1320px) {
  /* Float the contents panel into the left margin.
     The offset is (panel width + gutter) and the breakpoint is the narrowest
     viewport where that fits beside the REAL container. Every page overrides
     .bp-body .container to 760px in a page-scoped <style> that loads after this
     file, so budgeting against fac.css's own 720px put the panel 15px off the
     left edge at 1280 and cut 24% of it at 1200. Derived: the container is
     centred, so its left edge sits at (100vw - 760px) / 2, which reaches 264px
     at 1288px wide. 1320 leaves a little air. */
  .bp-content .toc {
    position: sticky;
    top: 96px;
    float: left;
    width: 236px;
    margin: 0 0 24px -264px;
  }
}

/* --------------------------------------------------------------------------
   3. Callouts , a takeaway should not look like a disclaimer
   -------------------------------------------------------------------------- */

.bp-content .callout {
  background: var(--fac-surface);
  border: 1px solid var(--fac-rule);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 32px 0;
}
.bp-content .callout p { color: var(--fac-ink); max-width: none; }
.bp-content .callout strong:first-child { color: #b35610; }
.bp-content .callout ul { margin-bottom: 0; }
.bp-content .callout li { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   4. Hub index , the most important navigation on the page
   -------------------------------------------------------------------------- */

.fac-hub-index { margin: 48px 0; }
.fac-hub-index h2::before { display: none; }
.fac-hub-index > ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}
.fac-hub-index > ul li { list-style: none; margin: 0; }
.fac-hub-index > ul li a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 46px 16px 20px;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--fac-rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--fac-ink);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  position: relative;
  transition: border-color 180ms var(--fac-ease),
              box-shadow 180ms var(--fac-ease),
              transform 180ms var(--fac-ease);
}
.fac-hub-index > ul li a span {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--fac-ink-faint);
}
.fac-hub-index > ul li a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--fac-ink-faint);
  border-bottom: 2px solid var(--fac-ink-faint);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 180ms var(--fac-ease), border-color 180ms var(--fac-ease);
}
.fac-hub-index > ul li a:hover {
  border-color: var(--orange, #f48222);
  box-shadow: 0 4px 16px rgba(26, 33, 41, 0.07);
  transform: translateY(-1px);
}
.fac-hub-index > ul li a:hover::after {
  transform: translateY(-50%) rotate(-45deg) translate(2px, 2px);
  border-color: var(--orange, #f48222);
}

/* --------------------------------------------------------------------------
   5. Continue reading
   -------------------------------------------------------------------------- */

.related-card {
  transition: border-color 180ms var(--fac-ease),
              box-shadow 180ms var(--fac-ease),
              transform 180ms var(--fac-ease);
}
.related-card:hover { transform: translateY(-2px); }
.related-card h3 { line-height: 1.35; }

/* --------------------------------------------------------------------------
   6. Focus, touch targets, motion
   -------------------------------------------------------------------------- */

/* AAA-grade focus ring, visible against both the white body and the orange hero. */
.bp-content a:focus-visible,
.fac-hub-index a:focus-visible,
.related-card:focus-visible,
.back-link:focus-visible,
.fac-breadcrumb a:focus-visible {
  outline: 3px solid var(--fac-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fac-hub-index > ul li a,
  .fac-hub-index > ul li a::after,
  .related-card,
  .bp-content p > a,
  .bp-content .toc ol li a {
    transition: none;
  }
  .fac-hub-index > ul li a:hover,
  .related-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   7. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .bp-content > p:first-of-type { font-size: 1.125rem; }
  .bp-content h2 { margin-top: 44px; }
  .fac-hub-index > ul li a { padding: 15px 42px 15px 17px; }
  .bp-content .toc { padding: 18px 20px; }
}


/* ---------------------------------------------------------------------------
   Specificity guards.

   fac.css loads at line 43 of every page; the page-scoped <style> block opens
   at line 49 and re-declares several of the same selectors. On a tie the later
   sheet wins, so anything here that a page block also sets must carry more
   weight than a bare .bp-content descendant selector.
   --------------------------------------------------------------------------- */

/* The hub index is a list of cards, not prose. Without this it inherits the
   article list styling and paints disc markers in a 22px gutter. */
.bp-content .fac-hub-index > ul,
.fac-hub-index > ul {
  list-style: none;
  padding-left: 0;
  margin: 20px 0 0;
}
.bp-content .fac-hub-index > ul > li,
.fac-hub-index > ul > li {
  list-style: none;
  margin: 0;
}
.bp-content .fac-hub-index > ul > li::marker,
.fac-hub-index > ul > li::marker { content: none; }