/* ==========================================================================
   Be Wise family look (October 2026) - Be Rwanda Wise and Be Vietnam Wise guide pages
   Used by /rwanda-investor-faq/, /vietnam-investor-faq/ and the top-level
   Investor FAQ, Useful links, Embassies and Find a lawyer pages of both apps.
   Matches the restyled apps (bw-family-rwanda-vietnam.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 page sets its identifying colour with --bw-accent in <style id="bw-family-app">:
   Rwanda blue #1F8FC9, Vietnam red #C8102E. It is used only for the line under
   the header, the line on top of the footer and the small mark in front of
   section labels. No green anywhere: the pages' old "green" tokens become blue.
   ========================================================================== */

: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;
  --bw-mist:#EEF1F6;         /* page background */
  --bw-panel:#F6F8FB;        /* quiet panels */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;        /* secondary text */
  --bw-text:#1F2B45;         /* body text */
  --bw-text-soft:#3E4A63;
  --bw-blue:#2C5E8C;         /* links and "good": replaces every green */
  --bw-blue-bg:#E7EFF8;
  --bw-accent:#3D5A99;       /* overridden per page */
  --bw-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --bw-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  /* Re-point the pages' own colour tokens at the family palette */
  --brown:#14213D;
  --brown-soft:#1B2A4A;
  --parchment:#EEF1F6;
  --parchment-deep:#D9DFE8;
  --ink:#1F2B45;
  --red:#C2461F;
  --green:#2C5E8C;           /* was green: now blue */
  --green-soft:#E7EFF8;
  --gold:#E4572E;            /* was gold: now coral */
}

/* ---------- Base ---------- */
html, body{ background:var(--bw-mist); color:var(--bw-text); font-family:var(--bw-sans); line-height:1.65; }
body{ -webkit-font-smoothing:antialiased; }
.serif, h1, h2, h3{ font-family:var(--bw-serif); color:var(--bw-ink); }
a{ color:var(--bw-blue); text-underline-offset:3px; }
main a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }

/* ---------- Be Wise Apps strip ---------- */
.bw-strip{ background:var(--bw-ink); border-bottom:1px solid rgba(255,255,255,0.1); padding-left:16px; font-family:var(--bw-sans); }
.bw-appsbtn{ font-family:var(--bw-sans); }

