/*
 * MI Assessment Quiz. Ported from the draft build's quiz block (mi-c30-*),
 * re-prefixed miaq- and scoped to the shortcode container.
 *
 * Montserrat is the site's base font — named here as the first choice but
 * never loaded by the plugin.
 */
.miaq, .miaq * { box-sizing: border-box; }
.miaq {
    --miaq-ink: #171022;
    --miaq-paper: #ffffff;
    --miaq-surface: #F6F4F9;
    --miaq-line: #E6E1EE;
    --miaq-purple: #4A148C;
    --miaq-purple-tint: #F1EBF8;
    --miaq-gold: #FFD700;
    --miaq-body: #3A3442;
    --miaq-muted: #736B7E;
    --miaq-bad: #B3261E;
    --miaq-r-card: 16px;
    --miaq-r-btn: 12px;
    --miaq-shadow-1: 0 6px 18px rgba(23,16,34,0.08);
    --miaq-shadow-2: 0 18px 44px rgba(23,16,34,0.14);
    font-family: "Montserrat", sans-serif;
    color: var(--miaq-body);
    font-size: 16px;
    text-align: left;
}
/*
 * Frame. Bare (the default) renders flush: no band, no gutter, no card — the
 * page around the shortcode supplies the chrome. frame="card" restores the
 * draft build's band + card exactly. Only the outer layers change; spacing
 * inside the quiz is the same in both.
 */
.miaq .miaq-wrap { max-width: 1240px; margin: 0 auto; }
.miaq .miaq-quizband { scroll-margin-top: 64px; }
.miaq .miaq-quiz { max-width: 760px; margin: 0 auto; }

.miaq.miaq-frame-card .miaq-wrap { padding: 0 22px; }
.miaq.miaq-frame-card .miaq-quizband { background: var(--miaq-surface); padding: 112px 0; }
.miaq.miaq-frame-card .miaq-quiz {
    background: var(--miaq-paper); border: 1px solid var(--miaq-line); box-shadow: var(--miaq-shadow-1);
    border-radius: var(--miaq-r-card); padding: 34px;
}

/*
 * Bare sits on whatever the page is, so nothing may lean on a white card for
 * contrast. Checked on white and on light tints (#F6F4F9, #F1EBF8, #DCD0EC,
 * #FFF4CC, #DFF3E8, #D8D8D8):
 *   --miaq-muted  #5A5266 keeps small text (progress, hint, consent) >= 4.5:1
 *                 where #736B7E fell to 3.5:1;
 *   --miaq-line   #8E8699 gives inputs and options a 3.5:1 edge against their
 *                 own white fill, so a white field on a pale section still has
 *                 a visible boundary (the old #E6E1EE line was 1.1–1.3:1);
 *   the progress track is a translucent ink, so it darkens whatever it is on
 *   instead of matching one background;
 *   the focus ring is purple — the gold ring is ~1.2:1 on light sections.
 * A dark section needs these custom properties overridden by the theme.
 */
.miaq.miaq-frame-bare {
    --miaq-muted: #5A5266;
    --miaq-line: #8E8699; /* in bare, the line token only draws option and input edges */
}
.miaq.miaq-frame-bare .miaq-qbar { background: rgba(23,16,34,0.14); }
.miaq.miaq-frame-bare a:focus-visible,
.miaq.miaq-frame-bare button:focus-visible,
.miaq.miaq-frame-bare input:focus-visible { outline-color: var(--miaq-purple); }

.miaq .miaq-quizband-head { max-width: 660px; margin: 0 auto 36px; text-align: center; }
.miaq .miaq-eyebrow {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--miaq-purple);
}
.miaq .miaq-h2 {
    font-family: inherit; font-size: clamp(28px, 3.8vw, 42px); font-weight: 800;
    color: var(--miaq-ink); letter-spacing: -0.025em; line-height: 1.06;
    margin: 14px 0 16px; text-transform: none;
}
.miaq .miaq-sub { font-size: 17px; line-height: 1.65; color: var(--miaq-muted); max-width: 640px; margin: 0 auto; }

.miaq .miaq-qprogress { font-size: 12px; color: var(--miaq-muted); margin: 0 0 8px; font-weight: 700; }
.miaq .miaq-qbar { height: 6px; background: var(--miaq-line); border-radius: 6px; overflow: hidden; margin: 0 0 24px; }
.miaq .miaq-qbar span { display: block; height: 100%; background: var(--miaq-purple); width: 0; transition: width 0.25s; }
.miaq h3.miaq-qtitle {
    font-family: inherit; font-size: 22px; font-weight: 800; color: var(--miaq-ink);
    letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 16px; text-transform: none;
}
.miaq h3.miaq-qtitle:focus { outline: none; }

.miaq label.miaq-opt {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--miaq-paper); border: 1.5px solid var(--miaq-line); border-radius: 10px;
    padding: 14px 16px; margin: 0 0 10px; cursor: pointer;
    font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--miaq-body);
    transition: border-color 0.15s, background 0.15s;
}
.miaq label.miaq-opt:hover { border-color: var(--miaq-purple); }
.miaq label.miaq-opt.miaq-selected { border-color: var(--miaq-purple); background: var(--miaq-purple-tint); }
.miaq label.miaq-opt input {
    margin: 4px 0 0; accent-color: var(--miaq-purple); flex: none; width: 18px; height: 18px;
}

