/*
 * The site's foundation: everything more than one kind of page needs.
 *
 * Split out of css/quiz.css once the home page and the catalogue arrived -
 * the tokens, the type, the header, the footer and the two controls that
 * appear everywhere were never specific to a test, and a second copy of them
 * would be a second place to change a colour.
 *
 * Loaded on every page of the site. css/quiz.css and css/catalog.css both
 * build on it and are loaded after it.
 *
 * Two rules the whole design obeys:
 * - five colours and no others, all through the tokens below;
 * - one column, 600px, on every device including desktop.
 *
 * Class names: .wowtests-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

:root {
    --paper: #F6EFD9;
    --paper-2: #EFE5C8;
    --ink: #141414;
    --red: #E4432B;
    --yellow: #F5C518;
    --blue: #5FB0D8;
    --white: #FFFFFF;

    --mute: #6E6557;
    --line: 3px;
    --shadow: 6px 6px 0 var(--ink);
    --shadow-s: 4px 4px 0 var(--ink);
    --radius: 10px;
    --tilt: -1.2deg;

    --font-d: "Unbounded", "Arial Black", Impact, sans-serif;
    --font-b: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;

    /*
     * How much of the top of the screen the site covers, read by the engine
     * when it scrolls to the next question.
     *
     * Deliberately larger than the distance from the top of the document to
     * the first question. The engine subtracts this from the question's
     * position and clamps the result at zero, so with a generous value its
     * scroll always resolves to the very top - which is exactly the wanted
     * behaviour: standing at the top, nothing moves at all when an answer is
     * given; scrolled down, the page comes back up so the header is in view
     * again. Without it the engine scrolled a hundred-odd pixels down to the
     * question and the theme scrolled back up, and the screen jumped on every
     * single answer.
     */
    --quiz-engine-scroll-offset: 200px;
}

/*
 * Self-hosted, never Google Fonts: a third-party font request is a
 * render-blocking round trip to somebody else's server on the one screen that
 * has to be fast. swap so text is readable while the file arrives, and the
 * fallback stacks above are close enough in width that the swap does not
 * jump.
 *
 * Split by subset, with the unicode-range Google itself publishes, so a
 * Russian page never downloads the Latin outlines and an English one never
 * downloads the Cyrillic. That matters here: Unbounded's Latin file alone is
 * 50 KB and its Latin-Ext 118 KB, and almost nothing on this site needs the
 * latter. The browser fetches only the files the page's own characters fall
 * into.
 *
 * Both families are variable, so one file per subset covers every weight the
 * design uses.
 */
/*
 * The faces themselves are not declared here. Which two files a page needs
 * depends on its language, so header.php prints the pair for that language
 * inline - see inc/fonts.php. Keeping them in this shared sheet is what made a
 * Russian page fetch the Latin file too: the digits, the arrows and the word
 * WOWtests live in it.
 */

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-b);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    /*
     * Russian compounds are long and Unbounded is wide. A word that cannot fit
     * its line does not break by default - it simply runs out of the box, and
     * on a 375px phone the title "Тест на привередливость в еде" was 20 pixels
     * wider than the column it sits in. Measured on the live page against
     * plausible titles: "дисциплинированный" overflows by 112 pixels,
     * "сверхчувствительность" by 132. It is a property of the language and
     * the display face, not a defect of one test, so the rule belongs here
     * rather than on the one heading that showed it.
     *
     * break-word and not hyphens: auto - there is no Russian hyphenation
     * dictionary in the browser, and switching hyphens on changed not a
     * single line box in any of the four live titles. break-word acts only
     * when a word genuinely cannot fit, so every heading that fits today is
     * laid out exactly as before. The property is inherited, so one
     * declaration covers headings, questions, results and answers alike.
     */
    overflow-wrap: break-word;
    background-color: var(--paper);
    background-image: radial-gradient(rgba(20, 20, 20, .13) 1.1px, transparent 1.3px);
    background-size: 9px 9px;
}

* {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.wowtests-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 14px 48px;
}

.wowtests-title {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 20px 0 12px;
    text-wrap: balance;
}

