/* ==========================================================================
   Be Wise family look (October 2026) for the Be University Wise guide pages
   (/university-wise/ and its folders: Clearing, rankings, universities,
   cost of living, international, FAQs, how we rank, sources, recent changes).
   Matches the Be University Wise app (bw-family-claims-uni.css): navy header
   with the app's violet line, navy footer, Newsreader headings, Public Sans text.
   APPEARANCE ONLY: no wording, links or behaviour are changed.
   Loaded after university-wise-pages.css and clearing-tools.css, which it overrides.
   The app's identifying colour comes from --bw-accent (set on each page).
   ========================================================================== */
:root{
  --bw-ink:#14213D; --bw-harbour:#1B2A4A; --bw-coral:#E4572E; --bw-coral-strong:#C2461F;
  --bw-mist:#EEF1F6; --bw-rule:#D9DFE8; --bw-rule-strong:#C3CCD9; --bw-steel:#56637A;
  --bw-accent:#6B4FA0;
  --bw-tint:#F5F7FB;          /* very light navy wash for table heads and tool cards */
  --bw-good:#2C5E8C; --bw-good-bg:#E7EFF8;

  /* the guide pages' own tokens, re-pointed at the family palette */
  --ink:#14213D; --ink-soft:#3E4A63; --paper:#EEF1F6; --raised:#FFFFFF;
  --brass:#C2461F; --brass-dark:#A63B19; --brass-bg:#FCF1EC;
  --slate:#56637A; --rule:#D9DFE8; --rule-strong:#C3CCD9;
  --sage:#2C5E8C; --focus:#E4572E;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Page and article typography ---------- */
body{ background:var(--bw-mist); color:var(--ink); font-family:var(--sans); line-height:1.65; }
main.wrap, main .wrap{ max-width:1000px; }
:focus-visible{ outline:3px solid var(--bw-coral); outline-offset:2px; }
p, li{ max-width:70ch; }
h1, h2, h3, h4{ font-family:var(--serif); color:var(--ink); }
h1{ font-weight:500; font-size:clamp(1.95rem, 4.6vw, 2.7rem); line-height:1.12; letter-spacing:-0.018em; margin:.25em 0 .4em; }
h2{ font-weight:500; font-size:clamp(1.4rem, 2.6vw, 1.65rem); line-height:1.2; letter-spacing:-0.01em; margin:1.9em 0 .55em; }
h3{ font-weight:600; font-size:1.16rem; line-height:1.3; margin:1.4em 0 .4em; }
h4{ font-weight:600; font-size:1.02rem; }
main ul, main ol{ padding-left:1.25em; }
main li{ margin:.28em 0; }
main li::marker{ color:var(--bw-steel); }
strong, b{ font-weight:600; color:var(--ink); }

a{ color:var(--ink); text-decoration-color:rgba(194,70,31,0.55); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--bw-coral-strong); text-decoration-color:var(--bw-coral-strong); }

.crumbs{ font-size:.84rem; color:var(--bw-steel); margin:22px 0 0; }
.crumbs a{ color:var(--bw-steel); text-decoration-color:var(--bw-rule-strong); }
.crumbs a:hover{ color:var(--bw-coral-strong); }
.lede{ font-size:1.14rem; line-height:1.6; color:var(--ink-soft); }
.checked{ font-size:.84rem; color:var(--bw-steel); }
.muted{ color:var(--bw-steel); }
.small{ font-size:.92rem; }
.tiny{ font-size:.84rem; color:var(--bw-steel); }
.tiny a{ color:var(--bw-steel); }
.src, .nd{ color:var(--bw-steel); }
.src a{ color:var(--bw-steel); text-decoration-color:var(--bw-rule-strong); }
.src a:hover{ color:var(--bw-coral-strong); }

/* ---------- Top strip (Be Wise Apps button) and disclaimer bar ---------- */
.bw-strip{ background:#0D1629; }
.dis-bar{ background:#0D1629; color:rgba(255,255,255,0.8); border-top:1px solid rgba(255,255,255,0.07); line-height:1.5; }
.dis-bar a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); }

