/* ==========================================================================
   SunRight Solar — legal pages (Privacy Policy, Terms and Conditions)
   A long document made easy to move through: a contents list that stays in
   view on desktop, numbered sections, a readable measure, and the site's
   own panel and note treatments for the clauses that matter most.
   ========================================================================== */

.legal-head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.legal-head__inner { max-width: 52rem; padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.legal-head h1 { margin-top: .4rem; }
.legal-head .lead { margin-top: 1rem; max-width: 46rem; }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.legal-meta > div {
  padding: .65rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.legal-meta dt { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal-meta dd { margin-top: .2rem; font-weight: 700; color: var(--ink); }

/* -------- layout -------- */
.legal { padding-top: clamp(2rem, 4vw, 3rem); }
.legal__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); align-items: start; }
}

/* -------- contents -------- */
.legal-toc {
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.legal-toc__title { font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-700); margin-bottom: .75rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.legal-toc a {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  font-size: .9375rem; line-height: 1.35; font-weight: 600;
  color: var(--navy-800); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.legal-toc a:hover, .legal-toc a.is-current { background: var(--sky-50); color: var(--navy-950); }
.legal-toc a.is-current { box-shadow: inset 3px 0 0 var(--orange-500); }
.legal-toc__n { flex: none; font-family: var(--font-num); font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  /* Tablets and phones: the list runs in columns so it never becomes a wall. */
  .legal-toc ol { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
}
@media (min-width: 1024px) {
  .legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; }
}

/* -------- document -------- */
.legal-doc { min-width: 0; display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
.legal-sec {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.legal-sec h2 {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: baseline;
  font-size: var(--step-3); line-height: 1.25; max-width: none;
}
/* The title is a bare text node next to .legal-sec__n in a nowrap-by-default
   flex row; without this it can't shrink below its own full-width single
   line and forces the whole card past the viewport on narrow phones. */
.legal-sec h2 { min-width: 0; }
.legal-sec__n {
  flex: none;
  font-family: var(--font-num); font-size: .9375rem; font-weight: 700;
  background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.legal-sec__body { margin-top: 1rem; }
.legal-sec__body > * + * { margin-top: 1rem; }
.legal-sec__body p, .legal-sec__body li { font-size: var(--step-0); line-height: 1.75; color: var(--body); }
.legal-sec__body a { color: var(--navy-700); text-decoration: underline; text-decoration-color: var(--navy-300); }
.legal-sec__body ul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.legal-sec__body ul li { position: relative; padding-left: 1.6rem; }
.legal-sec__body ul li::before {
  content: ""; position: absolute; left: .2rem; top: .72em; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--grad-cta);
}
@media (min-width: 1100px) {
  /* Long bullet lists use the width: two columns. */
  .legal-sec__body ul:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Definition grids (what we collect, included / excluded, figures) */
.legal-defs { display: grid; gap: .75rem; }
@media (min-width: 720px) { .legal-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-defs > div { padding: 1rem 1.15rem; background: var(--sky-25); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.legal-defs dt { font-weight: 700; color: var(--ink); }
.legal-defs dd { margin-top: .3rem; font-size: var(--step--1); line-height: 1.65; color: var(--body); }
.legal-defs--figures dd { font-family: var(--font-num); font-size: var(--step-1); font-weight: 700; color: var(--navy-900); }

/* Clauses worth stopping for */
.legal-note {
  padding: 1rem 1.25rem;
  border: 1px solid #fde3c7; border-left: 3px solid var(--orange-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(120deg, #fff9f1, #fff);
  font-size: var(--step-0); line-height: 1.75; color: var(--body);
}
.legal-note strong { color: var(--ink); }

/* Contact block */
.legal-contact {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(26rem 18rem at 100% 0%, rgba(255, 196, 0, .18), transparent 70%),
    var(--navy-950);
  color: #fff;
}
.legal-contact h2 { color: #fff; font-size: var(--step-3); }
.legal-contact dl { display: grid; gap: .9rem 2rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 720px) { .legal-contact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-contact dt { font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
.legal-contact dd { margin-top: .25rem; font-weight: 600; }
.legal-contact a { color: #fff; }
.legal-contact__sub { color: rgba(255, 255, 255, .7); font-weight: 400; }
.legal-contact .btn--dark { background: #fff; color: var(--navy-950); }
.legal-contact .btn--dark:hover { background: var(--gold-300); color: var(--navy-950); }
@media (min-width: 720px) {
  .legal-defs--figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legal-defs--figures:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-defs:not(.legal-defs--figures) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}