/* Legal pages. Shared by templates/pages/terms.html and privacy.html.

   Optimised for reading, not marketing: a constrained measure, generous line
   height, and a sticky table of contents on desktop. Colour comes entirely
   from existing jobertrust.css tokens. */

.lg { padding-bottom: var(--jt-3xl); }

/* --- Breadcrumb --------------------------------------------------------- */

.lg-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--jt-md);
  font-size: 13px;
  color: var(--jt-on-surface-variant);
  min-width: 0;
}
.lg-crumbs a { color: inherit; text-decoration: none; }
.lg-crumbs a:hover { color: var(--jt-secondary); text-decoration: underline; }
.lg-crumbs .material-symbols-outlined { font-size: 16px; color: var(--jt-outline-variant); }
.lg-crumbs [aria-current] { color: var(--jt-on-surface); font-weight: 600; }

/* --- Header ------------------------------------------------------------- */

.lg-header {
  padding-block: var(--jt-lg) var(--jt-xl);
  max-width: 52rem;
  min-width: 0;
}
@media (min-width: 768px) { .lg-header { padding-block: var(--jt-xl) var(--jt-2xl); } }

.lg-h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--jt-primary);
}
@media (min-width: 768px) { .lg-h1 { font-size: 38px; } }

.lg-updated {
  display: inline-flex;
  margin: 0 0 var(--jt-lg);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container);
  border-radius: var(--jt-radius-full);
}

.lg-intro { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--jt-on-surface-variant); }
@media (min-width: 768px) { .lg-intro { font-size: 16px; } }
.lg-intro-strong { font-weight: 600; color: var(--jt-on-surface); }

/* --- Layout: sticky contents + body ------------------------------------- */

.lg-layout { display: block; min-width: 0; }
@media (min-width: 1024px) {
  .lg-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--jt-2xl);
    align-items: start;
  }
}

.lg-toc {
  margin-bottom: var(--jt-xl);
  padding: var(--jt-md);
  min-width: 0;
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
@media (min-width: 1024px) {
  .lg-toc {
    position: sticky;
    top: calc(var(--jt-nav-height) + var(--jt-md));
    margin-bottom: 0;
    max-height: calc(100vh - var(--jt-nav-height) - var(--jt-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.lg-toc-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-outline);
}
.lg-toc-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: 13px;
  line-height: 1.45;
}
.lg-toc-list li { color: var(--jt-outline); }
.lg-toc-list a { color: var(--jt-on-surface-variant); text-decoration: none; }
.lg-toc-list a:hover { color: var(--jt-secondary); text-decoration: underline; }

/* --- Body --------------------------------------------------------------- */

.lg-body { max-width: 46rem; min-width: 0; }

.lg-section {
  padding-bottom: var(--jt-xl);
  margin-bottom: var(--jt-xl);
  border-bottom: 1px solid var(--jt-outline-variant);
  min-width: 0;
  /* Offset for the sticky nav when jumping from the contents list. */
  scroll-margin-top: calc(var(--jt-nav-height) + var(--jt-md));
}
.lg-section:last-of-type { border-bottom: 0; }

.lg-h2 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 var(--jt-md);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--jt-primary);
}
@media (min-width: 768px) { .lg-h2 { font-size: 25px; } }
.lg-num { flex: 0 0 auto; color: var(--jt-secondary); font-variant-numeric: tabular-nums; }

.lg-h3 {
  margin: var(--jt-lg) 0 8px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--jt-on-surface);
}
.lg-h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--jt-on-surface); }

.lg-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--jt-on-surface-variant);
}
.lg-body ul, .lg-ol {
  margin: 0 0 var(--jt-md);
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--jt-on-surface-variant);
}
.lg-body li { margin-bottom: 4px; }
.lg-body strong { color: var(--jt-on-surface); font-weight: 700; }

.lg-body a {
  color: var(--jt-on-secondary-container);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.lg-body a:hover { color: var(--jt-secondary); }

/* Emphasised statements that carry legal weight. */
.lg-callout {
  margin: var(--jt-md) 0 !important;
  padding: 12px var(--jt-md);
  font-weight: 600;
  color: var(--jt-on-surface) !important;
  background-color: var(--jt-surface-container-low);
  border-left: 3px solid var(--jt-secondary);
  border-radius: 0 var(--jt-radius) var(--jt-radius) 0;
}

.lg-emphasis {
  margin: 10px 0 !important;
  padding: 12px var(--jt-md);
  font-size: 16px !important;
  font-weight: 700;
  color: var(--jt-on-surface) !important;
  background-color: var(--jt-surface-container);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
}

/* --- Review weights ----------------------------------------------------- */

.lg-weights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: var(--jt-md) 0;
}
@media (min-width: 560px) { .lg-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lg-weight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--jt-md);
  min-width: 0;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
}
.lg-weight-lead { border-color: var(--jt-success-line); background-color: var(--jt-success-soft); }
.lg-weight-label { font-size: 13px; font-weight: 600; color: var(--jt-on-surface); }
.lg-weight-value { font-size: 13px; color: var(--jt-on-surface-variant); }
.lg-weight-lead .lg-weight-value { color: var(--jt-on-secondary-container); font-weight: 700; }

/* --- Two-column list ---------------------------------------------------- */

.lg-two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jt-md); margin-bottom: var(--jt-md); }
@media (min-width: 640px) { .lg-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Contact blocks ----------------------------------------------------- */

.lg-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jt-md);
  margin: var(--jt-md) 0;
  padding: var(--jt-md);
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
@media (min-width: 640px) { .lg-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jt-lg); } }
.lg-contact-block { min-width: 0; }
.lg-contact-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jt-outline);
}
.lg-contact-block .lg-contact-title:not(:first-child) { margin-top: var(--jt-md); }
.lg-contact-line { margin: 0 0 3px !important; font-size: 14px !important; color: var(--jt-on-surface) !important; }
.lg-address { margin: 6px 0 0; font-style: normal; font-size: 14px; line-height: 1.7; color: var(--jt-on-surface-variant); }

/* --- Acknowledgment ----------------------------------------------------- */

.lg-ack {
  margin-top: var(--jt-xl);
  padding: var(--jt-lg);
  min-width: 0;
  background-color: var(--jt-surface-container);
  border-radius: var(--jt-radius-lg);
}
.lg-ack-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--jt-primary); }
.lg-ack p { margin: 0 0 10px; font-size: 15px; line-height: 1.75; color: var(--jt-on-surface-variant); }
.lg-ack-link { margin: 0 !important; font-size: 14px !important; font-weight: 600; }

/* --- Print -------------------------------------------------------------- */

@media print {
  .lg-toc, .lg-crumbs { display: none; }
  .lg-layout { display: block; }
  .lg-body { max-width: none; }
  .lg-section { break-inside: auto; page-break-inside: auto; }
  .lg-h2 { break-after: avoid; page-break-after: avoid; }
}