/* ============================================================
   PUBLIC POLICY PAGE — dark theme matching the landing site
   Loaded only for logged-out visitors, AFTER landing.css (so it
   reuses the same custom properties: --bg-primary, --accent-*, etc.)
   ============================================================ */

.policy-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

/* Solid (non-transparent) nav variant for content pages */
.nav--solid {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
}

/* ── Page layout ───────────────────────────────────────────── */
.policy-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

.policy-page__card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 48px 48px 40px;
}

.policy-page__header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}

.policy-page__title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.15;
}

.policy-page__meta {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.policy-page__meta strong { color: var(--text-primary); }

.policy-page__footer {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--card-border);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.policy-page__footer a { color: var(--accent-cyan); }
.policy-page__footer a:hover { text-decoration: underline; }

/* ── Rich-text content (overrides the light .policy-content rules) ──
   The DB content is generic HTML (h2/h3/p/ul/table/...). The shared
   features/policy-page.css is NOT loaded here, so we restyle for dark. */
.policy-content {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-primary);
}

.policy-content h1,
.policy-content h2,
.policy-content h3,
.policy-content h4,
.policy-content h5,
.policy-content h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.3;
    margin: 2.2rem 0 1rem;
}
.policy-content h1:first-child,
.policy-content h2:first-child,
.policy-content h3:first-child { margin-top: 0; }

.policy-content h2 {
    font-size: 1.6rem;
    color: #a5b4fc; /* indigo-300, on-brand accent for headings */
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--card-border);
}
.policy-content h3 { font-size: 1.3rem; color: #67e8f9; } /* cyan-300 */
.policy-content h4 { font-size: 1.12rem; color: var(--text-primary); }
.policy-content h5,
.policy-content h6 { font-size: 1rem; color: var(--text-muted); }

.policy-content p { margin-bottom: 1.3rem; }
.policy-content p:last-child { margin-bottom: 0; }

.policy-content ul,
.policy-content ol {
    margin: 0 0 1.4rem;
    padding-left: 1.6rem;
}
.policy-content ul { list-style: disc; }
.policy-content ol { list-style: decimal; }
.policy-content li { margin-bottom: 0.6rem; }

.policy-content a {
    color: var(--accent-cyan);
    text-decoration: underline;
    transition: color 0.2s;
}
.policy-content a:hover { color: #9bedf5; }

.policy-content strong,
.policy-content b { color: var(--text-primary); font-weight: 600; }
.policy-content em, .policy-content i { font-style: italic; }

.policy-content blockquote {
    margin: 1.6rem 0;
    padding: 1rem 1.4rem;
    border-left: 3px solid var(--accent-indigo);
    background: var(--glass-bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
    font-style: italic;
}

.policy-content hr {
    border: 0;
    border-top: 1px solid var(--card-border);
    margin: 2.4rem 0;
}

.policy-content code {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.45rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #f0abfc;
}
.policy-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.4rem;
}
.policy-content pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Tables */
.policy-content table {
    width: 100%;
    margin: 1.6rem 0;
    border-collapse: collapse;
    border: 1px solid var(--card-border);
    font-size: 0.95rem;
}
.policy-content th,
.policy-content td {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--card-border);
    text-align: left;
}
.policy-content th {
    background: var(--glass-bg);
    color: var(--text-primary);
    font-weight: 600;
}
.policy-content tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.policy-content tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .policy-page { padding: 36px 16px 64px; }
    .policy-page__card { padding: 28px 22px 26px; }
    .policy-content { font-size: 0.98rem; }
}