/*
  Privacy policy layout — ROST Premium.

  Scoped entirely to `.privacy*` and loaded ONLY on the two privacy pages
  (pages/privacy_policy.py -> render_page head_extra). Nothing here is used
  by any other page, and it is deliberately kept out of the shared
  components.css so no other page's markup or the shared stylesheet
  changes. Uses the site's own design tokens (vars.css) for colour,
  spacing, typography and radius so the page reads as part of the same
  system. No new fonts, no JavaScript, no external assets.
*/

/* ---- Header block (compact, not a full-height hero) ---- */
.privacy__head {
  max-width: 1200px;
  margin-inline: auto;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
}

.privacy__title {
  /* ~34px on small screens -> ~56px on desktop, capped well below the
     site's default fluid hero size so the H1 no longer wraps to 3 lines. */
  font-size: clamp(2.125rem, 1.35rem + 3vw, 3.5rem);
  line-height: 1.08;
  max-width: 820px;
  margin: var(--space-sm) 0 var(--space-md);
}

.privacy__intro {
  max-width: 720px;
  margin: 0 0 var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--graphite-700);
}

.privacy__updated {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--metal-400);
}

/* ---- Two-column layout ---- */
.privacy__layout {
  max-width: 1200px;
  margin-inline: auto;
  padding-bottom: var(--space-2xl);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.privacy__content {
  min-width: 0;
  max-width: 800px;
}

/* ---- Table of contents ---- */
/* Mobile default: a compact, clearly tappable collapsible "Contents" row
   with a chevron. On tablet/desktop the list is revealed statically and
   this toggle is hidden (see the min-width: 768px block below). */
.privacy__toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-700);
  cursor: pointer;
  list-style: none;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.privacy__toc-summary::-webkit-details-marker {
  display: none;
}

.privacy__toc-summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.privacy__toc-details[open] .privacy__toc-summary::after {
  transform: rotate(-135deg);
}

.privacy__toc-details:not([open]) .privacy__toc-nav {
  margin-top: 0;
}

.privacy__toc-details[open] .privacy__toc-nav {
  margin-top: var(--space-2xs);
}

.privacy__toc-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy__toc-nav li {
  margin: 0;
}

.privacy__toc-nav a {
  display: block;
  padding: 10px var(--space-sm);
  border-left: 2px solid var(--border-hairline);
  color: var(--graphite-700);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.privacy__toc-nav a:hover,
.privacy__toc-nav a:focus-visible {
  color: var(--brand-accent);
  border-left-color: var(--brand-accent);
}

/* ---- Content sections ---- */
.privacy__section {
  scroll-margin-top: calc(var(--mobile-header-height) + 16px);
}

.privacy__section + .privacy__section {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--hairline) solid var(--border-hairline);
}

.privacy__content h2 {
  margin: 0 0 var(--space-sm);
  /* ~26px -> ~32px, well under the site's default h2 (~39px). */
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  line-height: var(--leading-snug);
}

.privacy__content p,
.privacy__content li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--graphite-900);
}

.privacy__content p {
  margin: 0 0 var(--space-sm);
  max-width: 68ch;
}

.privacy__content ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25rem;
  max-width: 68ch;
}

.privacy__content li {
  margin-bottom: var(--space-3xs);
}

.privacy__content a {
  color: var(--brand-accent);
  word-break: break-word; /* long links / email wrap instead of overflowing */
}

.privacy__content a:hover {
  color: var(--brand-accent-hover);
}

/* Quiet target accent (pure CSS, no scroll-spy JS needed). */
.privacy__section:target h2 {
  color: var(--brand-accent);
}

/* ---- Calm Formspree info block (not a marketing card) ---- */
.privacy__note {
  padding: var(--space-md);
  background: rgba(47, 111, 94, 0.06);
  border: var(--hairline) solid rgba(47, 111, 94, 0.22);
  border-radius: var(--radius-md);
}

.privacy__note-title {
  margin: 0 0 var(--space-2xs) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-accent);
}

.privacy__note p:last-child {
  margin-bottom: 0;
}

/* ---- Tablet + desktop (>=768px): reveal the list statically and drop
   the mobile toggle. The list is shown even though <details> has no
   [open] attribute, so mobile can stay collapsed-by-default while wider
   screens always show the full index. ---- */
@media (min-width: 768px) {
  .privacy__toc-summary {
    display: none;
  }
  .privacy__toc-details > .privacy__toc-nav {
    display: block;
    margin-top: 0;
  }
  .privacy__toc-details::details-content {
    content-visibility: visible;
    display: block;
  }
}

/* ---- Desktop (>=1100px): sticky two-column TOC ---- */
@media (min-width: 1100px) {
  .privacy__toc {
    position: sticky;
    top: calc(var(--mobile-header-height) + var(--space-md));
  }
}

/* ---- Tablet (768-1099px): single column, TOC as a compact horizontal
   index above the text ---- */
@media (max-width: 1099px) {
  .privacy__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .privacy__toc {
    position: static;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .privacy__toc {
    padding-bottom: var(--space-sm);
    border-bottom: var(--hairline) solid var(--border-hairline);
  }
  .privacy__toc-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
  }
  .privacy__toc-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-left: 0;
  }
}

/* ---- Mobile (<=767px): collapsible "Contents", never sticky ---- */
@media (max-width: 767px) {
  .privacy__toc {
    position: static;
  }
  .privacy__toc-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}