/* ==========================================================================
   KH Haircare — legal pages (privacy.html, terms.html)
   Consumes tokens.css; assumes base.css and layout.css are already loaded.

   Running text on cream: no cards, no boxes, one readable column. The
   section headings take the display face from base.css (Almarai under RTL),
   so nothing here sets a family.
   ========================================================================== */

/* Tall enough that the footer sits at the foot of the screen on a page that
   is still only a heading. */
.legal-page{
  min-block-size:70svh;
}

/* Clears the fixed header the way .review-intro does. */
.legal-intro{
  padding-block:calc(var(--header-h) + clamp(2rem,5vw,3.5rem)) clamp(1.5rem,4vw,2.5rem);
}

/* Below the hero's --step-3: a page heading, not a headline. */
.legal-intro__title{
  font-size:var(--step-2);
}

.legal-intro__updated{
  margin-block-start:1rem;
  font-size:var(--step--1);
  color:var(--kh-muted);
}


/* --- Body ----------------------------------------------------------------- */

.legal{
  max-inline-size:var(--prose);
  padding-block-end:clamp(4rem,9vw,6.5rem);
  line-height:1.8;
}

.legal p + p,
.legal ul + p{
  margin-block-start:1rem;
}

/* The not-legal-advice line: one quiet sentence, not a disclaimer block. */
.legal__aside{
  font-size:var(--step--1);
  color:var(--kh-muted);
}

.legal__section{
  margin-block-start:clamp(2.75rem,6vw,4rem);
}

/* Terms opens straight on a section, with no lead paragraph above it; the
   intro's own padding is the gap there. */
.legal > .legal__section:first-child{
  margin-block-start:0;
}

.legal h2{
  margin-block-end:1.1rem;
  font-size:var(--step-1);
}

.legal h3{
  margin-block:1.9rem .6rem;
  font-size:var(--step-0);
  font-weight:500;
}

.legal h2 + h3{
  margin-block-start:0;
}

/* padding-inline-start rather than a left pad, so the bullets hang on the
   right under RTL. */
.legal ul{
  margin-block:.75rem 1rem;
  padding-inline-start:1.25rem;
  list-style:disc;
}

.legal li + li{
  margin-block-start:.35rem;
}

.legal li::marker{
  color:var(--kh-copper);
}

/* The WhatsApp number. Same treatment as the footer's: Latin digits, kept on
   one line, and a wider space under Almarai so the groups do not run
   together. */
.legal__contact{
  color:var(--kh-copper-deep);
  white-space:nowrap;
  transition:color .25s var(--ease);
}

@media (hover:hover){
  .legal__contact:hover{
    color:var(--kh-copper);
  }
}

.legal__contact:focus-visible{
  outline:2px solid var(--kh-copper-deep);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

[dir="rtl"] .legal__contact{
  word-spacing:.25em;
}