/* ==========================================================================
   Be Wise family look (October 2026) - Be Crime Wise guide pages
   (crime-wise-guides-england/ and crime-wise-guides-scotland/).
   Matches the restyled Be Crime Wise apps (bw-family-crime.css) and the
   bewiseapps.com home page: deep navy + coral, Newsreader headings, Public Sans text.
   APPEARANCE ONLY: colours, fonts, spacing and shapes. No wording or behaviour changes.
   Each page sets its folder's identifying colour with --bw-accent in <style id="bw-family-app">
   (used only for the line under the header, the line on top of the footer and
   the small mark in front of section labels).
   This file loads after each page's own inline <style>, so equal-specificity rules win.
   ========================================================================== */

:root{
  --bw-ink:#14213D;           /* deep navy: header, footer, panels */
  --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;    /* coral that reads on navy */
  --bw-mist:#EEF1F6;          /* page background */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-good:#2C5E8C;          /* "good / in force" colour: blue, never green */
  --bw-good-bg:#E7EFF8;
  --bw-tint:#F6F8FB;
  --bw-accent:#3D5A99;        /* overridden per folder */
  --bw-text:#2B3650;          /* body copy: navy-grey, comfortable on white and mist */

  /* Re-point the page's own design tokens at the family palette */
  --ink:#14213D; --ink-soft:#2B3650; --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:4px;
  --bw-card-r:8px;
}

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

/* ---------- Header: one navy block (apps strip, notice, masthead) with the folder colour line ---------- */
.bw-strip{ background:var(--bw-ink); font-family:var(--font-sans); }
.bw-appsbtn{ font-family:var(--font-sans); }
.bw-menu{ font-family:var(--font-sans); color:var(--bw-ink); border:1px solid var(--bw-rule); border-top:3px solid var(--bw-coral); border-radius:0 0 8px 8px; }

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

header.masthead{ background:var(--bw-ink); border-top:1px solid rgba(255,255,255,0.08); border-bottom:3px solid var(--bw-accent); }
.masthead-row{ max-width:760px; min-height:62px; }
.wordmark{ font-family:var(--font-serif); font-weight:600; font-size:1.22rem; letter-spacing:-0.005em; color:#FFFFFF; align-items:center; }
.wordmark:hover{ color:#FFFFFF; }
.wordmark span.juris,.juris{
  font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0;
  color:#FFFFFF; border:1px solid rgba(255,255,255,0.35); border-radius:4px; padding:2px 7px;
}
.masthead-links{ font-size:0.86rem; }
.masthead-links a{ color:rgba(255,255,255,0.8); font-weight:500; padding:4px 0; border-bottom:2px solid transparent; }
.masthead-links a:hover{ color:#FFFFFF; border-bottom-color:var(--bw-coral); }
.masthead-links a:last-child{ color:#FFFFFF; font-weight:600; }
@media(max-width:420px){ .masthead-links{ font-size:0.82rem; } }

/* ---------- Article column ---------- */
main{ max-width:760px; padding:30px 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 a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }

/* Section label: small folder-colour mark in front, as in the app */
.eyebrow{ color:var(--bw-steel); font-size:0.8rem; font-weight:600; letter-spacing:0.02em; text-transform:none; gap:10px; margin-bottom:10px; }
.eyebrow::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.eyebrow::after{ display:none; }

h1{ font-size:clamp(1.85rem,5.4vw,2.6rem); font-weight:500; line-height:1.1; letter-spacing:-0.02em; max-width:24ch; margin-bottom:0.45em; }
h2{ font-size:1.5rem; font-weight:500; line-height:1.2; margin-top:1.8em; margin-bottom:0.5em; }
h3{ line-height:1.3; }

.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-coral);
  border-radius:0 8px 8px 0; padding:18px 22px; margin:18px 0 10px;
}
.reviewed-line{ font-size:0.82rem; color:var(--bw-steel); line-height:1.55; margin-bottom:30px; }
.reviewed-line a{ color:var(--bw-good); }

/* Questions and answers: one white card each, comfortable reading measure */
.faq-item{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:var(--bw-card-r);
  padding:20px 24px 22px; margin:0 0 12px;
}
.faq-item:last-child{ border-bottom:1px solid var(--bw-rule); }
.faq-item h3{ font-size:1.22rem; font-weight:600; 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); max-width:70ch; margin-bottom:0.8em; }
.faq-item p:last-child{ margin-bottom:0; }
.faq-item ul.plain,.faq-item ul{ max-width:70ch; }

ul.plain li{ font-size:1rem; line-height:1.6; color:var(--bw-text); }
ul.plain li::marker{ color:var(--bw-coral-strong); }

/* ---------- Call-to-action panels ---------- */
.chat-cta{ background:var(--bw-ink); color:#FFFFFF; border-radius:var(--bw-card-r); padding:20px 24px; margin:34px 0; }
.chat-cta p{ color:rgba(255,255,255,0.84); font-size:0.94rem; line-height:1.55; }
.chat-cta a.btn,a.btn{
  background:var(--bw-coral-strong); color:#FFFFFF; border:1px solid var(--bw-coral-strong); border-radius:4px;
  font-family:var(--font-sans); font-weight:600; font-size:0.92rem; padding:12px 18px;
}
.chat-cta a.btn:hover,a.btn:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); color:#FFFFFF; }

.tool-cta{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink);
  border-radius:var(--bw-card-r); padding:16px 20px; margin:26px 0;
}
.tool-cta p{ font-size:0.94rem; color:var(--bw-text); }
.tool-cta a{ color:var(--bw-coral-strong); font-weight:600; font-size:0.94rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.tool-cta a:hover{ color:var(--bw-coral-hover); }

/* ---------- Official sources ---------- */
.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; font-weight:600; margin:0 0 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; }
.official-sources li::marker{ color:var(--bw-steel); }

