/*
 * PRIVACY POLICY.
 *
 * SCOPE. Every selector is under `.lf-legal--privacy-policy` or a `.lf-pmap`
 * class used on no other page. `parts-legal-layouts.php`, `parts-legal.php`,
 * delivery.css and terms.css are shared with every other policy page, so
 * nothing here may be written unscoped.
 *
 * WHY IT LOADS terms.css. The `tldr` and `clauses` layouts are the site's
 * DOCUMENT layer — a contents rail beside numbered sections — and their styles
 * live in terms.css under class names (`.lf-tc*`, `.lf-clause`, `.lf-tldr`,
 * `.lf-callout`) that are not page-scoped. Loading that file is what makes this
 * page a document rather than duplicating three hundred lines that would then
 * drift. terms.css's only page-scoped rules sit under
 * `.lf-legal--terms-and-conditions`, so none of them reaches this page.
 *
 * WHAT THIS FILE THEREFORE IS. The differences, and only the differences: the
 * hero, the at-a-glance grid, and the processing map — the component that makes
 * this a privacy policy rather than a second copy of the Terms.
 */

.lf-legal--privacy-policy,
.lf-pmap {
  --pp-shell:  #FBF9F6;
  --pp-panel:  #F4F0EA;
  --pp-white:  #FFFFFF;
  --pp-hair:   #EAE4DC;
  --pp-hair-2: #DDD4C9;
  --pp-r-sm: 10px;
  --pp-r-md: 13px;
  --pp-r-lg: 16px;
}

/* ============================================================== the hero */

.lf-legal--privacy-policy .lf-dhero2 {
  padding-block: clamp(.5rem, 1.4vw, 1.35rem) clamp(1.5rem, 2.6vw, 2.25rem);
  align-items: end;
}
.lf-legal--privacy-policy .lf-dhero2__h {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  max-width: 14ch;
}
.lf-legal--privacy-policy .lf-dhero2__lede {
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  max-width: 40rem;
  padding-bottom: .35rem;
}
.lf-legal--privacy-policy { padding-bottom: 0; }

/* The date this page was last written, not the date it is being read. Shares
   the Terms stamp's class so the two pages cannot present it differently. */

/* ======================================================== at a glance === */
/*
 * The Terms summary is a vertical list of six lines and reads correctly there,
 * beneath a document nobody skims twice. Here it is the first thing anyone
 * reads and answers six separate questions, so it becomes a grid — the answers
 * are compared, not read in sequence.
 */
@media (min-width: 760px) {
  .lf-legal--privacy-policy .lf-tldr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--pp-hair);
  }
  .lf-legal--privacy-policy .lf-tldr__item {
    padding: 1.35rem 1.6rem 1.45rem;
    border-bottom: 1px solid var(--pp-hair);
    border-right: 1px solid var(--pp-hair);
  }
  .lf-legal--privacy-policy .lf-tldr__item:nth-child(2n) { border-right: 0; }
  .lf-legal--privacy-policy .lf-tldr__item:first-child { padding-top: 1.35rem; }
}
@media (min-width: 1120px) {
  .lf-legal--privacy-policy .lf-tldr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-legal--privacy-policy .lf-tldr__item:nth-child(2n) { border-right: 1px solid var(--pp-hair); }
  .lf-legal--privacy-policy .lf-tldr__item:nth-child(3n) { border-right: 0; }
}

/* ====================================================== processing map == */

.lf-pmap {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(1.75rem, 3.4vw, 2.75rem) 0 0;
  border-top: 1px solid var(--pp-hair-2);
}
.lf-pmap__lead { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.lf-pmap__title {
  font-family: var(--lf-serif);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--lf-navy);
  margin: 0 0 .7rem;
}
.lf-pmap__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--lf-taupe);
}

/*
 * ONE GRID DEFINITION, USED TWICE — by the header row and by every data row —
 * so a column cannot be wide in the header and narrow in the body. Named lines
 * are deliberately not used: the row is four cells in source order, and the
 * mobile layout is the same four cells stacked.
 */
.lf-pmap__head,
.lf-pmap__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1.75rem;
}