/* ---------- site header: logo left, menu right, and it scrolls away ---------- */

.wowtests-header {
    position: relative;
    background: var(--paper);
    border-bottom: var(--line) solid var(--ink);
}

.wowtests-header-in {
    max-width: 600px;
    margin: 0 auto;
    padding: 5px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*
     * The progress bar is the third item and is told to take a full line of
     * its own, so the logo and the menu button keep theirs. Nothing in this
     * header is ever hidden - a visitor mid-test still needs to get out of it.
     *
     * Column gap only. A plain `gap` applies to the wrap as well, and that put
     * twelve pixels of nothing between the logo and the progress bar on a
     * phone - the widest empty band on the screen, in the one place that has
     * no room for it.
     */
    column-gap: 12px;
    row-gap: 0;
    flex-wrap: wrap;
}

.wowtests-logo {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}

.wowtests-logo b {
    color: var(--red);
}

/* Screen readers get the word, everyone else gets the three lines. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * The menu, with no JavaScript at all: a hidden checkbox, a label that draws
 * the three lines, and a second label stretched over the page to close it. The
 * middle line is the span itself; the other two are its pseudo-elements,
 * offset up and down. Checked, the middle one disappears and the other two
 * rotate into a cross. Borrowed from wikigrowth.com, in production there.
 */
/*
 * The slot the engine's progress bar is moved into while a test runs. It has
 * to be hidden HERE, not in css/quiz.css: the slot is part of the header and
 * the header is on every page, so a rule that only ships with the test page
 * leaves an empty flex item sitting in the header everywhere else. It was
 * empty and zero-wide, and still pushed the menu button 92 pixels off the
 * right edge - space-between shares the row between however many items are in
 * it, not between the ones that have something in them.
 */
.wowtests-progress-slot {
    flex: 1 0 100%;
    display: none;
    align-items: center;
    gap: 10px;
}

.wowtests-menu-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/*
 * 36 rather than the 44 a tap target is usually given. The whole header is a
 * band the visitor scrolls past on the way to the question, and on a phone
 * every pixel of it comes out of the question's own screen. The button sits
 * alone in its corner with nothing to mis-tap, which is the case where a
 * smaller target costs nothing.
 */
.wowtests-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.wowtests-burger,
.wowtests-burger::before,
.wowtests-burger::after {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .2s ease, background-color .2s ease;
}

.wowtests-burger {
    position: relative;
}

.wowtests-burger::before,
.wowtests-burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.wowtests-burger::before { transform: translateY(-7px); }
.wowtests-burger::after { transform: translateY(7px); }

.wowtests-menu-toggle:checked + .wowtests-menu-button .wowtests-burger {
    background: transparent;
}

.wowtests-menu-toggle:checked + .wowtests-menu-button .wowtests-burger::before {
    transform: rotate(45deg);
}

.wowtests-menu-toggle:checked + .wowtests-menu-button .wowtests-burger::after {
    transform: rotate(-45deg);
}

.wowtests-menu-toggle:focus-visible + .wowtests-menu-button {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/*
 * The panel. Same paper and the same dot raster as the header above it and the
 * page behind it - a white sheet made it read as a dialog dropped on the site
 * rather than a drawer pulled out of the header. The header's own bottom line
 * serves as its top border, so the panel draws only three sides.
 *
 * It scrolls inside itself rather than growing past the screen: fifteen topics
 * and five links do not fit under the header on a phone, and a menu that makes
 * the page behind it scroll loses the visitor's place in a test.
 */
.wowtests-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--paper);
    background-image: radial-gradient(rgba(20, 20, 20, .13) 1.1px, transparent 1.3px);
    background-size: 9px 9px;
    border: var(--line) solid var(--ink);
    border-top: 0;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.wowtests-menu-toggle:checked ~ .wowtests-menu {
    display: block;
}

.wowtests-menu-in {
    padding: 16px 14px 0;
}

/* All tests, as a poster: the one line in the panel that is a destination
   rather than a filter, with the size and the marker to match. */
.wowtests-menu-all {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 12px;
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-decoration: none;
}

