/* ==========================================================================
   Be Wise family look (October 2026) - site-wide pages (About, Privacy & cookies)
   Makes about.html and privacy.html match the bewiseapps.com home page
   (index.html): the same navy header and footer, Newsreader headings,
   Public Sans text, coral marks, white cards on the pale blue-grey page.
   APPEARANCE ONLY: no wording, links or behaviour are changed.
   Hub pages have no identifying-colour line: --bw-accent is navy (#14213D).
   ========================================================================== */

:root{
  /* home page palette (index.html) */
  --bw-ink:#14213D;          /* deep navy: header, footer, headings */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* small marks and focus */
  --bw-coral-text:#B83E1A;   /* coral dark enough for text on white */
  --bw-mist:#EEF1F6;         /* page background */
  --bw-rule:#D9DFE8;
  --bw-steel:#56637A;
  --bw-text:#26324B;         /* long-form body text */
  --bw-on-ink:rgba(255,255,255,0.78);
  --bw-accent:#14213D;
  --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 */
  --navy-deep:#14213D; --navy-mid:#14213D; --teal-deep:#1B2A4A;
  --ink:#14213D; --ink-soft:#56637A; --paper:#EEF1F6; --white:#FFFFFF;
  --gold:#E4572E; --gold-dark:#B83E1A; --line:#D9DFE8;
  --radius:8px;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Base (as the home page) ---------- */
body{ font-family:var(--bw-sans); font-size:1rem; line-height:1.6; background:var(--bw-mist); color:var(--bw-ink); }
:focus-visible{ outline:3px solid var(--bw-coral); outline-offset:3px; border-radius:2px; }
.wrap{ max-width:1160px; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } }

/* ---------- Be Wise Apps strip: part of the navy header ---------- */
.bw-strip{
  background:var(--bw-ink); border-bottom:1px solid rgba(255,255,255,0.1); font-family:var(--bw-sans);
  padding-left:max(24px, calc((100% - 1160px) / 2 + 24px));
}
@media (max-width:600px){ .bw-strip{ padding-left:16px; } }
.bw-appsbtn{ font-family:var(--bw-sans); }

/* ---------- Header (home page header.site) ---------- */
header.site{ background:var(--bw-ink); padding:0; }
header.site .wrap{ gap:12px 20px; padding-top:18px; padding-bottom:18px; }
.wordmark{
  gap:12px; color:#FFFFFF; font-family:var(--bw-serif); font-weight:600; font-size:1.5rem; letter-spacing:-0.005em;
}
.wordmark .logo-mark{ width:42px; height:42px; filter:none; }
.site-tagline{ color:var(--bw-on-ink); font-size:0.94rem; font-weight:500; }

