/* ==========================================================================
   Legal documents (app/views/pages/legal.php) and the error page
   (app/views/pages/error.php). Both use the solid header.
   ========================================================================== */

/* ----- Document header band ----- */
.legal-hero {
  padding-block: clamp(64px, 7vw, 104px) clamp(56px, 6vw, 88px);
  background: var(--c-mist); text-align: center;
}
.legal-hero__inner {
  max-width: calc(820px + var(--gutter) * 2);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.legal-hero__title { font-size: var(--fs-h2); line-height: 1.2; }
.legal-hero__meta { font-size: 14px; letter-spacing: 0.02em; color: var(--c-muted); }
.legal-hero__intro { max-width: 680px; margin-top: 4px; font-size: 18px; line-height: 1.7; }

/* ----- Two-column layout: sticky contents + 760px reading column ----- */
.legal-layout {
  display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; align-items: start;
  column-gap: clamp(48px, 6vw, 96px);
  padding-block: clamp(56px, 6vw, 96px) clamp(80px, 8vw, 120px);
}

.legal-toc { position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.legal-toc__title {
  margin-bottom: 16px; font-family: var(--ff-body); font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-lagoon);
}
.legal-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--c-line); }
.legal-toc__list a {
  display: block; margin-left: -1px; padding: 8px 0 8px 18px; border-left: 1px solid transparent;
  font-size: 15px; line-height: 1.45; color: var(--c-muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.legal-toc__list a:hover { color: var(--c-ink); border-left-color: var(--c-lagoon); }
.legal-toc__num { color: var(--c-lagoon); }

/* ----- Reading column ----- */
.legal-content { min-width: 0; font-size: 17px; line-height: 1.75; }
.legal-section { scroll-margin-top: 120px; }
.legal-section + .legal-section { margin-top: clamp(40px, 4vw, 56px); }
.legal-section__title { margin-bottom: 18px; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.3; }
.legal-section__num { color: var(--c-lagoon); }
.legal-section__body > * + * { margin-top: 1em; }
.legal-section__body h3 {
  font-family: var(--ff-body); font-size: 13px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink);
}
.legal-section__body > * + h3 { margin-top: 1.8em; }
.legal-section__body ul { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: 12px; }
.legal-section__body li { position: relative; padding-left: 24px; }
.legal-section__body li::before {
  content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-lagoon);
}
.legal-section__body strong { font-weight: 600; color: var(--c-ink); }
.legal-section__body a,
.legal-help a { color: var(--c-lagoon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-section__body a:hover,
.legal-help a:hover { color: var(--c-lagoon-dark); }
.legal-section__body a[href^="tel:"], .error-page__help a[href^="tel:"] { white-space: nowrap; }

.legal-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(56px, 6vw, 80px); padding: 28px 32px; background: var(--c-cream);
}
.legal-help__title { font-family: var(--ff-heading); font-size: 22px; line-height: 1.3; color: var(--c-ink); }
.legal-help__text { margin-top: 4px; font-size: 16px; line-height: 1.6; }

/* ==========================================================================
   Error page (404 / 500)
   ========================================================================== */
.error-page { position: relative; overflow: hidden; padding-block: clamp(64px, 7vw, 110px) clamp(80px, 9vw, 130px); text-align: center; }
.error-page__inner { max-width: calc(860px + var(--gutter) * 2); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.error-page__mark { display: grid; place-items: center; margin-bottom: 6px; animation: bp-rise 1s var(--ease-out) both; }
.error-page__shell, .error-page__code { grid-area: 1 / 1; }
.error-page__shell { width: clamp(170px, 20vw, 270px); height: auto; opacity: 0.18; }
.error-page__code {
  position: relative; font-family: var(--ff-heading); font-size: clamp(104px, 14vw, 200px); line-height: 1;
  letter-spacing: 0.02em; color: var(--c-lagoon);
}
.error-page__title { font-size: var(--fs-h3); line-height: 1.25; }
.error-page__text { max-width: 600px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.error-page__help { font-size: 15px; line-height: 1.6; color: var(--c-muted); }
.error-page__help a { color: var(--c-lagoon); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.error-page__beaches {
  width: 100%; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid var(--c-line);
}
.error-page__beaches-title { display: flex; justify-content: center; margin-bottom: 20px; }
.error-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.error-page__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--c-line-strong); font-family: var(--ff-heading); font-size: 16px; line-height: 1.2; color: var(--c-ink);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.error-page__list a:hover { color: var(--c-lagoon); border-color: var(--c-lagoon); background: var(--c-foam); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: minmax(0, 760px); row-gap: 48px; }
  .legal-toc { position: static; max-height: none; overflow: visible; padding: 24px 24px 16px; background: var(--c-mist); }
  .legal-toc__list { columns: 2; column-gap: 28px; border-left: 0; }
  .legal-toc__list li { break-inside: avoid; }
  .legal-toc__list a { margin-left: 0; padding: 10px 0; border-left: 0; }
}
@media (max-width: 600px) {
  .legal-hero__intro { font-size: 17px; }
  .legal-content { font-size: 16px; }
  .legal-toc { padding: 20px 20px 12px; }
  .legal-toc__list { columns: 1; }
  .legal-help { padding: 24px 20px; }
  .error-page__actions { flex-direction: column; align-self: stretch; }
  .error-page__actions .btn { width: 100%; }
}