/* assets/css/legal.css
   Focused legal page styles only.
   - Keeps header/footer untouched
   - Removes underlines in legal content & ensures link color remains visible
   - Fixes mobile TOC overlay and sticky TOC scroll behavior
*/

/* Only define variables used here as fallbacks — your global style.css likely defines these */
:root {
  --legal-container-max: 1100px;
  --legal-gap: 28px;
  --legal-color-primary: #004aad; /* brand primary (link color for legal content) */
  --legal-text-primary: #0b1622;
  --legal-text-secondary: #455056;
  --legal-brand-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Grid layout for legal pages */
.legal-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--legal-gap);
  align-items: start;
  max-width: var(--legal-container-max);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Mobile: single column and TOC hidden by default (togglable via JS) */
@media (max-width: 980px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { order: -1; position: static; margin-bottom: 12px; }
  .legal-toc .toc-list ul { display: none; }         /* default collapsed on mobile */
  .legal-toc .toc-list[aria-expanded="true"] ul { display: block; } /* shown when toggled */
}

/* Desktop: sticky TOC but constrained so it can't grow and overlay content */
@media (min-width: 981px) {
  .legal-toc {
    position: sticky;
    top: 88px; /* leave room for site header */
    align-self: start;
    max-height: calc(100vh - 120px); /* prevents huge TOC from overlaying content */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* keep stacking context modest so header/footer remain controlled by site styles */
    z-index: 1;
  }
}

/* TOC styling */
.toc-list ul { list-style: none; padding-left: 0; margin: 0; }
.toc-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--legal-text-primary);
  text-decoration: none; /* no underline */
  font-size: .95rem;
}
.toc-list a:hover,
.toc-list a:focus {
  background: rgba(0,74,173,0.06);
  color: var(--legal-color-primary);
  outline: none;
}
.toc-list a.active {
  background: rgba(0,74,173,0.10);
  color: var(--legal-color-primary);
  font-weight: 600;
}

/* Content typography */
.legal-content { background: transparent; padding-bottom: 8px; }
.legal-content h2 {
  margin-top: 0;
  color: var(--legal-color-primary);
  font-family: var(--legal-brand-font);
  font-size: 1.05rem; /* reduced heading size */
  font-weight: 600;
  margin-bottom: .5rem;
}
.legal-content p, .legal-content li {
  color: var(--legal-text-secondary);
  line-height: 1.68;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .96rem;
}
.legal-content ul, .legal-content ol { margin-left: 1.15rem; padding-left: 0; }

/* -------- Link behavior for legal content ONLY ----------
   Keep color visible (link recognisable) but remove underline in all states.
   Note: we intentionally **do not** target .navbar or site-wide nav links here.
----------------------------------------------------------*/
.legal-content a,
.legal-toc a {
  color: var(--legal-color-primary); /* visible link color */
  text-decoration: none;             /* no underline at any time */
}

/* ensure visited does not add underline or change undesirably */
.legal-content a:visited,
.legal-toc a:visited {
  color: var(--legal-color-primary);
  text-decoration: none;
}

/* Provide keyboard focus indicator (accessible) — visible but not an underline */
.legal-content a:focus-visible,
.legal-toc a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(0,123,255,0.18);
  outline-offset: 3px;
  border-radius: 6px;
  text-decoration: none;
}

/* Keep hover free of underline (user asked for no underline on click or hover) */
.legal-content a:hover,
.legal-toc a:hover {
  text-decoration: none;
}

/* Reduce heading visual dominance and tighten spacing */
.legal-content section { margin-bottom: 1rem; }

/* Prevent legal CSS from re-styling the site footer/nav: no site-footer rules here. */

/* Scroll offset for anchor targets so content isn't hidden under sticky header */
.legal-content section[id] {
  scroll-margin-top: 110px;
  padding-top: 6px;
}

/* Print: hide the site chrome */
@media print {
  body { background: #fff; color: #111; }
  .navbar, .cookie-consent, .scroll-top, #tocToggle { display: none !important; }
  .legal-toc { display: none; }
  .legal-content { width: 100%; }
}