/* Quiz module — self-contained styles loaded only when QuizPage renders. */

[x-cloak] { display: none !important; }

/* Hide site-wide chrome that doesn't belong on a quiz page. */
.o-s--fixed-cta,
.o-s--banner {
    display: none !important;
}

/* ============================================================================
   1. Wrapper, globals, resets
   ============================================================================ */

.c-quiz {
    --quiz-primary-soft:   #a89dd1;
    --quiz-teal-bg:        #5dc0c4;
    --quiz-teal-bg-end:    #4b9a9e;
    --quiz-teal-strong:    #5dc0c4;
    --quiz-teal-soft:      #d6eff0;
    --quiz-card-bg:        #ffffff;
    --quiz-text:           #333333;
    --quiz-text-muted:     #707070;
    --quiz-border-radius:  10px;
    --quiz-pill-radius:    999px;
    --quiz-shadow:         0 14px 36px rgba(0, 0, 0, 0.16);
    --quiz-shadow-soft:    0 3px 16px #00000024;

    color: var(--quiz-text);
    font-family: "agenda", sans-serif;
}

.c-quiz *,
.c-quiz *::before,
.c-quiz *::after {
    box-sizing: border-box;
}

/* SR-only — used by the live region for state transitions. */
.c-quiz__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Override the site's global `p { max-width: 80ch }`. */
.c-quiz p {
    max-width: 100%;
}

/* Force font-family inheritance on elements where the site's global CSS
   sets an explicit family (headings get "Agenda Regular", buttons get
   their own font, form controls don't inherit by default). Without this,
   the font set on .c-quiz only reaches plain text nodes and a few classes
   that already have `font-family: inherit`. */
.c-quiz h1,
.c-quiz h2,
.c-quiz h3,
.c-quiz h4,
.c-quiz h5,
.c-quiz h6,
.c-quiz a,
.c-quiz button,
.c-quiz input,
.c-quiz textarea,
.c-quiz select {
    font-family: inherit;
}

/* Teal area wrapping start / question / results-card. Two background
   layers: editor-supplied image on top (with alpha), gradient underneath.
   background-color is a fallback for very old browsers. */
.c-quiz__main {
    position: relative;
    min-height: 860px;
    padding: 48px 16px;
    background-color: var(--quiz-teal-bg);
    background-image:
        var(--quiz-bg, none),
        linear-gradient(to bottom, var(--quiz-teal-bg), var(--quiz-teal-bg-end));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Drop the 860px floor on the results screen so the wrapper hugs the card. */
.c-quiz__main--results {
    min-height: 0;
}

/* ============================================================================
   2. Card (shared base for start / question / results)
   ============================================================================ */

.c-quiz__card {
    max-width: 950px;
    margin: 0 auto;
    padding: 40px;
    background: var(--quiz-card-bg);
    border-radius: var(--quiz-border-radius);
    box-shadow: var(--quiz-shadow);
}

.c-quiz__card--question {
    padding-top: 0; /* progress bar sits flush at top */
    overflow: hidden;
}

.c-quiz__heading {
    margin: 0 0 12px;
    color: var(--color-purple);
    font-size: 3.4rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.c-quiz__subtitle {
    margin: 0 0 40px;
    color: var(--quiz-text-muted);
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
}

.c-quiz__subtitle p {
    margin: 0 0 10px;
    font-size: inherit;
    font-weight: inherit;
}

.c-quiz__subtitle p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   3. Question screen — progress, answers
   ============================================================================ */

.c-quiz__progress {
    position: relative;
    height: 12px;
    background: #eff0f0;
    margin: 0 -40px 32px; /* bleed to card edges (paired to .c-quiz__card padding 40px) */
    overflow: hidden;
}

.c-quiz__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 240ms ease;
}

/* Lighter purple — extends to end of current question slot */
.c-quiz__progress-fill--current {
    background: var(--quiz-primary-soft);
}

/* Dark purple — extends to end of last completed question (sits on top) */
.c-quiz__progress-fill--completed {
    background: var(--color-purple);
}

/* Question heading — narrower / smaller than the start screen variant */
.c-quiz__card--question .c-quiz__heading {
    max-width: 80%;
    margin: 40px auto 50px;
    font-size: clamp(1.7rem, 3vw, 2.375rem);
}

.c-quiz__answers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.c-quiz__answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    background: #d6eff0;
    border: 2px solid var(--quiz-teal-strong);
    border-radius: var(--quiz-border-radius);
    color: #000;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}

.c-quiz__answer:hover:not(:disabled):not(.c-quiz__answer--selected) {
    background: #abdee0;
}

.c-quiz__answer:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
}

