/* ===== RosterSure — Policies (Terms & Privacy) =====
   Normalizes spacing and visual styles across /terms and /privacy.
   Import after base.css.
================================================================== */
:root{
  /* Add missing design tokens used by older inline styles */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem;
  --radius-4:4px; --radius-6:6px; --radius-8:8px; --radius-10:10px; --radius-12:12px;
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-24:1.5rem; --fs-32:2rem;

  /* Semantic helpers that were missing */
  --tldr-bg: var(--bg2);
  --tldr-border: var(--border);
  --note-bg: #FFF8E1;
  --note-border: #F59E0B;
  --danger-bg: #FEF2F2;
  --danger-border: #FCA5A5;
}

/* Page wrapper to keep the long-form content readable */
.policy-page{
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--space-8) 0;
}

/* Headings rhythm */
.policy-page h1{
  font-size: var(--fs-32);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
.policy-page .updated{
  color: var(--muted);
  font-size: var(--fs-14);
  margin: 0 0 var(--space-8);
}
.policy-page h2{
  font-size: var(--fs-24);
  margin: var(--space-10) 0 var(--space-3);
  line-height: 1.25;
}
.policy-page h3{
  font-size: var(--fs-18);
  margin: var(--space-6) 0 var(--space-2);
}

/* Body text + lists */
.policy-page p{ margin: 0 0 var(--space-4); }
.policy-page ul{
  margin: 0 0 var(--space-6);
  padding-left: 1.25rem;
}
.policy-page li{ margin: .35rem 0; }

/* TL;DR card */
.tldr{
  background: var(--tldr-bg);
  border: 1px solid var(--tldr-border);
  border-radius: var(--radius-12);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}
.tldr > h2{
  margin-top: 0;
  font-size: var(--fs-18);
  color: var(--brand);
}
.tldr .points{ display: grid; gap: .5rem; font-size: var(--fs-14); }
.tldr .points p{ margin: 0; }

/* Informational callouts */
.note{
  display:flex; gap: .75rem; align-items:flex-start;
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  border-radius: var(--radius-8);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.note > svg{ flex-shrink:0; }

/* Danger / red callout used in Terms data deletion section */
.danger{
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-8);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.danger p{ margin: 0 0 .5rem; font-weight: 600; color: #991b1b; }
.danger ul{ margin: 0; }

/* Small helpers */
.lede{ max-width: 70ch; }
.small{ font-size: var(--fs-14); }

/* ===== Mobile refinements (≤768px) ===== */
@media (max-width: 768px){
  /* Safe area around content */
  .policy-page{
    padding: var(--space-8) var(--space-5);
  }

  /* Card padding and subtle elevation */
  .tldr, .note, .danger{
    padding: var(--space-4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Section rhythm */
  .policy-page h2{ margin-top: var(--space-8); }
  .policy-page h3{ margin-top: var(--space-6); }

  /* Keep line length readable on large phones */
  .policy-page p, .policy-page li{ max-width: 68ch; }
}

/* ===== Header fixes for Privacy / Terms ===== */
.public-header { padding-block: 8px; }

.public-header .header-container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  /* side padding + notch safe areas */
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.public-header .public-nav{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Keep "Pricing" visible on phones and give buttons breathing room */
@media (max-width: 768px){
  .public-header .public-nav a[href*="/pricing"]{
    display: inline-flex !important;
    visibility: visible !important;
  }
  .public-header .public-nav .btn{
    /* slightly tighter mobile buttons */
    padding-inline: 12px;
  }
}