/**
 * Find Your Fit quiz — /find-your-fit/
 * File: /wp-content/themes/theme/assets/css/quiz.css
 *
 * Loads on top of design-system.css only (main.css and every other theme
 * stylesheet are dequeued on this page). Mobile first: most traffic lands
 * inside the Facebook / Instagram in-app browsers on a phone.
 * Tap targets >= 56px, inputs >= 16px (no iOS zoom), main buttons low on
 * the screen, fixed-height stage so screens don't shift.
 */

.wf-quiz-page {
    min-height:       100vh;
    min-height:       100dvh;
    display:          flex;
    flex-direction:   column;
    background-color: var(--color-bg);
    color:            var(--color-text);
    font-family:      var(--font-body);
    -webkit-tap-highlight-color: transparent;
}

/* ── Header: logo only ─────────────────────────────────────────────── */
.wf-quiz-header {
    display:         flex;
    justify-content: center;
    padding:         var(--space-4) var(--space-4) var(--space-2);
}
.wf-quiz-header__logo img { display: block; height: 28px; width: auto; }
.wf-quiz-header__logo .wf-quiz-logo--light { display: none; }
[data-theme="light"] .wf-quiz-header__logo .wf-quiz-logo--dark  { display: none; }
[data-theme="light"] .wf-quiz-header__logo .wf-quiz-logo--light { display: block; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.wf-quiz {
    flex:           1;
    width:          100%;
    max-width:      560px;
    margin-inline:  auto;
    padding:        0 var(--space-4) var(--space-6);
    display:        flex;
    flex-direction: column;
}

.wf-quiz__progress { padding-top: var(--space-2); }
.wf-quiz__progress[hidden] { display: none; }
.wf-quiz__progress-bar {
    height:           4px;
    border-radius:    var(--radius-full);
    background-color: var(--color-surface-3);
    overflow:         hidden;
}
.wf-quiz__progress-fill {
    display:          block;
    height:           100%;
    width:            0;
    background-color: var(--color-primary);
    border-radius:    inherit;
    transition:       width var(--transition-base);
}
.wf-quiz__progress-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    min-height:      40px;
}
.wf-quiz__count {
    margin-left: auto;
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
}
.wf-quiz__back {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    min-height:  40px;
    padding:     0 var(--space-2) 0 0;
    border:      0;
    background:  none;
    color:       var(--color-text-muted);
    font:        inherit;
    font-size:   var(--text-sm);
    cursor:      pointer;
}
.wf-quiz__back::before { content: '\2190'; }
.wf-quiz__back[hidden] { display: none; }

.wf-quiz__stage {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     0;
}

.wf-quiz__screen {
    flex:           1;
    display:        flex;
    flex-direction: column;
    animation:      wf-quiz-in 220ms ease-out both;
}
@keyframes wf-quiz-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-quiz__screen { animation: none; }
    .wf-quiz__progress-fill { transition: none; }
}

.wf-quiz__title {
    margin:         var(--space-4) 0 var(--space-2);
    font-family:    var(--font-heading);
    font-weight:    800;
    font-size:      var(--text-3xl);
    line-height:    1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.wf-quiz__sub {
    margin:    0 0 var(--space-4);
    color:     var(--color-text-muted);
    font-size: var(--text-base);
}

/* Options follow the question directly, on every screen size. */
.wf-quiz__options {
    margin-top:     var(--space-2);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}
.wf-quiz__options--grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-2);
}
.wf-quiz__options--grid2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-2);
}

.wf-quiz__opt {
    min-height:       56px;
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-surface);
    color:            var(--color-text);
    font:             inherit;
    font-size:        var(--text-lg);
    font-weight:      600;
    text-align:       left;
    cursor:           pointer;
    transition:       border-color var(--transition-fast), background-color var(--transition-fast);
    touch-action:     manipulation;
}
.wf-quiz__options--grid .wf-quiz__opt,
.wf-quiz__options--grid2 .wf-quiz__opt { text-align: center; padding-inline: var(--space-2); }
.wf-quiz__options--grid2 .wf-quiz__opt { font-size: var(--text-base); line-height: 1.25; }
.wf-quiz__options--stack .wf-quiz__opt--big { min-height: 72px; font-size: var(--text-xl); }

