/* ==========================================================================
   Be Wise family look (October 2026)
   Brings each app into line with the bewiseapps.com home page:
   navy + coral from the Waypoint logo, Newsreader headings, Public Sans text.
   APPEARANCE ONLY: this file changes colours, fonts, spacing and shapes.
   It does not change any wording or how any app works.
   Each app sets its own small identifying colour with --bw-accent
   (shown as the line under the header and the mark beside the page label).
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy (home page hero and footer) */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* logo north point */
  --bw-coral-strong:#C2461F; /* coral dark enough for white text */
  --bw-mist:#EEF1F6;         /* page background */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-accent:#3D5A99;       /* overridden per app */

  /* Re-point the apps' own design tokens at the family palette */
  --ink:#14213D;
  --ink-soft:#3E4A63;
  --paper:#EEF1F6;
  --paper-raised:#FFFFFF;
  --brass:#C2461F;
  --brass-dark:#A63B19;
  --slate:#56637A;
  --rule:#D9DFE8;
  --rule-strong:#C3CCD9;
  --sage:#2C5E8C;            /* "good" messages: blue, not green */
  --sage-bg:#E7EFF8;
  --focus:#2F6FA8;
  --font-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:6px;
  --shadow-card:0 1px 2px rgba(20,33,61,0.05);
  --shadow-raised:0 18px 44px rgba(10,18,36,0.28);
}

body{ background:var(--bw-mist); }
h1,h2,h3,h4{ font-weight:500; letter-spacing:-0.01em; }
h3,h4{ font-weight:600; letter-spacing:0; }
:focus-visible{ outline-color:var(--bw-coral); }

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

