/* ==========================================================================
   Be Contract Wise guides, specimens and contract glossary: Be Wise family look
   (October 2026). Loaded after /contract-guides.css on every page in
   /contract-wise/, /contract-wise-scotland/ and /contract-glossary/.
   APPEARANCE ONLY: colours, fonts, spacing and shapes. No wording or behaviour changes.
   Each page sets its identifying colour with --bw-accent (header and footer lines,
   and the small marks before section labels).
   The specimen contracts keep the client's contract house style untouched:
   EB Garamond, black text, no colour.
   ========================================================================== */

:root{
  --bw-ink:#14213D;          /* deep navy: header, footer, panels */
  --bw-harbour:#1B2A4A;      /* logo navy */
  --bw-coral:#E4572E;        /* accents and focus */
  --bw-coral-strong:#C2461F; /* filled buttons with white text */
  --bw-mist:#EEF1F6;         /* page background */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-link:#2F6FA8;
  --bw-accent:#3D5A99;       /* overridden per folder */

  /* Re-point the shared guide stylesheet's tokens at the family palette */
  --ink:#14213D;
  --ink-soft:#3E4A63;
  --paper:#EEF1F6;
  --raised:#FFFFFF;
  --brass:#C2461F;
  --brass-dark:#A63B19;
  --slate:#56637A;
  --rule:#D9DFE8;
  --rule-strong:#C3CCD9;
  --sage:#2C5E8C;            /* "good" = blue, never green */
  --sage-bg:#E7EFF8;
  --focus:#E4572E;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body{
  background:var(--bw-mist); color:var(--bw-ink);
  font-family:var(--sans); line-height:1.65;
}
:focus-visible{ outline:3px solid var(--bw-coral); outline-offset:2px; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--serif); color:var(--bw-ink); }
h1{
  font-weight:500; font-size:clamp(2rem,4.6vw,2.85rem); line-height:1.1;
  letter-spacing:-0.02em; margin:0 0 .45em; max-width:30ch;
}
h2{ font-weight:500; font-size:1.55rem; line-height:1.2; letter-spacing:-0.01em; margin-top:1.8em; padding-top:0; }
h3{ font-weight:600; font-size:1.14rem; line-height:1.3; letter-spacing:0; margin-top:1.3em; }
h2 + h3{ margin-top:.6em; }
p{ color:var(--ink-soft); max-width:70ch; }
ul,ol{ color:var(--ink-soft); max-width:68ch; }
li{ margin-bottom:.5em; }
li::marker{ color:var(--bw-steel); }
strong{ color:var(--bw-ink); }

a{ color:var(--bw-link); text-decoration-color:rgba(47,111,168,.4); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--bw-harbour); text-decoration-color:var(--bw-coral); }

.wrap{ max-width:940px; padding:0 20px; }