/* ---------- Header: navy, app colour line along the bottom ---------- */
header.top{
  background:var(--bw-ink);
  border-bottom:3px solid var(--bw-accent);
  box-shadow:0 1px 0 rgba(0,0,0,0.12);
}
.brand{ gap:12px; }
.brand b{ font-family:var(--bw-serif); font-weight:600; font-size:1.3rem; letter-spacing:-0.005em; color:#FFFFFF; line-height:1.15; }
.brand span{ color:rgba(255,255,255,0.62); font-size:10.5px; letter-spacing:0.14em; margin-top:2px; }
.topnav{ gap:2px; }
.topnav a{
  color:rgba(255,255,255,0.78); font-family:var(--bw-sans); font-weight:600; font-size:13.5px;
  border-radius:4px; padding:10px 12px;
}
.topnav a:hover{ color:#FFFFFF; background:rgba(255,255,255,0.07); }
.topnav a[aria-current="page"]{ color:#FFFFFF; background:rgba(255,255,255,0.06); box-shadow:inset 0 -2px 0 var(--bw-coral); }
.topnav a.cta{ background:var(--bw-coral-strong); color:#FFFFFF; margin-left:6px; }
.topnav a.cta:hover{ background:var(--bw-coral-hover); }
.bw-burger{ border-radius:6px; }

/* ---------- Article column ---------- */
main{ max-width:880px; padding:34px 20px 48px; }
.crumbs{ font-size:13px; color:var(--bw-steel); opacity:1; margin-bottom:16px; }
.crumbs a{ color:var(--bw-steel); text-decoration:underline; text-decoration-color:var(--bw-rule-strong); }
.crumbs a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }

h1{ font-weight:500; font-size:clamp(1.9rem,4vw,2.5rem); line-height:1.12; letter-spacing:-0.015em; margin:0 0 14px; max-width:30ch; }
h2{ font-weight:600; font-size:1.3rem; line-height:1.3; letter-spacing:0; }
h3{ font-weight:600; font-size:1.12rem; line-height:1.3; }
main > section > h2, main > h2{ font-weight:500; font-size:1.55rem; letter-spacing:-0.01em; margin-top:8px; }
.lede{ font-size:1.06rem; line-height:1.68; color:var(--bw-text-soft); max-width:68ch; }
main > p:not([class]){ max-width:70ch; }

/* Quick-answer box */
.answer-box{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:16px 20px; margin:16px 0 20px; font-size:15.5px; color:var(--bw-text);
}
.answer-box strong{ color:var(--bw-ink); }

/* "Re-checked ..." line */
.badge{ background:var(--bw-blue-bg); color:var(--bw-blue); border:1px solid rgba(44,94,140,0.25); border-radius:4px; font-weight:600; font-size:12.5px; padding:6px 12px; }
.badge a{ color:var(--bw-blue); }
.updated{ background:var(--bw-blue-bg); color:var(--bw-blue); border-radius:4px; }

/* Table of contents: label with the identifying-colour mark */
.toc{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:16px 20px 14px; }
.toc h2{
  display:flex; align-items:center; gap:10px; font-family:var(--bw-sans); color:var(--bw-steel);
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 8px;
}
.toc h2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.toc ol, .toc ul{ font-size:15px; padding-left:24px; }
.toc li{ padding:5px 0; line-height:1.45; }
.toc li::marker{ color:var(--bw-steel); font-size:13.5px; }
.toc li a{ display:inline; padding:0; }

/* ---------- Questions and answers ---------- */
article.qa{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px;
  padding:20px 22px; margin:0 0 12px; scroll-margin-top:16px;
}
article.qa:target{ border-color:var(--bw-rule-strong); border-left:3px solid var(--bw-coral); box-shadow:0 4px 14px rgba(20,33,61,0.06); }
article.qa h2{ font-size:1.25rem; line-height:1.3; margin:0 0 8px; }
article.qa p{ font-size:15.5px; line-height:1.7; color:var(--bw-text); }
article.qa ul, article.qa ol{ font-size:15.5px; line-height:1.65; }
.meta{ color:var(--bw-steel); opacity:1; font-size:12.5px; }
.links{ font-size:14px; color:var(--bw-steel); }
.links a{ font-weight:600; }
.qa dt{ color:var(--bw-ink); font-weight:600; }
.qa dd{ color:var(--bw-text); }

/* ---------- Call to action ---------- */
.cta-box{
  background:var(--bw-ink); color:#FFFFFF; border-radius:8px; border-top:3px solid var(--bw-coral);
  padding:22px 24px; margin:32px 0;
}
.cta-box h2{ color:#FFFFFF; font-weight:500; font-size:1.5rem; }
.cta-box p{ color:rgba(255,255,255,0.82); opacity:1; }
.btn{
  background:var(--bw-coral-strong); color:#FFFFFF; border:1px solid var(--bw-coral-strong); border-radius:4px;
  font-weight:600; font-size:14.5px;
}
.btn:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); color:#FFFFFF; }
.btn.alt{ background:rgba(255,255,255,0.06); color:#FFFFFF; border:1px solid rgba(255,255,255,0.35); }
.btn.alt:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.6); }

/* ---------- Guide cards ---------- */
.grid{ gap:14px; }
.card{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink);
  border-radius:8px; padding:18px 20px; transition:border-color .15s, box-shadow .15s;
}
.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); }
.card h2{ font-size:1.18rem; margin:0 0 6px; }
.card h2 a{ color:var(--bw-ink); text-decoration:underline; text-decoration-color:var(--bw-coral); text-decoration-thickness:1px; text-underline-offset:4px; }
.card h2 a:hover{ color:var(--bw-coral-hover); }
.card p{ color:var(--bw-text-soft); }
.card ul{ padding-left:18px; }
.card li{ padding:4px 0; line-height:1.45; }
.card li::marker{ color:var(--bw-rule-strong); }
.card li a{ display:inline; padding:0; }

.sources h2{ font-size:1.3rem; }
.sources li{ color:var(--bw-text); }
.disclaimer{ color:var(--bw-steel); opacity:1; font-size:13px; line-height:1.6; }

/* Recent changes log */
.log{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:18px 20px; }
.log h2{ font-size:1.18rem; }
.log li{ color:var(--bw-text); }

