/* VoxPanel — project-specific styles
   Keep this file thin: Tailwind utilities cover almost everything.
   Only put here what a utility can't express cleanly. */

:root {
    --cream: #FBF9F5;
    --bordeaux: #7A1B29;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: var(--cream);
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Playfair Display sits high on the baseline — nudge display headings. */
.font-display {
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Meme-style outlined caption used on the feature cards (topics 01–04). */
.caption-outline {
    color: #fff;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, .55),
        1px -1px 0 rgba(0, 0, 0, .55),
        -1px 1px 0 rgba(0, 0, 0, .55),
        1px 1px 0 rgba(0, 0, 0, .55),
        0 2px 6px rgba(0, 0, 0, .45);
}

/* Highlighter swipe behind key words on the feature cards. */
.caption-highlight {
    background-color: #FFE21E;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 .15em;
}

/* ------------------------------------------------------------------ *
 * Eligibility questionnaire (includes/quiz.php + assets/js/quiz.js)
 * ------------------------------------------------------------------ */

.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .85rem 1.5rem;
    font-family: "Playfair Display", Georgia, Cambria, serif;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s, opacity .2s;
}

.btn-primary {
    background: var(--bordeaux);
    color: #fff;
    font-weight: 700;
    border: 1px solid var(--bordeaux);
}

.btn-primary:hover { background: #5E141F; border-color: #5E141F; }
.btn-primary:disabled { opacity: .6; cursor: default; }

.btn-ghost {
    background: transparent;
    color: var(--bordeaux);
    font-weight: 600;
    border: 1px solid rgba(122, 27, 41, .35);
}

.btn-ghost:hover { background: #F7E8EA; }

.quiz-input {
    width: 100%;
    border-radius: .9rem;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    padding: .7rem .9rem;
    font-size: 15px;
    color: #1A1A1A;
}

.quiz-input:focus {
    outline: 2px solid var(--bordeaux);
    outline-offset: 1px;
    border-color: transparent;
}

/* Multi-select option rows */
.quiz-opt {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .9rem;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #1A1A1A;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.quiz-opt:hover { border-color: rgba(122, 27, 41, .4); }

.quiz-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.quiz-box {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: .4rem;
    color: #fff;
    transition: background-color .15s, border-color .15s;
}

.quiz-box svg {
    width: .8rem;
    height: .8rem;
    opacity: 0;
    transition: opacity .12s;
}

.quiz-opt:has(input:checked) {
    border-color: var(--bordeaux);
    background: #F7E8EA;
}

.quiz-opt input:checked ~ .quiz-box {
    background: var(--bordeaux);
    border-color: var(--bordeaux);
}

.quiz-opt input:checked ~ .quiz-box svg { opacity: 1; }

.quiz-opt input:focus-visible ~ .quiz-box {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}