/* ========================================
   Privacy Page (/privacy)
   Today's look, applied plainly: the Wonderland post page's card and type, as a column of about 72
   characters, over the footer's night blue so the page runs into the footer without a seam. The Style
   Redesign PRD restyles it. No animation: nothing here moves.
   ======================================== */

body {
  background-color: var(--color-tertiary); /* behind the page edges */
}

main {
  padding: 9rem 3rem 8rem; /* the top clears the fixed Menu button */
  font-family: var(--font-primary); /* site.css's body font shorthand has no size, so browsers drop it */
  /* Ends on the footer's top color (footer.css), so the two meet without a band */
  background: linear-gradient(180deg, var(--color-tertiary) 0%, var(--color-accent-9) 100%);
}

/* /privacy#cookies jumps rather than glides. site.css's smooth scroll aims at where the heading is when it
   starts, and on a first visit the web font swaps in after that, moving the heading 61px further down
   (measured at 1280px): the glide ended short of it. The page has no in-page links for a glide to serve. */
html {
  scroll-behavior: auto;
}

/* The footer arrives by fetch, often after the browser has scrolled to /privacy#cookies. Without it, the
   page below the Cookies heading is too short to bring the heading to the top, so on a desktop window the
   scroll stopped short (181px down at 1280x900, 489px at 1440x1300). Holding a window's height until the
   footer is in lets it land; the container then takes the footer's own height, below the reader. */
#footer-container:empty {
  min-height: 100vh;
}

/* ----------------------------------------
   The reading column on a card
   ---------------------------------------- */

.privacy {
  /* The cap is on the text, not the card, so the line stays the same when the padding shrinks: 540px of
     Montserrat at 18px holds about 70 characters a line (measured; the post page's 720px holds about 89) */
  box-sizing: content-box;
  max-width: 54rem;
  margin: 0 auto;
  padding: 4rem;
  font-size: var(--font-size-base);
  line-height: 1.7;
  overflow-wrap: break-word;
  color: var(--color-black-10);
  background: var(--color-neutral);
  border: 4px solid rgba(255, 180, 111, 0.3); /* --color-secondary at 30%, as the post page's card */
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.privacy-header {
  margin-bottom: 2.4rem;
}

.privacy-title {
  margin-bottom: 0.8rem;
  font-weight: 700;
  font-size: var(--font-size-4xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-black-100);
}

/* The effective date: small, muted */
.privacy-date {
  font-size: var(--font-size-small);
  color: var(--color-black-1);
}

.privacy-lead {
  font-weight: 500;
  font-size: var(--font-size-large);
}

.privacy-section {
  margin-top: 3.2rem;
  /* The footer's Cookies link lands here: clear the fixed Menu button */
  scroll-margin-top: 9.6rem;
}

.privacy-section h2 {
  margin-bottom: 0.8rem;
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--color-black-100);
}

.privacy-section p + p {
  margin-top: 1.2rem;
}

/* Links in the text: underlined, at the text's size, without site.css's animated yellow underline */
.privacy a {
  font-weight: 600;
  font-size: inherit;
  color: var(--color-tertiary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: none;
}

.privacy a::after {
  content: none;
}

.privacy a:hover {
  text-decoration-thickness: 0.15em;
}

/* Focus: 3px ring with a 3px gap, dark on the light card */
.privacy a:focus-visible {
  outline: 3px solid var(--color-tertiary);
  outline-offset: 3px;
}

/* ----------------------------------------
   Tablet and mobile
   ---------------------------------------- */

@media (max-width: 768px) {
  main {
    padding: 8rem 1.6rem 6rem;
  }

  .privacy {
    padding: 2.4rem;
    border-radius: 20px;
  }

  .privacy-title {
    font-size: var(--font-size-3xl);
  }
}

@media (max-width: 480px) {
  .privacy {
    padding: 2rem 1.6rem;
    border-width: 3px;
  }

  .privacy-title {
    font-size: var(--font-size-2xl);
  }
}