/* =========================================================
   Big Easy Siding — Sitemap and legal document pages
   Loads after style.css, service.css and pages.css.
   ========================================================= */

/* ---------- legal document layout ---------- */
.legal{background:#fff;padding:60px 0 70px}
.legal-grid{display:grid;grid-template-columns:262px minmax(0,1fr);gap:52px;align-items:start}

/* sticky table of contents */
.legal-toc{
  position:sticky;top:calc(var(--header-h) + 20px);
  background:var(--cool);border:1px solid var(--line);border-radius:10px;padding:22px 20px;
}
.legal-toc-title{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#5A6E85;margin:0 0 14px;
}
.legal-toc ol{counter-reset:toc;display:grid;gap:2px}
.legal-toc li{counter-increment:toc}
.legal-toc ol a{
  display:flex;gap:9px;padding:7px 8px;border-radius:6px;
  font-size:13.8px;line-height:1.45;color:#33495F;
}
/* counter is text and must meet 4.5:1 on the --cool panel */
.legal-toc ol a::before{content:counter(toc) ".";color:#5F7288;font-variant-numeric:tabular-nums;flex:0 0 auto}
.legal-toc ol a:hover{background:#fff;color:var(--navy-700)}
.legal-toc ol a:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.legal-toc-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.legal-toc-cta .btn{width:100%}

/* document head */
.legal-head{margin-bottom:22px}
.legal-head h2{font-size:clamp(27px,2.7vw,36px);margin:0 0 12px}
.legal-updated{margin:0;font-size:14px;color:#5A6E85;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.legal-badge{
  display:inline-block;padding:4px 11px;border-radius:20px;background:var(--tint);
  color:var(--navy-700);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* the "transfer this content" notice */
.legal-notice{
  background:#FFF8E6;border:1px solid #F0D89A;border-left:4px solid var(--gold-dk);
  border-radius:8px;padding:18px 20px;margin:0 0 32px;
}
.legal-notice p{margin:0 0 9px;font-size:14.3px;line-height:1.68;color:#5A4A22}
.legal-notice p:last-child{margin-bottom:0}
.legal-notice a{color:#7A5A0B;text-decoration:underline;word-break:break-word}

/* document sections */
.legal-sec{padding:0 0 30px;scroll-margin-top:calc(var(--header-h) + 20px)}
.legal-sec h2{
  font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);
  margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.legal-sec p{font-size:15.2px;line-height:1.8;margin:0 0 15px}
.legal-sec p:last-child{margin-bottom:0}

.legal-placeholder{
  border:1px dashed #BFCEDD;border-radius:8px;background:#FBFCFE;padding:16px 18px;
}
.legal-placeholder p{font-size:14px;line-height:1.66;margin:0 0 8px;color:#5A6E85}
.legal-placeholder p:last-child{margin-bottom:0}
.legal-placeholder b{color:var(--ink)}
.legal-placeholder a{color:var(--navy-700);text-decoration:underline;word-break:break-word}

.legal-foot{
  margin-top:10px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.7;
}
.legal-foot a{color:var(--navy-700);font-weight:700;text-decoration:underline}

/* ---------- sitemap ---------- */
.sitemap{background:#fff;padding:60px 0 70px}
.sm-group{margin:0 0 44px}
.sm-group:last-of-type{margin-bottom:22px}
.sm-group > h2{
  font-size:clamp(21px,2.1vw,27px);margin:0 0 18px;
  padding-bottom:11px;border-bottom:2px solid var(--line);
}
.sm-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 22px}
.sm-list-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-list > li > a,.sm-sub a{
  display:inline-block;padding:5px 0;font-size:14.5px;line-height:1.5;color:#28425F;
}
.sm-list > li > a{font-weight:600}
.sm-list a:hover,.sm-sub a:hover{color:var(--navy-700);text-decoration:underline}

.sm-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sm-branch{
  background:#FCFDFE;border:1px solid var(--line);border-radius:9px;padding:18px 20px 16px;
}
.sm-branch-h{
  margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line);
  font-size:15.5px;font-weight:700;color:var(--ink);
}
.sm-branch-h a{color:var(--navy-700)}
.sm-branch-h a:hover{text-decoration:underline}
.sm-sub{display:grid;gap:1px}
.sm-sub a{font-size:13.8px;color:#4A5D72;padding:4px 0}
.sm-list .sm-sub{margin:2px 0 6px 14px;padding-left:12px;border-left:2px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .legal-grid{grid-template-columns:1fr;gap:28px}
  .legal-toc{position:static}
  .legal-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:2px 14px}
  .sm-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .legal{padding:44px 0 50px}
  .sitemap{padding:44px 0 50px}
  .sm-list,.sm-list-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .legal-toc ol{grid-template-columns:1fr}
  .sm-branches{grid-template-columns:1fr}
  .sm-list,.sm-list-3{grid-template-columns:1fr}
  .legal-notice{padding:15px 16px}
  .legal-sec h2{font-size:18.5px}
}

/* These pages quote their source URL as visible link text
   ("https://www.bigeasysiding.com/privacy-policy/"), which is one unbreakable word
   ~374px wide — it forced the 1fr column open and scrolled the page sideways on a
   360px phone. `anywhere` rather than `break-word` on purpose: only `anywhere`
   also shrinks the element's min-content width, which is what the 1fr grid track
   sizes against — `break-word` wraps the text but leaves the track wide. */
.legal-body,.legal-toc{overflow-wrap:anywhere}