/* ==========================================================================
   Be Wise family look (October 2026): Be Solar Wise and Be Pet Wise
   Brings both sister apps 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, emoji, or how either app works.
   Each app sets its own identifying colour with --bw-accent in
   <style id="bw-family-app">; it is used ONLY for the line under the top bar,
   the line on top of the footer and the small mark before section labels.
   ========================================================================== */

: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-coral-hover:#A63B19;
  --bw-coral-soft:#F4A58C;   /* coral readable on navy */
  --bw-coral-wash:#FCF1EC;
  --bw-mist:#EEF1F6;         /* page background */
  --bw-panel:#F6F8FB;
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-blue:#2C5E8C;         /* "good"/info colour: blue, never green */
  --bw-blue-bg:#E7EFF8;
  --bw-text:#1F2A40;
  --bw-accent:#3D5A99;       /* overridden per app */

  /* Re-point both apps' own design tokens at the family palette */
  --font:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Newsreader", Georgia, "Times New Roman", serif;
  --radius:8px;
  --white:#FFFFFF; --surface:#FFFFFF;
  --gray-50:#EEF1F6; --gray-100:#F6F8FB; --gray-200:#D9DFE8;
  --gray-400:#9AA6B8; --gray-600:#56637A; --gray-800:#1F2A40;
  --alert:#C2461F; --alert-dark:#A63B19;
  /* Solar */
  --navy:#14213D; --navy-light:#1B2A4A; --navy-dark:#0D1629;
  --sky:#2C5E8C; --sky-text:#2C5E8C; --leaf:#2C5E8C;
  --sun:#E4572E; --sun-dark:#1B2A4A;
  /* Pet */
  --grape:#14213D; --grape-light:#1B2A4A; --grape-dark:#0D1629;
  --coral:#E4572E; --coral-dark:#C2461F; --mint:#2C5E8C;
}

/* ---------- Base ---------- */
body{ background:var(--bw-mist); color:var(--bw-text); font-family:var(--font); }
:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }
a{ color:var(--bw-blue); }
h1,h2,h3,h4{ letter-spacing:-0.01em; }

