/* ==========================================================================
   Be Wise family look (October 2026): Be Solar Wise and Be Pet Wise GUIDE pages
   (public/solar-wise/ and public/pet-wise/).
   Matches the restyled apps (bw-family-solar-pet.css) and the bewiseapps.com
   home page: navy + coral, Newsreader headings, Public Sans text, white
   "paper" for the article on a soft grey page.
   APPEARANCE ONLY: colours, fonts, spacing and shapes. No wording, emoji,
   links or behaviour change. Loaded after the folders' own stylesheets
   (solar-wise-pages.css / pet-wise-pages.css), which are left untouched.
   Each page sets its identifying colour with --bw-accent in
   <style id="bw-family-app">; it is used ONLY for the line under the header,
   the line on top of the footer and the small marks before section headings.
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy: header, footer */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* accents, 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;
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-blue:#2C5E8C;         /* links, "good"/info: blue, never green */
  --bw-blue-bg:#E7EFF8;
  --bw-text:#1F2A40;
  --bw-accent:#3D5A99;       /* overridden per folder */
  --bw-display:"Newsreader", Georgia, "Times New Roman", serif;
  --bw-sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Re-point the folders' own tokens at the family palette (inline styles use var(--a)) */
  --a:#14213D; --a2:#2C5E8C; --acc:#E4572E; --acc2:#C2461F;
  --soft:#F6F8FB; --line:#D9DFE8; --ink:#1F2A40; --mut:#56637A;
  --pop:#E4572E; --ok:#2C5E8C;
}

/* ---------- Base ---------- */
html{ background:var(--bw-mist); }
body{
  background:var(--bw-mist); color:var(--bw-text);
  font-family:var(--bw-sans); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }
a{ color:var(--bw-blue); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--bw-harbour); text-decoration-thickness:2px; }
strong{ color:var(--bw-ink); font-weight:600; }

