/* The budget quiz (templates/quiz/). Brand of Noví lidovci: yellow #FFFA4B, black, white; Owners
   headlines always in capitals, Inter text; the thick black line and the starburst sticker.
   A campaign poster rather than a form. Made for phones first. */
:root {
    --yellow: #fffa4b;
    --display: "owners-xxnarrow", "Arial Narrow", Impact, sans-serif;
    --body: "inter-variable", Inter, Arial, sans-serif;
    color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--yellow);
    color: #000;
    font-family: var(--body);
    overflow-x: hidden;
}
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid #2162ca; outline-offset: 4px; }
img { max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .9; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; }
.bar-name { color: #000; text-decoration: none; font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bar img { width: 104px; }

.quiz { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px; }
.screen { display: grid; gap: 20px; align-content: start; }

.kicker {
    justify-self: start;
    background: #000;
    color: var(--yellow);
    font: 700 18px/1 var(--display);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 7px 10px 5px;
}
/* the brand's thick black line with the text beside it */
.thick-line { display: flex; align-items: center; gap: 14px; font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.thick-line::before { content: ""; flex: 0 0 72px; height: 22px; background: #000; }
.lead { font-size: 17px; line-height: 1.5; max-width: 34em; }

/* the brand's starburst sticker, a little askew */
.sticker {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--yellow);
    background: url("/quiz/sticker.svg") center / contain no-repeat;
    font: 700 26px/.95 var(--display);
    text-transform: uppercase;
    transform: rotate(-9deg);
}

.primary, .secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    padding: 12px 24px;
    border: 3px solid #000;
    font: 700 26px/1 var(--display);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
}
.primary { width: 100%; background: #000; color: var(--yellow); box-shadow: 6px 6px #f00; }
.primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px #f00; }
.secondary { background: #fff; color: #000; box-shadow: 4px 4px #000; font-size: 21px; min-height: 52px; }
.primary:active, .secondary:active { transform: translate(3px, 3px); box-shadow: 2px 2px #000; }
.text-button { justify-self: start; background: none; border: 0; padding: 6px 0; font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; text-decoration: underline 3px; text-underline-offset: 5px; }

/* the opening screen: the number, the promise, and a fan of the cards you can get */
.intro { gap: 28px; }
.intro-copy { display: grid; gap: 20px; }
.big { font-size: clamp(58px, 19vw, 132px); line-height: .85; letter-spacing: -.01em; white-space: nowrap; }
.fan { position: relative; height: 270px; margin: 6px auto 0; width: 100%; max-width: 340px; }
.fan img { position: absolute; top: 12px; left: 50%; width: 158px; border: 3px solid #000; box-shadow: 6px 6px #000; transform-origin: 50% 120%; }
.fan img:nth-child(1) { transform: translateX(-50%) rotate(-11deg) translateX(-30px); }
.fan img:nth-child(2) { transform: translateX(-50%) rotate(2deg); }
.fan img:nth-child(3) { transform: translateX(-50%) rotate(12deg) translateX(32px); }
.fan .sticker { position: absolute; width: 118px; height: 118px; right: 0; top: -14px; font-size: 22px; z-index: 2; }

/* a question */
.progress { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.progress span { height: 12px; border: 3px solid #000; background: #fff; }
.progress span.done { background: #000; }
.progress span.current { background: #f00; }
.question-number { font: 700 64px/.85 var(--display); }
.question-number small { font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
#question-text { font-size: clamp(30px, 7.8vw, 50px); line-height: .98; }
#question-text:focus, #result-title:focus { outline: none; }
blockquote { margin: 0; padding: 14px 16px; border-left: 12px solid #000; background: #fff; font-size: 16px; line-height: 1.45; font-style: italic; }

.answers { display: grid; gap: 14px; }
.answer {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 12px 14px;
    border: 3px solid #000;
    background: #fff;
    color: #000;
    box-shadow: 5px 5px #000;
    text-align: left;
    font: 600 17px/1.35 var(--body);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s, background .15s;
}
.answer:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 7px 7px #000; background: #fffdd6; }
.answer:disabled { cursor: default; }
.letter {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: #000;
    color: var(--yellow);
    font: 700 30px/1 var(--display);
}
/* the reveal: the right answer turns black, a wrong choice is struck out with the red shadow */
.answer.correct { background: #000; color: #fff; box-shadow: 5px 5px #f00; }
.answer.correct .letter { background: var(--yellow); color: #000; }
.answer.correct .letter::after { content: "✓"; font-size: .7em; margin-left: 2px; }
.answer.wrong { box-shadow: 5px 5px #f00; }
.answer.wrong .letter { background: #f00; color: #fff; }
.answer.wrong .answer-text { text-decoration: line-through 2px; }
.answer:disabled:not(.correct):not(.wrong) { opacity: .5; box-shadow: none; }

/* the explanation: the thick black line with the text inside */
.explanation { background: #000; color: #fff; padding: 18px 20px 20px; font-size: 16px; line-height: 1.55; }
.explanation strong { display: block; margin-bottom: 8px; color: #f55; font: 700 34px/1 var(--display); text-transform: uppercase; }
.explanation.is-right strong { color: var(--yellow); }

/* the result */
.result-card-wrap { justify-self: center; width: 100%; max-width: 440px; }
.result-card { display: block; width: 100%; border: 3px solid #000; box-shadow: 10px 10px #000; transform: rotate(-1.5deg); }
.result-copy { display: grid; gap: 18px; }
#result-title { font-size: clamp(56px, 15vw, 104px); }
.share { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.share .primary { grid-column: 1 / -1; }
.share-status { min-height: 1.4em; font-weight: 600; }

.foot { padding: 18px 20px 28px; text-align: center; }
.foot a { color: #000; font-weight: 700; }

@media (min-width: 860px) {
    .bar { padding: 22px 36px; }
    .bar img { width: 140px; }
    .quiz { padding: 12px 36px 56px; }
    .intro { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; padding-top: 3vh; }
    .fan { height: 460px; max-width: 460px; }
    .fan img { width: 280px; top: 0; }
    .fan img:nth-child(1) { transform: translateX(-50%) rotate(-12deg) translateX(-38px); }
    .fan img:nth-child(3) { transform: translateX(-50%) rotate(13deg) translateX(40px); }
    .fan .sticker { width: 170px; height: 170px; font-size: 30px; }
    .primary { width: auto; min-width: 340px; justify-self: start; }
    .question { max-width: 860px; margin: 0 auto; }
    .answers { grid-template-columns: 1fr 1fr; }
    .question .primary { justify-self: end; }
    .result { grid-template-columns: .9fr 1.1fr; align-items: start; gap: 48px; padding-top: 2vh; }
    .share .primary { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .primary, .secondary, .answer { transition: none; }
}