/* ---------- Page column ---------- */
.page{ max-width:760px; padding:52px 24px 64px; }
.crumbs{ font-size:0.86rem; color:var(--bw-steel); margin-bottom:18px; }
.page .crumbs a{ color:var(--bw-steel); font-weight:500; text-decoration:underline; text-decoration-color:var(--bw-rule-strong, #C3CCD9); text-decoration-thickness:1px; text-underline-offset:3px; }
.page .crumbs a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
.page h1{
  font-family:var(--bw-serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,3rem); line-height:1.08;
  letter-spacing:-0.02em; color:var(--bw-ink); margin-bottom:22px;
}
.page h2{
  font-family:var(--bw-serif); font-weight:500; font-size:1.65rem; line-height:1.2; letter-spacing:-0.01em;
  color:var(--bw-ink); margin:44px 0 12px;
}
.page h3{ font-family:var(--bw-serif); font-weight:600; font-size:1.25rem; line-height:1.3; color:var(--bw-ink); margin:28px 0 8px; }
.page p, .page li{ font-size:1.03rem; line-height:1.7; color:var(--bw-text); }
.page strong{ color:var(--bw-ink); font-weight:600; }
.page a{
  color:var(--bw-ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--bw-coral);
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.page a:hover{ color:var(--bw-coral-text); }
.page li::marker{ color:var(--bw-steel); }
.updated{ font-size:0.9rem; color:var(--bw-steel) !important; }

/* Opening statement: like the home page disclaimer box */
.statement{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 6px 6px 0; box-shadow:none; padding:20px 22px; margin:0 0 28px;
  font-size:1.12rem; line-height:1.6; color:var(--bw-ink);
}

/* List of apps: white cards */
.applist{ gap:12px; }
.applist li{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:16px 18px;
  font-size:0.95rem; line-height:1.55; color:var(--bw-steel);
}
.applist li a{
  margin-bottom:4px; font-weight:700; color:var(--bw-ink); text-decoration:none;
}
.applist li a span, .applist li a{ border-bottom:0; }
.applist li a:hover{ color:var(--bw-coral-text); text-decoration:underline; text-decoration-color:var(--bw-coral); }

/* Buttons (cookie choices) */
.choice-btn{
  border-radius:4px; border:1px solid var(--bw-ink); background:var(--bw-ink); color:#FFFFFF;
  font:600 0.95rem var(--bw-sans); min-height:46px; padding:10px 22px;
}
.choice-btn:hover{ background:var(--bw-harbour); border-color:var(--bw-harbour); }
.choice-btn:focus-visible{ outline:3px solid var(--bw-coral); outline-offset:3px; }

/* Tables */
.tablewrap{ border:1px solid var(--bw-rule); border-radius:8px; background:#FFFFFF; margin:0 0 18px; }
table.ck{ margin:0; font-size:0.93rem; background:#FFFFFF; }
table.ck th, table.ck td{ border:0; border-bottom:1px solid var(--bw-rule); padding:11px 14px; color:var(--bw-text); line-height:1.55; }
table.ck tr:last-child td{ border-bottom:0; }
table.ck th{ background:#F6F8FB; color:var(--bw-ink); font-weight:600; font-size:0.86rem; }
table.ck td + td, table.ck th + th{ border-left:1px solid var(--bw-rule); }

/* "Back to <app>" link shown when the visitor came from an app (bw-back-to-app.js) */
.page p.bw-back-to-app-row{ font-size:0.86rem; line-height:1.4; margin:0 0 16px; }
.page p.bw-back-to-app-bottom{ margin:40px 0 0; padding-top:20px; border-top:1px solid var(--bw-rule); }
.page a.bw-back-to-app{
  display:inline-flex; align-items:center; gap:6px; color:var(--bw-steel); opacity:1;
  font-weight:500; text-decoration:none;
}
.page a.bw-back-to-app:hover, .page a.bw-back-to-app:focus-visible{
  color:var(--bw-ink); text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:3px;
}

/* ---------- Footer (home page footer) ---------- */
footer{ background:var(--bw-ink); color:var(--bw-on-ink); padding:52px 0 40px; margin-top:0; }
.footer-row{ align-items:flex-start; gap:28px; }
.footer-contact-label{ font-size:0.88rem; text-transform:none; letter-spacing:0; color:var(--bw-on-ink); margin-bottom:6px; }
.footer-email{
  font-family:var(--bw-sans); font-weight:600; font-size:1.05rem; color:#FFFFFF;
  text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:5px; text-decoration-thickness:2px;
}
.footer-meta{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.14); font-size:0.85rem; color:rgba(255,255,255,0.62); }
.footer-meta a{ color:inherit; text-decoration:underline; }

/* ---------- Shared Be Wise pieces ---------- */
.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{ background:var(--bw-mist); }
.bw-menu .bw-sep{ background:var(--bw-rule); }

@media (max-width:600px){
  .page{ padding:34px 16px 48px; }
  .page h1{ font-size:2.1rem; }
  .page h2{ font-size:1.45rem; margin-top:36px; }
  .wordmark{ font-size:1.35rem; }
  .wordmark .logo-mark{ width:38px; height:38px; }
  .site-tagline{ font-size:0.86rem; }
  footer{ padding:40px 0 32px; }
}