.miaq .miaq-qrow { display: flex; gap: 10px; margin-top: 24px; justify-content: space-between; flex-wrap: wrap; }
/* The theme styles bare <button>s hard (uppercase, min-height, margins) —
   everything it sets is pinned here. */
.miaq .miaq-qbtn {
    display: inline-block; font-family: inherit; font-weight: 700; border-radius: var(--miaq-r-btn);
    padding: 14px 26px; cursor: pointer; border: 2px solid transparent; font-size: 15px;
    line-height: 1.4; min-height: 0; margin: 0; letter-spacing: 0; text-transform: none;
    text-decoration: none; text-align: center; width: auto; text-shadow: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.miaq .miaq-qprimary { background: var(--miaq-purple); color: #fff; box-shadow: var(--miaq-shadow-1); }
.miaq .miaq-qprimary:hover { transform: translateY(-2px); box-shadow: var(--miaq-shadow-2); }
.miaq .miaq-qprimary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: var(--miaq-shadow-1); }
.miaq .miaq-qghost { background: transparent; color: var(--miaq-purple); border-color: var(--miaq-purple); box-shadow: none; }
.miaq .miaq-qghost:hover { background: var(--miaq-purple-tint); }

.miaq .miaq-qgold { background: var(--miaq-gold); color: var(--miaq-ink); box-shadow: var(--miaq-shadow-1); }
.miaq .miaq-qgold:hover { transform: translateY(-2px); box-shadow: var(--miaq-shadow-2); color: var(--miaq-ink); }
.miaq .miaq-qgold:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: var(--miaq-shadow-1); }

.miaq form[data-miaq="details"] { margin: 0; }
.miaq .miaq-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--miaq-purple); margin: 0 0 6px; display: block;
}
.miaq .miaq-kicker + h3.miaq-qtitle { margin-bottom: 6px; }
.miaq .miaq-qhint { font-size: 13px; color: var(--miaq-muted); margin: 0 0 16px; }
.miaq .miaq-field { margin: 0 0 16px; }
.miaq .miaq-field > label { display: block; font-size: 12px; font-weight: 700; color: var(--miaq-ink); margin: 0 0 6px; }
.miaq .miaq-field input[type="text"],
.miaq .miaq-field input[type="email"],
.miaq .miaq-field input[type="tel"] {
    width: 100%; height: auto; min-height: 0; margin: 0; font-family: inherit; font-size: 14px;
    color: var(--miaq-body); border: 1px solid var(--miaq-line); border-radius: 10px;
    padding: 12px 14px; background: var(--miaq-paper); box-shadow: none;
}
.miaq .miaq-field input[type="text"]:focus,
.miaq .miaq-field input[type="email"]:focus,
.miaq .miaq-field input[type="tel"]:focus { outline: 2px solid var(--miaq-purple); outline-offset: 1px; box-shadow: none; }
.miaq .miaq-field.miaq-bad input[type="text"],
.miaq .miaq-field.miaq-bad input[type="email"],
.miaq .miaq-field.miaq-bad input[type="tel"] { border-color: var(--miaq-bad); }
.miaq .miaq-err { display: none; font-size: 12px; color: var(--miaq-bad); margin-top: 5px; font-weight: 600; }
.miaq .miaq-field.miaq-bad .miaq-err { display: block; }
.miaq .miaq-field > label.miaq-consent {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--miaq-muted);
    margin: 20px 0 0; cursor: pointer;
}
.miaq .miaq-consent input { margin: 3px 0 0; accent-color: var(--miaq-purple); flex: none; width: 18px; height: 18px; }
/* Links read as part of the consent line: its size, weight and colour (--miaq-muted holds
   >= 4.5:1 in bare on the tints listed above), told apart by the underline alone. */
.miaq .miaq-consent a,
.miaq .miaq-consent a:visited,
.miaq .miaq-consent a:hover {
    color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
    text-decoration: underline; text-underline-offset: 2px;
}
/* Honeypot: off-screen rather than display:none. */
.miaq .miaq-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.miaq .miaq-qfoot { font-size: 12.5px; color: var(--miaq-muted); margin: 22px 0 0; line-height: 1.6; }
.miaq .miaq-hidden { display: none; }

.miaq a:focus-visible, .miaq button:focus-visible, .miaq input:focus-visible {
    outline: 3px solid var(--miaq-gold); outline-offset: 3px;
}

@media (max-width: 900px) {
    .miaq.miaq-frame-card .miaq-quizband { padding: 64px 0; }
    .miaq.miaq-frame-card .miaq-quiz { padding: 26px 20px; }
    /* 16px stops iOS zooming the page when a field takes focus. */
    .miaq .miaq-field input[type="text"],
    .miaq .miaq-field input[type="email"],
    .miaq .miaq-field input[type="tel"] { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .miaq, .miaq * { transition: none; animation: none; }
}