/* ---------- Link grids (related guides, hubs, offences, glossary) ---------- */
.related h2{ font-size:1.25rem; }
.related-grid,.hub-grid{ gap:10px; }
.related-grid a,.hub-grid a{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour);
  border-radius:0 6px 6px 0; color:var(--bw-ink); font-weight:600; line-height:1.4;
}
.related-grid a{ font-size:0.9rem; padding:11px 14px; }
.hub-grid a{ font-size:0.95rem; padding:12px 15px; }
.related-grid a:hover,.hub-grid a:hover{ border-color:var(--bw-rule-strong); border-left-color:var(--bw-coral); color:var(--bw-ink); }
.related-grid a small,.hub-grid a small{ color:var(--bw-steel); font-weight:400; font-size:0.8rem; line-height:1.45; }

.hub-link{ margin:28px 0 8px; font-size:0.92rem; }
.hub-link,a.hub-link{ color:var(--bw-good); }

/* Every-question accordions on the hub */
details.qlist{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:var(--bw-card-r); padding:0 16px; margin:8px 0; }
details.qlist summary{ color:var(--bw-ink); font-weight:600; font-size:0.96rem; padding:13px 0; }
details.qlist summary::marker{ color:var(--bw-coral-strong); }
details.qlist[open] summary{ border-bottom:1px solid var(--bw-rule); margin-bottom:10px; }
details.qlist li{ font-size:0.9rem; line-height:1.5; margin-bottom:6px; }

