/* ==========================================================================
   LEGAL PAGES — privacy-policy.html, terms-conditions.html
   Loads AFTER style.css, so all design tokens (--navy, --green, --shell,
   --line, buttons, .btn, .reveal, header/footer) are inherited.

   CONTENTS
   1. Page header band
   2. Reading column
   3. Table of contents
   4. Sections + prose
   5. Callout box
   6. Definition / contact blocks
   7. Responsive
   ========================================================================== */


/* ===== 1. PAGE HEADER BAND ============================================== */
.legal-hero {
  background: var(--navy-dark);
  color: var(--on-dark);
  padding-block: clamp(2.2rem, 4.2vw, 3.4rem);
}
.legal-hero__title {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: .55rem;
}
.legal-hero__rule {
  display: block; width: 62px; height: 3px;
  background: var(--green-light);
  margin-bottom: 1.1rem;
}
.legal-hero__meta {
  margin: 0;
  font-size: .82rem;
  color: var(--on-dark);
}


/* ===== 2. READING COLUMN ================================================
   Legal prose is read line by line, so the column is capped far narrower
   than the site's --shell to keep line length comfortable. */
.legal { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }
.legal__inner { max-width: 54rem; margin-inline: auto; }

.legal__intro {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: 1.6rem;
}


/* ===== 3. TABLE OF CONTENTS ============================================= */
.legal-toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.4rem;
}
.legal-toc__head {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: .8rem;
}
/* style.css strips list styling globally, so numbering is re-declared here */
.legal-toc__list {
  list-style: decimal;
  padding-left: 1.3rem;
  columns: 2;
  column-gap: 2rem;
  font-size: .82rem;
}
.legal-toc__list li { margin-bottom: .4rem; break-inside: avoid; }
.legal-toc__list a { color: var(--navy); transition: color var(--t); }
.legal-toc__list a:hover { color: var(--green); text-decoration: underline; }


/* ===== 4. SECTIONS + PROSE ============================================== */
.legal-sec { margin-bottom: 2.2rem; }
.legal-sec:last-child { margin-bottom: 0; }

.legal-sec__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
/* The number is decorative — the heading text carries the meaning */
.legal-sec__title span { color: var(--green); margin-right: .45rem; }

.legal-sec__sub {
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy-ink);
  margin: 1.3rem 0 .5rem;
}

.legal-sec p {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: .9rem;
}

.legal-list {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0 0 1rem;
}
.legal-list li {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: .45rem;
}
.legal-list strong { color: var(--navy-ink); font-weight: 600; }

.legal-sec a { color: var(--navy); text-decoration: underline; }
.legal-sec a:hover { color: var(--green); }


/* ===== 5. CALLOUT ======================================================= */
.legal-note {
  background: var(--bg-strip);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.legal-note p { margin-bottom: 0; font-size: .85rem; }
.legal-note p + p { margin-top: .7rem; }


/* ===== 6. CONTACT BLOCK ================================================= */
.legal-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  margin-top: 1rem;
}
.legal-contact__item p { margin-bottom: .25rem; font-size: .85rem; }
.legal-contact__label {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: .35rem;
}
.legal-contact a { color: var(--navy); text-decoration: none; }
.legal-contact a:hover { text-decoration: underline; }


/* ===== 7. RESPONSIVE ==================================================== */
@media (max-width: 700px) {
  .legal-toc__list { columns: 1; }
  .legal-contact { grid-template-columns: 1fr; }
}