/* =======================================================================
   privacy.css — AIO Vend
   Massively improved privacy page styling, built on core.css tokens.
   - Light & Dark themes via :root[data-theme="..."] from core.css
   - Namespaced to pv-* to avoid global leaks
   - Accessible, responsive, print-friendly
   ======================================================================= */

/* -----------------------------
   0) Page-level tokens (derived)
   ----------------------------- */

   :root {
    /* semantic surfaces pulled from core tokens (core.css) */
    --pv-bg: var(--clr-bg);
    --pv-surface: #ffffff;
    --pv-surface-2: #f7f9fc;
    --pv-surface-3: #eef2f7;
    --pv-ink: var(--clr-text);
    --pv-ink-muted: #6b7280;
    --pv-border: var(--clr-border);
    --pv-primary: var(--clr-primary);
    --pv-secondary: var(--clr-secondary);
  
    /* radii & shadows from core, with extras */
    --pv-r-sm: var(--radius-sm);
    --pv-r-md: var(--radius-md);
    --pv-r-lg: var(--radius-lg);
    --pv-r-xl: 1.25rem;
  
    --pv-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --pv-shadow-sm: var(--shadow-sm);
    --pv-shadow-md: var(--shadow-md);
    --pv-shadow-lg: var(--shadow-lg);
  
    /* spacing scale */
    --pv-space-1: .35rem;
    --pv-space-2: .6rem;
    --pv-space-3: .9rem;
    --pv-space-4: 1.25rem;
    --pv-space-5: 1.75rem;
    --pv-space-6: 2.25rem;
  
    /* typography */
    --pv-h1: clamp(2rem, 3.6vw, 3rem);
    --pv-h2: clamp(1.35rem, 2.2vw, 1.85rem);
    --pv-h3: 1.1rem;
    --pv-lede: 1.02rem;
  }
  
  :root[data-theme="dark"] {
    --pv-surface: #0f172a;
    --pv-surface-2: #0b1220;
    --pv-surface-3: #0b1322;
    --pv-ink: var(--clr-text-dark, #e2e8f0);
    --pv-ink-muted: #9aa7bb;
    --pv-border: #1e293b;
  }
  
  /* Make sure native widgets match */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark;  }
  
  
  /* --------------------------------------------
     1) Hero — headline, sub, meta, decorative bar
     -------------------------------------------- */
  
  .pv-hero {
    position: relative;
    background:
      radial-gradient(1100px 280px at -10% -30%,
        color-mix(in oklab, var(--pv-primary) 10%, transparent), transparent 55%),
      radial-gradient(900px 220px at 110% -10%,
        color-mix(in oklab, var(--pv-secondary) 14%, transparent), transparent 55%),
      linear-gradient(180deg, color-mix(in oklab, var(--pv-surface-2) 85%, transparent), var(--pv-bg));
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--pv-border);
  }
  
  :root[data-theme="dark"] .pv-hero {
    background:
      radial-gradient(1100px 280px at -10% -30%,
        color-mix(in oklab, var(--pv-primary) 16%, transparent), transparent 55%),
      radial-gradient(900px 220px at 110% -10%,
        color-mix(in oklab, var(--pv-secondary) 16%, transparent), transparent 55%),
      linear-gradient(180deg, color-mix(in oklab, var(--pv-surface-3) 85%, transparent), var(--pv-bg));
  }
  
  .pv-hero__inner {
    display: grid;
    gap: var(--pv-space-2);
  }
  
  .pv-hero h1 {
    font-size: var(--pv-h1);
    line-height: 1.1;
    color: var(--pv-ink);
    margin: .2rem 0 .4rem;
    letter-spacing: -.02em;
  }
  
  .pv-hero .kicker {
    color: var(--pv-secondary);
    font-weight: 700;
    letter-spacing: .01em;
  }
  
  .pv-hero .sub {
    color: var(--pv-ink-muted);
    font-size: var(--pv-lede);
    max-width: 62ch;
  }
  
  .pv-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    align-items: center;
    margin-top: .35rem;
    color: var(--pv-ink-muted);
  }
  
  .pv-hero__meta .pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border: 1px solid var(--pv-border);
    border-radius: 999px;
    background: var(--pv-surface);
    color: var(--pv-ink);
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .pv-hero__meta .pill:hover { transform: translateY(-1px); }
  
  .pv-hero__stroke {
    height: 8px;
    margin-top: var(--pv-space-2);
    background:
      radial-gradient(100% 180% at 0% 50%, color-mix(in oklab, var(--pv-primary) 24%, transparent), transparent 60%),
      radial-gradient(100% 180% at 100% 50%, color-mix(in oklab, var(--pv-secondary) 28%, transparent), transparent 60%);
    filter: blur(10px);
    opacity: .7;
  }
  
  
  /* -------------------------
     2) On-this-page (sticky TOC)
     ------------------------- */
  
  .pv-toc {
    margin: .9rem auto 0;
  }
  
  .pv-toc nav {
    position: sticky;
    top: 5.25rem; /* clears sticky header */
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg);
    box-shadow: var(--pv-shadow-xs);
    padding: .9rem 1rem;
  }
  
  .pv-toc strong {
    display: block;
    margin-bottom: .4rem;
    color: var(--pv-ink);
  }
  
  .pv-toc ol {
    margin: 0;
    padding-left: 1rem;
    columns: 2;
    column-gap: 2rem;
  }
  @media (max-width: 720px) { .pv-toc ol { columns: 1; } }
  
  .pv-toc a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
  }
  .pv-toc a:hover,
  .pv-toc a:focus-visible {
    border-bottom-color: color-mix(in oklab, var(--pv-ink) 35%, transparent);
    outline: none;
  }
  
  
  /* ------------------------------
     3) Section shells & headings
     ------------------------------ */
  
  .pv-section {
    margin: var(--pv-space-4) auto;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg);
    box-shadow: var(--pv-shadow-xs);
    padding: clamp(.9rem, 1.8vw, 1.25rem);
  }
  
  .pv-section:focus-within {
    outline: 3px solid color-mix(in oklab, var(--pv-primary) 55%, transparent);
    outline-offset: 2px;
  }
  
  .pv-section h2 {
    font-size: var(--pv-h2);
    margin: .15rem 0 .6rem;
    line-height: 1.25;
    letter-spacing: -.01em;
  }
  
  .pv-section h3 {
    font-size: var(--pv-h3);
    margin: .25rem 0 .5rem;
    color: color-mix(in oklab, var(--pv-ink) 90%, #000);
  }
  
  .pv-section p {
    margin: .45rem 0 .7rem;
    color: var(--pv-ink);
  }
  
  .pv-section .micro {
    color: var(--pv-ink-muted);
    font-size: .9rem;
  }
  
  
  /* -----------------------
     4) Grids, panels, cards
     ----------------------- */
  
  .pv-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  
  .pv-panel {
    grid-column: span 12;
    background: var(--pv-surface-2);
    border: 1px dashed var(--pv-border);
    border-radius: calc(var(--pv-r-lg) - 4px);
    padding: .9rem 1rem;
  }
  
  @media (min-width: 860px) {
    .pv-panel:nth-child(1),
    .pv-panel:nth-child(2),
    .pv-panel:nth-child(3) { grid-column: span 4; }
  }
  
  .pv-cards {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .75rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
  }
  
  .pv-card {
    grid-column: span 12;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg);
    background: var(--pv-surface-2);
    padding: .7rem .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-shadow: var(--pv-shadow-xs);
  }
  .pv-card i { opacity: .85; }
  
  @media (min-width: 720px) { .pv-card { grid-column: span 4; } }
  
  
  /* -----------------------
     5) Lists & code chips
     ----------------------- */
  
  .list {
    margin: .15rem 0 .8rem 1.1rem;
  }
  .list li {
    margin: .25rem 0;
    padding-left: .1rem;
  }
  
  code {
    background: var(--pv-surface-3);
    border: 1px solid var(--pv-border);
    border-radius: .5rem;
    padding: .05rem .35rem;
    font-size: .9em;
  }
  
  
  /* ------------------------
     6) Tables (cookie matrix)
     ------------------------ */
  
  .pv-table-wrap {
    overflow: auto;
    border-radius: var(--pv-r-lg);
    border: 1px solid var(--pv-border);
    box-shadow: var(--pv-shadow-xs);
    background: var(--pv-surface);
  }
  
  .pv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
    color: var(--pv-ink);
  }
  
  .pv-table th,
  .pv-table td {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--pv-border);
    vertical-align: top;
  }
  
  .pv-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--pv-surface-2), var(--pv-surface));
    text-align: left;
    font-weight: 700;
  }
  
  .pv-table tbody tr:hover td {
    background: color-mix(in oklab, var(--pv-primary) 6%, transparent);
  }
  
  
  /* --------------------------
     7) Choice row (controls)
     -------------------------- */
  
  .pv-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .7rem;
    margin-top: .75rem;
  }
  
  .pv-choice .btn {
    border: 1px solid var(--pv-border);
    border-radius: .7rem;
    box-shadow: var(--pv-shadow-xs);
  }
  
  .btn.btn--ghost {
    background: var(--pv-surface);
    color: var(--pv-ink);
    border: 1px solid var(--pv-border);
  }
  
  
  /* -----------------------------------
     8) Links, focus, and small details
     ----------------------------------- */
  
  a { color: var(--pv-primary); }
  a:hover { text-decoration: underline; }
  
  :focus-visible {
    outline: 3px solid color-mix(in oklab, var(--pv-primary) 55%, transparent);
    outline-offset: 2px;
  }
  
  .hr-muted {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pv-border), transparent);
    border: 0;
    margin: 1rem 0;
  }
  
  
  /* -------------------------
     9) Animations (gentle)
     ------------------------- */
  
  @media (prefers-reduced-motion: no-preference) {
    .pv-section { animation: pvFadeIn .28s ease both; }
    @keyframes pvFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
  
  
  /* -------------------------
     10) Responsive tweaks
     ------------------------- */
  
  @media (max-width: 960px) {
    .pv-hero__meta { gap: .45rem .6rem; }
    .pv-section { padding: 1rem; }
  }
  
  @media (max-width: 720px) {
    .pv-hero { padding-block: 1.25rem; }
    .pv-section { margin: 1rem auto; }
    .pv-card { grid-column: 1 / -1; }
  }
  
  
  /* -------------------------
     11) Print-friendly layout
     ------------------------- */
  
  @media print {
    .nav, .site-alert, .pv-hero__stroke, .footer { display: none !important; }
    body { background: #fff !important; }
    .pv-hero { padding-block: .75rem; border: 0; background: #fff; }
    .pv-toc nav { position: static; box-shadow: none; }
    .pv-section {
      box-shadow: none;
      border-color: #999;
      break-inside: avoid;
    }
    .pv-table thead th { top: auto; }
  }
  
  
  /* ---------------------------------------------
     12) Dark-mode polish & contrast adjustments
     --------------------------------------------- */
  
  :root[data-theme="dark"] .pv-toc nav,
  :root[data-theme="dark"] .pv-section,
  :root[data-theme="dark"] .pv-card,
  :root[data-theme="dark"] .pv-panel,
  :root[data-theme="dark"] .pv-table-wrap {
    background: var(--pv-surface);
    border-color: var(--pv-border);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pv-border) 35%, transparent);
  }
  
  :root[data-theme="dark"] .pv-panel,
  :root[data-theme="dark"] .pv-card {
    background: var(--pv-surface-2);
  }
  
  :root[data-theme="dark"] .pv-table thead th {
    background: linear-gradient(180deg, var(--pv-surface-2), var(--pv-surface));
  }
  
  :root[data-theme="dark"] .pv-hero__meta .pill {
    background: var(--pv-surface);
    border-color: var(--pv-border);
  }
  
  :root[data-theme="dark"] .pv-table tbody tr:hover td {
    background: color-mix(in oklab, var(--pv-primary) 10%, transparent);
  }
  
  
  /* ---------------------------------------------------
     13) Helpers for icons, micro text & accessibility
     --------------------------------------------------- */
  
  i, .fa-solid, .fa-regular, .fa-brands { color: currentColor; }
  
  .pv-muted, .micro, .note { color: var(--pv-ink-muted); }
  
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  
  
  /* ---------------------------------------------------
     14) Buttons harmony (uses core .btn styles)
     --------------------------------------------------- */
  
  .btn {
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  
  .btn:active { transform: translateY(0); }
  
  .btn--secondary {
    background: var(--pv-secondary);
    color: #fff;
    border-color: color-mix(in oklab, var(--pv-secondary) 25%, transparent);
  }
  
  .btn--secondary:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pv-secondary) 40%, transparent);
  }
  
  .btn--ghost {
    background: var(--pv-surface);
    color: var(--pv-ink);
  }
  
  
  /* ---------------------------------------------------
     15) Link rows inside cards (contact section)
     --------------------------------------------------- */
  
  .pv-cards a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
  }
  .pv-cards a:hover {
    border-bottom-color: color-mix(in oklab, var(--pv-ink) 35%, transparent);
  }
  
  /* ---------------------------------------------------
     16) Utility classes (page-scoped)
     --------------------------------------------------- */
  
  .pv-gap-2 { gap: var(--pv-space-2); }
  .pv-gap-3 { gap: var(--pv-space-3); }
  .pv-mt-2  { margin-top: var(--pv-space-2); }
  .pv-mt-3  { margin-top: var(--pv-space-3); }
  .pv-mb-2  { margin-bottom: var(--pv-space-2); }
  .pv-mb-3  { margin-bottom: var(--pv-space-3); }
  
  /* End of privacy.css */