/* ===========================================================================
   horotron.therapy — legal pages
   privacy_policy.html · terms_of_use.html · cookie_policy.html

   Extends styles.css and booking.css: the page shell (.bk, .bk__title,
   .bk__lede), the header, the footer and the buttons are all reused. What
   lives here is the one thing those files have no shape for — long prose:
   numbered sections, lists, a definition block and one table.

   Measure is capped at ~68ch. Legal text is read, not scanned, and the
   1320px .wrap is far too wide for a paragraph.
   =========================================================================== */

.legal {
  max-width: 68ch;
  margin-top: clamp(40px, 6vh, 72px);
}

/* the small line above the title: which document, which revision */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone-fade);
}

/* --- table of contents ----------------------------------------------------- */

.legal__toc {
  margin-top: clamp(34px, 5vh, 56px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(13, 42, 30, 0.28), rgba(13, 42, 30, 0.08));
}

.legal__toc h2 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-fade);
}

.legal__toc ol {
  counter-reset: toc;
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.legal__toc a {
  display: flex;
  gap: 12px;
  color: var(--bone-dim);
  font-size: 15px;
  transition: color 0.3s var(--ease);
}
.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc) '.';
  min-width: 22px;
  color: var(--gold);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.legal__toc a:hover { color: var(--bone); }

/* --- sections -------------------------------------------------------------- */

.legal__body { counter-reset: sec; }

.legal__sec {
  margin-top: clamp(48px, 7vh, 84px);
  scroll-margin-top: 104px;
}

.legal__sec h2 {
  counter-increment: sec;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.legal__sec h2::before {
  content: counter(sec);
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.legal__sec h3 {
  margin-top: clamp(26px, 3.4vh, 36px);
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--bone);
}

.legal__sec p,
.legal__sec ul,
.legal__sec ol.num,
.legal__sec dl,
.legal__sec .legal__tbl { margin-top: 18px; }

.legal__sec p { color: var(--bone-dim); }

.legal__sec a:not(.btn) {
  color: var(--bone);
  border-bottom: 1px solid var(--gold-soft);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.legal__sec a:not(.btn):hover { color: var(--gold); border-color: var(--gold); }

.legal__sec strong { font-weight: 500; color: var(--bone); }

/* styles.css strips list markers globally, so both list shapes are rebuilt
   here rather than fought with */
.legal__sec ul { display: grid; gap: 10px; }
.legal__sec ul li {
  position: relative;
  padding-left: 20px;
  color: var(--bone-dim);
}
.legal__sec ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

.legal__sec ol.num { display: grid; gap: 10px; counter-reset: item; }
.legal__sec ol.num li {
  position: relative;
  padding-left: 28px;
  color: var(--bone-dim);
}
.legal__sec ol.num li::before {
  counter-increment: item;
  content: counter(item) ')';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* --- definition block: purpose / legal ground pairs ------------------------- */

.legal__sec dl { display: grid; gap: 0; }

.legal__sec dt {
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-weight: 500;
  color: var(--bone);
}
.legal__sec dd {
  padding: 6px 0 16px;
  color: var(--bone-dim);
  font-size: 15px;
}
.legal__sec dd:last-child { border-bottom: 1px solid var(--hair); }

/* --- table: what the browser stores ---------------------------------------- */

.legal__tbl { overflow-x: auto; }

.legal__tbl table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14px;
}
.legal__tbl th,
.legal__tbl td {
  padding: 13px 14px 13px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.legal__tbl th {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-fade);
}
.legal__tbl td { color: var(--bone-dim); }
.legal__tbl td:first-child { color: var(--bone); }

/* only the storage table holds literal keys — those get the mono face and stay
   on one line; the service table beside it is prose and must not */
.legal__tbl--keys td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: nowrap;
}

/* --- callout: the one or two things a reader must not miss ------------------ */

.legal__note {
  margin-top: 22px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  background: rgba(185, 149, 85, 0.05);
}
.legal__note p { margin-top: 0; color: var(--bone); }
.legal__note p + p { margin-top: 12px; }

/* --- contacts / requisites block ------------------------------------------- */

.legal__card {
  margin-top: 20px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: rgba(13, 42, 30, 0.22);
}
.legal__card p { margin-top: 0; }
.legal__card p + p { margin-top: 8px; }

/* placeholders that still need the client's real data: visible on purpose, so
   an unfilled requisite cannot quietly ship */
.legal [data-todo] {
  color: var(--bone-fade);
  border-bottom: 1px dashed var(--gold-soft);
}

/* --- cross-links to the other two documents -------------------------------- */

.legal__also {
  margin-top: clamp(64px, 9vh, 110px);
  padding-top: clamp(28px, 4vh, 42px);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
}
.legal__also span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-fade);
}
.legal__also a { color: var(--bone-dim); transition: color 0.3s var(--ease); }
.legal__also a:hover { color: var(--gold); }

@media (max-width: 700px) {
  .legal__sec h2 { font-size: 19px; }
  .legal__toc ol { gap: 11px; }
}