/* ---------- Header: navy, Waypoint logo, app colour line ---------- */
header.masthead{
  background:var(--bw-ink); border-bottom:3px solid var(--bw-accent);
}
.wordmark{ color:#FFFFFF; align-items:center; gap:10px; }
.wordmark::before{
  content:""; width:34px; height:34px; flex-shrink:0;
  background:url("/favicon.svg") center/contain no-repeat;
}
.wordmark .mark{ font-family:var(--font-serif); font-weight:600; font-size:1.4rem; letter-spacing:-0.005em; color:#FFFFFF; }
.wordmark .juris{ color:#FFFFFF; border-color:rgba(255,255,255,0.35); border-radius:4px; }
.nav-toggle{ border-color:rgba(255,255,255,0.35); border-radius:4px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ background:#FFFFFF; }
.nav-toggle:hover{ border-color:#FFFFFF; }
/* Wide screens show the menu inside the navy header */
@media (min-width:1361px){
  nav.primary-nav button, nav.primary-nav a.nav-link{ color:rgba(255,255,255,0.75); }
  nav.primary-nav button:hover, nav.primary-nav a.nav-link:hover, nav.primary-nav button.active{ color:#FFFFFF; border-bottom-color:var(--bw-coral); }
  nav.primary-nav button.advertise-tab, nav.primary-nav button.advertise-tab:hover{ color:#F4A58C; }
}
/* Drop-down menu (phones and laptops) stays white with navy text */
@media (max-width:1360px){
  nav.primary-nav{ border-radius:0 0 8px 8px; box-shadow:0 16px 36px rgba(10,18,36,0.22); }
  nav.primary-nav button.active{ color:var(--bw-ink); border-bottom-color:var(--rule); box-shadow:inset 3px 0 0 var(--bw-coral); padding-left:12px !important; }
}

/* ---------- Home screen hero: full-width navy band like the home page ---------- */
#screen-home.screen{ padding-top:0; }
.hero{
  position:relative; isolation:isolate; color:#FFFFFF;
  padding:44px 0 48px; margin-bottom:8px;
}
.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.3rem,4.6vw,3.5rem); line-height:1.05; letter-spacing:-0.02em; max-width:20ch; margin-bottom:18px; }
.hero .lede{ color:rgba(255,255,255,0.8); font-size:1.12rem; line-height:1.6; }
.hero .eyebrow-rule{ color:rgba(255,255,255,0.78); }
.hero .eyebrow-rule::after{ background:rgba(255,255,255,0.16); }
.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); }

/* Page labels: small app-colour mark in front */
.eyebrow-rule{ color:var(--bw-steel); font-weight:600; letter-spacing:0; }
.eyebrow-rule::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }

/* ---------- Cards and panels ---------- */
.country-panel, .journey-card, .choice-card, .doc-summary, .chat-panel, .saved-item, .saved-empty, .home-note, .callout, .faq-acc details{
  border-radius:8px;
}
.country-panel{ border:1px solid var(--rule); border-top:1px solid var(--rule); box-shadow:none; margin-top:28px; }
.journey-card{ border:1px solid var(--rule); border-top:3px solid var(--bw-ink); box-shadow:none; }
.journey-card.chat{ border-top-color:var(--bw-coral); }
.home-note{ border:1px solid var(--rule); border-left:4px solid var(--bw-harbour); border-radius:0 8px 8px 0; }
.callout{ border-radius:0 8px 8px 0; }
.callout.brass, .choice-option:hover{ background:#FCF1EC; }
.compare-table .pill.mid{ background:#FCF1EC; }
.warranty-hero{ border-top:3px solid var(--bw-coral); border-radius:8px; }
.warranty-hero strong, .next-steps-panel a{ color:#F4A58C; }
.next-steps-panel{ border-radius:8px; }
.choice-option{ background:#FFFFFF; border-radius:6px; }
.step-track .dot.done{ background:var(--bw-coral); }

/* ---------- Buttons ---------- */
.btn{ border-radius:4px; font-weight:600; }
.btn:hover{ background:var(--bw-harbour); }
.btn.secondary{ background:#FFFFFF; }
.btn.secondary:hover{ background:var(--bw-mist); border-color:var(--bw-harbour); }
.btn.brass{ background:var(--bw-coral-strong); border-color:var(--bw-coral-strong); color:#FFFFFF; }
.btn.brass:hover{ background:#A63B19; border-color:#A63B19; }

/* ---------- Form fields ---------- */
select.country-select, .chat-input-row textarea, .faq-search{ border-radius:6px; background:#FFFFFF; border-color:var(--bw-rule-strong); }
select.country-select:focus, .chat-input-row textarea:focus, .faq-search:focus{ border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.35); outline-offset:1px; }

/* ---------- Chat ---------- */
.chat-msg.user{ background:var(--bw-ink); color:#FFFFFF; border-radius:10px 10px 2px 10px; }
.chat-msg.assistant{ background:#F6F8FB; border-radius:10px 10px 10px 2px; }

/* ---------- Before-you-start gate ---------- */
.entry-gate-backdrop{ background:rgba(13,22,41,0.78); }
.entry-gate-box{ border-top:4px solid var(--bw-coral); border-radius:8px; }
.entry-gate-box h3{ font-size:1.35rem; font-weight:500; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent); }
.footer-disclaimer{ color:rgba(255,255,255,0.72); }
.footer-disclaimer strong{ color:#FFFFFF; }
.footer-meta{ color:rgba(255,255,255,0.6); }
.footer-meta a, .footer-family a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
.footer-family{ color:rgba(255,255,255,0.72); border-top-color:rgba(255,255,255,0.14); }

/* ---------- Advertising boxes ---------- */
.advertise-cta{ border-radius:8px; border-color:var(--bw-rule-strong); background:rgba(255,255,255,0.6); }

/* ==========================================================================
   Contact pages (/<app>-contact): same family look
   ========================================================================== */
:root{
  --font-display:"Newsreader", Georgia, "Times New Roman", serif;
  --font:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gold:#E4572E;
  --gold-dark:#C2461F;
  --line:#D9DFE8;
  --ok:#2C5E8C;               /* success message: blue, not green */
  --brand:#14213D;
  --brand-2:#14213D;
}
header.cf-head{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); padding-bottom:72px; }
.cf-brand{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; letter-spacing:-0.005em; }
.cf-brand img{ width:36px; height:36px; filter:none; }
.cf-card{ border-radius:8px; border-color:var(--bw-rule); box-shadow:0 18px 40px rgba(20,33,61,0.08); }
.cf-card h1{ font-weight:500; font-size:clamp(1.9rem,4.4vw,2.5rem); line-height:1.1; letter-spacing:-0.015em; margin-bottom:10px; }
.cf-input, .cf-select, .cf-textarea{ border-radius:6px; border-width:1px; border-color:var(--bw-rule-strong); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus{ border-color:var(--bw-harbour); box-shadow:0 0 0 3px rgba(228,87,46,0.25); }
label.cf-option{ border-radius:6px; border-width:1px; border-color:var(--bw-rule-strong); }
label.cf-option:has(input:checked){ border-color:var(--bw-harbour); background:#F6F8FB; box-shadow:inset 4px 0 0 var(--bw-coral); }
.cf-option input{ accent-color:var(--bw-coral-strong); }
.cf-send{ font-family:var(--font); font-weight:600; color:#FFFFFF; background:var(--bw-coral-strong); border-radius:4px; }
.cf-send:hover{ background:#A63B19; }
.cf-done h2{ font-weight:500; }
footer.cf-foot{ background:var(--bw-ink); border-top:3px solid var(--bw-accent); }

/* The "Be Wise Apps" strip above contact pages: family navy instead of near-black */
.bw-strip{ background:#0D1629; }