/* Age gate interstitial (public/partials/age-gate.php). Uses the site's own tokens, so it
   follows the Classic theme colours and, under a theme shell, the shell's token overrides. */
.age-gate-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-primary, #0a0a0a);
    color: var(--text-primary, #fff);
    font-family: var(--font-body, system-ui, sans-serif);
}
.age-gate {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
}
.age-gate-card {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    background: var(--bg-secondary, #141414);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--radius, 12px);
    padding: 40px 36px 28px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.age-gate-brand { display: flex; justify-content: center; margin-bottom: 20px; font-family: var(--font-display, var(--font-heading, inherit)); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary, #fff); }
.age-gate-shell .age-gate-brand { font-family: var(--font-logo, 'Syncopate', sans-serif); text-transform: uppercase; letter-spacing: 1px; font-size: 20px; }
.age-gate-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
    border: 2px solid var(--primary, #e63946); color: var(--primary, #e63946);
    font-weight: 800; font-size: 20px; letter-spacing: .02em;
}
.age-gate h1 {
    margin: 0 0 14px;
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    line-height: 1.2;
    color: var(--text-primary, #fff);
}
.age-gate-text p { margin: 0 0 12px; color: var(--text-secondary, #b3b3b3); line-height: 1.65; font-size: 15px; }
.age-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 18px; }
.age-gate-form { margin: 0; }
.age-gate-actions .btn { min-height: 48px; padding: 12px 26px; font-size: 15px; width: auto; }
.age-gate-actions .btn:focus-visible,
.age-gate-links a:focus-visible,
.age-gate-signin a:focus-visible { outline: 3px solid var(--primary, #e63946); outline-offset: 3px; }
.age-gate-note { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary, #b3b3b3); line-height: 1.55; }
.age-gate-signin { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #b3b3b3); }
.age-gate-signin a, .age-gate-links a { color: var(--primary, #e63946); }
.age-gate-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding-top: 16px; border-top: 1px solid var(--border, #2a2a2a); font-size: 13px; }
@media (max-width: 480px) {
    .age-gate-card { padding: 28px 20px 20px; }
    .age-gate-actions { flex-direction: column; align-items: stretch; }
    .age-gate-actions .btn, .age-gate-form, .age-gate-form .btn { width: 100%; }
}