/* ==========================================================================
   Be Wise family look (October 2026) - Be Injury Wise guide pages
   Used by /injury-wise-guides-england/ and /injury-wise-guides-scotland/.
   Makes the FAQ hub, the topic FAQ pages, "How we check" and "Recent changes"
   match the restyled Be Injury Wise apps (bw-family-injury.css) and the
   bewiseapps.com home page: deep navy header and footer, coral accents,
   Newsreader headings, Public Sans text, white cards on a pale blue-grey page.
   APPEARANCE ONLY: no wording, links or behaviour are changed.
   Each folder sets its identifying colour with --bw-accent in the page's
   <style id="bw-family-app"> (England & Wales red, Scotland steel blue). It is
   used only for the line under the header, the line on top of the footer and
   the small mark in front of the section label.
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy: header, footer, headings */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* accents and focus */
  --bw-coral-strong:#C2461F; /* filled buttons with white text */
  --bw-coral-hover:#A63B19;
  --bw-coral-soft:#F4A58C;   /* highlights on navy */
  --bw-mist:#EEF1F6;         /* page background */
  --bw-wash:#F6F8FB;         /* quiet panels */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;        /* secondary text */
  --bw-text:#2F3B55;         /* long-form body text */
  --bw-info:#2C5E8C;         /* links / "good": blue, never green */
  --bw-accent:#3D5A99;       /* overridden per folder */
  --bw-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --bw-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Re-point the pages' own tokens at the family palette */
  --ink:#14213D; --ink-soft:#2F3B55; --paper:#EEF1F6; --paper-raised:#FFFFFF;
  --brass:#1B2A4A; --brass-dark:#C2461F; --slate:#56637A;
  --rule:#D9DFE8; --rule-strong:#C3CCD9; --focus:#2C5E8C;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:8px;
}

/* ---------- Base ---------- */
html, body{ background:var(--bw-mist); }
body{ font-family:var(--bw-sans); color:var(--bw-ink); line-height:1.65; }
h1, h2, h3, h4{ font-family:var(--bw-serif); color:var(--bw-ink); }
h1, h2{ font-weight:500; letter-spacing:-0.01em; }
h3, h4{ font-weight:600; letter-spacing:0; }
p{ color:var(--bw-text); }
a{ color:var(--bw-info); text-underline-offset:3px; }
main p a:hover, main li a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }

/* ---------- Be Wise Apps strip + disclaimer bar + masthead = one navy header ---------- */
.bw-strip{ background:var(--bw-ink); border-bottom:1px solid rgba(255,255,255,0.1); font-family:var(--bw-sans); }
.bw-appsbtn{ font-family:var(--bw-sans); }
@media (min-width:880px){ .bw-strip{ padding-left:max(12px, calc((100% - 840px) / 2)); } }

.disclaimer-bar{
  background:var(--bw-ink); color:rgba(255,255,255,0.78);
  font-size:0.8rem; line-height:1.45; padding:8px 20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.disclaimer-bar strong{ color:#FFFFFF; font-weight:600; }

header.masthead{
  background:var(--bw-ink); border-bottom:0;
  box-shadow:inset 0 -3px 0 var(--bw-accent);
  padding:0 20px 3px;
}
.masthead-row{ max-width:840px; height:auto; min-height:64px; padding:10px 0; gap:10px 18px; }
.wordmark{
  font-family:var(--bw-serif); font-weight:600; font-size:1.25rem; letter-spacing:-0.005em;
  color:#FFFFFF; align-items:center; gap:9px;
}
.wordmark::before{ content:""; width:28px; height:28px; flex-shrink:0; background:url("/favicon.svg") center/contain no-repeat; }
.wordmark span.juris{
  font-family:var(--bw-sans); color:#FFFFFF; font-size:0.7rem; font-weight:600; letter-spacing:0.01em;
  border:1px solid rgba(255,255,255,0.35); border-radius:4px; padding:2px 6px;
}
.masthead-links{ gap:4px 20px; font-size:0.86rem; }
.masthead-links a{ color:rgba(255,255,255,0.78); font-weight:500; padding:6px 0; }
.masthead-links a:hover{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:5px; }

/* ---------- Article column ---------- */
main{ max-width:740px; padding:40px 20px 24px; }
.breadcrumb{ font-size:0.8rem; color:var(--bw-steel); margin-bottom:20px; }
.breadcrumb a{ color:var(--bw-steel); text-decoration:underline; text-decoration-color:var(--bw-rule-strong); text-underline-offset:3px; }
.breadcrumb main p a:hover, main li a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }

/* Section label with the small identifying-colour mark */
.eyebrow{ color:var(--bw-steel); font-size:0.78rem; font-weight:600; letter-spacing:0.02em; margin-bottom:12px; }
.eyebrow::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.eyebrow::after{ background:var(--bw-rule); }

h1{ font-size:clamp(1.9rem,4.2vw,2.6rem); line-height:1.12; letter-spacing:-0.015em; max-width:26ch; margin-bottom:0.5em; }
main > h2{ font-size:1.5rem; line-height:1.25; margin:1.8em 0 0.45em; }
main > p{ font-size:1.02rem; line-height:1.7; max-width:68ch; }

.intro{
  font-size:1.06rem; line-height:1.65; color:var(--bw-text);
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:18px 22px; margin:18px 0 12px; max-width:none;
}
.reviewed-line{ font-size:0.8rem; color:var(--bw-steel); margin-bottom:30px; }
.reviewed-line a, .intro a{ color:var(--bw-info); }

/* ---------- Questions and answers: white cards ---------- */
.faq-item{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px;
  padding:20px 22px; margin:0 0 12px;
}
.faq-item:last-child{ border-bottom:1px solid var(--bw-rule); }
.faq-item h3{ font-size:1.2rem; line-height:1.3; margin-bottom:8px; color:var(--bw-ink); }
.faq-item p{ font-size:1rem; line-height:1.68; color:var(--bw-text); margin-bottom:0; }
.faq-item p + p{ margin-top:0.8em; }
.faq-item h3:target, .faq-item:target{ scroll-margin-top:80px; }

/* ---------- FAQ hub topic cards ---------- */
.hub-grid{ gap:12px; margin-top:24px; }
.hub-card{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink);
  border-radius:8px; padding:16px 18px 17px; color:var(--bw-ink);
  transition:border-color .15s, box-shadow .15s;
}
.hub-card h3{ font-size:1.14rem; color:var(--bw-ink); margin-bottom:3px; }
.hub-card p{ font-size:0.84rem; color:var(--bw-steel); }
.hub-card:hover{ border-color:var(--bw-rule-strong); border-top-color:var(--bw-coral); box-shadow:0 6px 18px rgba(20,33,61,0.08); }

