/* The legal pages, Booking terms and Privacy policy (components/pages/LegalPage.tsx): a
   reading page. The title and lead stand over the text column; on a wide screen the contents
   sit beside the text and stay in view while it scrolls, on a narrow one they come first,
   between hairlines. Sections meet at the site's plain hairline.

   Palette: the site's own (theme.css), under this page's role names; the business card stands
   white on the cream with a hairline edge, as cards do on About. This sheet is linked only on the
   two legal routes; elsewhere it is held out of the cascade with media="not all", which is why it
   may style :root. */

:root {
  --legal-ink: var(--color-ink);
  --legal-text: var(--color-ink-soft);
  --legal-muted: var(--color-muted);
  --legal-label: var(--color-label);
  --legal-line: var(--color-line);
  --legal-card: var(--color-section);
  --legal-code: var(--color-card);
  --legal-mark: var(--color-accent);
  --legal-number: var(--color-cta);
  /* The text column: 46rem keeps a line of body text near 75 characters */
  --legal-measure: 46rem;
  --legal-toc: 15rem;
  /* Clear of the header bar when it slides back in on a scroll up */
  --legal-clear: 6.5rem;
}

/* A press on the contents glides to its section rather than jumping there (Danylo, 5 November
   2026). The browser's own glide, on the plain link, so the section still lands clear of the
   header (scroll-margin-top) and the address still takes its #section; a scripted glide was tried
   until 20 October 2026 and a first press sometimes went nowhere. Moving between pages stays
   instant: the root's data-scroll-behavior (RootDocument.tsx) has Next.js lift this while it
   navigates. With reduced motion it jumps, as before. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

.legal {
  display: grid;
  grid-template-columns: var(--legal-toc) minmax(0, var(--legal-measure));
  grid-template-areas:
    ". intro"
    "toc body";
  justify-content: center;
  column-gap: clamp(3rem, 1rem + 5vw, 7rem);
  width: min(var(--page-frame), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-top: clamp(3rem, 2rem + 4vw, 6.5rem);
  padding-bottom: var(--space-prefooter);
  color: var(--legal-text);
}

/* ---------- Title ---------- */
.legal__intro {
  grid-area: intro;
  margin-bottom: var(--space-xl);
}

.legal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--legal-ink);
}

.legal__lead {
  max-width: 40em;
  margin-top: var(--space-m);
  font-size: var(--text-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

.legal__updated {
  margin-top: var(--space-s);
  font-size: var(--text-small);
  color: var(--legal-muted);
}

/* ---------- Contents ---------- */
.legal__toc {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: var(--legal-clear);
}

.legal__toc-title {
  margin-bottom: var(--space-s);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--legal-label);
}

.legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--legal-line);
}

.legal__toc-list li {
  border-bottom: 1px solid var(--legal-line);
}

.legal__toc-link {
  display: block;
  padding-block: 0.6rem;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--legal-text);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

/* The entry's line is drawn in from the left on hover, as the footer's links draw theirs, under
   the words alone; the section being read keeps its line drawn and its words in ink, so the
   contents always say where the reader is (LegalToc.tsx, 15 October 2026) */
.legal__toc-label {
  padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease-out);
}

.legal__toc-link:hover,
.legal__toc-link:focus-visible,
.legal__toc-link[aria-current] {
  color: var(--legal-ink);
}

.legal__toc-link:hover .legal__toc-label,
.legal__toc-link:focus-visible .legal__toc-label,
.legal__toc-link[aria-current] .legal__toc-label {
  background-size: 100% 1px;
}

.legal__toc-link[aria-current] {
  font-weight: 600;
}

/* A heading reached from the contents takes focus without a ring: the reader clicked to get here */
.legal__heading:focus {
  outline: none;
}

/* ---------- Sections ---------- */
.legal__body {
  grid-area: body;
  min-width: 0;
}

.legal__section {
  scroll-margin-top: var(--legal-clear);
}

.legal__section + .legal__section {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--legal-line);
}

.legal__heading {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--legal-ink);
}

.legal__subheading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
  color: var(--legal-ink);
}

