/* ============================================================
   SS DELPHINE — LEGAL PAGES
   Shared by privacy.html and legal.html. These are the only two
   pages that carry a language toggle; the rest of the site is
   English only.

   Every value here is a token from tokens.css. No new colour,
   face or size is introduced, and nothing is requested from
   off-origin: the CSP is default-src 'self' and stays that way.
   ============================================================ */

/* ---------- Head of the page ----------
   The eyebrow sits left, the language toggle right, on one
   baseline. They stack on a phone so neither is compressed. */
.legal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- Language toggle ----------
   Two real buttons in a group, not links: choosing a language
   changes nothing about the address, so there is nothing to
   navigate to. aria-pressed carries the state. */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--rule);
  border: var(--rule) solid var(--hairline-gold);
  flex: 0 0 auto;
}

.lang-toggle__button {
  appearance: none;
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-5);
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--cream-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  font-weight: var(--wt-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}

.lang-toggle__button:hover { color: var(--cream); }

/* The chosen language is the lit one. Gold is reserved for
   hairlines and small accents, so it marks the state as a ground
   rather than as text at size. */
.lang-toggle__button[aria-pressed='true'] {
  background: var(--hairline-gold);
  color: var(--cream);
  font-weight: var(--wt-mono-strong);
}

/* ---------- Body ---------- */
.legal__body {
  margin-top: var(--sp-8);
}

.legal__body h2 {
  margin: var(--sp-8) 0 var(--sp-2);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-display-m);
  font-weight: var(--wt-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--cream);
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body p,
.legal__body ul {
  max-width: var(--measure);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--cream-muted);
}

.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul { margin-top: var(--sp-3); }

.legal__body ul {
  margin-block: var(--sp-3);
  padding-inline-start: var(--sp-3);
}

.legal__body li + li { margin-top: var(--sp-1); }

.legal__body a:not(.legal__link) {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--hairline-gold);
  text-underline-offset: 0.2em;
}

.legal__body a:not(.legal__link):hover { text-decoration-color: var(--gold); }

/* A block of address or registry lines. Each line is its own
   line at every width, which a wrapped paragraph would not
   guarantee for a company name and a registered office. */
.legal__block {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--cream-muted);
}

.legal__block strong {
  display: block;
  font-weight: var(--wt-body-strong);
  color: var(--cream);
}

/* ---------- Foot ---------- */
.legal__updated {
  margin-top: var(--sp-8);
  padding-top: var(--sp-3);
  border-top: var(--rule) solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* The French copy carries the hidden attribute in the markup, so
   JavaScript-off leaves English standing and the page never flashes
   two copies of itself. This is only a guard against a future
   display rule overriding the attribute. */
[data-lang][hidden] { display: none; }

/* These two pages carry the mark alone, so the reader can leave by the logo
   as well as by the link at the foot. There is no Menu here to open, and
   layout.css is not loaded here, so the mark needs its own sizing: without it
   the logo fell back to its intrinsic 442px and swallowed a phone screen. */
.site-header--bare {
  position: static;
  height: auto;
  display: flex;
  justify-content: flex-start;
  background: none;
  padding: var(--sp-4) var(--gutter) 0;
}

.site-header--bare .site-mark {
  display: inline-flex;
  align-items: center;
}

.site-header--bare .site-mark__logo {
  width: auto;
  height: 4.5rem;
  display: block;
}

@media (max-width: 768px) {
  .site-header--bare { padding-top: var(--sp-3); }
  .site-header--bare .site-mark__logo { height: 2.7rem; }
}

/* The mark now stands where the section padding used to open the page, so
   the gap between it and the title does not need to carry both. */
body > main#main-content > .section { padding-block-start: var(--sp-6); }