@media (hover: hover) {
    .wf-quiz__opt:hover { border-color: var(--color-teal-border); }
}
.wf-quiz__opt[aria-pressed="true"],
.wf-quiz__opt.is-selected {
    border-color:     var(--color-primary);
    background-color: var(--color-teal-dim);
}
.wf-quiz__opt--ghost {
    background-color: transparent;
    border-style:     dashed;
    color:            var(--color-text-muted);
}

/* Multi-select: check mark on selected rows. */
.wf-quiz__opt--check {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.wf-quiz__opt--check::after {
    content:       '';
    width:         22px;
    height:        22px;
    border:        2px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex-shrink:   0;
}
.wf-quiz__opt--check[aria-pressed="true"]::after {
    border-color:     var(--color-primary);
    background-color: var(--color-primary);
    box-shadow:       inset 0 0 0 3px var(--color-bg);
}

/* Option with helper text (Club (NCWA)): label over a smaller muted line,
   kept in one box so the check mark stays on the right. */
.wf-quiz__opt-text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    padding-right:  var(--space-3);
}
.wf-quiz__opt-help {
    font-size:   var(--text-sm);
    font-weight: 400;
    line-height: 1.35;
    color:       var(--color-text-muted);
}

/* Levels "Next" — follows the list. */
.wf-quiz__pinned {
    padding-top: var(--space-4);
}
.wf-quiz__primary {
    width:            100%;
    min-height:       56px;
    border:           0;
    border-radius:    var(--radius-lg);
    background-color: var(--color-primary);
    color:            #0D1117;
    font-family:      var(--font-heading);
    font-size:        var(--text-xl);
    font-weight:      800;
    text-transform:   uppercase;
    letter-spacing:   0.02em;
    cursor:           pointer;
    touch-action:     manipulation;
}
.wf-quiz__primary:disabled { opacity: 0.4; cursor: default; }

/* Pre-selected answer from the URL (?state=MO): the choice, Continue, and a
   small link back to the list (quiz.js renderConfirm). */
.wf-quiz__confirm {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    margin-top:     var(--space-2);
}
.wf-quiz__confirm-choice {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    padding:          var(--space-6) var(--space-5);
    border:           2px solid var(--color-primary);
    border-radius:    var(--radius-lg);
    background-color: var(--color-teal-dim);
    color:            var(--color-text);
}
.wf-quiz__confirm-check {
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background-color: var(--color-primary);
    color:            #0D1117;
}
.wf-quiz__confirm-name {
    min-width:      0;
    font-family:    var(--font-heading);
    font-weight:    800;
    font-size:      var(--text-4xl);
    line-height:    1;
    text-transform: uppercase;
    overflow-wrap:  anywhere;
}
.wf-quiz__confirm-change {
    align-self:            center;
    min-height:            44px;
    padding:               0 var(--space-2);
    border:                0;
    background:            none;
    color:                 var(--color-text-muted);
    font:                  inherit;
    font-size:             var(--text-sm);
    text-decoration:       underline;
    text-underline-offset: 3px;
    cursor:                pointer;
    touch-action:          manipulation;
}
.wf-quiz__confirm-change:hover { color: var(--color-primary); }

/* Searchable list (state, major). */
.wf-quiz__search {
    width:            100%;
    min-height:       52px;
    padding:          0 var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-surface);
    color:            var(--color-text);
    font:             inherit;
    font-size:        16px;
}
.wf-quiz__search:focus { outline: none; border-color: var(--color-primary); }
.wf-quiz__list {
    list-style:   none;
    margin:       var(--space-2) 0 0;
    padding:      0;
    flex:         1;
    min-height:   240px;
    max-height:   52vh;
    overflow-y:   auto;
    border:       1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}