/* ---------- Top strips: Be Wise Apps button and disclaimer ---------- */
.bw-strip{ background:#0D1629; }
.dis-bar{
  background:#0D1629; color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.82rem; line-height:1.45; padding:8px 16px;
}

/* ---------- Header: navy with the identifying colour line ---------- */
header.site{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
header.site .wrap{ padding-top:14px; padding-bottom:14px; gap:10px 20px; }
.brand{
  color:#FFFFFF; font-family:var(--serif); font-weight:600; font-size:1.4rem;
  letter-spacing:-0.005em; gap:10px;
}
.brand:hover{ color:#FFFFFF; }
.brand img{ width:34px; height:34px; }
.snav{ display:flex; flex-wrap:wrap; gap:4px 22px; }
.snav a{
  margin-left:0; color:rgba(255,255,255,.78); font-weight:600; font-size:.92rem;
  text-decoration:none; padding:4px 0; border-bottom:2px solid transparent;
}
.snav a:hover, .snav a:focus-visible{ color:#FFFFFF; text-decoration:none; border-bottom-color:var(--bw-coral); }

/* ---------- Page opening ---------- */
.crumbs{ font-size:.84rem; color:var(--bw-steel); margin:26px 0 14px; }
.crumbs a{ color:var(--bw-steel); text-decoration-color:var(--bw-rule-strong); }
.crumbs a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
.lede{ font-size:1.16rem; line-height:1.6; color:var(--bw-ink); max-width:64ch; }
.meta-line{
  font-size:.86rem; color:var(--bw-steel); line-height:1.55;
  border-top:1px solid var(--bw-rule-strong); border-bottom:1px solid var(--bw-rule-strong);
  padding:10px 0; margin:22px 0 10px; max-width:none;
}
.meta-line a{ color:var(--bw-steel); text-decoration-color:var(--bw-rule-strong); }
.meta-line a:hover{ color:var(--bw-ink); text-decoration-color:var(--bw-coral); }
.updated{ font-size:.84rem; color:var(--bw-steel); }

/* Section labels: small identifying-colour mark in front */
h2.group-h, .related h2, section.qas > h2{
  display:flex; align-items:center; gap:10px;
}
h2.group-h::before, .related h2::before, section.qas > h2::before{
  content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0;
}

/* Cross-reference to the other jurisdiction's version */
.xlink{
  font-size:.92rem; color:var(--ink-soft); background:#FFFFFF;
  border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:10px 16px; max-width:66ch;
}

/* ---------- Tables (if any) ---------- */
.tbl{ border:1px solid var(--bw-rule); border-radius:8px; background:#FFFFFF; }
.tbl th{ font-family:var(--sans); font-weight:600; font-size:.86rem; color:var(--bw-ink); background:#F3F5F9; }
.tbl th, .tbl td{ border-bottom:1px solid var(--bw-rule); }

/* ---------- Quick answers ---------- */
section.qas{
  margin-top:2.6em; border:1px solid var(--bw-rule); border-radius:8px;
  background:#FFFFFF; padding:22px 26px 8px;
}
section.qas > h2{ margin:0 0 .3em; }
article.qa{ border-bottom:1px solid var(--bw-rule); padding:16px 0 8px; }
article.qa:last-child{ border-bottom:0; }
article.qa h3{ margin:0 0 .35em; }
.ans{ color:var(--ink-soft); }

/* ---------- Link cards (guides, specimens, glossary, related terms) ---------- */
.related{ margin-top:2.6em; }
.related h2{ font-size:1.3rem; margin:0 0 .6em; }
.cards{ gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.cards a{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:1px solid var(--bw-rule);
  border-radius:8px; padding:14px 16px 15px; color:var(--bw-ink);
  font-family:var(--serif); font-weight:600; font-size:1.06rem; line-height:1.3;
  box-shadow:0 1px 2px rgba(20,33,61,.05);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cards a:hover, .cards a:focus-visible{
  border-color:var(--bw-harbour); border-left-color:var(--bw-harbour); color:var(--bw-ink);
  box-shadow:0 6px 18px rgba(20,33,61,.10), inset 0 3px 0 var(--bw-coral);
}
.cards small{ font-family:var(--sans); font-size:.85rem; line-height:1.5; color:var(--bw-steel); margin-top:6px; }
.group-h{ margin-top:2em; }

/* ---------- Call to action panel ---------- */
.cta{
  background:var(--bw-ink); color:rgba(255,255,255,.8);
  border-radius:8px; border-top:3px solid var(--bw-coral);
  padding:24px 26px 22px; margin:38px 0 12px;
}
.cta h2{ color:#FFFFFF; font-weight:500; font-size:1.4rem; }
.cta p{ color:rgba(255,255,255,.8); }
.btn{
  background:var(--bw-coral-strong); color:#FFFFFF; font-family:var(--sans);
  font-weight:600; border-radius:4px; padding:11px 18px; border:1px solid var(--bw-coral-strong);
}
.btn:hover{ background:#A63B19; border-color:#A63B19; color:#FFFFFF; }
.btn.alt{ background:transparent; border:1px solid rgba(255,255,255,.4); color:#FFFFFF; }
.btn.alt:hover{ background:rgba(255,255,255,.1); border-color:#FFFFFF; }

/* ---------- Recent changes ---------- */
.chg{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:14px 18px 10px; margin:16px 0; max-width:72ch;
}
.chg h3{ margin:0 0 .2em; font-size:1.1rem; }
.chg time{ display:block; font-size:.82rem; font-weight:600; color:var(--bw-steel); margin-bottom:.4em; }

/* ---------- Glossary: A to Z and term pages ---------- */
.az{ gap:6px; margin:18px 0 6px; max-width:none; font-family:var(--sans); }
.az a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 6px;
  background:#FFFFFF; border:1px solid var(--bw-rule); border-radius:6px;
  color:var(--bw-ink); font-family:var(--serif); font-weight:600; font-size:1.05rem;
  text-decoration:none;
}
.az a:hover, .az a:focus-visible{ border-color:var(--bw-harbour); background:var(--bw-ink); color:#FFFFFF; }
h2.group-h[id^="l-"]{ font-size:1.6rem; margin-top:1.6em; padding-bottom:.25em; border-bottom:1px solid var(--bw-rule-strong); scroll-margin-top:14px; }

/* Term pages: the definition stands out as a crisp panel */
main:has(> .crumbs a[href="/contract-glossary/"]) > h1{ margin-bottom:.35em; }
main:has(> .crumbs a[href="/contract-glossary/"]) > .lede{
  background:#FFFFFF; border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; padding:18px 22px; max-width:68ch;
  font-size:1.14rem; line-height:1.6; color:var(--bw-ink);
}
main:has(> .crumbs a[href="/contract-glossary/"]) > h2{ font-size:1.3rem; margin-top:1.5em; }

/* ---------- Specimens: page chrome only ---------- */
.spec-warn{
  background:#FCF1EC; border:1px solid #F1CDBE; border-left:4px solid var(--bw-coral-strong);
  color:#5C2410; border-radius:0 8px 8px 0; padding:12px 18px; font-size:.93rem;
}
.spec-warn strong{ color:#5C2410; }
/* The document itself keeps the house style exactly: EB Garamond, black, no colour.
   Only the frame around the sheet follows the family palette. */
.specimen{
  border:1px solid var(--bw-rule-strong); border-radius:2px;
  box-shadow:0 2px 14px rgba(20,33,61,.08);
  font-family:"EB Garamond", Garamond, "Times New Roman", serif; color:#000;
}
.specimen p, .specimen div, .specimen span, .specimen em, .specimen strong{ color:#000; }

/* ---------- Footer: navy with the identifying colour line ---------- */
footer.site{
  background:var(--bw-ink); color:rgba(255,255,255,.72);
  border-top:3px solid var(--bw-accent); padding:26px 0; font-size:.86rem; line-height:1.6;
}
footer.site a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer.site .bw-legal-links a{ text-decoration-color:rgba(255,255,255,.4) !important; }
footer.site .bw-legal-links a:hover{ color:#FFFFFF !important; text-decoration-color:var(--bw-coral) !important; }

/* Back / Back to Top buttons */
.bw-bottom button{ color:var(--bw-steel); font-family:var(--sans); }
.bw-bottom button:hover, .bw-bottom button:focus-visible{ color:var(--bw-ink); }

/* ---------- Phones ---------- */
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  header.site .wrap{ padding-top:12px; padding-bottom:12px; }
  .brand{ font-size:1.25rem; }
  .brand img{ width:30px; height:30px; }
  .snav{ gap:2px 18px; }
  h1{ font-size:clamp(1.8rem,8vw,2.2rem); }
  h2{ font-size:1.35rem; }
  .lede{ font-size:1.08rem; }
  section.qas{ padding:18px 16px 6px; }
  .cta{ padding:20px 18px 18px; }
  .cards{ grid-template-columns:1fr; }
  main:has(> .crumbs a[href="/contract-glossary/"]) > .lede{ padding:14px 16px; font-size:1.06rem; }
  .az a{ min-width:36px; height:36px; }
}