/* ---------- Top bar: navy, Waypoint logo, app colour line ---------- */
.topnav{
  background:var(--bw-ink); border-bottom:3px solid var(--bw-accent);
  padding-left:max(0.9rem, env(safe-area-inset-left,0px)); padding-right:0.9rem;
}
.nav-logo{
  font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:-0.005em;
  color:#FFFFFF; gap:9px;
}
.nav-logo::before{
  content:""; order:-1; width:30px; height:30px; flex-shrink:0;
  background:url("/favicon.svg") center/contain no-repeat;
}
/* the app's own emoji stay, shown quietly after the name */
.nav-logo .brand-seal{
  order:1; width:auto; height:auto; background:none; box-shadow:none; border-radius:0;
  font-size:0.95rem; margin-left:2px;
}
.nav-logo .paw-mark{ order:2; font-size:0.95rem; margin-left:-3px; }
.nav-links{ gap:4px; }
.nav-btn{
  color:rgba(255,255,255,0.75); font-family:var(--font); font-size:0.88rem; font-weight:600;
  border-radius:0; padding:8px 10px 6px; text-shadow:none;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-btn:hover{ background:none; color:#FFFFFF; }
.nav-btn.active{ background:none; color:#FFFFFF; border-bottom-color:var(--bw-coral); }
.icon-btn{ filter:none; border-radius:4px; }
.bw-burger{ border-radius:4px; border-color:rgba(255,255,255,0.3); }

/* ---------- Bottom phone nav ---------- */
.bnav{ background:var(--bw-ink); border-top:1px solid rgba(255,255,255,0.14); }
.bnav-btn{ color:rgba(255,255,255,0.78); font-family:var(--font); font-weight:600; text-shadow:none; position:relative; }
.bnav-btn .emoji{ filter:none; }
.bnav-btn.active{ color:#FFFFFF; }
.bnav-btn.active::before{
  content:""; position:absolute; top:0; left:28%; right:28%; height:3px; background:var(--bw-coral);
}

/* ---------- 3-bar menu (white panel, navy text) ---------- */
.bw-menu{
  border-radius:8px; border-color:var(--bw-rule); color:var(--bw-ink);
  font-family:var(--font); 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); }

/* ---------- Home screen hero: full-width navy band ---------- */
.hero{
  background:var(--bw-ink); text-align:left;
  padding:52px max(1.25rem, calc((100% - 680px) / 2)) 56px;
}
.hero h1{
  font-family:var(--font-display); font-weight:500; color:#FFFFFF;
  font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.06; letter-spacing:-0.02em;
  margin:6px 0 18px; max-width:20ch;
}
.hero h1 .accent{ color:var(--bw-coral-soft); }
.hero p{
  color:rgba(255,255,255,0.8); font-size:1.08rem; 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);
  font-family:var(--font); font-weight:600; position:relative; z-index:1;
}
.hero .bw-appsbtn:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.6); }
/* The floating sun / paw emoji stay, but quietly in the background */
.sun-trail span, .paw-trail span{ filter:none; animation-name:bwTrailFade; }
@keyframes bwTrailFade{
  0%{opacity:0;transform:scale(.8) rotate(var(--rot,0deg)) translateY(0)}
  40%{opacity:.16}
  100%{opacity:0;transform:scale(1) rotate(var(--rot,0deg)) translateY(-10px)}
}
@media (prefers-reduced-motion:reduce){ .sun-trail span, .paw-trail span{ animation:none; opacity:0 !important; } }
.hero-badge{ background:transparent; border-color:rgba(255,255,255,0.32); color:#FFFFFF; border-radius:4px; }

/* ---------- Where are you? (country picker) ---------- */
.country-gate{
  max-width:680px; margin:28px max(1.25rem, calc((100% - 680px) / 2)) 0;
  padding:1.3rem 1.4rem 1.4rem; background:#FFFFFF;
  border:1px solid var(--bw-rule); border-radius:8px;
}
.country-gate.resolved{ border-left-color:var(--bw-rule); }
.country-gate-title{
  font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--bw-ink);
  letter-spacing:-0.005em; margin-bottom:6px;
}
.country-gate p{ font-size:0.9rem; line-height:1.55; color:var(--bw-steel); margin-bottom:14px; }
.uk-nation-prompt{ background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:6px; padding:14px; }
.uk-nation-btns button, .dealer-types button{
  background:#FFFFFF; color:var(--bw-ink); border:1px solid var(--bw-rule-strong); border-radius:4px;
  font-family:var(--font); font-weight:600;
}
.uk-nation-btns button:hover, .dealer-types button:hover{ background:var(--bw-mist); border-color:var(--bw-harbour); }
.dealer-types button.sel{ background:var(--bw-ink); border-color:var(--bw-ink); color:#FFFFFF; }

/* ---------- Form fields ---------- */
.country-gate select, .dealer-panel select, .breed-row input, .breed-cross-selects select, .composer input{
  background:#FFFFFF; color:var(--bw-text); border:1px solid var(--bw-rule-strong); border-radius:6px;
}
.country-gate select:focus, .dealer-panel select:focus, .breed-row input:focus, .breed-cross-selects select:focus, .composer input:focus{
  border-color:var(--bw-harbour); outline:2px solid rgba(228,87,46,0.35); outline-offset:1px;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-secondary-light{
  font-family:var(--font); font-weight:600; font-size:0.95rem; border-radius:4px;
  padding:13px 22px; transition:background .15s, border-color .15s;
}
.btn-primary{ background:var(--bw-coral-strong); color:#FFFFFF; border:1px solid var(--bw-coral-strong); }
.btn-primary:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); transform:none; box-shadow:none; }
/* navy-filled secondary (Pet "Ask PetBot" on the Ask page sets a navy fill inline) */
.btn-secondary{ background:var(--bw-ink); color:#FFFFFF; border:1px solid var(--bw-ink); }
.btn-secondary:hover{ transform:none; background:var(--bw-harbour) !important; }
/* white secondary buttons */
.btn-secondary-light, .home-actions .btn-secondary{
  background:#FFFFFF; color:var(--bw-ink); border:1px solid var(--bw-rule-strong);
}
.btn-secondary-light:hover, .home-actions .btn-secondary:hover{
  transform:none; background:var(--bw-mist) !important; border-color:var(--bw-harbour);
}
.hero-actions-below, .home-actions{ margin-top:22px; }
.footer-nav-btn{ border-radius:4px; font-family:var(--font); font-weight:600; background:#FFFFFF; }
.back-link{ color:var(--bw-harbour); font-family:var(--font); font-weight:600; }
.back-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Advertisement boxes ---------- */
.bw-spot-banner, .dealer-spot{
  background:#FFFFFF; border:1px dashed var(--bw-rule-strong); border-radius:8px; color:var(--bw-steel);
}
.bw-spot-banner{ font-size:0.82rem; }
#page-home .bw-spot-banner{ margin-top:1.25rem; margin-left:max(1.25rem, calc((100% - 680px) / 2)); margin-right:max(1.25rem, calc((100% - 680px) / 2)); }
.bw-spot-banner strong, .dealer-spot .lbl{ color:var(--bw-steel); font-weight:600; }
.bw-spot-link, .dealer-spot a{ color:var(--bw-blue); }
.bw-spot-cta{
  background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; font-family:var(--font); font-weight:600;
  font-size:0.8rem; padding:8px 16px;
}
.bw-spot-cta:hover{ background:var(--bw-coral-hover); transform:none; }
.dealer-spot .big{ font-family:var(--font-display); font-weight:600; color:var(--bw-ink); }

/* ---------- Section labels: small app-colour mark in front ---------- */
.section-lbl{
  font-family:var(--font); font-size:0.95rem; font-weight:600; color:var(--bw-steel); letter-spacing:0;
  display:flex; align-items:center; gap:10px; margin-top:1.6rem; margin-bottom:0.9rem;
}
.section-lbl::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.section-lbl[style*="center"]{ justify-content:center; }

/* ---------- Topic cards ---------- */
.cat-card{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:3px solid var(--tint,var(--bw-ink));
  border-radius:8px; padding:1rem 1.1rem; transition:border-color .15s, box-shadow .15s;
}
.cat-card:hover{ transform:none; box-shadow:0 2px 8px rgba(20,33,61,0.08); border-color:var(--bw-rule-strong); border-left-color:var(--tint,var(--bw-ink)); }
.cat-card h3, .feature-card h3{
  font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--bw-ink); letter-spacing:0; margin-bottom:3px;
}
.cat-card p, .feature-card p{ font-size:0.85rem; color:var(--bw-steel); line-height:1.45; }

/* ---------- Pet picker ---------- */
.feature-card{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; box-shadow:none;
  transition:border-color .15s, box-shadow .15s;
}
.feature-card:hover{ transform:none; border-color:var(--bw-harbour); box-shadow:0 2px 8px rgba(20,33,61,0.08); }
.feature-card:hover .glyph{ transform:none; }
.pet-header h2{ font-family:var(--font-display); font-weight:500; font-size:1.8rem; color:var(--bw-ink); }
.pet-header .sub{ color:var(--bw-steel); font-size:0.88rem; }
.breed-row button, #breedSuggestYes, #breedCrossYes{
  background:var(--bw-ink); color:#FFFFFF; border:1px solid var(--bw-ink); border-radius:4px; font-family:var(--font); font-weight:600;
}
.breed-row button:hover, #breedSuggestYes:hover, #breedCrossYes:hover{ background:var(--bw-harbour); }
#breedSuggestNo, #breedCrossNo{
  background:#FFFFFF; color:var(--bw-ink); border:1px solid var(--bw-rule-strong); border-radius:4px;
}
.breed-suggest-actions button{ font-family:var(--font); font-weight:600; border-radius:4px; }
.breed-suggest{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:0.9rem 1rem;
}
.breed-suggest span{ color:var(--bw-text); }
.breed-suggest span strong{ color:var(--bw-ink); }
.breed-cross-x{ color:var(--bw-steel); }
@media (max-width:720px){ .breed-suggest{ margin-left:1.25rem; margin-right:1.25rem; } }
#askBotPetName{ color:var(--bw-ink) !important; }