/* ---------- Tables ---------- */
.glance,.data-table{
  border-collapse:separate; border-spacing:0; background:#FFFFFF;
  border:1px solid var(--bw-rule); border-radius:var(--bw-card-r); overflow:hidden;
}
.glance{ font-size:0.94rem; }
.glance th,.glance td,.data-table th,.data-table td{ border-bottom:1px solid var(--bw-rule); }
.glance tr:last-child th,.glance tr:last-child td,.data-table tr:last-child td{ border-bottom:none; }
.glance th{ background:var(--bw-tint); color:var(--bw-ink); font-family:var(--font-sans); font-weight:600; }
.glance td{ color:var(--bw-text); line-height:1.55; }
.data-table th{ background:var(--bw-ink); color:#FFFFFF; font-weight:600; border-bottom-color:var(--bw-ink); }
.data-table tbody th{ background:var(--bw-tint); color:var(--bw-ink); border-bottom-color:var(--bw-rule); border-right:1px solid var(--bw-rule); }
.data-table tbody tr:last-child th{ border-bottom:none; }
.data-table td{ color:var(--bw-text); }
.data-table tbody tr:nth-child(even) td{ background:#FAFBFD; }
@media(max-width:560px){
  .glance tr:last-child th{ border-bottom:none; }
  .glance th{ background:var(--bw-tint); }
}

/* Notes: quiet tinted panel (no cream) */
.note{
  color:var(--bw-steel); background:var(--bw-tint); border:1px solid var(--bw-rule);
  border-left:3px solid var(--bw-steel); border-radius:0 6px 6px 0; font-size:0.86rem; line-height:1.55;
}

/* Step-by-step stages (process and checker pages) */
.stage{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:16px 20px;
}
.stage h3{ font-size:1.15rem; }
.stage p{ font-size:0.96rem; line-height:1.62; }
.stage li{ font-size:0.94rem; line-height:1.55; color:var(--bw-text); }
.stage .lbl{ color:var(--bw-coral-strong); font-size:0.72rem; letter-spacing:0.06em; }

/* ---------- Recent changes ---------- */
.change{ border-bottom:1px solid var(--bw-rule); padding:16px 0; }
.change .date{ color:var(--bw-coral-strong); font-size:0.8rem; }
.change .status{ border-radius:4px; color:var(--bw-steel); border-color:var(--bw-rule-strong); background:#FFFFFF; }
.change .status.live{ background:var(--bw-good-bg); border-color:#BCD2E8; color:var(--bw-good); }   /* was green */
.change .status.soon{ background:#FCF1EC; border-color:#F2C9B8; color:#A63B19; }                 /* was amber */
.change h3{ font-size:1.12rem; margin:6px 0 4px; }
.change p{ font-size:0.96rem; line-height:1.62; }

/* ---------- Back / Back to Top ---------- */
.bw-bottom{ color:var(--bw-ink); font-family:var(--font-sans); }
.bw-bottom button{ font-family:var(--font-sans); }

/* ---------- Footer: navy with folder-colour line on top ---------- */
footer.site-footer{
  background:var(--bw-ink); color:rgba(255,255,255,0.72); font-family:var(--font-sans);
  border-top:3px solid var(--bw-accent); font-size:0.8rem; line-height:1.75; margin-top:28px;
}
footer.site-footer a{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer.site-footer a[style]{ color:#FFFFFF !important; text-decoration-color:var(--bw-coral) !important; }  /* inline "inherit" links */
footer.site-footer a:hover{ color:var(--bw-coral-soft); }
footer.site-footer a[style]:hover{ color:var(--bw-coral-soft) !important; }

/* ---------- Phones ---------- */
@media(max-width:600px){
  main{ padding:24px 16px 20px; }
  .masthead-row{ min-height:56px; }
  .wordmark{ font-size:1.12rem; }
  h2{ font-size:1.35rem; }
  .intro{ font-size:1rem; padding:16px 18px; }
  .faq-item{ padding:18px 18px 20px; }
  .faq-item h3{ font-size:1.14rem; }
  .chat-cta{ padding:18px 18px; }
  .official-sources{ padding:16px 18px; }
}

@media print{
  .disclaimer-bar,header.masthead,footer.site-footer{ background:#FFFFFF !important; color:#000 !important; }
  .wordmark,.masthead-links a{ color:#000 !important; }
}

/* ---------- App header on the guide pages (3 October 2026): logo, country switch, the app's links, 3-bar menu ---------- */
.masthead-row{ flex-wrap:nowrap; gap:10px; max-width:1100px; }
.masthead-links{ flex-wrap:nowrap; white-space:nowrap; }
.wordmark{ gap:9px; flex-shrink:0; }
.wm-logo{ display:inline-block; width:30px; height:30px; flex-shrink:0; background:url("/favicon.svg") center/contain no-repeat; }
.juris-dd{ position:relative; margin-right:auto; flex-shrink:0; }
.juris-dd summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-family:var(--font-sans); font-size:0.7rem; font-weight:600;
  color:#FFFFFF; border:1px solid rgba(255,255,255,0.35); border-radius:4px; padding:3px 7px; min-height:28px; }
.juris-dd summary::-webkit-details-marker{ display:none; }
.juris-dd summary::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:-3px 2px 0 4px; }
.juris-dd[open] summary,.juris-dd summary:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.6); }
.juris-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:300; width:min(260px,80vw); background:#FFFFFF; color:var(--ink); border:1px solid var(--rule);
  border-top:3px solid var(--bw-coral,#E4572E); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,0.18); padding:10px; font-family:var(--font-sans); }
.juris-pop-h{ font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate); margin:2px 4px 6px; }
.juris-opt{ display:block; padding:9px 8px; border-radius:4px; font-size:0.88rem; font-weight:600; color:var(--ink); text-decoration:none; }
.juris-opt.current::before{ content:"\2713\00a0"; }
a.juris-opt:hover{ background:#F1F3F7; }
.juris-pop p{ font-size:0.72rem; line-height:1.45; color:var(--slate); margin:6px 4px 2px; }
.masthead-links a:last-child{ color:rgba(255,255,255,0.8); font-weight:500; }
.masthead-row .bw-burger{ flex-shrink:0; }
@media(max-width:1040px){ .masthead-links{ display:none; } }
@media(max-width:600px){ .juris-pop{ position:fixed; left:16px; right:16px; top:auto; width:auto; } }