/* Shared styling for the Privacy Policy and Terms of Use.
   Brand tokens match anewuessentials.com and the book landing page. Gold is a
   surface and rule colour only: #C59D5E fails WCAG AA as text on light grounds,
   so text-weight gold uses --gold-ink #876631 instead. */

:root {
  --cream:     #F4F0E6;
  --surface:   #FFFFFF;
  --ink:       #2E2B26;
  --ink-soft:  #6B6459;
  --gold:      #C59D5E;
  --gold-ink:  #876631;
  --rule:      rgba(51,48,41,.14);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  --measure: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream:    #23201A;
    --surface:  #2D2921;
    --ink:      #F2EEE4;
    --ink-soft: #B3AA98;
    --gold-ink: #D9B57A;
    --rule:     rgba(242,238,228,.18);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0 1.5rem 4rem;
}

/* --- Site navigation --------------------------------------------------------
   These pages are reached from a footer link, an email, or a search result, so a
   visitor arrives with no way back to the site they came from. Worse, they arrive
   at the top of a very long document. A sticky bar means the route home is on
   screen at every scroll position rather than only after they reach the end.

   The links mirror the real site's own navigation (Home, About, Services,
   Essentials, Contact), which are anchors on its single-page homepage. */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

/* Opaque background is deliberate. A translucent bar with backdrop-filter looks
   nicer and costs legibility over dense body text, which is the whole content of
   these pages. */

.nav__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: .75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.nav__home {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}

.nav__home img {
  width: auto;
  height: 40px;
  flex: none;
}

.nav__home span {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links li { margin: 0; }

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* comfortable tap target */
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--gold-ink); text-decoration: underline; }

/* Narrow screens. The bar is sticky, so its height is a permanent tax on the
   reading area: left to wrap freely the five links took two rows and the whole
   header ate about 300px of an 812px phone screen, which is worse than the problem
   it solves. So on mobile it is exactly two rows, brand then links, and the links
   are held on one line and allowed to scroll sideways rather than wrap. */
@media (max-width: 33rem) {
  .nav__inner { padding: .5rem 1.25rem .25rem; gap: 0; }
  .nav__home { min-height: 38px; }
  .nav__home span { font-size: .9375rem; }
  .nav__home img { height: 30px; }

  .nav__links {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 .875rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav__links::-webkit-scrollbar { display: none; }

  .nav__links a {
    font-size: .6875rem;
    letter-spacing: .02em;
    min-height: 36px;
    white-space: nowrap;
  }
}

/* Very narrow phones: drop the wordmark and let the logo carry the brand, so the
   links keep their full width. */
@media (max-width: 22rem) {
  .nav__home span { display: none; }
}

/* --- Masthead -------------------------------------------------------------- */
.top {
  border-bottom: 1px solid var(--rule);
  padding-block: 2.5rem 1.75rem;
  margin-bottom: 2.5rem;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.125rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 1rem 0 0;
}

.top__dates {
  margin: 1rem 0 0;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* --- Long-form structure --------------------------------------------------- */
h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 3rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* The sticky bar would otherwise cover the heading a table-of-contents link jumps
   to. This is why in-page anchors on sticky-header sites so often land wrong.
   Two rows on mobile, one on desktop, hence the two values. */
h2[id] { scroll-margin-top: 6.5rem; }

@media (min-width: 33.0625rem) {
  h2[id] { scroll-margin-top: 5.5rem; }
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 .375rem;
}

p, li { margin: 0 0 1rem; }
ul, ol { padding-left: 1.375rem; margin: 0 0 1rem; }
li { margin-bottom: .5rem; }

a { color: var(--gold-ink); }

strong { font-weight: 600; }

/* --- Callouts --------------------------------------------------------------
   Used for the two things a reader must not miss: the crisis line, and the fact
   that health information is governed by a different notice than this one. */
.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 1.25rem 1.375rem;
  margin: 1.75rem 0;
}

.note > :last-child { margin-bottom: 0; }

.note--urgent { border-left-color: #A33; }

@media (prefers-color-scheme: dark) {
  .note--urgent { border-left-color: #F0A0A0; }
}

.note__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
}

/* --- Contents -------------------------------------------------------------- */
.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.375rem;
  margin-bottom: 2.5rem;
}

.toc p {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .625rem;
}

.toc ol { margin: 0; padding-left: 1.25rem; font-size: .9375rem; }
.toc li { margin-bottom: .25rem; }

/* --- Definition-style rows for the data tables ----------------------------- */
.rows { margin: 1rem 0 1.5rem; }

.rows__row {
  display: grid;
  gap: .25rem 1.5rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--rule);
}

.rows__row:first-child { border-top: 1px solid var(--rule); }

.rows__key { font-weight: 600; }
.rows__val { color: var(--ink-soft); }
.rows__key, .rows__val { margin: 0; }

@media (min-width: 38rem) {
  .rows__row { grid-template-columns: 13rem 1fr; }
}

/* --- Footer ---------------------------------------------------------------- */
.foot {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  font-size: .875rem;
  color: var(--ink-soft);
}

.foot p { margin: 0 0 .5rem; }
.foot p:last-child { margin-bottom: 0; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.5rem;
  margin-bottom: 1rem;
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;    /* WCAG 2.2 target size */
}

@media print {
  body { background: #fff; color: #000; }
  .toc, .nav { display: none; }
}