/* ---------- Content panels ---------- */
.content-panel{ background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; box-shadow:none; }
.content-panel h2, .dealer-panel h2, #dealerAreaTitle, .advertise-brand h2{
  font-family:var(--font-display); font-weight:500; font-size:1.65rem; line-height:1.15; color:var(--bw-ink); letter-spacing:-0.015em;
}
.dealer-q{ font-family:var(--font-display); font-weight:600; color:var(--bw-ink); font-size:1.15rem; }
.content-body{ color:var(--bw-text); }
.md-h1, .md-h2, .md-h3{ font-family:var(--font-display); font-weight:600; color:var(--bw-ink); letter-spacing:0; }
.md-h3{ color:var(--bw-coral-strong); }
.content-body strong, .msg strong{ color:var(--bw-ink); }
.md-hr{ border-top-style:solid; border-top-color:var(--bw-rule); }
.md-table-wrap, .md-table tr{ border-radius:8px; }
.md-table th{ background:var(--bw-ink); font-family:var(--font); font-weight:600; }
.md-table td::before{ color:var(--bw-ink); }

/* ---------- Disclaimers ---------- */
.disclaimer-strip{ color:var(--bw-steel); font-size:0.8rem; line-height:1.55; }
.advice-disclaimer{
  background:var(--bw-coral-wash); border:1px solid #E9B9A6; border-left:4px solid var(--bw-coral-strong);
  border-radius:0 8px 8px 0; color:#7A2E14;
}
.advice-disclaimer strong{ color:#7A2E14; }
.advice-disclaimer.legal{ background:#FBEDEA; border-color:#E2B3AA; border-left-color:#B3261E; color:#6E1F18; }
.advice-disclaimer.legal strong{ color:#6E1F18; }

/* ---------- Guides lists (crawl links) ---------- */
.crawl-links{
  max-width:680px; margin:1.6rem max(1.25rem, calc((100% - 680px) / 2)) 1rem;
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; padding:1.3rem 1.4rem;
}
.crawl-links h2{ font-family:var(--font-display); font-weight:500; font-size:1.4rem; color:var(--bw-ink); letter-spacing:-0.01em; margin-bottom:.8rem; }
.crawl-links a{
  background:#FFFFFF; border:1px solid var(--bw-rule-strong); border-radius:4px; color:var(--bw-ink); font-weight:500;
}
.crawl-links a:hover{ border-color:var(--bw-harbour); background:var(--bw-mist); }
.crawl-links details{ border-top:1px solid var(--bw-rule); padding-top:.45rem; }
.crawl-links summary{ color:var(--bw-ink); font-weight:600 !important; }
.crawl-links details p{ color:var(--bw-text); line-height:1.55; }

/* ---------- Chat (SolarBot / PetBot) ---------- */
.chat-hdr{ background:var(--bw-ink); font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:0; }
.chat-dot{ background:var(--bw-coral-soft); }
.chat-note{ background:var(--bw-panel); color:var(--bw-steel); border-bottom:1px solid var(--bw-rule); font-size:0.82rem; }
.chat-scroll{ background:var(--bw-mist); }
.msg.user{ background:var(--bw-ink); color:#FFFFFF; border-radius:10px 10px 2px 10px; }
.msg.bot{ background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:10px 10px 10px 2px; color:var(--bw-text); }
.composer-wrap{ border-top-color:var(--bw-rule); }
.composer input{ border-width:1px; }
.send-btn{ background:var(--bw-coral-strong); border-radius:4px; }
.send-btn:hover{ background:var(--bw-coral-hover); transform:none; }

/* ---------- Advertise with us page ---------- */
.advertise-seal{ background:var(--bw-ink); border-radius:8px; box-shadow:none; }
.advertise-sub{ color:var(--bw-steel); }
.advertise-card{ background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:8px; }
.advertise-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--bw-ink); }
.advertise-contact{ background:var(--bw-ink); border-radius:8px; }
.advertise-contact-label{ color:rgba(255,255,255,0.72); display:flex; align-items:center; justify-content:center; gap:10px; letter-spacing:0.04em; }
.advertise-contact-label::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.advertise-email{ font-family:var(--font); font-weight:600; color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--bw-coral); text-underline-offset:4px; }

/* ---------- Dealers ---------- */
.dealer-uk-note, .dealer-none{ color:var(--bw-steel); }
.dealer-spot .lbl{ border-color:var(--bw-rule-strong); border-radius:4px; }

/* ---------- Shared Back / Back to Top links ---------- */
.bw-bottom{ color:var(--bw-harbour); }
.bw-bottom button{ font-family:var(--font); }

/* ---------- Footer: navy band, app colour line on top ---------- */
footer.site{
  max-width:none; margin:0; background:var(--bw-ink); color:rgba(255,255,255,0.72);
  border-top:3px solid var(--bw-accent); font-size:0.82rem; line-height:1.6;
  padding:1.6rem max(1.25rem, calc((100% - 680px) / 2)) 2rem;
}
footer.site a{ color:#FFFFFF !important; font-weight:600; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }

/* ---------- Phones ---------- */
@media (max-width:760px){
  /* the footer no longer tucks up into the page's bottom space (it would cover the Back links) */
  footer.site{ margin-top:0; padding-bottom:calc(var(--bnav) + 1.2rem); }
  .page:not(#page-chat){ padding-bottom:0.5rem; }
  .hero{ padding-top:36px; padding-bottom:40px; }
  .hero h1{ font-size:2.3rem; }
  .paw-trail ~ h1{ font-size:min(2.3rem, 7.8vw); max-width:none; } /* Pet: keeps "Everything about your pet," on one line */
  .hero p{ font-size:1rem; }
  .nav-logo{ font-size:1.18rem; }
}