/* ---------- Header: navy with the app's violet line ---------- */
header.site{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
header.site .wrap{ max-width:1000px; min-height:64px; }
.brand, .brand span{ color:#FFFFFF; font-family:var(--serif); font-weight:600; font-size:1.25rem; letter-spacing:-0.005em; }
.brand:hover, .brand:hover span{ color:#FFFFFF; }
.snav{ gap:4px 2px; font-size:.88rem; }
.snav a{ color:rgba(255,255,255,0.76); padding:6px 7px; border-radius:4px; }
.snav a:hover{ color:#FFFFFF; background:rgba(255,255,255,0.08); text-decoration:none; }
.snav a:focus-visible{ outline-color:var(--bw-coral); }
/* 3-bar menu now sits on navy: white icon */
header.site .bw-burger.bw-on-light, header.site .bw-burger{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); }
header.site .bw-burger.bw-on-light:hover, header.site .bw-burger.bw-on-light:focus-visible,
header.site .bw-burger.bw-on-light[aria-expanded="true"]{ background:rgba(255,255,255,0.12); border-color:#FFFFFF; }
.bw-menu{ border-radius:8px; border-color:var(--bw-rule); font-family:var(--sans); }
.bw-menu a, .bw-menu button{ color:var(--bw-ink) !important; }
.bw-menu .bw-contact{ box-shadow:inset 3px 0 0 var(--bw-coral); }

/* ---------- Advertisement box ---------- */
.bw-spot{ background:rgba(255,255,255,0.65); border:1px solid var(--bw-rule-strong); border-radius:8px; color:var(--ink-soft); margin:20px 0 6px; }
.bw-spot strong{ color:var(--bw-steel); font-weight:600; }
.bw-spot a{ color:var(--ink); }

/* ---------- Cards, notes, panels, call to action ---------- */
.panel{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:20px 22px; box-shadow:0 1px 2px rgba(20,33,61,0.04); }
.panel > h2:first-child, .panel > h3:first-child{ margin-top:0; }
.note{ background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour); border-radius:0 8px 8px 0; padding:14px 18px; color:var(--ink); }
details.panel > summary{ cursor:pointer; color:var(--ink); }
details.panel > summary::marker{ color:var(--bw-coral-strong); }
details.panel[open] > summary{ margin-bottom:8px; }

.cta{ background:var(--bw-ink); color:rgba(255,255,255,0.84); border:0; border-radius:8px; padding:26px 28px; margin:34px 0; }
.cta h2, .cta h3{ color:#FFFFFF; margin-top:0; }
.cta p{ color:rgba(255,255,255,0.84); }
.cta strong{ color:#FFFFFF; }
.cta a:not(.btn){ color:#FFFFFF; text-decoration-color:var(--bw-coral); }

.btn{ background:var(--bw-coral-strong); border:1px solid var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; padding:11px 20px; font-weight:600; }
.btn:hover{ background:#A63B19; border-color:#A63B19; color:#FFFFFF; }

/* ---------- Headline figures ---------- */
.stats{ gap:14px; margin:18px 0; }
.stat{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:14px 16px; }
.stat .v{ font-family:var(--serif); font-weight:600; font-size:1.75rem; color:var(--ink); letter-spacing:-0.01em; }
.stat .l{ color:var(--bw-steel); line-height:1.45; margin-top:2px; }

/* ---------- Tables ---------- */
.scrollx{ margin:14px 0; }
table.data{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; border-collapse:separate; border-spacing:0; overflow:hidden; font-size:.92rem; line-height:1.5; }
table.data th{ background:var(--bw-tint); color:var(--bw-steel); font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:11px 12px; border-bottom:2px solid var(--bw-ink); }
table.data td{ padding:11px 12px; border-bottom:1px solid var(--bw-rule); }
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr:hover td{ background:#F8FAFD; }
table.data td.n{ font-family:var(--sans); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; color:var(--ink); }
table.data .pos{ font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink); }
table.data .m{ color:var(--bw-steel); font-family:var(--sans); font-size:.78rem; line-height:1.4; margin-top:2px; }
table.data td a{ font-weight:600; }
.tag{ border-color:var(--bw-rule-strong); color:var(--bw-steel); border-radius:4px; background:var(--bw-tint); }
@media(max-width:640px){
  table.data{ border-radius:8px; }
  table.data tr{ padding:12px 14px; border-bottom:1px solid var(--bw-rule); }
  table.data tbody tr:last-child{ border-bottom:0; }
  table.data td{ padding:2px 0; border:0; }
  table.data tbody tr:hover td{ background:transparent; }
  table.data td[data-l]:before{ color:var(--bw-steel); font-family:var(--sans); }
}
table.plain{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; border-collapse:separate; border-spacing:0; overflow:hidden; font-size:.92rem; line-height:1.5; }
table.plain th, table.plain td{ border:0; border-bottom:1px solid var(--bw-rule); padding:10px 12px; }
table.plain th{ background:var(--bw-tint); color:var(--ink); font-weight:600; }
table.plain thead th{ border-bottom:2px solid var(--bw-ink); }
table.plain tr:last-child td, table.plain tr:last-child th{ border-bottom:0; }
table.plain td + td, table.plain th + th, table.plain th + td{ border-left:1px solid var(--bw-rule); }

.more button{ background:#FFFFFF; border:1px solid var(--bw-rule-strong); border-radius:6px; padding:9px 16px; color:var(--ink); font-weight:600; font-family:var(--sans); }
.more button:hover{ border-color:var(--bw-harbour); background:var(--bw-tint); }

/* ---------- Bar charts (score spreads) ---------- */
.bar{ font-size:.86rem; color:var(--ink-soft); }
.bt{ background:#E1E6EE; border-radius:3px; height:10px; }
.bt span{ background:var(--bw-harbour); border-radius:3px; }
.bv{ color:var(--ink); }

/* ---------- FAQ pages ---------- */
.faq-toc{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:18px 22px 18px 2.6em; }
.faq-toc li{ max-width:none; }
.faq-cat{ border-top:1px solid var(--bw-rule-strong); padding-top:.8em; margin-top:2.2em; }
.qa h3{ margin:1.5em 0 .35em; }
.qa-link{ color:var(--bw-coral); }
.qa:target{ background:var(--brass-bg); outline:8px solid var(--brass-bg); border-radius:2px; }
.qa .more{ white-space:normal; }
.faq h3{ margin-top:1.3em; }

/* ---------- Sources, related guides ---------- */
.srcs{ font-size:.92rem; }
.srcs li{ margin:.3em 0; }
.related{ border-top:1px solid var(--bw-rule-strong); margin-top:36px; padding-top:8px; }

/* ---------- Clearing tools (checker, call planner, tracker, countdown, release checklist) ---------- */
.ct{ background:#FFFFFF; border:1px solid var(--bw-rule-strong); border-radius:8px; padding:22px 24px; margin:24px 0; box-shadow:0 1px 3px rgba(20,33,61,0.06); }
.ct .ct-kicker{ color:var(--bw-steel); font-size:.74rem; letter-spacing:.07em; font-weight:700; margin:0 0 8px; }
.ct .ct-kicker::before{ content:""; display:inline-block; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); vertical-align:middle; margin-right:8px; position:relative; top:-1px; }
.ct .ct-q{ font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.3; color:var(--ink); }
.ct .ct-step{ color:var(--bw-steel); }
.ct button.ct-opt{ background:var(--bw-tint); border:1px solid var(--bw-rule-strong); border-radius:6px; padding:12px 16px; color:var(--ink); font-family:var(--sans); transition:border-color .12s, background .12s; }
.ct button.ct-opt:hover{ background:#FFFFFF; border-color:var(--bw-harbour); box-shadow:inset 3px 0 0 var(--bw-coral); }
.ct .ct-res{ border-left:4px solid var(--bw-harbour); padding:4px 0 4px 16px; }
.ct .ct-res h3{ font-family:var(--serif); font-weight:600; color:var(--ink); }
.ct .ct-btn{ background:var(--bw-coral-strong); border:1px solid var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; padding:10px 18px; font-family:var(--sans); }
.ct .ct-btn:hover{ background:#A63B19; border-color:#A63B19; color:#FFFFFF; }
.ct .ct-btn.ghost{ background:#FFFFFF; color:var(--ink); border-color:var(--bw-rule-strong); }
.ct .ct-btn.ghost:hover{ background:var(--bw-tint); border-color:var(--bw-harbour); color:var(--ink); }
.ct .ct-btn.warn{ background:#FFFFFF; color:#9B2C22; border-color:#E2B4AC; }
.ct .ct-btn.warn:hover{ background:#FCF1EC; border-color:#9B2C22; }
.ct label{ color:var(--ink); }
.ct .ct-help, .ct .ct-small, .ct .ct-empty{ color:var(--bw-steel); }
.ct input[type=text], .ct input[type=tel], .ct input[type=date], .ct select, .ct textarea{ border:1px solid var(--bw-rule-strong); border-radius:6px; background:#FFFFFF; color:var(--ink); font-family:var(--sans); }
.ct input:focus, .ct select:focus, .ct textarea:focus{ border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.35); outline-offset:1px; }
.ct .ct-check input{ accent-color:var(--bw-ink); }
.ct textarea{ min-height:96px; line-height:1.5; }
.ct .ct-pts{ font-family:var(--serif); font-weight:600; color:var(--ink); }
.ct .ct-sheet{ background:var(--bw-tint); border:1px solid var(--bw-rule); border-radius:8px; }
.ct .ct-sheet h3, .ct .ct-sheet h4{ font-family:var(--serif); color:var(--ink); }
.ct .ct-say{ background:#FFFFFF; border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour); border-radius:0 6px 6px 0; }
.ct .ct-line{ border-bottom-color:var(--bw-ink); }
.ct .ct-notes{ border-color:var(--bw-rule-strong); border-radius:6px; }
.ct .ct-sum{ color:var(--ink-soft); }
.ct .ct-card{ background:var(--bw-tint); border:1px solid var(--bw-rule-strong); border-radius:8px; }
.ct .ct-card.offer{ background:var(--bw-good-bg); border-color:var(--bw-good); }
.ct .ct-card.added{ background:#FFFFFF; border-color:var(--bw-harbour); }
.ct .ct-card label{ color:var(--bw-steel); }
.ct .ct-dates li{ background:var(--bw-tint); border:1px solid var(--bw-rule); border-radius:8px; padding:12px 14px; line-height:1.4; }
.ct .ct-dates .ct-n{ margin:6px 0 4px; }
.ct .ct-dates .ct-d{ font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.3; }
.ct .ct-dates .ct-n{ font-family:var(--serif); font-weight:600; color:var(--ink); }
.ct .ct-dates .ct-l{ color:var(--ink-soft); }
.ct .ct-status{ border-radius:6px; font-weight:600; }
.ct .ct-status.yes{ background:var(--bw-good-bg); color:var(--bw-good); border:1px solid #B5CBE2; }
.ct .ct-status.no{ background:#FBEDEA; color:#8A2A20; border:1px solid #E6BDB5; }
@media(max-width:640px){ .ct{ padding:18px 16px; } }

/* ---------- Back / Back to Top links above the footer ---------- */
.bw-bottom{ color:var(--bw-steel); font-family:var(--sans); }

/* ---------- Footer: navy with the app's violet line ---------- */
footer.site{ background:var(--bw-ink); border-top:3px solid var(--bw-accent); color:rgba(255,255,255,0.72); padding:26px 0 32px; }
footer.site .wrap{ max-width:1000px; }
footer.site p, footer.site .fl{ color:rgba(255,255,255,0.72); }
footer.site a, footer.site span[style]{ color:#FFFFFF !important; text-decoration-color:var(--bw-coral) !important; }
footer.site a:hover{ color:#FFFFFF !important; text-decoration-color:#FFFFFF !important; }

/* ---------- Phones ---------- */
@media(max-width:640px){
  body{ font-size:16px; }
  h1{ font-size:1.9rem; }
  .brand, .brand span{ font-size:1.12rem; }
  .cta{ padding:22px 20px; }
  .faq-toc{ padding:14px 16px 14px 2.3em; }
  .panel{ padding:16px 16px; }
}
@media print{
  header.site, footer.site{ background:#FFFFFF; color:#000000; border:0; }
  .brand, .brand span, footer.site p, footer.site a{ color:#000000 !important; }
  .cta{ background:#FFFFFF; color:#000000; border:1px solid #000000; }
  .cta h2, .cta p{ color:#000000; }
}