/* ---------- "Ask the app" call to action ---------- */
.chat-cta{
  background:var(--bw-ink); color:#FFFFFF; border-radius:8px; border-top:3px solid var(--bw-coral);
  padding:20px 22px; margin:34px 0;
}
.chat-cta p{ color:rgba(255,255,255,0.82); font-size:0.95rem; line-height:1.55; max-width:42ch; }
.chat-cta a.btn, a.btn{
  background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; font-weight:600; font-size:0.92rem;
  padding:11px 20px; text-decoration:none;
}
.chat-cta a.btn:hover, a.btn:hover{ background:var(--bw-coral-hover); color:#FFFFFF; }

/* ---------- Official sources box ---------- */
.official-sources{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:18px 22px; margin:30px 0;
}
.official-sources h2{ font-size:1.2rem; margin-bottom:4px; }
.official-sources p.os-intro{ font-size:0.86rem; color:var(--bw-steel); }
.official-sources li{ font-size:0.92rem; line-height:1.55; color:var(--bw-text); }
.official-sources li::marker{ color:var(--bw-steel); }

/* ---------- Related topics ---------- */
.related{ margin:34px 0; }
.related h2{ font-size:1.3rem; margin-bottom:12px; }
.related-grid a{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour);
  border-radius:0 6px 6px 0; padding:11px 14px; font-size:0.9rem; font-weight:500; color:var(--bw-ink);
}
.related-grid a:hover{ border-color:var(--bw-rule-strong); border-left-color:var(--bw-coral); background:var(--bw-wash); color:var(--bw-ink); }

.hub-link{
  display:table; margin:30px auto 8px; font-size:0.9rem; font-weight:600; color:var(--bw-ink);
  text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:4px;
}
.hub-link:hover{ color:var(--bw-coral-hover); }

/* ---------- Footer: navy with the identifying-colour line on top ---------- */
footer.site-footer{
  background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent);
  padding:26px 20px 24px; margin-top:44px; font-size:0.8rem; line-height:1.7;
}
footer.site-footer a, footer.site-footer a[style]{
  color:#FFFFFF !important; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.4) !important; text-underline-offset:3px;
}
footer.site-footer a:hover{ text-decoration-color:var(--bw-coral) !important; }

/* ---------- Shared Be Wise pieces (bottom links and 3-bar menu) ---------- */
.bw-bottom{ color:var(--bw-ink); }
.bw-bottom button{ font-family:var(--bw-sans); color:var(--bw-steel); opacity:1; }
.bw-bottom button:hover, .bw-bottom button:focus-visible{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
.bw-menu{ font-family:var(--bw-sans); border-radius:8px; border-color:var(--bw-rule); box-shadow:0 16px 36px rgba(10,18,36,0.22); }
.bw-menu a, .bw-menu button{ color:var(--bw-ink) !important; border-radius:4px; }
.bw-menu a:hover, .bw-menu button:hover, .bw-menu a:focus-visible, .bw-menu button:focus-visible{ background:var(--bw-mist); box-shadow:inset 3px 0 0 var(--bw-coral); }
.bw-menu .bw-sep{ background:var(--bw-rule); }

/* ---------- Phones ---------- */
@media (max-width:600px){
  header.masthead{ padding:0 16px 3px; }
  .masthead-row{ padding:10px 0 8px; min-height:0; }
  .wordmark{ font-size:1.15rem; }
  .masthead-links{ width:100%; gap:2px 18px; }
  main{ padding:28px 16px 20px; }
  h1{ font-size:1.85rem; }
  .intro{ padding:15px 16px; font-size:1.02rem; }
  .faq-item{ padding:16px 16px 17px; }
  .faq-item h3{ font-size:1.12rem; }
  .chat-cta{ padding:18px; }
  .official-sources{ padding:16px; }
}

@media print{
  .disclaimer-bar, header.masthead, footer.site-footer{ background:none; color:#000; box-shadow:none; border:0; }
  .wordmark, .masthead-links a{ color:#000; }
  .chat-cta{ display:none; }
}