.lf-pmap__head {
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--pp-hair-2);
  /* 12px, not 11.5. Measured: .72rem rendered at 11.52px, and this project has
     already had utility type raised off 11.5px three times on three pages. The
     floor for a label is 12px, uppercase and letterspaced or not. */
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lf-taupe-mid);
}

.lf-pmap__row {
  align-items: start;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--pp-hair);
}
.lf-pmap__row:last-child { border-bottom: 0; }

/* The absent category, stated in the same grammar as the present ones and set
   back so it does not read as another thing being collected. */
.lf-pmap__row--none { color: var(--lf-taupe-mid); }
.lf-pmap__row--none .lf-pmap__name { color: var(--lf-taupe); }
.lf-pmap__row--none .lf-pmap__icon { opacity: .55; }

.lf-pmap__k { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.lf-pmap__icon { display: block; color: var(--lf-gold); }
.lf-pmap__icon .lf-dicon { width: 22px; height: 22px; }
.lf-pmap__name {
  font-family: var(--lf-serif);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--lf-navy);
}
.lf-pmap__when {
  display: inline-block;
  padding: .22rem .55rem .26rem;
  border: 1px solid var(--lf-gold-line);
  border-radius: 999px;
  background: var(--pp-white);
  font-size: .75rem;          /* 12px floor, see the header row above */
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}
.lf-pmap__row--none .lf-pmap__when { border-color: var(--pp-hair-2); }

.lf-pmap__c {
  margin: 0;
  font-size: .93rem;
  line-height: 1.66;
  color: var(--lf-taupe);
}
.lf-pmap__c--basis { color: var(--lf-taupe-deep); }

/*
 * The per-cell label. Hidden on the wide layout because the header row already
 * carries it; shown on the narrow one, where the header is 900px away and
 * useless. `aria-hidden` on the header row and a real label here means a screen
 * reader gets exactly one label per cell at every width.
 */
.lf-pmap__label { display: none; }

@media (max-width: 1023px) {
  .lf-pmap__head { display: none; }
  .lf-pmap__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    padding: 1.4rem 0 1.5rem;
  }
  .lf-pmap__k { flex-direction: row; align-items: center; gap: .7rem; flex-wrap: wrap; }
  .lf-pmap__label {
    display: block;
    margin-bottom: .2rem;
    font-size: .75rem;        /* 12px floor, see the header row above */
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lf-taupe-mid);
  }
}

/* Between 1024 and 1200 the four columns squeeze the lawful basis to about
   nine characters a line. Measured — the basis text is the longest cell and
   the key column is the one that can afford to give. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .lf-pmap__head,
  .lf-pmap__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1.25rem;
  }
  .lf-pmap__name { font-size: 1.06rem; }
  .lf-pmap__c { font-size: .88rem; }
}

/* =================================================== the closing links == */

.lf-legal--privacy-policy .lf-dsec--pathways { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* The summary's own heading. Opt-in at the layout (see
   `parts-legal-layouts.php`), so the Terms summary is unaffected. */
.lf-legal--privacy-policy .lf-tldr__h {
  font-family: var(--lf-serif);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--lf-navy);
  margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
}

/* ============================================ contrast, measured ======= */
/*
 * `--lf-taupe-mid` (#8A7A6C) IS NOT 4.5:1, and the token's own comment says
 * 4.60:1 because it was worked out against a slightly different ground. On the
 * white this page actually sits on it measures 4.13:1 — under AA for normal
 * text, at every width, in a real browser.
 *
 * The token is used by delivery.css and terms.css and by pages this task must
 * not touch, and style.css carries another workstream's uncommitted changes, so
 * the token itself is not the thing to edit from here. These three overrides
 * fix the elements that appear on THIS page and nothing else. The token remains
 * a site-wide finding to be fixed at its source.
 *
 * `--lf-taupe` (#655145) measures 7.46:1 on the same ground.
 */
.lf-pmap__head,
.lf-pmap__label,
.lf-legal--privacy-policy .lf-tcstamp,
.lf-legal--privacy-policy .lf-dprin__body { color: var(--lf-taupe); }