/* ================================================================
   LEGAL.CSS — shared stylesheet for the Privacy Policy and Terms
   of Service pages of CBCWholesale LLC. These pages load ONLY this
   file, so this stylesheet defines the page background, the body
   text colour and every panel colour itself, with strong contrast.
================================================================ */
html {
  scroll-behavior: smooth;
}

body.legal-page {
  margin: 0;
  background-color: #20242A;
  color: #E9EDF2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.legal-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- page background and text have strong contrast above ---------- */

/* ================================================================
   SCOPE ISOLATION — every tweak to section backgrounds is forced
   to a transparent base unless a later matching rule overrides it.
================================================================ */
.legal-page .legal-content section {
  background-color: transparent;
}

.legal-page .legal-content section .legal-h2 {
  background-color: transparent;
}

/* ================================================================
   LEGAL HEADER — solid background, strong h1 contrast
================================================================ */
.legal-banner {
  background-color: #1A1E24;
  border-bottom: 4px solid #3E6FA8;
}

.legal-banner-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
}

.legal-home-link {
  color: #F5F2E8;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  background-color: #3E6FA8;
  padding: 9px 16px;
  display: inline-block;
}

.legal-home-link:hover {
  text-decoration: underline;
}

.legal-banner-accent {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 58px;
  border-left: 6px solid #3E6FA8;
}

.legal-h1 {
  color: #F5F2E8;
  font-size: 46px;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 900;
}

.legal-lede {
  color: #B9C2CC;
  font-size: 19px;
  line-height: 1.7;
  margin: 0;
  max-width: 720px;
  font-family: Arial, sans-serif;
}

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
.legal-content {
  background-color: #20242A;
  padding: 26px 0 10px;
}

.legal-updated {
  color: #8FA0AF;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  border-bottom: 1px solid #39424C;
  padding-bottom: 18px;
  margin: 0 0 30px;
}

.legal-h2 {
  color: #F5F2E8;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 14px;
  padding-top: 18px;
}

.legal-content section p {
  margin: 0 0 18px;
}

.legal-content section ul {
  margin: 0 0 20px;
  padding-left: 24px;
}

.legal-content section li {
  margin-bottom: 8px;
  color: #D7DDE4;
}

.legal-content section a:not(.legal-back) {
  color: #7FA8D0;
}

/* ---------- table of contents ---------- */
.legal-toc {
  background-color: #292F37;
  border-left: 4px solid #3E6FA8;
  padding: 26px 30px 28px;
  margin: 0 0 40px;
}

.legal-toc .legal-h2 {
  padding-top: 0;
  font-size: 22px;
}

.legal-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: 40px;
}

.legal-toc-list li {
  margin-bottom: 10px;
}

.legal-toc-list li a {
  color: #E9EDF2;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.legal-toc-list li a:hover {
  color: #8FBAE5;
  text-decoration: underline;
}

.legal-back {
  display: inline-block;
  margin-top: 10px;
  color: #F5F2E8;
  background-color: #3E6FA8;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
}

.legal-back:hover {
  background-color: #2D5B8E;
}

/* ================================================================
   LEGAL FOOTER — solid base band, relative z-index layering
================================================================ */
.legal-footer {
  background-color: #1A1E24;
  border-top: 3px solid #3E6FA8;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.legal-footer-reg {
  padding: 36px 0 12px;
  display: block;
}

.legal-reg-company {
  display: block;
  font-family: Arial Black, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #3E6FA8;
  margin-bottom: 6px;
}

.legal-reg-address {
  display: block;
  color: #B9C2CC;
  font-family: Arial, sans-serif;
  font-size: 15px;
  margin-bottom: 14px;
}

.legal-reg-links a {
  color: #8FA0AF;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin-right: 20px;
}

.legal-reg-links a:hover {
  color: #F5F2E8;
}

.legal-fineline {
  color: #6D7884;
  font-family: Arial, sans-serif;
  font-size: 13px;
  border-top: 1px solid #39424C;
  padding: 16px 0 24px;
  margin: 6px 0 0;
}

/* ================================================================
   RESPONSIVE — legal.css loads alone, so the legal layout owns
   its own breakpoints too.
================================================================ */
@media (max-width: 720px) {
  .legal-h1 {
    font-size: 34px;
  }
  .legal-toc-list {
    column-count: 1;
  }
  .legal-banner-accent {
    padding: 40px 24px 42px;
    border-left-width: 4px;
  }
}