.c-quiz__answer:active:not(:disabled) {
    transform: scale(0.99);
}

.c-quiz__answer--selected {
    background: var(--quiz-teal-strong);
    border-color: var(--quiz-teal-strong);
    box-shadow: var(--quiz-shadow-soft);
}

.c-quiz__answer:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.c-quiz__answer-label {
    font-size: 1.5rem;
    font-weight: 600;
}

.c-quiz__answer-helper {
    color: #000;
}

/* ============================================================================
   4. Buttons / actions
   ============================================================================ */

.c-quiz__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.c-quiz__actions--centered {
    justify-content: center;
}

.c-quiz__btn {
    display: inline-block;
    padding: 6px 22px 7px;
    border-radius: var(--quiz-pill-radius);
    border: 2px solid var(--color-purple);
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
    min-width: 120px;
}

.c-quiz__btn:focus-visible {
    outline: 3px solid var(--quiz-primary-soft);
    outline-offset: 2px;
}

.c-quiz__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-quiz__btn--primary {
    background: var(--color-purple);
    color: #fff;
}

.c-quiz__btn--primary:hover:not(:disabled) {
    background: #574786;
}

.c-quiz__btn--secondary,
.c-quiz__btn--outline {
    background: transparent;
    color: var(--color-purple);
}

.c-quiz__btn--secondary:hover:not(:disabled),
.c-quiz__btn--outline:hover:not(:disabled) {
    background: #f5f4f9;
}

/* ============================================================================
   5. Error banner
   ============================================================================ */

.c-quiz__error {
    max-width: 950px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    background: #fff3f3;
    border: 1px solid #d6336c;
    border-radius: var(--quiz-border-radius);
    color: #b02a4e;
    text-align: center;
}

/* ============================================================================
   6. Results — shared (recommended + other use the same card markup)
   ============================================================================ */

.c-quiz__results-description {
    margin: 8px 0 24px;
    text-align: center;
    color: var(--quiz-text-muted);
    line-height: 1.5;
    font-weight: 600;
    font-size: 1.2rem;
}

.c-quiz__results-description p {
    margin: 0 0 10px;
    font-size: inherit;
    font-weight: inherit;
}

.c-quiz__results-description p:last-child {
    margin-bottom: 0;
}

.c-quiz__results-list {
    /* Match the site's `.o-w` container (max-width 86.25rem, 1.25rem horizontal). */
    max-width: 86.25rem;
    margin: 0 auto;
    padding: 48px 1.25rem;
    width: 100%;
}

.c-quiz__results-section-heading {
    margin: 0 0 16px;
    color: var(--color-purple);
    font-size: 2rem;
    font-weight: 600;
}

.c-quiz__results-empty {
    margin: 16px 0;
    text-align: center;
    color: var(--quiz-text-muted);
    font-style: italic;
}

