/* ─── Signal Sanctuary — EMF Quiz ──────────────────────────────────────────── */

/* Constrain content width on quiz and result pages */
.ssq-page .entry-content,
.ssq-page .page-content {
    max-width:  780px;
    width:      100%;
    margin:     0 auto;
    padding:    0 1.5rem;
    box-sizing: border-box;
}


:root {
    --ssq-accent:   #7C3AED;
    --ssq-accent-l: #EDE9FE;
    --ssq-bg:       #F9FAFB;
    --ssq-border:   #E5E7EB;
    --ssq-text:     #111827;
    --ssq-muted:    #6B7280;
    --ssq-radius:   10px;
    --ssq-font:     'Inter', sans-serif;
}

.ssq {
    font-family: var(--ssq-font);
    color:       var(--ssq-text);
    max-width:   680px;
    margin:      0 auto;
    padding:     2rem 1rem;
}

/* Progress bar */
.ssq__progress-wrap {
    height:           6px;
    background:       var(--ssq-border);
    border-radius:    3px;
    margin-bottom:    1.25rem;
    overflow:         hidden;
}
.ssq__progress-bar {
    height:           100%;
    background:       var(--ssq-accent);
    border-radius:    3px;
    transition:       width 0.35s ease;
    width:            0%;
}

.ssq__counter {
    font-size:    0.8rem;
    color:        var(--ssq-muted);
    margin:       0 0 1.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Questions */
.ssq__question {
    display: none;
}
.ssq__question--active {
    display: block;
    animation: ssq-fade-in 0.25s ease;
}

@keyframes ssq-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ssq__q-title {
    font-family: 'Plus Jakarta Sans', var(--ssq-font);
    font-size:   1.4rem;
    font-weight: 600;
    margin:      0 0 0.5rem;
    line-height: 1.3;
}
.ssq__q-body {
    color:       var(--ssq-muted);
    font-size:   1rem;
    margin:      0 0 1.75rem;
    line-height: 1.6;
}

/* Answer options */
.ssq__answers {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}
.ssq__answer {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.75rem 1rem;
    border:         1.5px solid var(--ssq-border);
    border-radius:  var(--ssq-radius);
    cursor:         pointer;
    transition:     border-color 0.15s, background 0.15s;
    background:     #fff;
}
.ssq__answer:hover {
    border-color: var(--ssq-accent);
    background:   var(--ssq-accent-l);
}
.ssq__answer--selected {
    border-color: var(--ssq-accent);
    background:   var(--ssq-accent-l);
}
.ssq__answer input[type="radio"] {
    accent-color: var(--ssq-accent);
    width:        1.1rem;
    height:       1.1rem;
    flex-shrink:  0;
}
.ssq__answer-label {
    font-size: 0.95rem;
}

/* Navigation */
.ssq__nav {
    display:         flex;
    gap:             0.75rem;
    margin-top:      2rem;
    justify-content: flex-end;
}
.ssq__btn {
    padding:       0.65rem 1.5rem;
    border:        none;
    border-radius: var(--ssq-radius);
    font-family:   var(--ssq-font);
    font-size:     0.95rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    opacity 0.15s, background 0.15s;
}
.ssq__btn--next {
    background: var(--ssq-accent);
    color:      #fff;
}
.ssq__btn--next:hover:not(:disabled) {
    background: #6D28D9;
}
.ssq__btn--next:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}
.ssq__btn--back {
    background: transparent;
    color:      var(--ssq-muted);
}
.ssq__btn--back:hover {
    color: var(--ssq-text);
}

.ssq__disclaimer {
    font-size:   0.78rem;
    color:       var(--ssq-muted);
    margin-top:  2rem;
    text-align:  center;
    line-height: 1.5;
}

.ssq__fallback {
    text-align: center;
    padding:    2rem 0;
}

/* ─── Opt-in block ──────────────────────────────────────────────────────────── */

.ssq-optin {
    font-family: var(--ssq-font);
    max-width:   520px;
    margin:      0 auto;
    padding:     2rem 1rem;
}
.ssq-optin__intro {
    color:       var(--ssq-muted);
    font-size:   1rem;
    line-height: 1.6;
    margin:      0 0 1.25rem;
}
.ssq-optin__form {
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
}
.ssq-optin__email {
    padding:      0.7rem 1rem;
    border:       1.5px solid var(--ssq-border);
    border-radius: var(--ssq-radius);
    font-family:  var(--ssq-font);
    font-size:    0.95rem;
    width:        100%;
    box-sizing:   border-box;
    transition:   border-color 0.15s;
}
.ssq-optin__email:focus {
    outline:      none;
    border-color: var(--ssq-accent);
}
.ssq-optin__consent {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    font-size:   0.85rem;
    color:       var(--ssq-muted);
    cursor:      pointer;
    line-height: 1.5;
}
.ssq-optin__consent input[type="checkbox"] {
    accent-color: var(--ssq-accent);
    margin-top:   0.15rem;
    flex-shrink:  0;
}
.ssq-optin__confirm {
    color:      var(--ssq-accent);
    font-size:  1rem;
    text-align: center;
    padding:    1rem 0;
}

/* ─── Result page CTAs ──────────────────────────────────────────────────────── */

.ssq-cta-group {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.75rem;
    margin:         1.75rem 0;
}
.ssq-cta-btn {
    display:        inline-block;
    padding:        0.7rem 1.4rem;
    border-radius:  var(--ssq-radius);
    font-family:    var(--ssq-font);
    font-size:      0.95rem;
    font-weight:    500;
    text-decoration: none;
    transition:     background 0.15s, opacity 0.15s;
}
.ssq-cta-btn--primary {
    background: var(--ssq-accent);
    color:      #fff;
}
.ssq-cta-btn--primary:hover {
    background: #6D28D9;
    color:      #fff;
}

.ssq-related {
    margin:     1.5rem 0;
    padding:    1rem 1.25rem;
    background: var(--ssq-bg);
    border-left: 3px solid var(--ssq-border);
    border-radius: 0 var(--ssq-radius) var(--ssq-radius) 0;
}
.ssq-related__label {
    font-size:   0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:       var(--ssq-muted);
    margin:      0 0 0.5rem;
}
.ssq-related ul {
    margin:  0;
    padding: 0 0 0 1rem;
}
.ssq-related li {
    margin-bottom: 0.35rem;
    font-size:     0.9rem;
}
.ssq-related a {
    color: var(--ssq-accent);
    text-decoration: none;
}
.ssq-related a:hover {
    text-decoration: underline;
}

.ssq-disclaimer-inline {
    font-size:   0.78rem;
    color:       var(--ssq-muted);
    margin-top:  2rem;
    line-height: 1.5;
    border-top:  1px solid var(--ssq-border);
    padding-top: 1rem;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .ssq__q-title { font-size: 1.15rem; }
    .ssq__btn     { padding: 0.6rem 1rem; }
}