/* ==========================================================================
   Be Wellness Wise - Be Wise family look (October 2026)
   Navy + coral from the Waypoint logo, Newsreader headings, Public Sans text,
   matching the bewiseapps.com home page. APPEARANCE ONLY: colours, fonts,
   spacing and shapes. No wording or behaviour is changed.
   The app's identifying colour (--bw-accent, sky blue) is set in the page and
   used only for the line under the top bar, the line over the footer and the
   small mark in front of section labels.
   Medical "red flag" / emergency warnings stay red: that is a safety signal.
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* accents and focus */
  --bw-coral-strong:#C2461F; /* filled buttons with white text */
  --bw-coral-light:#F4A58C;  /* coral text on navy */
  --bw-mist:#EEF1F6;
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-soft:#F6F8FB;
  --bw-blue:#2C5E8C;         /* "good" / links: blue, never green */
  --bw-blue-bg:#E7EFF8;
  --bw-red:#B42318;          /* emergency only */
  --bw-red-dark:#8F1D14;
  --bw-red-bg:#FDECEA;
  --bw-col:calc(680px);      /* the app's content column */

  /* Re-point the app's own design tokens at the family palette */
  --navy:#14213D; --navy-light:#1B2A4A; --navy-dark:#0D1629;
  --accent:#2C5E8C;
  --gold:#C2461F;            /* was gold: now coral (borders, small marks) */
  --red:#B42318; --red-dark:#8F1D14;
  --gray-50:#EEF1F6; --gray-100:#F6F8FB;
  --gray-200:#D9DFE8; --gray-400:#56637A; --gray-600:#3E4A63; --gray-800:#14213D;
  --surface:#FFFFFF;
  --font:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --radius:4px;
}
/* Dark theme (the app's own setting): keep its dark surfaces, swap gold for light coral */
:root[data-theme="dark"]{ --gold:#F4A58C; --accent:#8DB4E2; }

body{ background:var(--gray-50); font-family:var(--font); }
:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }

/* ---------- Top bar: flat navy, sky-blue line along the bottom ---------- */
.topnav{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
.nav-logo{ font-family:var(--font-serif); font-weight:600; font-size:1.18rem; letter-spacing:-0.005em; color:#FFFFFF; gap:7px; }
.nav-logo svg{ width:30px; height:30px; margin-right:3px; }
.nav-logo span{ color:#FFFFFF; }
#navMedIcon{ color:rgba(255,255,255,0.6) !important; }
.nav-btn{ font-family:var(--font); font-size:0.8rem; font-weight:500; color:rgba(255,255,255,0.78); border-radius:0; padding:8px 8px; }
.nav-btn:hover{ color:#FFFFFF; }
.nav-btn.active{ background:transparent; color:#FFFFFF; font-weight:600; box-shadow:inset 0 -2px 0 var(--bw-coral); }
.nav-btn.sos-link{ color:#FFB4AC; font-weight:600; }
.icon-btn{ color:rgba(255,255,255,0.85); border-radius:4px; }
.icon-btn:hover,.icon-btn:active{ background:rgba(255,255,255,0.12); color:#FFFFFF; }
.bw-burger{ border-radius:4px; }

/* 3-bar drop-down menu: white panel, navy text */
.bw-menu{ border-radius:8px; border-color:var(--bw-rule); box-shadow:0 16px 36px rgba(10,18,36,0.22);
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--bw-ink); }
.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); }

/* ---------- Bottom bar (phones) ---------- */
.bnav{ background:var(--bw-ink); border-top:1px solid rgba(255,255,255,0.12); }
.bnav-btn{ font-family:var(--font); color:rgba(255,255,255,0.72); }
.bnav-btn.active,.bnav-btn.sos.active{ color:#FFFFFF; box-shadow:inset 0 2px 0 var(--bw-coral); }
.bnav-btn.sos .icon-wrap{ background:var(--bw-red); border-color:var(--bw-ink); box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.bnav-btn.sos.active{ box-shadow:none; }
.bnav-btn.sos.active .icon-wrap{ background:#FFFFFF; color:var(--bw-red); }

/* ---------- Footer: navy, sky-blue line on top ---------- */
footer.bw-footer{ background:var(--bw-ink); color:rgba(255,255,255,0.72); border-top:3px solid var(--bw-accent);
  font-size:0.8rem; line-height:1.7; padding-top:1.4rem; }
footer.bw-footer a{ color:#FFFFFF !important; text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer.bw-footer span{ color:#FFFFFF; }
.bw-bottom{ color:var(--bw-steel); }

/* ---------- Home: full-width navy band, large Newsreader headline ---------- */
.hero{ background:var(--bw-ink); text-align:left;
  padding:52px max(1.25rem, calc((100% - var(--bw-col)) / 2)) 56px; }
.hero h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(2.35rem,5.2vw,3.5rem);
  line-height:1.06; letter-spacing:-0.02em; margin:6px 0 20px; max-width:19ch; }
.hero h1::after{ display:none; }
.hero h1 em{ color:var(--bw-coral-light); }
.hero p{ color:rgba(255,255,255,0.8); font-size:1.1rem; line-height:1.6; max-width:46ch; margin:0; }
.hero .bw-appsbtn{ color:#FFFFFF !important; border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06); margin-bottom:22px; }
.hero .bw-appsbtn:hover,.hero .bw-appsbtn:focus-visible{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.6); }

/* Red Flags band */
#page-redflags .hero{ padding:44px max(1.25rem, calc((100% - var(--bw-col)) / 2)) 48px !important; }
#page-redflags .hero h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(2rem,4.4vw,2.7rem) !important;
  line-height:1.08; letter-spacing:-0.015em; display:flex; align-items:center; gap:12px; margin-bottom:14px; }
#page-redflags .hero h2 .icon{ color:#FFB4AC; width:0.8em; height:0.8em; }
.hero-badge{ font-family:var(--font); border-radius:4px; letter-spacing:0.06em; margin-bottom:18px;
  background:rgba(180,35,24,0.28) !important; border-color:rgba(255,160,150,0.5) !important; color:#FFC9C2 !important; }

/* One content column (680px) with phone gutters, so everything lines up */
.country-gate, #homeDisclaimer, #rfDisclaimer, #page-redflags > p.disclaimer, #fhDisclaimer, #libDisclaimer, #libGuides,
#page-home > .bw-spot-banner, #page-findhelp > .bw-spot-banner, .lib-chat-box, #page-home > .hero-actions, #startChatCountryNote{
  width:calc(100% - 2.5rem); max-width:var(--bw-col); margin-left:auto !important; margin-right:auto !important; box-sizing:border-box;
}
#chatCountryGate{ width:auto; margin:0.875rem !important; }
.section-lbl{ max-width:calc(var(--bw-col) + 2.5rem); margin:2rem auto 0.75rem; }
@media (min-width:721px){
  .features,.quick-tools{ padding-left:0; padding-right:0; }
  .features{ padding-top:0; }
}

/* ---------- Country picker ---------- */
.country-gate{ background:var(--surface); border:1px solid var(--gray-200); border-left:4px solid var(--bw-coral);
  border-radius:0 8px 8px 0; padding:1.15rem 1.25rem 1.25rem; }
#countryGate{ margin-top:28px; }
.country-gate.resolved{ border-left-color:var(--bw-harbour); }
.country-gate-title{ font-family:var(--font-serif); font-weight:600; font-size:1.15rem; color:var(--navy); margin-bottom:6px; }
.country-gate p{ font-size:0.86rem; color:var(--gray-600); line-height:1.55; }
.country-gate select, .country-picker select, .form-field input, .form-field select, #profileToggleRow select{
  background:var(--surface); border:1px solid var(--bw-rule-strong); border-radius:6px; font-family:var(--font); color:var(--gray-800);
}
:root[data-theme="dark"] .country-gate select, :root[data-theme="dark"] .country-picker select,
:root[data-theme="dark"] .form-field input, :root[data-theme="dark"] .form-field select{ border-color:var(--gray-200); }
.country-gate select:focus, .country-picker select:focus, .form-field input:focus, .form-field select:focus,
.composer textarea:focus, .faq-search:focus, #countrySelectSettings:focus{
  border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.4); outline-offset:1px;
}
.country-picker{ max-width:calc(var(--bw-col) + 2.5rem); margin-top:1.5rem; }
.country-picker label{ color:var(--gray-600); }
.country-info-box{ max-width:calc(var(--bw-col) + 2.5rem); }

/* ---------- Buttons ---------- */
.hero-actions{ justify-content:flex-start; gap:10px; padding-left:0 !important; padding-right:0 !important; margin-top:1.25rem; }
#startChatCountryNote{ text-align:left !important; }
.btn-primary{ background:var(--bw-ink); color:#FFFFFF; font-family:var(--font); font-weight:600; font-size:0.95rem;
  border-radius:4px; padding:13px 24px; min-height:48px; transition:background .15s; }
.btn-primary:hover{ background:var(--bw-harbour); transform:none; box-shadow:none; }
:root[data-theme="dark"] .btn-primary{ background:#E4E9F2; color:var(--bw-ink); }
.btn-sos{ background:var(--bw-red); color:#FFFFFF; border:0; font-family:var(--font); font-weight:600; font-size:0.95rem;
  border-radius:4px; padding:13px 24px; min-height:48px; transition:background .15s; }
.btn-sos:hover{ background:var(--bw-red-dark); transform:none; box-shadow:none; }
.consent-card .btn-primary{ background:var(--bw-coral-strong); color:#FFFFFF; }
.consent-card .btn-primary:hover{ background:#A63B19; }
.profile-prompt-btn{ font-family:var(--font); font-weight:600; border-radius:4px; background:var(--bw-ink); }
.cbtn{ border-radius:4px; background:var(--bw-ink); font-family:var(--font); }
.cbtn:not(:disabled):hover{ transform:none; box-shadow:none; background:var(--bw-harbour); }
.cbtn.sec{ background:var(--surface); color:var(--bw-ink); border:1px solid var(--bw-rule-strong); }
.contact-btn{ border-radius:4px; background:var(--bw-ink); font-family:var(--font); }
.contact-btn:hover{ background:var(--bw-harbour); }
.cat-btn{ border-radius:4px; font-family:var(--font); color:var(--gray-600); border-color:var(--bw-rule-strong); }
.cat-btn:hover{ box-shadow:none; border-color:var(--bw-harbour); }
.cat-btn.active{ background:var(--bw-ink); border-color:var(--bw-ink); color:#FFFFFF; }
.seg{ border-radius:4px; border-color:var(--bw-rule-strong); }
.seg button.active{ background:var(--bw-ink); color:#FFFFFF; }
.msg-act-btn{ font-family:var(--font); color:var(--gray-400); }
.msg-act-btn:hover{ color:var(--gray-800); }
.msg-act-btn.text-danger{ color:var(--bw-red-dark); }
:root[data-theme="dark"] .msg-act-btn.text-danger{ color:#FFB4AC; }

/* ---------- Cards ---------- */
.features{ gap:12px; }
.feature-card{ background:var(--surface); border:1px solid var(--gray-200); border-top:3px solid var(--navy);
  border-radius:8px; box-shadow:none; padding:1.1rem 0.8rem; }
.feature-card:hover{ border-color:var(--gray-200); border-top-color:var(--bw-coral); transform:none; box-shadow:0 1px 2px rgba(20,33,61,0.06); }
.feature-icon{ color:var(--bw-harbour); }
.feature-card h3{ font-family:var(--font-serif); font-weight:600; font-size:1.02rem; line-height:1.2; color:var(--navy); margin-bottom:4px; }
.feature-card p{ font-size:0.78rem; }
.quick-tools{ gap:12px; }
.qt-card{ background:var(--surface); border:1px solid var(--gray-200); border-top:3px solid var(--bw-coral);
  border-radius:8px; box-shadow:none; padding:1rem; }
.qt-card:hover{ transform:none; box-shadow:0 1px 2px rgba(20,33,61,0.06); border-color:var(--bw-rule-strong); border-top-color:var(--bw-coral); }
.qt-card .icon{ color:var(--bw-harbour); }
:root[data-theme="dark"] .qt-card .icon, :root[data-theme="dark"] .feature-icon{ color:var(--gold); }
.qt-card h4{ font-family:var(--font-serif); font-weight:600; font-size:1.02rem; line-height:1.2; color:var(--navy); margin-bottom:4px; }
.qt-card p{ font-size:0.76rem; }
.profile-card{ border-radius:8px; border-color:var(--gray-200); }
.profile-card-name{ color:var(--navy); }

/* Section labels: small sky-blue mark in front */
.section-lbl, .faq-group-title{ font-family:var(--font); font-size:0.8rem; font-weight:600; color:var(--bw-steel);
  text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:10px; }
.section-lbl::before, .faq-group-title::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.faq-group-title{ border-bottom-color:var(--gray-200); }
:root[data-theme="dark"] .section-lbl, :root[data-theme="dark"] .faq-group-title{ color:var(--gray-600); }

/* Advertisement boxes */
.bw-spot-banner{ background:var(--surface); border:1px dashed var(--bw-rule-strong); border-radius:8px; color:var(--gray-400); padding:0.85rem 1rem; }
:root[data-theme="dark"] .bw-spot-banner{ border-color:var(--gray-200); }

/* Notices (were cream/gold): white panel, navy rule, like the home page */
.disclaimer{ background:var(--surface); border:1px solid var(--gray-200); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; color:var(--gray-600); font-size:0.8rem; line-height:1.55; padding:0.8rem 1rem; }
.disclaimer a{ color:var(--accent); }
:root[data-theme="dark"] .disclaimer{ background:var(--surface); color:var(--gray-600); border-color:var(--gray-200); border-left-color:#8DB4E2; }
:root[data-theme="dark"] .disclaimer a{ color:#8DB4E2; }
#rfDisclaimer{ border-left-color:var(--bw-red); }

/* ---------- Page headings ---------- */
.page-hero{ padding-top:2rem; }
.page-hero h2, .static-page h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.75rem,4vw,2.25rem);
  line-height:1.1; letter-spacing:-0.015em; color:var(--navy); }
.page-hero h2::after, .static-page h2::after{ display:none; }
.page-hero h2 .icon, .static-page h2 .icon{ width:0.75em; height:0.75em; color:var(--bw-harbour); }
:root[data-theme="dark"] .page-hero h2, :root[data-theme="dark"] .static-page h2,
:root[data-theme="dark"] .page-hero h2 .icon, :root[data-theme="dark"] .static-page h2 .icon{ color:#FFFFFF; }
.static-page{ padding-top:2rem; }
.static-page p a{ color:var(--accent); }
.static-page a.bw-fam{ color:var(--accent) !important; }
:root[data-theme="dark"] .static-page a.bw-fam{ color:#8DB4E2 !important; }
.inline-link{ color:var(--accent); }
:root[data-theme="dark"] .inline-link{ color:#8DB4E2; }

/* ---------- Chat ---------- */
.chat-inner{ border:0; }
@media (min-width:761px){
  .chat-inner{ border:1px solid var(--gray-200); border-radius:8px; }
}
.chat-hdr{ background:var(--bw-ink); font-family:var(--font-serif); font-weight:600; font-size:1.1rem; }
.chat-dot{ background:#7FB2E5; }
.topic-pill{ border-radius:4px; background:var(--surface); border-color:var(--bw-rule-strong); color:var(--gray-600); font-family:var(--font); }
.topic-pill:hover{ box-shadow:none; border-color:var(--bw-harbour); }
.topic-pill.active{ background:var(--bw-ink); border-color:var(--bw-ink); color:#FFFFFF; }
.intake-btn{ border-radius:6px; background:var(--surface); border-color:var(--bw-rule-strong); color:var(--navy); font-family:var(--font); }
.intake-btn:hover{ border-color:var(--bw-harbour); }
.chat-scroll{ background:var(--surface); }
.msg.user{ background:var(--bw-ink); color:#FFFFFF; border-radius:10px 10px 2px 10px; }
.msg.bot{ border-radius:10px 10px 10px 2px; border-color:var(--gray-200); }
:root:not([data-theme="dark"]) .msg.bot{ background:var(--bw-soft); }
.msg.escalation{ background:var(--bw-red-bg); border:1px solid var(--bw-red); border-left:4px solid var(--bw-red); color:var(--bw-red-dark); border-radius:0 8px 8px 0; }
:root[data-theme="dark"] .msg.escalation{ background:#3a1613; color:#ffb4ac; }
.msg-lbl{ color:var(--bw-steel); }
.msg-section-hdr, .tier-tag, .msg-table th{ font-family:var(--font); }
.msg-act-btn.saved{ color:var(--gold); }
.profile-prompt-box{ border-left-color:var(--accent); border-radius:0 8px 8px 0; }
.composer-wrap{ background:var(--surface); }
.chat-disclaimer{ background:var(--bw-blue-bg); color:var(--bw-ink); border-radius:4px; }
:root[data-theme="dark"] .chat-disclaimer{ background:#1E2A44; color:#DCE4F0; }
.composer textarea{ border:1px solid var(--bw-rule-strong); border-radius:6px; background:var(--surface); }
:root[data-theme="dark"] .composer textarea{ border-color:var(--gray-400); }
.send-btn{ background:var(--bw-ink); border-radius:6px; width:42px; height:42px; }
.send-btn:hover{ transform:none; background:var(--bw-harbour); }
:root[data-theme="dark"] .send-btn{ background:#E4E9F2; color:var(--bw-ink); }
.lib-chat-box{ border:1px solid var(--gray-200); border-radius:8px; background:var(--surface); }
.src-chip{ color:var(--bw-steel); }

/* ---------- Find Help, Red Flags lists ---------- */
.sol-card{ border-radius:8px; border-color:var(--gray-200); box-shadow:none; }
.sol-card.featured{ background:var(--surface); border:1px solid var(--gray-200); border-left:4px solid var(--bw-coral); box-shadow:none; border-radius:0 8px 8px 0; }
#countryInfoBox .sol-card.featured{ border-left-color:var(--bw-red); }
.sol-name{ font-family:var(--font-serif); font-weight:600; font-size:1.15rem; }
.feat-badge{ background:#FCF1EC; color:#8F3417; }
.ver-badge{ background:var(--bw-blue-bg); color:var(--bw-blue); }
.emg-badge{ background:var(--bw-red-bg); color:var(--bw-red-dark); }
.avail-slot{ background:var(--surface); border:1px dashed var(--bw-rule-strong); border-radius:8px; }
:root[data-theme="dark"] .avail-slot{ border-color:var(--gray-200); }
.lib-card{ background:var(--surface); border:1px solid var(--gray-200); border-left:4px solid var(--bw-red); border-radius:0 8px 8px 0; box-shadow:none; }
.lib-card h4{ font-size:0.95rem; color:var(--navy); }
.lib-card h4 .icon{ color:var(--bw-red); }
:root[data-theme="dark"] .lib-card h4 .icon{ color:#FFB4AC; }
.library-list{ gap:8px; }

/* ---------- Forms, settings, FAQ ---------- */
.form-field label{ color:var(--gray-600); }
.settings-row{ border-bottom-color:var(--gray-200); }
.faq-search{ border:1px solid var(--bw-rule-strong); border-radius:6px; background:var(--surface); }
.faq-acc details{ border-radius:8px; border-color:var(--gray-200); background:var(--surface); }
.faq-acc summary{ color:var(--gray-800); }
.faq-acc summary::after{ color:var(--bw-coral-strong); font-weight:600; }
:root[data-theme="dark"] .faq-acc summary::after{ color:var(--gold); }
.faq-acc .acc-body a{ color:var(--accent); }

/* ---------- Before you start / overlays ---------- */
.consent-overlay{ background:rgba(13,22,41,0.78); align-items:center; padding:16px; }
.more-overlay{ background:rgba(13,22,41,0.6); }
.consent-card{ border-radius:8px; border-top:4px solid var(--bw-coral); padding:1.6rem 1.4rem 1.5rem;
  box-shadow:0 18px 44px rgba(10,18,36,0.28); max-height:calc(100vh - 32px); overflow-y:auto; }
.consent-card h3{ font-family:var(--font-serif); font-weight:500; font-size:1.45rem; color:var(--navy); }
.consent-card h3 .icon{ color:var(--bw-coral-strong); width:0.85em; height:0.85em; }
:root[data-theme="dark"] .consent-card h3, :root[data-theme="dark"] .consent-card h3 .icon{ color:#FFFFFF; }
.consent-card p{ font-size:0.88rem; }
.consent-card p strong{ color:var(--bw-red-dark); }
.more-panel{ border-radius:8px 8px 0 0; border-top:4px solid var(--bw-coral); }
.sheet-item{ border-bottom-color:var(--gray-200); }
.sheet-item .icon{ color:var(--bw-harbour); }
:root[data-theme="dark"] .sheet-item .icon{ color:var(--gold); }

/* Install banner */
#pwa-banner{ background:var(--bw-ink); border-radius:8px; }
.pwa-icon{ background:var(--bw-coral); border-radius:6px; }
.pwa-install-btn{ background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; }

/* ---------- Phones ---------- */
@media (max-width:760px){
  .hero{ padding-top:36px; padding-bottom:40px; }
  #page-redflags .hero{ padding:34px 1.25rem 38px !important; }
  .hero p{ font-size:1.02rem; }
  .nav-logo{ font-size:1.12rem; }
  .btn-primary, .btn-sos{ flex:1 1 auto; justify-content:center; }
}

/* Notices inside text pages sit flush with the text */
.static-page .disclaimer{ margin-left:0; margin-right:0; }

/* Dark theme: filled navy controls would vanish on the dark surfaces, so they turn light */
:root[data-theme="dark"] .topic-pill.active, :root[data-theme="dark"] .cat-btn.active, :root[data-theme="dark"] .seg button.active,
:root[data-theme="dark"] .profile-prompt-btn, :root[data-theme="dark"] .cbtn, :root[data-theme="dark"] .contact-btn{
  background:#E4E9F2; color:#14213D; border-color:#E4E9F2;
}