.wowtests-menu-all i {
    font-style: normal;
    display: inline-block;
    max-width: 100%;
    background: linear-gradient(transparent 55%, var(--yellow) 55%);
    padding: 0 6px;
    transform: rotate(var(--tilt));
}

.wowtests-menu-all em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: var(--red);
    white-space: nowrap;
}

/*
 * Two columns where there is room for them. Fifteen topics in one column is a
 * screen and a half of scrolling on a phone; at 521px and up the same list is
 * one glance.
 */
.wowtests-menu-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--line) solid var(--ink);
}

.wowtests-menu-tags a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 2px dotted rgba(20, 20, 20, .3);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.wowtests-menu-tags span {
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}

/* A topic with nothing in it yet says so quietly. */
.wowtests-menu-tags span.is-zero {
    color: var(--mute);
    opacity: .7;
}

@media (max-width: 520px) {
    .wowtests-menu-tags {
        grid-template-columns: 1fr;
    }

    .wowtests-menu-tags a {
        padding: 8px 4px;
    }
}

/*
 * The service pages, on a black strip that runs the full width of the panel -
 * the footer of the menu, and the one piece of contrast the panel needs to
 * stop reading as one grey block. The negative margin is what takes it past
 * the panel's own padding to the border.
 */
.wowtests-menu-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    list-style: none;
    margin: 14px -14px 0;
    padding: 12px 14px 13px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wowtests-menu-pages li {
    display: flex;
    align-items: center;
}

.wowtests-menu-pages li + li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    border-radius: 50%;
    background: var(--red);
}

.wowtests-menu-pages a {
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
}

.wowtests-menu-overlay {
    display: none;
}

.wowtests-menu-toggle:checked ~ .wowtests-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: transparent;
    cursor: default;
}

.wowtests-ib:active,
.wowtests-btn:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.wowtests-ib:focus-visible,
.wowtests-btn:focus-visible,
.wowtests-faq summary:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

/* Busy while the picture renders. Not a spinner: a button that dims and
   stops responding says the same thing with no moving parts. */
.wowtests-ib.is-busy,
.wowtests-btn.is-busy {
    opacity: .55;
    pointer-events: none;
}

.wowtests-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: var(--line) solid var(--ink);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow);
    transition: transform .08s, box-shadow .08s;
}

.wowtests-btn-primary {
    background: var(--red);
    color: var(--white);
}

.wowtests-btn-ico {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wowtests-chip {
    display: inline-block;
    /* Same shrink-to-fit trap as the result marker, see there. */
    max-width: 100%;
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 4px 10px;
    transform: rotate(var(--tilt));
    text-decoration: none;
}

/* ---------- a plain page ---------- */

/*
 * For an ordinary page of text - about, contacts, whatever Lex adds behind the
 * footer links. No design has been asked for; this is the site's own type at a
 * readable measure, so such a page looks like it belongs here rather than like
 * raw HTML.
 */
/*
 * The gap above the headline. A page of text starts with its H1 directly under
 * the header - no poster, no eyebrow, nothing between them - so it needs more
 * air than a screen that opens with a picture. 26px looked cramped against a
 * 28px headline; this is the same distance the site puts between two sections.
 */
.entry {
    padding: 34px 0 0;
}

.entry-title {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    text-wrap: balance;
}

.entry-content h2 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    margin: 24px 0 8px;
}

.entry-content h3 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 16px;
    margin: 20px 0 6px;
}

.entry-content p,
.entry-content li {
    font-size: 16px;
    line-height: 1.6;
}

/*
 * The highlighted block on a text page - today the call for a reviewer on the
 * about page. A class on a plain div, because this site runs Classic Editor
 * and there are no block wrappers to hang one on: Lex writes it in the Text
 * tab and moves it wherever he wants. Same shape as the CTA on a result, so
 * the site has one way of saying "read this bit".
 */
