/* ==========================================================================
   LEGAL PAGES — Terms and Conditions / Privacy Policy
   terms_conditions.html + privacy-policy.html. Reuse the ins-* shell from inspection.css
   (hero, eyebrow, title, para, buttons, CTA). This file adds the lg-* layer:
   a sticky "on this page" nav, numbered clauses, and the "plain English"
   summary that sits to the right of each clause on wide screens and
   stacks beneath it on narrow ones. legal.js highlights the nav entry
   for the clause currently in view.
   ========================================================================== */

/* ---------------- hero extras ---------------- */

.lg-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 26px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #5b7896;
}

.lg-meta b { font-weight: 500; color: #16324f; }

/* ---------------- page layout ---------------- */

/* .ins-sec clips overflow, which would make the section (not the viewport)
   the scroll container for the sticky nav and summaries — so the legal
   body section must not clip. Nothing decorative needs clipping here. */
.ins-sec.lg-sec { overflow: visible; }

.lg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .lg-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 56px; }
}

/* ---------------- on-this-page nav ---------------- */

.lg-toc {
  position: sticky;
  /* bar offset + bar height + breathing room, same maths as the hero */
  top: calc(var(--mia-bar-top, 12px) + 64px + 22px);
  padding: 20px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(22, 50, 79, 0.1);
  box-shadow: 0 10px 28px rgba(22, 50, 79, 0.06);
}

.lg-toc__head {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b5f8f;
}

.lg-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: calc(100vh - var(--mia-bar-top, 12px) - 64px - 22px - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.lg-toc__list a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.35;
  color: #47617c;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.lg-toc__list a i {
  flex-shrink: 0;
  min-width: 18px;
  font-style: normal;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12px;
  color: #7a94ad;
}

