/* ================================================
   privacy.css
   Styles for the Privacy Policy page and any
   other simple interior prose pages (terms,
   accessibility statement, etc.)

   Also defines reusable classes:
     .interior-header  — simple page header (no hero image)
     .prose-column     — narrow centered reading column
     .policy-section   — spaced content block
     .policy-heading   — section h2
     .policy-subheading— section h3
     .policy-list      — styled list
     .prose-link       — inline text link
   ================================================ */


/* ------------------------------------------------
   INTERIOR PAGE HEADER
   Used on pages that don't warrant a full
   hero image — Privacy, Terms, 404, etc.
   Reusable on any simple interior page.
   ------------------------------------------------ */
.interior-header {
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-12);
  background: var(--color-bg-raised);
  border-bottom: var(--border-subtle);
  text-align: center;
}

.interior-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.interior-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.interior-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.interior-date {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}


/* ------------------------------------------------
   PRIVACY BODY
   ------------------------------------------------ */
.privacy-body {
  background-color: var(--color-bg);
}


/* ------------------------------------------------
   PROSE COLUMN
   Narrow centered reading column — ideal for
   long-form text pages. Max ~70 chars wide.
   ------------------------------------------------ */
.prose-column {
  max-width: 720px;
  margin: 0 auto;
}


/* ------------------------------------------------
   POLICY SECTIONS
   ------------------------------------------------ */
.policy-section {
  margin-bottom: var(--space-4);
}

.policy-section p {
  margin-bottom: var(--space-5);
  line-height: 1.85;
  color: var(--color-text);
  font-size: 1.1rem;
}

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

/* Section heading (h2) */
.policy-heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-text-faint);
}

/* Sub-heading (h3) */
.policy-subheading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* First subheading after a section heading —
   no extra top margin needed */
.policy-heading + .policy-subheading,
.policy-heading + p + .policy-subheading {
  margin-top: var(--space-4);
}


/* ------------------------------------------------
   POLICY LISTS
   ------------------------------------------------ */
.policy-list {
  margin: var(--space-5) 0;
  padding-left: var(--space-6);
}

.policy-list li {
  list-style: disc;
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
}

.policy-list li::marker {
  color: var(--color-accent-dim);
}

/* Link variant — less indented, no bullets */
.policy-list--links {
  padding-left: 0;
}

.policy-list--links li {
  list-style: none;
  padding-left: 0;
  padding: var(--space-3) 0;
  border-bottom: var(--border-subtle);
}

.policy-list--links li:last-child {
  border-bottom: none;
}


/* ------------------------------------------------
   INLINE PROSE LINKS
   ------------------------------------------------ */
.prose-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dim);
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.prose-link:hover {
  color: #caa968;
}


/* ------------------------------------------------
   POLICY CTA BLOCK
   Closing call-to-action at the bottom of
   the policy page.
   ------------------------------------------------ */
.policy-cta {
  margin-top: var(--space-12);
  padding: var(--space-10) var(--space-8);
  background: var(--color-bg-raised);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.policy-cta-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}


/* ------------------------------------------------
   DIVIDER override for prose pages
   Tighter spacing than the default.
   ------------------------------------------------ */
.prose-column .divider {
  margin: var(--space-8) 0;
}


/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 768px) {

  .prose-column {
    max-width: 100%;
  }

  .policy-section p,
  .policy-list li {
    font-size: var(--text-base);
  }

  .policy-cta {
    padding: var(--space-8) var(--space-6);
  }
}