.wf-quiz__list button {
    display:      block;
    width:        100%;
    min-height:   52px;
    padding:      0 var(--space-4);
    border:       0;
    border-bottom: 1px solid var(--color-border-subtle);
    background:   none;
    color:        var(--color-text);
    font:         inherit;
    font-size:    var(--text-base);
    text-align:   left;
    cursor:       pointer;
    touch-action: manipulation;
}
.wf-quiz__list li:last-child button { border-bottom: 0; }
.wf-quiz__group {
    padding:          var(--space-3) var(--space-4) var(--space-1);
    font-size:        var(--text-xs);
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.06em;
    color:            var(--color-text-muted);
    background-color: var(--color-surface);
    border-bottom:    1px solid var(--color-border-subtle);
}
.wf-quiz__list button.is-selected { background-color: var(--color-teal-dim); color: var(--color-primary); }
.wf-quiz__empty { padding: var(--space-4); color: var(--color-text-muted); }

/* ── Transition ────────────────────────────────────────────────────── */
.wf-quiz__wait {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-4);
    text-align:      center;
    min-height:      50vh;
}
.wf-quiz__spinner {
    width:         44px;
    height:        44px;
    border:        3px solid var(--color-surface-3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation:     wf-quiz-spin 0.8s linear infinite;
}
@keyframes wf-quiz-spin { to { transform: rotate(360deg); } }
.wf-quiz__wait-text { font-size: var(--text-lg); font-weight: 600; }
.wf-quiz__wait .wf-quiz__primary { max-width: 320px; }

/* ── Teaser ────────────────────────────────────────────────────────── */
.wf-quiz__basis {
    margin:    0 0 var(--space-4);
    color:     var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.wf-quiz__cards {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}
.wf-quiz__also {
    margin:         var(--space-3) 0 0;
    font-size:      var(--text-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-text-muted);
}

/* Same card layout as the dashboard College Fit card (dashboard.css). */
.wf-fit-card {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    padding:          var(--space-3);
    background-color: var(--color-surface-2);
    border:           1px solid var(--color-border-subtle);
    border-radius:    var(--radius-md);
}
.wf-fit-card__logo {
    position:         relative;
    width:            48px;
    height:           48px;
    flex-shrink:      0;
    border-radius:    var(--radius-md);
    background-color: var(--color-surface-3);
    overflow:         hidden;
}
.wf-fit-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wf-fit-card__initials {
    position:        absolute;
    inset:           0;
    display:         none;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-heading);
    font-weight:     700;
    font-size:       17px;
}
.wf-fit-card__logo.is-tile .wf-fit-card__initials { display: flex; }
.wf-fit-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-fit-card__name {
    font-weight:        600;
    line-height:        1.3;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
}
.wf-fit-card__tags {
    font-size:      12px;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wf-fit-card__reason { font-size: 13px; font-weight: 600; color: var(--color-primary); }

/* Full list: cards are links (new tab). */
.wf-fit-card-item { list-style: none; }
a.wf-fit-card { color: inherit; text-decoration: none; transition: border-color var(--transition-fast); }
@media (hover: hover) { a.wf-fit-card:hover { border-color: var(--color-primary); } }
.wf-quiz__screen--full { padding-bottom: var(--space-4); }

/* /join call to action — after card 5 and at the end. */
.wf-quiz__cta-item { list-style: none; }
.wf-quiz__cta {
    margin:           var(--space-4) 0;
    padding:          var(--space-4);
    border-radius:    var(--radius-lg);
    background-color: var(--color-surface);
    border:           1px solid var(--color-border-subtle);
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-3);
}
.wf-quiz__cta-line { margin: 0; font-weight: 600; line-height: 1.4; }
/* "This list is for you…" — the top results CTA's headline. */
.wf-quiz__cta-heading {
    margin:         0;
    font-family:    var(--font-heading);
    font-size:      var(--text-2xl);
    font-weight:    700;
    line-height:    1.1;
    text-transform: uppercase;
}
.wf-quiz__cta-heading + .wf-quiz__cta-line { font-weight: 400; color: var(--color-text-muted); }
.wf-quiz__cta--top { margin-bottom: var(--space-6); }
.wf-quiz__cta-senior { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.wf-quiz__cta-bullets {
    margin:         0;
    padding:        0;
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}
.wf-quiz__cta-bullets li {
    position:     relative;
    padding-left: var(--space-6);
    font-weight:  600;
    line-height:  1.4;
}
/* Teal check in front of each bullet. */
.wf-quiz__cta-bullets li::before {
    content:       '';
    position:      absolute;
    left:          4px;
    top:           0.3em;
    width:         10px;
    height:        6px;
    border-left:   2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform:     rotate(-45deg);
}
.wf-quiz__cta-under { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
/* After card 5 and at the end: one line + the button. */
.wf-quiz__cta-repeat { margin: 0; font-weight: 600; line-height: 1.4; }
.wf-quiz__primary--link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    text-decoration: none;
    padding:         0 var(--space-4);
    line-height:     1.1;
}

/* Sticky CTA bar — shown by JS once the first CTA block scrolls off,
   hidden as the end CTA approaches. Mobile: full-width button. Desktop:
   one line of copy left, button right, as wide as the card list. */
.wf-quiz__sticky {
    position:         fixed;
    left:             0;
    right:            0;
    bottom:           0;
    z-index:          20;
    padding:          var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background-color: var(--color-bg);
    border-top:       1px solid var(--color-border-subtle);
}
.wf-quiz__sticky[hidden] { display: none; }
.wf-quiz__sticky-inner {
    max-width:     calc(560px - 2 * var(--space-4)); /* the card list: .wf-quiz minus its side padding */
    margin-inline: auto;
}
.wf-quiz__sticky-line { display: none; } /* phone: button only */
@media (min-width: 768px) {
    .wf-quiz__sticky-inner {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--space-4);
    }
    .wf-quiz__sticky-line {
        display:     block;
        font-weight: 600;
        font-size:   var(--text-base);
    }
    .wf-quiz__sticky .wf-quiz__primary {
        width:      auto;
        min-height: 48px;
        padding:    0 var(--space-6);
        font-size:  var(--text-lg);
        flex-shrink: 0;
    }
}

/* Teaser at phone width: headline, 3 cards, email field and button fit
   on one iPhone screen (390 × ~660 visible) without scrolling. */
@media (max-width: 480px) {
    .wf-quiz__screen--teaser .wf-quiz__title { margin-top: var(--space-2); font-size: var(--text-2xl); }
    .wf-quiz__screen--teaser .wf-quiz__basis { margin-bottom: var(--space-3); }
    .wf-quiz__screen--teaser .wf-quiz__cards { gap: var(--space-2); }
    .wf-quiz__screen--teaser .wf-fit-card { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
    .wf-quiz__screen--teaser .wf-fit-card__logo { width: 36px; height: 36px; }
    .wf-quiz__screen--teaser .wf-fit-card__initials { font-size: 14px; }
    .wf-quiz__screen--teaser .wf-fit-card__name { font-size: var(--text-sm); }
    .wf-quiz__screen--teaser .wf-fit-card__tags,
    .wf-quiz__screen--teaser .wf-fit-card__reason { font-size: 12px; }
    .wf-quiz__screen--teaser .wf-quiz__gate { margin-top: var(--space-4); gap: var(--space-2); }
    .wf-quiz__screen--teaser .wf-quiz__email { min-height: 52px; }
}

/* Email gate */
.wf-quiz__gate {
    margin-top:     var(--space-6);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}
.wf-quiz__label { font-size: var(--text-sm); font-weight: 600; }
.wf-quiz__email {
    width:            100%;
    min-height:       56px;
    padding:          0 var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    background-color: var(--color-surface);
    color:            var(--color-text);
    font:             inherit;
    font-size:        16px;
}
.wf-quiz__email:focus { outline: none; border-color: var(--color-primary); }
.wf-quiz__email[aria-invalid="true"] { border-color: var(--color-error); }
.wf-quiz__error { margin: 0; font-size: var(--text-sm); color: var(--color-error); }
.wf-quiz__primary[aria-busy="true"] { opacity: 0.6; }
.wf-quiz__error[hidden] { display: none; }
.wf-quiz__consent { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
.wf-quiz__consent a { color: inherit; }
.wf-quiz__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ────────────────────────────────────────────────────────── */
.wf-quiz-footer {
    display:         flex;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    font-size:       var(--text-xs);
    color:           var(--color-text-subtle);
}
.wf-quiz-footer a { color: var(--color-text-muted); text-decoration: none; }

@media (min-width: 768px) {
    .wf-quiz__title { font-size: var(--text-4xl); }
    .wf-quiz__options--grid { grid-template-columns: repeat(4, 1fr); }
}