/* ---------- Directory pages (Useful links, Embassies) ---------- */
.findbar{ background:var(--bw-mist); }
.findbar input{ font-family:var(--bw-sans); color:var(--bw-text); background:#FFFFFF; border:1px solid var(--bw-rule-strong); border-radius:6px; }
.findbar input:focus{ border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.45); outline-offset:1px; }
.findcount{ color:var(--bw-steel); opacity:1; }
.jump{ gap:6px; }
.jump a{
  background:#FFFFFF; border:1px solid var(--bw-rule-strong); border-radius:4px; color:var(--bw-ink);
  font-weight:600; font-size:13.5px;
}
.jump a:hover{ border-color:var(--bw-harbour); background:var(--bw-panel); color:var(--bw-ink); }
section.grp > p.blurb{ color:var(--bw-text-soft); opacity:1; }
.entry{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:16px 18px; }
.entry:target{ border-color:var(--bw-rule-strong); border-left:3px solid var(--bw-coral); box-shadow:0 4px 14px rgba(20,33,61,0.06); }
.entry h3{ color:var(--bw-ink); }
.entry h3 .acr{ font-family:var(--bw-sans); background:var(--bw-mist); color:var(--bw-ink); border:1px solid var(--bw-rule); border-radius:4px; }
.entry p, .entry address{ color:var(--bw-text); }
.entry .tag{ background:var(--bw-blue-bg); color:var(--bw-blue); border-radius:4px; font-weight:600; }
.entry .tag.warn{ background:#FCF1EC; color:var(--bw-coral-hover); }
.entry .tag.muted{ background:var(--bw-mist); color:var(--bw-steel); }
.contacts a.c{
  background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:6px; color:var(--bw-blue);
}
.contacts a.c:hover{ border-color:var(--bw-harbour); background:#FFFFFF; }
.contacts a.c small{ color:var(--bw-steel); opacity:1; }
.contacts a.c.web{ background:var(--bw-ink); border-color:var(--bw-ink); color:#FFFFFF; }
.contacts a.c.web:hover{ background:var(--bw-harbour); border-color:var(--bw-harbour); }
.contacts a.c.web small{ color:rgba(255,255,255,0.75); opacity:1; }
.note{ color:var(--bw-steel); opacity:1; }
.empty{ color:var(--bw-steel); opacity:1; }

/* ---------- "Ask Lawbot" box (Vietnam Investor FAQ page; styled inline in the page) ---------- */
form.lawbot-ask{
  background:#FFFFFF !important; border:1px solid var(--bw-rule) !important; border-left:3px solid var(--bw-coral) !important;
  border-radius:0 8px 8px 0 !important; padding:14px 16px !important;
}
form.lawbot-ask label{ color:var(--bw-text-soft) !important; }
form.lawbot-ask label strong{ font-family:var(--bw-serif); font-weight:600; font-size:1.1rem !important; color:var(--bw-ink); }
form.lawbot-ask input{ border:1px solid var(--bw-rule-strong) !important; border-radius:6px !important; color:var(--bw-text) !important; }
form.lawbot-ask input:focus{ border-color:var(--bw-harbour) !important; outline:2px solid rgba(228,87,46,0.45); outline-offset:1px; }
form.lawbot-ask button{ background:var(--bw-coral-strong) !important; border-radius:4px !important; font-weight:600 !important; font-family:var(--bw-sans); }
form.lawbot-ask button:hover{ background:var(--bw-coral-hover) !important; }

/* ---------- Footer: navy with the app colour line on top ---------- */
footer{
  background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent);
  padding:22px 16px calc(22px + env(safe-area-inset-bottom)); font-size:12.5px; line-height:1.6;
}
footer p{ opacity:1; color:rgba(255,255,255,0.72); }
footer a, footer a[style]{
  color:#FFFFFF !important; font-weight:500; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.4) !important; text-underline-offset:3px;
}
footer a:hover{ text-decoration-color:var(--bw-coral) !important; }

/* ---------- 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, .bw-menu a:focus-visible, .bw-menu button:focus-visible{ background:var(--bw-mist); }
.bw-menu .bw-sep{ background:var(--bw-rule); }

/* ---------- Phones ---------- */
@media (max-width:640px){
  main{ padding:22px 16px 40px; }
  h1{ font-size:1.8rem; }
  main > section > h2, main > h2{ font-size:1.35rem; }
  article.qa{ padding:16px 16px 14px; }
  article.qa h2{ font-size:1.15rem; }
  .cta-box{ padding:20px 18px; }
  .card{ padding:16px; }
}
@media (max-width:560px){
  .bw-strip{ padding-left:12px; }
  header.top{ padding:8px 12px 0; }
  .brand b{ font-size:1.12rem; }
  .topnav a{ border-radius:0; font-size:13px; padding:10px 11px; background:transparent; }
  .topnav a[aria-current="page"]{ background:transparent; box-shadow:inset 0 -3px 0 var(--bw-coral); }
  .topnav a.cta{ background:var(--bw-coral-strong); margin:4px 0 6px 4px; min-height:36px; padding:6px 12px; border-radius:4px; }
}