.c-quiz__results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .c-quiz__results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .c-quiz__results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Result card — base shared by recommended and other variants. */
.c-quiz__result-card {
    background: #ffffff;
    border: 1px solid var(--quiz-teal-strong);
    border-radius: var(--quiz-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c-quiz__result-image {
    background: var(--quiz-teal-soft);
    height: 195px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-quiz__result-image img {
    max-width: 60%;
    max-height: 75%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.c-quiz__result-content {
    padding: 15px 17px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c-quiz__result-name {
    margin: 0 0 12px;
    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    min-height: calc(1.4em * 3); /* reserve 3 lines so card heights line up */
}

.c-quiz__result-link {
    display: block;
    width: 100%;
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}

/* ============================================================================
   7. Other-methods variant — extends Results
   ============================================================================ */

.c-quiz__other-section {
    background: #f5f5f5;
}

.c-quiz__other-section .c-quiz__result-card {
    border: 1px solid #d0d0d0;
    box-shadow: none;
}

.c-quiz__other-section .c-quiz__result-image {
    background: #f5f5f5;
}

/* Accordion toggle — the <button> inside the <h3> wrapper (WAI-ARIA APG). */
.c-quiz__other-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0 0 16px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid var(--color-purple);
    color: var(--color-purple);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* Zero the heading margin so the underline sits flush. */
.c-quiz__results-section-heading--toggle {
    margin: 0;
}

.c-quiz__other-toggle-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.c-quiz__other-toggle-icon svg {
    width: 50px;
    height: 50px;
}

.c-quiz__other-toggle-icon--open {
    transform: rotate(180deg);
}

.c-quiz__other-panel {
    margin-top: 24px;
}

/* ============================================================================
   8. Partners section
   ============================================================================ */

.c-quiz__results-section-heading--partners {
    text-align: center;
    margin-bottom: 32px;
}

.c-quiz__partners-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .c-quiz__partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .c-quiz__partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .c-quiz__partners-grid { grid-template-columns: 1fr; }
}

/* Diagonal-rounded card — top-left + bottom-right rounded only. */
.c-quiz__partner-card {
    background: #fff;
    border: 1px solid var(--color-purple);
    border-radius: 50px 0 50px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c-quiz__partner-content {
    padding: 30px 30px 15px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.c-quiz__partner-name {
    /* Bleed to card edges (paired to .c-quiz__partner-content padding 30px)
       so the background colour and underline run full-width. Card's
       overflow:hidden + border-radius clips the corners cleanly. */
    margin: -30px -30px 14px;
    padding: 15px 30px;
    background: #F0EDF6;
    border-bottom: 1px solid var(--color-purple);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

.c-quiz__partner-contact {
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 1rem;
    font-weight: 600;
}

.c-quiz__partner-contact a {
    color: inherit;
    text-decoration: none;
}

.c-quiz__partner-contact a:hover {
    text-decoration: underline;
}

.c-quiz__partner-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

/* All link states forced — site's global `a:link` etc rules can override
   otherwise (higher specificity than a plain class). */
.c-quiz__partner-link,
.c-quiz__partner-link:link,
.c-quiz__partner-link:hover,
.c-quiz__partner-link:focus,
.c-quiz__partner-link:visited {
    margin-top: 8px;
    align-self: flex-start;
    text-decoration: none;
    text-align: center;
    color: var(--color-purple);
}

/* When a partner has no phone, the visit-website button is the only thing
   below the name area. Vertically centre it in the remaining space —
   `margin: auto 0` on a flex column item absorbs leftover space equally
   above and below. Toggled via the conditional class set by Alpine. */
.c-quiz__partner-content--no-phone .c-quiz__partner-link,
.c-quiz__partner-content--no-phone .c-quiz__partner-link:link,
.c-quiz__partner-content--no-phone .c-quiz__partner-link:hover,
.c-quiz__partner-content--no-phone .c-quiz__partner-link:focus,
.c-quiz__partner-content--no-phone .c-quiz__partner-link:visited {
    margin-top: auto;
    margin-bottom: auto;
}

/* ============================================================================
   9. Modals — shared
   ============================================================================ */

.c-quiz__modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(51, 51, 51, 0.9);
    z-index: 1000;
}

.c-quiz__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--quiz-border-radius);
    padding: 25px 25px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

/* Close X — anchored to its parent modal (top-right of the modal panel). */
.c-quiz__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 2; /* sits above the bleeding image header */
    line-height: 0;
}

.c-quiz__modal-close img {
    display: block;
    width: 100%;
    height: 100%;
}

.c-quiz__modal-close:focus-visible {
    outline: 3px solid var(--quiz-primary-soft);
    outline-offset: 2px;
    border-radius: 50%;
}

.c-quiz__modal-image {
    margin: -25px -25px 0; /* bleed to modal edges (paired to padding) */
    height: 195px;
    flex-shrink: 0; /* don't shrink in flex-column modal */
    overflow: hidden;
    background: var(--quiz-teal-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fixed display box so every product image renders at the same size. */
.c-quiz__modal-image img {
    width: 200px;
    height: 156px;
    object-fit: contain;
}

.c-quiz__modal-content {
    padding-top: 24px;
}

.c-quiz__modal-eyebrow {
    margin: 0 0 6px;
    color: var(--color-purple);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
}

.c-quiz__modal-title {
    margin: 0 0 16px;
    color: var(--quiz-text);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.c-quiz__modal-body {
    text-align: left;
    color: #000;
    font-weight: 400;
    line-height: 1.6;
}

.c-quiz__modal-body p {
    margin-bottom: 10px;
}

.c-quiz__modal-body p:first-child { margin-top: 0; }
.c-quiz__modal-body p:last-child { margin-bottom: 0; }

/* Restore list bullets/numbers inside RTE-rendered content. The site's
   global reset (`ul { list-style: none; padding: 0 }`) strips them and
   only restores them inside .rte-classed wrappers — we don't use .rte
   on the quiz containers because it would also clobber the quiz typography. */
.c-quiz__results-description ul,
.c-quiz__modal-body ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 0 10px;
}

.c-quiz__results-description ol,
.c-quiz__modal-body ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0 0 10px;
}

.c-quiz__results-description li,
.c-quiz__modal-body li {
    margin: 0 0 4px;
}

.c-quiz__modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.c-quiz__modal-actions .c-quiz__btn {
    text-decoration: none;
}

/* Divider above actions, result modal only (scoped via .c-quiz__modal-content). */
.c-quiz__modal-content .c-quiz__modal-actions {
    position: relative;
    padding-top: 20px;
}

.c-quiz__modal-content .c-quiz__modal-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: -25px; /* paired to modal padding; mobile override below */
    right: -25px;
    height: 1px;
    background: #999;
    box-shadow: 0 -3px 16px #00000024;
}

/* Internal scroll for the result modal — image + actions pinned, only
   .c-quiz__modal-scroll scrolls. min-height: 0 required on every flex
   ancestor for the scroll to engage. */
.c-quiz__modal:not(.c-quiz__modal--confirm) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.c-quiz__modal:not(.c-quiz__modal--confirm) .c-quiz__modal-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.c-quiz__modal:not(.c-quiz__modal--confirm) .c-quiz__modal-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Restart confirmation variant — centred, no image area. Inherits width
   and other base properties from .c-quiz__modal. */
.c-quiz__modal--confirm {
    padding: 48px 40px;
    text-align: center;
}

.c-quiz__modal-title--confirm {
    margin: 0 0 12px;
    color: var(--color-purple);
    font-size: 3rem;
    line-height: 1.25;
    text-align: center;
}

.c-quiz__modal-message {
    margin: 0 0 28px;
    color: var(--quiz-text-muted);
    font-size: 1.2rem;
    font-weight: 600;
}

/* ============================================================================
   10. Responsive view (<= 1220px)
   ============================================================================ */

@media (max-width: 1220px) {

    .c-quiz__main {
        min-height: 0;
        padding:18px 16px;
    }
    .c-quiz__card--start, .c-quiz__card--results {
        padding: 25px;
    }

    .c-quiz__card--question {
        padding: 0 20px 28px 20px;
    }

    .c-quiz__progress {
        margin: 0 -20px 24px;
    }

    .c-quiz__subtitle {
        margin: 0 0 20px 0;
        font-size: 1rem;
    }

    .c-quiz__heading {
        font-size: 2.375rem;
    }

    .c-quiz__answers {
        margin: 0 0 25px 0;
    }
    .c-quiz__answer {
        font-size: 0.86rem;
        padding: 12px;
        gap: 0;
    }

    .c-quiz__results-grid {
        grid-template-columns: 1fr;
    }

    .c-quiz__card--question .c-quiz__heading {
        max-width: 100%;
        margin-bottom: 25px;
        margin-top: 25px;
    }
    .c-quiz__answer-label {
        font-size: 1.3rem;
    }
    .c-quiz__btn {
        font-size: 1.2rem;
        padding: 6px 15px 7px;
    }

    /* Push question buttons to far edges when both are visible. */
    .c-quiz__actions--split {
        justify-content: space-between;
    }

    .c-quiz__modal--confirm {
        padding: 25px;
    }
    .c-quiz__modal-title--confirm {
        font-size: 2.375rem;
    }

    /* Stack modal action buttons vertically on mobile. */
    .c-quiz__modal-actions {
        flex-direction: column;
    }

    .c-quiz__modal-message {
        font-size: 1.125rem;
    }

    .c-quiz__results-description {
        font-size: 1rem;
    }

    .c-quiz__results-section-heading {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }
    .c-quiz__results-section-heading--toggle {
        margin-bottom: 0;
    }

    .c-quiz__results-list {
        padding-top: 25px;
    }

    /* Mobile modal padding + matching bleed offsets. */
    .c-quiz__modal:not(.c-quiz__modal--confirm) {
        padding: 15px;
    }

    .c-quiz__modal-image {
        margin: -15px -15px 0;
    }

    .c-quiz__modal-content .c-quiz__modal-actions::before {
        left: -15px;
        right: -15px;
    }

    /* Move the gap-above-divider onto the body so it scrolls with content. */
    .c-quiz__modal-content .c-quiz__modal-actions {
        margin-top: 0;
    }

    .c-quiz__modal-body {
        margin-bottom: 28px;
    }

    .c-quiz__partner-contact {
        justify-content: center;
    }

    .c-quiz__partner-link,
    .c-quiz__partner-link:link,
    .c-quiz__partner-link:hover,
    .c-quiz__partner-link:focus,
    .c-quiz__partner-link:visited {
        align-self: center;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .c-quiz__modal-image {
        display: none;
    }
}