/* ---------- Masthead: Be Wise Apps strip + notice bar + header, one navy block ---------- */
.bw-strip{ background:var(--bw-ink); font-family:var(--bw-sans); border-bottom:1px solid rgba(255,255,255,0.08); }
.bw-strip .bw-appsbtn{ font-family:var(--bw-sans); font-weight:600; border-radius:999px; }
.dis-bar{
  background:var(--bw-ink); color:rgba(255,255,255,0.74);
  font-family:var(--bw-sans); font-size:0.8rem; line-height:1.45; letter-spacing:0.005em;
  padding:9px 16px; border-bottom:1px solid rgba(255,255,255,0.08);
}
header.site{
  background:var(--bw-ink); padding:14px 0;
  border-bottom:3px solid var(--bw-accent);
}
header.site .wrap{ max-width:900px; }
.brand{
  font-family:var(--bw-display); font-weight:600; font-size:1.35rem; letter-spacing:-0.005em;
  color:#FFFFFF; gap:10px;
}
.brand img{ width:34px; height:34px; }
.snav{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.snav a{
  color:rgba(255,255,255,0.78); font-family:var(--bw-sans); font-weight:600; font-size:0.88rem;
  margin-left:0; padding:6px 10px 4px; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.snav a:hover, .snav a:focus-visible{ color:#FFFFFF; text-decoration:none; border-bottom-color:var(--bw-coral); }

/* ---------- The article: white paper on the grey page ---------- */
main.wrap{
  max-width:860px; background:#FFFFFF;
  border:1px solid var(--bw-rule); border-radius:8px;
  margin:32px auto 40px; padding:30px 48px 36px;
}

/* ---------- Headings ---------- */
h1, h2, h3{ font-family:var(--bw-display); color:var(--bw-ink); letter-spacing:-0.01em; }
h1{
  font-weight:500; font-size:clamp(2rem,4.2vw,2.75rem); line-height:1.1; letter-spacing:-0.02em;
  margin:0.15em 0 0.45em; max-width:28ch;
}
h2{ font-weight:600; font-size:1.55rem; line-height:1.2; margin:2em 0 0.6em; }
h3{ font-weight:600; font-size:1.2rem; line-height:1.25; margin:1.5em 0 0.4em; }
/* Section headings in the article carry the small identifying-colour mark */
main.wrap > h2::before{
  content:""; display:block; width:18px; height:3px; border-radius:2px;
  background:var(--bw-accent); margin:0 0 12px;
}

/* ---------- Body text ---------- */
p{ color:var(--bw-text); max-width:70ch; margin:0 0 1em; font-size:1.0625rem; line-height:1.65; }
ul, ol{ color:var(--bw-text); max-width:70ch; padding-left:1.3em; font-size:1.0625rem; line-height:1.65; }
li{ margin-bottom:0.4em; }
li::marker{ color:var(--bw-steel); }
.crumbs{ font-size:0.82rem; color:var(--bw-steel); margin:0 0 18px; line-height:1.5; }
.crumbs a{ color:var(--bw-steel); text-decoration-color:var(--bw-rule-strong); }
.crumbs a:hover{ color:var(--bw-ink); text-decoration-color:currentColor; }
.lede{ font-size:1.18rem; line-height:1.55; color:var(--bw-steel); max-width:62ch; margin-bottom:1.3em; }
.updated{
  font-size:0.84rem; color:var(--bw-steel); margin-top:28px; padding-top:16px;
  border-top:1px solid var(--bw-rule); max-width:none;
}
.updated a{ color:var(--bw-steel); }
.small{ font-size:0.92rem; color:var(--bw-steel); }

/* ---------- Callouts ---------- */
.note{
  background:var(--bw-blue-bg); border:1px solid #C9D9EC; border-left:4px solid var(--bw-blue);
  border-radius:0 8px 8px 0; padding:12px 16px; margin:18px 0 22px; font-size:0.94rem;
}
.note p{ color:var(--bw-text); font-size:0.94rem; line-height:1.6; max-width:none; margin:0; }
.note p + p{ margin-top:0.5em; }
.note strong{ color:var(--bw-ink); }
.note a{ color:var(--bw-blue); }
.pair{
  background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:8px;
  padding:11px 16px; font-size:0.95rem; color:var(--bw-text); max-width:none;
}
.badge{
  display:inline-block; background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:4px;
  padding:6px 12px; font-size:0.84rem; line-height:1.5; color:var(--bw-steel); max-width:none;
}
.badge time{ color:var(--bw-ink); font-weight:600; }

/* ---------- Tables ---------- */
.tbl{ border:1px solid var(--bw-rule); border-radius:8px; margin:16px 0 22px; background:#FFFFFF; }
.tbl table{ font-size:0.95rem; line-height:1.5; }
.tbl th, .tbl td{ padding:11px 16px; border-bottom:1px solid var(--bw-rule); }
.tbl th{
  background:var(--bw-panel); font-family:var(--bw-sans); font-weight:600; color:var(--bw-ink);
  border-right:1px solid var(--bw-rule);
}
.tbl td{ color:var(--bw-text); }

/* ---------- Accordions (FAQs) ---------- */
details.q{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px; margin:8px 0;
  transition:border-color .15s;
}
details.q:hover{ border-color:var(--bw-rule-strong); }
details.q[open]{ border-color:var(--bw-rule-strong); }
details.q summary{
  font-family:var(--bw-sans); font-weight:600; font-size:1rem; line-height:1.45; color:var(--bw-ink);
  padding:14px 16px; align-items:flex-start;
}
details.q summary::after{
  content:"+"; color:var(--bw-coral); font-family:var(--bw-sans); font-weight:400;
  font-size:1.35rem; line-height:1.05; flex-shrink:0;
}
details.q[open] summary::after{ content:"\2013"; }
details.q[open] summary{ border-bottom:1px solid var(--bw-rule); margin-bottom:12px; }
details.q p{ padding:0 16px; margin:0 0 14px; font-size:1rem; max-width:none; }
details.q p.more{ margin-top:-4px; font-size:0.9rem; }

/* ---------- Link cards (breeds, guides, categories) ---------- */
.grid, .cats, .srcgrid{ gap:10px; max-width:none; }
.grid a, .cats a{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:8px;
  color:var(--bw-ink); font-family:var(--bw-sans); font-weight:600; line-height:1.4;
  padding:12px 14px; transition:border-color .15s, box-shadow .15s;
}
.grid a:hover, .cats a:hover, .grid a:focus-visible, .cats a:focus-visible{
  border-color:var(--bw-harbour); box-shadow:0 2px 8px rgba(20,33,61,0.08); color:var(--bw-ink);
}
.grid small, .cats small{ color:var(--bw-steel); font-weight:400; font-size:0.84rem; line-height:1.45; margin-top:3px; }

/* ---------- FAQ hubs ---------- */
.toc{ background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:8px; padding:16px 20px; margin:20px 0 26px; }
.toc h2{ font-family:var(--bw-display); font-weight:600; font-size:1.15rem; margin:0 0 0.5em; }
.toc ol{ font-size:0.97rem; line-height:1.5; }
.toc li{ margin-bottom:0.4em; }
.toc a{ color:var(--bw-blue); }
.toc a:hover{ color:var(--bw-harbour); }
article.qa{ border-top:1px solid var(--bw-rule); padding:22px 0 10px; }
article.qa h2{ font-family:var(--bw-display); font-weight:600; font-size:1.3rem; line-height:1.25; margin:0 0 0.5em; }
.ans{ color:var(--bw-text); font-size:1.0625rem; line-height:1.65; }
.src, .meta{ color:var(--bw-steel); font-size:0.86rem; line-height:1.55; max-width:none; }
.src a{ color:var(--bw-blue); }
.meta{ font-size:0.82rem; }
.updated-tag{ background:var(--bw-blue-bg); color:var(--bw-blue); border-radius:4px; font-weight:600; padding:1px 8px; }
.links{ font-size:0.9rem; }
.links a{ font-weight:600; }

/* ---------- Recent changes / sources ---------- */
.chg{ border-left:3px solid var(--bw-harbour); padding:4px 0 4px 16px; margin:20px 0; }
.chg.soon{ border-left-color:var(--bw-rule-strong); }
.chg h3{ font-size:1.15rem; margin:0.15em 0 0.3em; }
.chg time{ font-size:0.84rem; color:var(--bw-steel); font-weight:600; letter-spacing:0.01em; }
.chg p{ margin:0 0 0.4em; }
.srcgrid li, .srcs li{ font-size:0.97rem; }
.srcgrid li{ border-top:1px solid var(--bw-rule); padding:11px 0; }
.srcgrid a{ font-weight:600; }
.srcgrid small{ color:var(--bw-steel); font-size:0.86rem; line-height:1.5; margin-top:2px; }
.srcs{ font-size:0.97rem; }

/* ---------- Related guides ---------- */
.related{ margin-top:38px; padding-top:6px; }
.related h2{ font-size:1.25rem; margin:0 0 0.5em; }

/* ---------- Call to action ---------- */
.cta{
  background:var(--bw-panel); border:1px solid var(--bw-rule); border-radius:8px;
  padding:22px 24px; margin:36px 0 10px;
}
.cta h3{ font-family:var(--bw-display); font-weight:600; font-size:1.3rem; margin:0 0 0.35em; }
.cta p{ color:var(--bw-steel); font-size:1rem; margin-bottom:14px; }
.btn{
  background:var(--bw-coral-strong); color:#FFFFFF; border:1px solid var(--bw-coral-strong);
  font-family:var(--bw-sans); font-weight:600; font-size:0.95rem; line-height:1.3;
  border-radius:4px; padding:11px 20px; margin:4px 8px 4px 0;
  transition:background .15s, border-color .15s;
}
.btn:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); color:#FFFFFF; text-decoration:none; }
/* second button: the pages fill it inline with var(--a), which is now navy */
.btn[style*="--a"]{ border-color:var(--bw-ink); }
.btn[style*="--a"]:hover{ background:var(--bw-harbour) !important; border-color:var(--bw-harbour); }

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

/* ---------- Footer: navy band, identifying-colour line on top ---------- */
footer.site{
  background:var(--bw-ink); color:rgba(255,255,255,0.72);
  border-top:3px solid var(--bw-accent);
  font-family:var(--bw-sans); font-size:0.84rem; line-height:1.65;
  padding:26px 0 30px; margin-top:0;
}
footer.site .wrap{ max-width:900px; }
footer.site a{ color:#FFFFFF; font-weight:600; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer.site a:hover{ color:#FFFFFF; text-decoration-thickness:2px; }
footer.site .bw-legal-links a{ font-weight:500; text-decoration-color:rgba(255,255,255,0.4) !important; }
footer.site .bw-legal-links a:hover{ color:#FFFFFF !important; text-decoration-color:var(--bw-coral) !important; }

/* ---------- Phones ---------- */
@media (max-width:760px){
  main.wrap{ margin:0 0 0; border:0; border-radius:0; padding:20px 16px 28px; }
  header.site .wrap, footer.site .wrap{ padding-left:16px; padding-right:16px; }
  header.site{ padding:10px 0 8px; }
  .brand{ font-size:1.22rem; }
  .brand img{ width:30px; height:30px; }
  .snav{ margin-left:-10px; }
  .snav a{ font-size:0.85rem; padding:6px 10px 4px; }
  h1{ font-size:clamp(1.85rem,8vw,2.2rem); max-width:none; }
  h2{ font-size:1.38rem; margin-top:1.8em; }
  article.qa h2{ font-size:1.2rem; }
  p, ul, ol, .ans{ font-size:1rem; }
  .lede{ font-size:1.08rem; }
  .tbl th, .tbl td{ padding:10px 12px; }
  .cta{ padding:18px 16px; }
  .note{ padding:11px 14px; }
}
@media print{
  body, html{ background:#FFFFFF; }
  main.wrap{ border:0; padding:0; margin:0 auto; }
}