/* ============================================================
   WFSC MALL  |  css/legal.css
   Stylesheet for privacy.html and terms-of-service.html only.
   These pages load NO other stylesheet, so this file must set
   the page background, text colour, and full legal layout with
   strong contrast and a scoped section isolation rule.
   ============================================================ */

:root{
  --limestone:#EFE9DF;
  --ink:#2B2830;
  --magenta:#C2447E;
  --brass:#8A7248;
  --marble:#F9F6F0;
  --corridor:#33303A;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-size:16px;
  background-color:var(--limestone);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.7;
  overflow-x:hidden;
}

a{color:var(--magenta);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Page wrapper with a contained reading measure.
   Any container that sets a max-width must also set
   margin:0 auto and padding:0 24px. */
.legal-shell{
  max-width:940px;
  margin:0 auto;
  padding:0 24px;
}

.legal-note-top{
  max-width:940px;
  margin:0 auto;
  padding:14px 24px;
  text-align:right;
}
.legal-note-top a{
  display:inline-block;
  background-color:var(--corridor);
  color:var(--marble);
  padding:8px 16px;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:1px;
}
.legal-note-top a:hover{text-decoration:none;background-color:#20202a;}

/* Solid legal header with strong h1 contrast.
   Uses only class selectors against the legal-page scope. */
.legal-page-cover{display:block;}

.legal-band{
  background-color:var(--corridor);
  border-top:6px solid var(--brass);
  border-bottom:6px solid var(--brass);
  padding:46px 0 38px;
}
.legal-kicker{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--magenta);
}
.legal-band h1{
  color:var(--marble);
  font-size:2.4rem;
  line-height:1.15;
  margin-top:8px;
  letter-spacing:-0.5px;
}
.legal-band .legal-updated{
  color:#B7AEBB;
  font-family:Arial,Helvetica,sans-serif;
  font-size:0.9rem;
  margin-top:12px;
}
.legal-band .legal-updated strong{color:var(--magenta);font-weight:700;}
.legal-org{
  display:inline-block;
  margin-top:18px;
  background-color:var(--magenta);
  color:var(--marble);
  padding:6px 14px;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:1px;
}

/* Table of contents as directory chips */
.legal-toc{
  max-width:940px;
  margin:0 auto;
  padding:0 24px;
}
.legal-toc-box{
  background-color:var(--marble);
  border:1px solid var(--brass);
  border-left:6px solid var(--magenta);
  margin:26px 0 0;
  padding:22px 26px;
}
.legal-toc-box h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:0.9rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
}
.legal-toc-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:6px 26px;
}
.legal-toc-list li{padding:4px 0;border-bottom:1px dashed #E1D7C6;}
.legal-toc-list a{color:var(--ink);font-size:0.98rem;}
.legal-toc-list a:hover{color:var(--magenta);text-decoration:none;}
.legal-toc-list a .toc-no{display:inline-block;color:var(--magenta);font-weight:800;margin-right:8px;}

/* Main legal content with scope isolation.
   Only section elements inside .legal-content get the
   transparent background treatment, keeping the warm page
   tone beneath without any overlay banding. */
.legal-content{
  max-width:940px;
  margin:0 auto;
  padding:0 24px 8px;
}

/* SCOPE-ISOLATION RULE (mandatory):
   keep sections transparent so no stray background leaks in. */
.legal-content section{
  background-color:transparent !important;
}

.legal-section{
  border-left:3px solid var(--brass);
  padding:26px 0 8px 0;
  margin-left:8px;
}
.legal-section h2{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-size:1.5rem;
  color:var(--ink);
  margin-bottom:10px;
  letter-spacing:-0.3px;
}
.legal-section h2 .sec-no{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--magenta);
  font-size:0.9rem;
  font-weight:800;
  letter-spacing:1px;
  flex:0 0 auto;
}
.legal-section h3{
  color:var(--brass);
  font-size:1.12rem;
  margin:18px 0 8px;
}
.legal-section p{
  margin:12px 0;
  color:#3A3640;
}
.legal-section ul{
  list-style:none;
  margin:12px 0;
}
.legal-section ul li{
  position:relative;
  padding:7px 0 7px 30px;
  color:#3A3640;
}
.legal-section ul li::before{
  content:"";
  position:absolute;
  left:4px;top:14px;
  width:12px;height:12px;
  border:2px solid var(--magenta);
  transform:rotate(45deg);
}
.legal-section ol{
  margin:12px 0 12px 26px;
  color:#3A3640;
}
.legal-section ol li{padding:5px 0;}
.legal-section strong{color:var(--ink);}
.legal-section em{color:var(--brass);font-style:italic;}

.legal-contact-rule{
  background-color:var(--marble);
  border:1px solid var(--brass);
  border-left:6px solid var(--magenta);
  padding:18px 24px;
  margin:22px 0;
}
.legal-contact-rule p{margin:6px 0;}

/* Footer must link back to homepage. */
.legal-footer{
  max-width:940px;
  margin:0 auto;
  padding:0 24px 34px;
}
.legal-foot-plate{
  background-color:var(--marble);
  border:1px solid var(--brass);
  border-top:4px solid var(--brass);
  padding:20px 24px 8px;
  text-align:center;
}
.legal-foot-links{margin-bottom:16px;}
.legal-foot-links a{
  display:inline-block;
  padding:10px 18px;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:800;
  background-color:var(--magenta);
  color:var(--marble);
  font-size:0.85rem;
  letter-spacing:1px;
  margin:0 6px;
}
.legal-foot-links a:hover{text-decoration:none;background-color:#A23A68;}
.legal-foot-plate p{color:#3A3640;font-size:0.95rem;margin:8px 0;}
.legal-foot-plate .legal-copy{
  color:var(--magenta);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:0.82rem;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--brass);
}

/* Print-friendly */
@media print{
  body{background:#fff;color:#000;}
  a{color:#000;}
}

@media (max-width:760px){
  .legal-band h1{font-size:1.9rem;}
  .legal-section h2{font-size:1.3rem;}
  .legal-toc-list{grid-template-columns:1fr;}
}