.lg-toc__list a:hover { background: #f2f7fc; color: #16324f; }
.lg-toc__list a.is-active { background: #e1eefb; color: #16324f; font-weight: 500; }
.lg-toc__list a.is-active i { color: #2b5f8f; }

/* narrow screens: the nav becomes a single scrolling row of chips */
@media (max-width: 1023px) {
  .lg-toc { position: static; padding: 16px 18px; }
  .lg-toc__list {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .lg-toc__list li { flex-shrink: 0; scroll-snap-align: start; }
  .lg-toc__list a {
    padding: 7px 13px;
    border: 1px solid rgba(22, 50, 79, 0.12);
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* ---------------- article ---------------- */

.lg-article { min-width: 0; }

.lg-intro {
  margin: 0 0 clamp(28px, 4vh, 40px);
  padding: 18px 22px;
  border-radius: 16px;
  background: #f2f7fc;
  border: 1px solid rgba(22, 50, 79, 0.08);
  font-size: 15px;
  line-height: 1.65;
  color: #47617c;
}

.lg-intro b { color: #16324f; font-weight: 500; }

.lg-clause {
  padding: clamp(26px, 4vh, 40px) 0;
  border-top: 1px solid rgba(22, 50, 79, 0.1);
  /* anchor jumps land below the floating header */
  scroll-margin-top: calc(var(--mia-bar-top, 12px) + 64px + 20px);
}

.lg-clause:first-of-type { border-top: 0; padding-top: 0; }

.lg-clause__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #16324f;
}

.lg-num {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  background: #e1eefb;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #2b5f8f;
  transform: translateY(-3px);
}

.lg-clause__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1200px) {
  .lg-clause__grid { grid-template-columns: minmax(0, 1fr) 272px; gap: 34px; }
}

/* full text */
.lg-clause__body { font-size: 15.5px; line-height: 1.75; color: #47617c; }
.lg-clause__body > :first-child { margin-top: 0; }
.lg-clause__body > :last-child { margin-bottom: 0; }
.lg-clause__body p { margin: 0 0 14px; }
.lg-clause__body h3 {
  margin: 22px 0 10px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #16324f;
}
.lg-clause__body b, .lg-clause__body strong { font-weight: 500; color: #16324f; }
.lg-clause__body a { color: #2b5f8f; text-decoration: underline; text-underline-offset: 3px; }
.lg-clause__body a:hover { color: #16324f; }
.lg-clause__body ul, .lg-clause__body ol { margin: 0 0 14px; padding-left: 22px; }
.lg-clause__body li { margin: 6px 0; padding-left: 4px; }
.lg-clause__body li::marker { color: #2b5f8f; }
.lg-clause__body ul ul, .lg-clause__body ol ol, .lg-clause__body ol ul, .lg-clause__body ul ol { margin: 6px 0 0; }
.lg-clause__body ol.lg-roman { list-style: lower-roman; }
.lg-clause__body ol.lg-alpha { list-style: lower-alpha; }

/* definition-style term list */
.lg-terms { margin: 0 0 14px; }
.lg-terms dt { font-weight: 500; color: #16324f; }
.lg-terms dd { margin: 4px 0 12px; }

/* contact block */
.lg-address {
  margin: 14px 0;
  padding: 14px 18px;
  border-left: 3px solid #4a90c2;
  border-radius: 0 12px 12px 0;
  background: #f6fafd;
  font-style: normal;
  line-height: 1.6;
}

/* plain English summary */
.lg-plain {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, #eef5fb 0%, #f6fafd 100%);
  border: 1px solid rgba(74, 144, 194, 0.22);
  font-size: 14.5px;
  line-height: 1.65;
  color: #2f4b66;
}

.lg-plain__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b5f8f;
}

.lg-plain__label svg { width: 14px; height: 14px; stroke: #2b5f8f; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lg-plain p { margin: 0 0 10px; }
.lg-plain p:last-child { margin-bottom: 0; }

@media (min-width: 1200px) {
  .lg-plain { position: sticky; top: calc(var(--mia-bar-top, 12px) + 64px + 22px); }
}

/* full-width clause (no plain-English column); appendix variant also tints its number gold */
.lg-clause--full .lg-clause__grid,
.lg-clause--appendix .lg-clause__grid { grid-template-columns: minmax(0, 1fr); }
.lg-clause--full .lg-clause__body,
.lg-clause--appendix .lg-clause__body { max-width: 820px; }
.lg-clause--appendix .lg-num { background: #fff4dd; color: #9a6200; }

/* ---------------- dark theme ---------------- */

[data-theme="dark"] .lg-meta { color: #9db4c9; }
[data-theme="dark"] .lg-meta b { color: #dcebf7; }

[data-theme="dark"] .lg-toc { background: #0a1e33; border-color: rgba(125, 184, 232, 0.14); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .lg-toc__head { color: #7db8e8; }
[data-theme="dark"] .lg-toc__list a { color: #9db4c9; }
[data-theme="dark"] .lg-toc__list a i { color: #6f8ba8; }
[data-theme="dark"] .lg-toc__list a:hover { background: #0e2740; color: #dcebf7; }
[data-theme="dark"] .lg-toc__list a.is-active { background: #10314f; color: #dcebf7; }
[data-theme="dark"] .lg-toc__list a.is-active i { color: #7db8e8; }
@media (max-width: 1023px) {
  [data-theme="dark"] .lg-toc__list a { border-color: rgba(125, 184, 232, 0.18); }
}

[data-theme="dark"] .lg-intro { background: rgba(10, 30, 51, 0.85); border-color: rgba(125, 184, 232, 0.14); color: #9db4c9; }
[data-theme="dark"] .lg-intro b { color: #dcebf7; }

[data-theme="dark"] .lg-clause { border-top-color: rgba(125, 184, 232, 0.12); }
[data-theme="dark"] .lg-clause__title { color: #dcebf7; }
[data-theme="dark"] .lg-num { background: #10314f; color: #7db8e8; }
[data-theme="dark"] .lg-clause--appendix .lg-num { background: rgba(255, 209, 128, 0.14); color: #ffd180; }

[data-theme="dark"] .lg-clause__body { color: #9db4c9; }
[data-theme="dark"] .lg-clause__body h3,
[data-theme="dark"] .lg-clause__body b,
[data-theme="dark"] .lg-clause__body strong,
[data-theme="dark"] .lg-terms dt { color: #dcebf7; }
[data-theme="dark"] .lg-clause__body a { color: #7db8e8; }
[data-theme="dark"] .lg-clause__body a:hover { color: #dcebf7; }
[data-theme="dark"] .lg-clause__body li::marker { color: #7db8e8; }
[data-theme="dark"] .lg-address { background: #0a1e33; border-left-color: #4a90c2; }

[data-theme="dark"] .lg-plain { background: linear-gradient(160deg, #0e2740 0%, #0a1e33 100%); border-color: rgba(125, 184, 232, 0.2); color: #b9cfe4; }
[data-theme="dark"] .lg-plain__label { color: #7db8e8; }
[data-theme="dark"] .lg-plain__label svg { stroke: #7db8e8; }

/* ---------------- motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .lg-toc__list a { transition: none; }
}