.wowtests-callout {
    margin: 22px 0;
    padding: 16px;
    background: var(--yellow);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.wowtests-callout h2 {
    font-family: var(--font-d);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.wowtests-callout p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.wowtests-callout p:last-child {
    margin-bottom: 0;
    font-weight: 800;
}

.entry-empty {
    padding: 40px 0;
    font-weight: 600;
    color: var(--mute);
}

/* ---------- footer ---------- */

.wowtests-footer {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 2px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mute);
    font-weight: 700;
}

/*
 * The service links, from a menu Lex assigns in wp-admin. A row on its own
 * when the footer has to wrap, which on a phone it does as soon as there is
 * more than a language row and a copyright.
 */
.wowtests-foot-links {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wowtests-foot-links a {
    text-decoration: none;
}

.wowtests-langs {
    display: flex;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.wowtests-langs b {
    color: var(--ink);
}

.wowtests-langs a {
    text-decoration: none;
}

/* ---------- interaction states ----------
 *
 * Two things every control on this site owes the visitor: a cursor that says
 * it can be clicked, and a reaction when it is pointed at.
 *
 * Hover lives inside @media (hover: hover) on purpose. A phone has no hover -
 * it synthesises one on tap and then leaves it stuck on the last thing
 * touched, so a button the visitor already left goes on looking pressed. This
 * way a touch screen gets the :active press and nothing else.
 *
 * The move is the opposite of the press: pointed at, a control lifts a pixel
 * away from its shadow; pressed, it drops into it (:active, defined with the
 * buttons above). :not(:active) keeps the two from arguing when a pointer is
 * both hovering and holding.
 */

button,
summary,
label[for],
[role="button"] {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .wowtests-btn:hover:not(:active),
    .wowtests-ib:hover:not(:active) {
        transform: translate(-1px, -1px);
        box-shadow: 7px 7px 0 var(--ink);
    }

    .wowtests-ib:hover:not(:active) {
        box-shadow: 5px 5px 0 var(--ink);
    }

    .wowtests-share-row .wowtests-ib:hover:not(:active) {
        box-shadow: 7px 7px 0 var(--ink);
    }

    /* Cards that are links: the whole card lifts, not just its text. */
    .wowtests-promo a:hover,
    .wowtests-person:hover {
        transform: translate(-1px, -1px);
        box-shadow: 7px 7px 0 var(--ink);
    }

    .wowtests-promo a,
    .wowtests-person {
        transition: transform .08s, box-shadow .08s;
    }

    /* Text links underline rather than move - a jumping word is noise. */
    .wowtests-langs a:hover,
    .wowtests-tear a:hover,
    .wowtests-chip:hover,
    .quiz-engine-references a:hover {
        text-decoration: underline;
    }

    .wowtests-logo:hover b {
        color: var(--ink);
    }

    /*
     * A topic lights up rather than gets underlined: the row already has a
     * dotted rule under it, and a second line under the words on top of that
     * reads as a mistake. The marker is the same yellow the site uses to point
     * at a word anywhere else.
     */
    .wowtests-menu-tags a:hover {
        background: linear-gradient(transparent 20%, var(--yellow) 20%, var(--yellow) 85%, transparent 85%);
    }

    .wowtests-menu-all:hover i {
        background: linear-gradient(transparent 55%, var(--yellow) 55%);
        box-shadow: 0 0 0 3px var(--yellow);
    }

    /* On the black strip yellow is the only colour that reads. */
    .wowtests-menu-pages a:hover {
        color: var(--yellow);
    }

    .wowtests-q-back:not(:disabled):hover {
        color: var(--ink);
        text-decoration: underline;
    }

    .wowtests-about summary:hover,
    .wowtests-faq summary:hover {
        background: var(--paper);
    }

    .wowtests-menu-button:hover .wowtests-burger,
    .wowtests-menu-button:hover .wowtests-burger::before,
    .wowtests-menu-button:hover .wowtests-burger::after {
        background: var(--red);
    }

    .wowtests-menu-toggle:checked + .wowtests-menu-button:hover .wowtests-burger {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wowtests-btn:hover:not(:active),
    .wowtests-ib:hover:not(:active),
    .wowtests-promo a:hover,
    .wowtests-person:hover {
        transform: none;
    }
}