/* One rhythm for everything in a section; a sub-heading takes more room above than below */
.legal__section > * + * {
  margin-top: var(--space-s);
}

.legal__section > * + .legal__subheading {
  margin-top: var(--space-l);
}

.legal__section > .legal__subheading + * {
  margin-top: var(--space-xs);
}

.legal__text,
.legal__list,
.legal__steps {
  font-size: var(--text-body);
  line-height: 1.7;
  text-wrap: pretty;
}

.legal strong {
  font-weight: 500;
  color: var(--legal-ink);
}

/* Cookie names: the one place the page names something in code */
.legal code {
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: var(--legal-code);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 0.85em;
  color: var(--legal-ink);
  overflow-wrap: anywhere;
}

/* The site's text link (DESIGN.md: Controls) */
.legal__link {
  color: var(--legal-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.3s var(--ease-out);
}

.legal__link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Lists ---------- */
.legal__list,
.legal__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__list li,
.legal__steps li {
  position: relative;
  padding-left: 1.6em;
}

.legal__list li + li,
.legal__steps li + li {
  margin-top: 0.65em;
}

/* Brass dots, as bullets are everywhere on the site */
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.72em;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: var(--legal-mark);
}

.legal__steps {
  counter-reset: legal-step;
}

.legal__steps li {
  counter-increment: legal-step;
}

.legal__steps li::before {
  content: counter(legal-step);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--legal-number);
}

/* ---------- Tables ---------- */
.legal__table-wrap {
  margin-top: var(--space-m);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: 1.5;
}

.legal__table th {
  padding: 0 1.25rem 0.75rem 0;
  border-bottom: 1px solid var(--legal-line);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  color: var(--legal-label);
}

.legal__table td {
  padding: 0.9rem 1.25rem 0.9rem 0;
  border-bottom: 1px solid var(--legal-line);
  vertical-align: top;
}

.legal__table th:last-child,
.legal__table td:last-child {
  padding-right: 0;
}

.legal__table--2 td:first-child {
  width: 55%;
}

.legal__table--3 td:first-child {
  width: 46%;
}

.legal__table--3 td:nth-child(2) {
  width: 30%;
}

/* ---------- Business details ---------- */
.legal__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--legal-line);
  border-radius: 0.5rem;
  background: var(--legal-card);
  font-size: var(--text-body);
  line-height: 1.6;
}

.legal__address {
  display: grid;
  font-style: normal;
}

.legal__business {
  font-weight: 500;
  color: var(--legal-ink);
}

.legal__contact {
  display: grid;
  gap: var(--space-s);
  margin: 0;
}

.legal__contact dt {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--legal-label);
}

.legal__contact dd {
  margin: 0.2rem 0 0;
}

/* ---------- The homes and their CINs ---------- */
.legal__cins {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--legal-line);
  font-size: var(--text-body);
}

.legal__cins li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--legal-line);
}

.legal__cin {
  font-size: var(--text-small);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--legal-muted);
}

/* ---------- Narrower screens ----------
   The contents come first, between hairlines, and stop staying in view */
@media (max-width: 60rem) {
  .legal {
    grid-template-columns: minmax(0, var(--legal-measure));
    grid-template-areas:
      "intro"
      "toc"
      "body";
  }

  .legal__intro {
    margin-bottom: var(--space-l);
  }

  .legal__toc {
    position: static;
    margin-bottom: var(--space-xl);
  }
}

/* Each table row stacks into its cells, each cell under its column's name */
@media (max-width: 40rem) {
  .legal__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td {
    display: block;
    width: auto;
  }

  .legal__table tr {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--legal-line);
  }

  .legal__table tr:first-child {
    border-top: 1px solid var(--legal-line);
  }

  .legal__table--2 td:first-child,
  .legal__table--3 td:first-child,
  .legal__table--3 td:nth-child(2) {
    width: auto;
  }

  .legal__table td {
    padding: 0;
    border: 0;
  }

  .legal__table td + td {
    margin-top: 0.6rem;
  }

  .legal__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--legal-label);
  }

  .legal__card {
    grid-template-columns: 1fr;
  }
}