/*
 * COOKIE POLICY.
 *
 * SCOPE. Every selector is under `.lf-legal--cookie-policy` or a `.lf-ckreg`
 * 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. Same reason the Privacy Policy does: the `tldr` and
 * `clauses` layouts are the site's DOCUMENT layer, and their styles live in
 * terms.css under class names that were never page-specific. See
 * `inc/cookies-ui.php`.
 *
 * WHAT THIS FILE IS. The register, and the small differences around it. The
 * register is the page — three records, five fields each, legible at 390px
 * without a horizontal scrollbar, which is the one thing a cookie table on a
 * premium site has to get right and almost never does.
 */

.lf-legal--cookie-policy,
.lf-ckreg {
  --ck-shell:  #FBF9F6;
  --ck-panel:  #F4F0EA;
  --ck-white:  #FFFFFF;
  --ck-hair:   #EAE4DC;
  --ck-hair-2: #DDD4C9;
  --ck-r-sm: 10px;
  --ck-r-md: 13px;
  --ck-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

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

/* The summary heading, opt-in at the layout — same as the Privacy Policy, so
   the two customer-information pages present their summary identically. */
.lf-legal--cookie-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);
}

/* Six short answers compared, not read in sequence — the same treatment the
   Privacy Policy gives its own summary. */
@media (min-width: 760px) {
  .lf-legal--cookie-policy .lf-tldr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ck-hair);
  }
  .lf-legal--cookie-policy .lf-tldr__item {
    padding: 1.35rem 1.6rem 1.45rem;
    border-bottom: 1px solid var(--ck-hair);
    border-right: 1px solid var(--ck-hair);
  }
  .lf-legal--cookie-policy .lf-tldr__item:nth-child(2n) { border-right: 0; }
  .lf-legal--cookie-policy .lf-tldr__item:first-child { padding-top: 1.35rem; }
}
@media (min-width: 1120px) {
  .lf-legal--cookie-policy .lf-tldr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-legal--cookie-policy .lf-tldr__item:nth-child(2n) { border-right: 1px solid var(--ck-hair); }
  .lf-legal--cookie-policy .lf-tldr__item:nth-child(3n) { border-right: 0; }
}

/* ============================================================ the register */

.lf-ckreg {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(1.75rem, 3.4vw, 2.75rem) 0 0;
  border-top: 1px solid var(--ck-hair-2);
}
.lf-ckreg__lead { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.lf-ckreg__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-ckreg__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--lf-taupe);
}

/*
 * ONE GRID DEFINITION, USED BY THE HEADER AND EVERY ROW, so a column cannot be
 * one width in the header and another in the body. `Set by` and `Type` are
 * short and fixed; `What it does` takes the slack; the cookie name needs a
 * fixed measure because it must not wrap mid-token.
 */
.lf-ckreg__head,
.lf-ckreg__row {
  display: grid;
  grid-template-columns:
    minmax(0, 15rem) minmax(0, 7rem) minmax(0, 1.7fr) minmax(0, 8rem) minmax(0, 10rem);
  gap: 0 1.5rem;
}

.lf-ckreg__head {
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--ck-hair-2);
  font-size: .75rem;          /* 12px floor for a label, as elsewhere on the site */
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}

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

.lf-ckreg__name { margin: 0; }
.lf-ckreg__name code {
  display: block;
  font-family: var(--ck-mono);
  /* 13px. A cookie name is read character by character against one the reader
     can see in their own browser, so it is set smaller than the prose but never
     below the 12px floor. */
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--lf-navy);
  overflow-wrap: anywhere;    /* a long token wraps rather than widening the grid */
}
.lf-ckreg__when {
  display: inline-block;
  margin-top: .55rem;
  padding: .22rem .55rem .26rem;
  border: 1px solid var(--lf-gold-line);
  border-radius: 999px;
  background: var(--ck-white);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lf-taupe);
}

.lf-ckreg__c {
  margin: 0;
  font-size: .93rem;
  line-height: 1.66;
  color: var(--lf-taupe);
}
.lf-ckreg__c--category { color: var(--lf-taupe-deep); }
.lf-ckreg__c--duration { color: var(--lf-taupe-deep); }
.lf-ckreg__detail {
  display: block;
  margin-top: .35rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--lf-taupe);
}

.lf-ckreg__note {
  max-width: 46rem;
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  font-size: .93rem;
  line-height: 1.66;
  color: var(--lf-taupe);
}

/* The per-field label. Hidden where the header row carries it; shown where the
   header is gone. One label per field at every width, never two. */
.lf-ckreg__label { display: none; }

@media (max-width: 1079px) {
  .lf-ckreg__head { display: none; }
  .lf-ckreg__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    padding: 1.4rem 1.35rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ck-hair);
    border-radius: var(--ck-r-md);
    background: var(--ck-shell);
  }
  .lf-ckreg__row:last-child { margin-bottom: 0; }
  .lf-ckreg__label {
    display: block;
    margin-bottom: .2rem;
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lf-taupe);
  }
  .lf-ckreg__name code { font-size: .875rem; }
}

/* Between 1080 and 1280 the five columns squeeze `What it does` to about eight
   characters a line. Measured — the name column is the one that can give. */
@media (min-width: 1080px) and (max-width: 1280px) {
  .lf-ckreg__head,
  .lf-ckreg__row {
    grid-template-columns:
      minmax(0, 11rem) minmax(0, 6rem) minmax(0, 1.6fr) minmax(0, 7rem) minmax(0, 8.5rem);
    gap: 0 1.1rem;
  }
  .lf-ckreg__c { font-size: .88rem; }
}

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

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

/* ============================================ contrast, measured ======= */
/*
 * The same site-wide finding the Privacy Policy records: `--lf-taupe-mid`
 * (#8A7A6C) measures 4.13:1 on this page's ground, under AA for normal text,
 * though its own token comment says 4.60:1. The token is shared with pages this
 * task must not touch and `style.css` carries another workstream's uncommitted
 * changes, so this fixes the one element that appears here and leaves the token
 * as a finding to be fixed at source. `--lf-taupe` (#655145) measures 7.46:1.
 */
.lf-legal--cookie-policy .lf-tcstamp { color: var(--lf-taupe); }