/* ==========================================================================
   Be Wise family look (October 2026) for Be Small Claims Wise and Be University Wise.
   Same approved spec as bw-family.css, written for these two apps' own class names.
   APPEARANCE ONLY: no wording or behaviour is changed.
   Each app sets its identifying colour with --bw-accent (header line, footer line, label marks).
   ========================================================================== */
: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:#3D5A99;

  /* the apps' own tokens, re-pointed */
  --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; --sage-bg:#E7EFF8;      /* University "safe" label: blue, not green */
  --focus:#2F6FA8;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:6px;
}
body{ background:var(--bw-mist); }
h1,h2,h3{ font-weight:500; letter-spacing:-0.01em; }
h3{ font-weight:600; letter-spacing:0; }
:focus-visible{ outline-color:var(--bw-coral); }

/* ---------- Disclaimer bar ---------- */
.dis-bar{ background:#0D1629; color:rgba(255,255,255,0.82); }

/* ---------- Header: navy, logo, app colour line ---------- */
.masthead{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
.wordmark{ color:#FFFFFF; }
.wordmark .name{ font-weight:600; letter-spacing:-0.005em; color:#FFFFFF; }
.wordmark .juris{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); border-radius:4px; }
nav.primary button, nav.primary a.navlink{ color:rgba(255,255,255,0.75); }
nav.primary button:hover, nav.primary a.navlink:hover{ background:rgba(255,255,255,0.08); color:#FFFFFF; }
nav.primary button.on{ color:#FFFFFF; box-shadow:inset 0 -2px 0 var(--bw-coral); }
/* the 3-bar menu button sits on navy now: white icon */
.masthead .bw-burger.bw-on-light{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); }
.masthead .bw-burger.bw-on-light:hover, .masthead .bw-burger.bw-on-light[aria-expanded="true"]{ background:rgba(255,255,255,0.12); border-color:#FFFFFF; }
.masthead .nav-toggle span, .masthead .nav-toggle span:before, .masthead .nav-toggle span:after{ background:#FFFFFF; }
/* drop-down menu: white panel, navy text */
.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); }

/* ---------- Home hero: full-width navy band ---------- */
.hero{ position:relative; isolation:isolate; color:#FFFFFF; border-bottom:0; padding:40px 0 44px; margin-bottom:28px; }
.hero::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--bw-ink); }
.hero h1{ color:#FFFFFF; font-weight:500; font-size:clamp(2.2rem,4.6vw,3.3rem); line-height:1.06; letter-spacing:-0.02em; }
.hero .lede, .hero p{ color:rgba(255,255,255,0.8); }
.hero a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); }
.hero .muted, .hero .small, .hero .tiny{ color:rgba(255,255,255,0.7); }
.hero .bw-appsbtn.bw-on-light{ color:#FFFFFF !important; border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06); }
.hero .bw-appsbtn.bw-on-light:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.6); }
.hero .forwhom{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.3); color:rgba(255,255,255,0.88); }
.hero .btn.ghost{ color:#FFFFFF; border-color:rgba(255,255,255,0.45); }
.hero .btn.ghost:hover{ background:rgba(255,255,255,0.1); color:#FFFFFF; }
.hero .btn:not(.ghost){ background:var(--bw-coral-strong); border-color:var(--bw-coral-strong); color:#FFFFFF; }
.hero .btn:not(.ghost):hover{ background:#A63B19; }
.hero .clr-banner, .hero .panel{ color:var(--ink); }

/* ---------- Buttons, fields, cards ---------- */
.btn{ border-radius:4px; }
.btn:hover{ background:var(--bw-harbour); }
.btn.ghost{ background:#FFFFFF; }
.btn.ghost:hover{ background:var(--bw-mist); border-color:var(--bw-harbour); }
select, input[type=text], input[type=number], input[type=search], input[type=date], input[type=email], input[type=tel], textarea{ border-radius:6px; border-color:var(--bw-rule-strong); }
select:focus, input:focus, textarea:focus{ border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.35); outline-offset:1px; }
.panel, .routes, .tool, .result, .docbox, .copybox, .wiz, .adslot, .bw-spot, .common-q, .rlist .ritem, .clr-banner, .weights, .tablewrap{ border-radius:8px; }
.routes{ border-color:var(--bw-rule); }
.tool{ background:#FFFFFF; border-color:var(--bw-rule); }
.tool:hover{ border-color:var(--bw-harbour); }
.note{ background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour); border-radius:0 8px 8px 0; }
.warn{ border-radius:0 8px 8px 0; }
.opt span{ border-radius:6px; }
.wsteps button.on{ box-shadow:inset 0 -2px 0 var(--bw-coral); }
.tl li:before{ border-color:var(--bw-harbour); }

/* labels/eyebrows: small app-colour mark */
.eyebrow, .kicker{ color:var(--bw-steel); }
.eyebrow::before, .kicker::before{ content:""; display:inline-block; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); vertical-align:middle; margin-right:8px; }

/* ---------- Chat ---------- */
.msg.me{ background:var(--bw-ink); color:#FFFFFF; border-radius:10px 10px 2px 10px; }
.msg.bot{ background:#F6F8FB; border:1px solid var(--bw-rule); border-radius:10px 10px 10px 2px; }

/* ---------- Advertising boxes ---------- */
.bw-spot{ background:rgba(255,255,255,0.6); border-color:var(--bw-rule-strong); }

/* ---------- Before-you-start gate ---------- */
.gate{ background:rgba(13,22,41,0.78); }
.gate-box{ border-top:4px solid var(--bw-coral); border-radius:8px; }
.gate-box h2, .gate-box h3{ font-weight:500; }
.gate-box .btn:not(:disabled){ background:var(--bw-coral-strong); border-color:var(--bw-coral-strong); }

/* ---------- Footer: navy with app colour line ---------- */
footer.bw-footer{ background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent); }
footer.bw-footer p, footer.bw-footer .fl{ color:rgba(255,255,255,0.72); }
footer.bw-footer a, footer.bw-footer span[style]{ color:#FFFFFF !important; text-decoration-color:var(--bw-coral) !important; }

/* ---------- Install banner ---------- */
#pwaBanner{ border-radius:8px; }

/* Keep the desktop menu on one line beside the app name (it wrapped onto two lines before) */
@media (min-width:901px){
  nav.primary{ flex-wrap:nowrap; white-space:nowrap; }
  nav.primary button, nav.primary a.navlink{ padding:8px 7px; font-size:.86rem; }
  .wordmark .juris{ margin-right:10px; }
}