/* ==========================================================================
   CELES GLOBAL — legal & information pages
   --------------------------------------------------------------------------
   The six pages under /contact, /cookies, /data-deletion, /medical-disclaimer,
   /privacy and /terms. Loaded AFTER styles.css, which supplies the design
   tokens, the type families, the reset and .container — this file only adds
   what a long-form reading page needs on top of that.

   IT TOUCHES NOTHING THE MARKETING PAGES USE. Every selector below is either
   `.legal-*`/`.lg-*` (new, used only here) or scoped under `.legal-page`,
   which is a body class no other page carries. index.html and clinics.html do
   not link this file at all.

   NO SCRIPT RUNS ON THESE PAGES. No Lenis, no GSAP, no cursor, no parallax —
   they are static documents and they scroll natively. That is deliberate: a
   privacy policy that needs JavaScript to become readable is a privacy policy
   that some people cannot read.
   ========================================================================== */

.legal-page {
  background: var(--paper);
}

/* --- the slim header -------------------------------------------------------
   Wordmark home link on the left, nothing else. The marketing nav is a fixed,
   scroll-reactive component with a mobile drawer and it belongs to pages that
   have sections to jump between; a legal document has one job and the header
   should not compete with it. */
.lg-head {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.lg-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}
.lg-wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.03em;
  color: var(--ink);
  /* 44px of vertical reach on a phone without changing the header height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lg-head__back {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .84rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .3s var(--ease-soft, ease);
}
.lg-head__back:hover { color: var(--lav-700); }

/* --- the document ----------------------------------------------------------
   ONE COLUMN, ~68ch. The measure is the whole readability decision on a page
   like this: the site's 1240px container is right for a three-up card grid and
   far too wide for continuous prose, where a line that long makes the eye lose
   its place on the return sweep. */
.lg-doc {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 76px) 22px clamp(64px, 9vw, 104px);
}

.lg-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lav-600);
}

.lg-title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.042em;
  color: var(--ink);
  text-wrap: balance;
}

.lg-updated {
  margin: 0 0 clamp(30px, 5vw, 44px);
  padding-bottom: clamp(24px, 4vw, 34px);
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-mute);
}

.lg-lead {
  margin: 0 0 clamp(26px, 4vw, 36px);
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.lg-doc h2 {
  margin: clamp(38px, 6vw, 54px) 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -.028em;
  color: var(--ink);
}
.lg-doc h3 {
  margin: clamp(26px, 4vw, 34px) 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  color: var(--ink);
}

.lg-doc p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* styles.css line 136 is `ul, ol { margin: 0; padding: 0; list-style: none; }`,
   which is the right reset for a site whose every list is a card grid or a nav.
   In a policy the list markers are structure the reader needs, so they are put
   back here rather than by weakening a global rule the marketing pages rely on. */
.lg-doc ul,
.lg-doc ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink-2);
}
.lg-doc ul { list-style: disc; }
.lg-doc ol { list-style: decimal; }
.lg-doc li {
  margin-bottom: 9px;
  line-height: 1.66;
}
.lg-doc li::marker { color: var(--lav-600); }

/* styles.css strips underlines site-wide, which is right for a nav and wrong
   inside a paragraph — in running text the underline is the only thing that
   distinguishes a link from emphasis. */
.lg-doc a {
  color: var(--lav-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lg-doc a:hover { color: var(--ink); }

.lg-doc strong { color: var(--ink); font-weight: 600; }

/* --- the detail block ------------------------------------------------------
   Company name, registered location and email, set as a definition list so the
   label/value pairing is structural rather than a table's worth of markup. */
.lg-card {
  margin: 0 0 8px;
  padding: clamp(20px, 3.6vw, 28px);
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.lg-card + .lg-card { margin-top: 14px; }
.lg-card h3 { margin-top: 0; }
.lg-card > :last-child { margin-bottom: 0; }

.lg-dl { margin: 0; }
.lg-dl dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lg-dl dd {
  margin: 5px 0 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.lg-dl dd:last-child { margin-bottom: 0; }
.lg-dl a {
  color: var(--lav-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A quiet callout for the one sentence on a page that must not be skimmed
   past — the "this is not medical advice" line, the emergency line. Colour is
   carried by the rule on the left rather than by a filled panel, so it reads
   as emphasis and not as a warning banner. */
.lg-note {
  margin: 0 0 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--lav);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--lav-50);
}
.lg-note p { margin-bottom: 10px; color: var(--ink-2); }
.lg-note > :last-child { margin-bottom: 0; }

/* --- the slim footer ------------------------------------------------------- */
.lg-foot {
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.lg-foot__in {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 22px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: .84rem;
  color: var(--ink-mute);
}
.lg-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.lg-foot__nav a {
  color: var(--ink-soft);
  /* 44px tap targets in a wrapped row of links, where mis-taps between
     neighbours are the real failure rather than the links being small. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* The short labels ("Terms") measured 40px wide, so a 44x44 hit box centred
     on one missed by 2px a side. The row's gap is 18px, so widening eats a
     little separation and still leaves 14px between neighbours. */
  min-width: 44px;
  transition: color .3s var(--ease-soft, ease);
}
.lg-foot__nav a:hover { color: var(--lav-700); }

@media (max-width: 560px) {
  .lg-foot__in { flex-direction: column; align-items: flex-start; }
}

/* Printing a policy is a normal thing to do with a policy. */
@media print {
  .lg-head, .lg-foot { display: none; }
  .lg-doc { max-width: none; padding: 0; }
  .lg-doc a { color: inherit; text-decoration: none; }
  .lg-card, .lg-note { border: 1px solid #ccc; background: none; box-shadow: none; }
}


/* ==========================================================================
   iOS SAFE AREAS — legal pages
   --------------------------------------------------------------------------
   These pages already shipped `viewport-fit=cover`, which means iOS has been
   handing them the full screen — including the strip behind the notch — with
   nothing claiming it back. The tokens come from styles.css §20, which loads
   first. Every value is max() or +0px, so nothing moves on desktop.

   .lg-head__in and .container: the horizontal insets are already handled by
   the .container rule in §20, so only the vertical ones are paid here.
   ========================================================================== */

/* The header is static and sits at the very top of the document, so with
   viewport-fit=cover its content starts behind the Dynamic Island. The
   translucent background still reaches the physical edge; only the row of
   links moves down. */
.lg-head__in { padding-top: var(--safe-t); }

/* The document body's own 22px gutters, widened to clear a landscape notch. */
.lg-doc {
  padding-left: max(22px, var(--safe-l));
  padding-right: max(22px, var(--safe-r));
}

/* Last thing on the page: clear the home indicator. */
.lg-foot__in {
  padding-left: max(22px, var(--safe-l));
  padding-right: max(22px, var(--safe-r));
  padding-bottom: calc(34px + var(--safe-b));
}