/*
 * Test (quiz_test) pages only - loaded by functions.php for
 * is_singular('quiz_test'), the same way single.css is loaded for posts.
 *
 * Goal: a test page should read like a single article - same Montserrat
 * scale, same blue (#3570c9), same #F7F8FA panels and #dde4ea hairlines,
 * same 870/330 two-column shell - while the quiz itself keeps working
 * exactly as the plugin built it.
 *
 * Two rules this file lives by:
 *
 * 1. Never set `display` on anything the plugin toggles with [hidden] -
 *    .quiz-engine-result, -cta, -timer, -errors stay hidden until JS
 *    reveals them, and a display declaration here would fight that.
 *    Style their look, never their visibility.
 * 2. Never touch the .is-active / .is-completed state styling (opacity
 *    and grayscale on questions). That is the plugin's interaction
 *    model; this file only paints on top of it.
 *
 * Article furniture deliberately NOT carried over from single.css (the
 * test page has no such markup): .post_header/.author_block_top* author
 * card, .contents table of contents, .dop_info*, .startbut, .tabletemp*,
 * .youtube. The submit button borrows .startbut's look without its class.
 */

/* ---------- shared: typography and blocks, both breakpoints ---------- */

/* One heading style for the whole test page, both breakpoints (2026-08-27).
   The site's own h2 is centred and black on desktop and black on mobile;
   here every section heading reads the way the CTA's does - left, #35426F -
   so the result titles, the FAQ, the methodology, the sources and the CTA
   stop looking like five different kinds of heading stacked down one column.
   Scoped to this file, so it reaches test pages only: quiz.css is enqueued
   for is_singular('quiz_test') and nothing else.

   The two share headings keep their own look (small, muted, centred over the
   button row). They are h2 in the markup but they label a control rather
   than open a section, and their own class rules outrank this one. */
.content h2 {text-align:left;color:#35426F;}

/* Lead paragraph of the intro, like the opening of an article. */
.content .quiz-engine-intro > p:first-child {font-size:110%;line-height:1.6;color:#262626;}

/* Page header: title and intro on one side, the test's own image on the
   other. The image is capped at 300px because that is the width the
   quiz_card size is registered at - see functions.php. */
.content .quiz_head_thumb picture {display:block;}
.content .quiz_head_thumb img {display:block;width:100%;height:auto;}

/* Attribution moved out of the intro and down to the footer row, next to
   the rating. Muted, same register as the article author card's caption. */
.content .quiz-engine-attribution {color:#5A6485;font-size:87%;line-height:1.5;margin:0;}
.content .quiz-engine-attribution-line {display:block;}
.content .quiz-engine-attribution a {color:#5A6485;}

/* Disclaimer: quiet, but marked as a standing note rather than body copy -
   the left rule echoes the article's table of contents. Printed outside
   .quiz_head, so it runs the full column width under both the text and the
   image and closes the header block off. */
.content .quiz-engine-disclaimer {font-style:normal;color:#5A6485;font-size:87%;line-height:1.5;border-left:2px solid #CADAE7;background:linear-gradient(90deg, #F7F8FA 0%, rgba(247,248,250,0) 100%);}

/* Questions as cards. Opacity/grayscale of inactive ones stays the
   plugin's business - only the surface is ours. */
.content .quiz-engine-question {display:flow-root;background:#fff;border:1px solid #dde4ea;border-radius:8px;padding:20px;margin:0 0 16px 0;}
/* float:left is not decoration - a <legend> is laid out over its
   fieldset's border by default, ignoring the parent's padding, so the
   question text would hang outside the card. Floating it drops it back
   into normal flow; flow-root on the fieldset then contains that float. */
.content .quiz-engine-question legend {float:left;width:100%;font-weight:600;color:#1d1d1d;line-height:1.45;padding:0;margin:0 0 12px 0;}
/* The other half of that float. A float only shortens line boxes, not
   block boxes, so the first answer's box still started at the top of the
   fieldset and ran underneath the question text - invisible until the
   answer was hovered, at which point its background lit up the question
   along with itself. clear drops the box below the float instead. */
.content .quiz-engine-question .quiz-engine-answer:first-of-type {clear:both;}
.content .quiz-engine-answer {display:block;margin:0;padding:10px 12px;border-radius:6px;line-height:1.45;transition:background-color .15s ease;}
.content .quiz-engine-answer:hover {background:#F7F8FA;}
.content .quiz-engine-answer input {margin:0 10px 0 0;}

/* Progress bar in the site blue. The plugin already makes this sticky
   (position:sticky, top:0) and that works - but stuck to the top it was a
   48px band of plain white holding a 6px hairline, which reads as empty
   space rather than as a progress bar. Hence the bottom rule and the
   thicker track: it has to look like a panel once it detaches. */
.content .quiz-engine-progress {margin:0 0 20px 0;padding:14px 0;border-bottom:1px solid #dde4ea;z-index:20;}
/* Logged in, WordPress pins its 32px admin bar over the top of the
   viewport, and a sticky top:0 parks underneath it - invisible to anyone
   editing the site, fine for visitors. Offset by the bar's height so it
   looks the same either way. */
body.admin-bar .content .quiz-engine-progress {top:32px;}
.content .quiz-engine-progress-bar {background:#eef1f5;border-radius:5px;overflow:hidden;height:10px;}
.content .quiz-engine-progress-fill {background:#3570c9;height:100%;}
.content .quiz-engine-timer {color:#5A6485;font-size:87%;}

/* Submit: the site's primary button (.startbut's look, not its class).
   border-box is explicit because the theme never sets it globally - with
   the default content-box a width:100% button plus padding overflows its
   column, which is exactly what the mobile rule below asks for. */
.content .quiz-engine-submit {box-sizing:border-box;background-color:#3570c9;color:#fff;border:none;border-radius:6px;line-height:1.5;cursor:pointer;text-align:center;font-weight:500;}
.content .quiz-engine-submit:hover {background-color:#0d4fb2;}
/* The plugin hides this button once a result is shown (submitButton.hidden
   = true). The display:block each breakpoint below gives it outranks the
   browser's own [hidden] rule, so the button stayed on screen after
   submitting - rule 1 at the top of this file, broken by me. This restores
   it, without giving up the block layout the button needs. */
.content .quiz-engine-submit[hidden] {display:none;}

/* A revealed result: image, verdict heading, then body copy. The image is
   capped rather than filling the column - at 870px a 900x600 source is
   580px tall, so the verdict itself would start below the fold on the one
   screen the visitor came for. */
.content .quiz-engine-result-image {display:block;width:100%;max-width:520px;height:auto;margin:0 0 20px 0;}
.content .quiz-engine-result h2 {margin-top:0;}
.content .quiz-engine-result-verdict {line-height:1.6;}

/* Axis scales (multi-axis tests). The plugin only says how full each one
   is - via --quiz-engine-scale-value, a bare 0-100 number - and leaves the
   look to the site. Empty for every single-axis test, hence :empty. */
.content .quiz-engine-scales {margin:0 0 24px 0;}
.content .quiz-engine-scales:empty {display:none;}
.content .quiz-engine-scale {gap:14px;margin:0 0 10px 0;}
.content .quiz-engine-scale-label {color:#5A6485;font-size:90%;}
.content .quiz-engine-scale-track {height:10px;background:#eef1f5;border-radius:5px;}
.content .quiz-engine-scale-fill {background:#3570c9;}
.content .quiz-engine-scale-value {color:#5A6485;font-size:87%;}

/* Where the comparison block lands. Since plugin 0.35.0 frontend.js draws it
   into this slot instead of into the result card, so it sits below the CTA -
   outside the result's grid entirely, which is why nothing here positions it.
   :not(:empty) keeps the gap from appearing before a result exists. */
.content .quiz-engine-comparison-slot:not(:empty) {margin:40px 0 0 0;}

/* "How you compare" - the plugin builds the list and marks the visitor's own
   row with .quiz-engine-comparison-mine; this only repaints it. Its structure
   is already right: the <li> is the track, the inner bar is the fill sized to
   the percentage, and the label sits over both.

   The list-style and background resets are not redundant. The theme decorates
   every .content ul li with an SVG bullet and left padding (style.css, both
   breakpoints), which lands on these rows as a bullet floating over the bar. */
.content .quiz-engine-comparison {list-style:none;margin:24px 0 0 0;padding:0;width:100%;}
/* No background reset here on purpose: this selector outranks the one below
   (an element more), so a `background:none` here would beat the track colour
   the item rule paints. The item rule's shorthand clears the theme's bullet
   image by itself. */
.content .quiz-engine-comparison li {list-style:none;padding:0;margin:0 0 8px 0;}
.content .quiz-engine-comparison-item {position:relative;display:block;background:#eef1f5;border-radius:5px;overflow:hidden;}
.content .quiz-engine-comparison-bar {display:block;height:32px;background:#dfe7f2;}
/* The visitor's own result, in the site blue rather than the plugin's - kept
   light on purpose, the label sits on top of it and has to stay readable. */
.content .quiz-engine-comparison-mine .quiz-engine-comparison-bar {background:#c3d8f2;}
.content .quiz-engine-comparison-mine .quiz-engine-comparison-label {font-weight:600;color:#1d1d1d;}
.content .quiz-engine-comparison-label {position:absolute;left:12px;top:0;line-height:32px;font-size:90%;color:#35426F;}

/* Share, two blocks with the same building bricks since plugin 0.20.0:
   .quiz-engine-share is the result row (built by JS after submitting) and
   .quiz-engine-test-share is the "share this test" block at the foot of
   the page. Both wrap their buttons in .quiz-engine-share-row - which is
   the element to centre, not the wrapper. */
.content .quiz-engine-share-row {justify-content:center;}
.content .quiz-engine-share-heading, .content .quiz-engine-test-share-heading {text-align:center;color:#5A6485;font-weight:500;font-size:100%;margin:0 0 12px 0;}
.content .quiz-engine-share-link {border:1px solid #dde4ea;border-radius:6px;color:#5A6485;text-decoration:none;padding:8px 14px;background:#fff;}
.content .quiz-engine-share-link:hover {background:#F7F8FA;border-color:#CADAE7;color:#1d1d1d;}

/* The test-share block closes the page, so it gets the same hairline
   separator the FAQ/methodology/references sections use. */
.content .quiz-engine-test-share {border-top:1px solid #dde4ea;}

/* CoreTypes banner at the top of the sidebar, above the related tests.
   Full sidebar width; the file is 900x1200, so it lands at 330x440 on
   desktop. */
.endpost .sidebar_banner {display:block;margin:0 0 30px 0;}
/* aspect-ratio, not height:auto alone: the image goes through lozad, whose
   1x1 placeholder sits in srcset until the swap, and a browser sizes from
   the placeholder - the box would render square and then jump to 3:4. */
.endpost .sidebar_banner img {display:block;width:100%;height:auto;aspect-ratio:3 / 4;}

/* Both breakpoints give .quiz-engine-result a display of its own, which
   outranks the browser's [hidden] rule and would show every result at
   once. Rule 1 at the top of this file - guard once, here. */
.content .quiz-engine-result[hidden] {display:none;}

/* CTA to CoreTypes. Deliberately undecorated since 2026-08-27 - no frame,
   no fill, no button: a heading, a paragraph and a link, reading as one
   more section of the article rather than as an ad pasted into it. The
   link keeps the .quiz-engine-cta-button class (frontend.js looks for it)
   but is styled as a body-copy link on a line of its own.
   The frame, fill and button chrome are undone explicitly rather than just
   omitted - the plugin's own frontend.css paints them (border 1px #ddd,
   background #fafafa, a filled #2271b1 button), and dropping our rules only
   uncovered its. */
.content .quiz-engine-cta {border:none;border-radius:0;background:none;padding:0;}
.content .quiz-engine-cta h2 {margin-top:0;text-align:left;color:#35426F;}
.content .quiz-engine-cta p {line-height:1.6;}
.content .quiz-engine-cta-button {display:block;background:none;border-radius:0;padding:0;color:#1D5CD4;font-weight:500;line-height:1.5;text-decoration:none;}
.content .quiz-engine-cta-button:hover {text-decoration:underline;}

/* Closing sections - FAQ, methodology, references. Separated by the same
   hairline the breadcrumbs use, so they read as parts of one article. */
.content .quiz-engine-faq, .content .quiz-engine-methodology, .content .quiz-engine-references {border-top:1px solid #dde4ea;}
.content .quiz-engine-faq h3 {color:#35426F;}
.content .quiz-engine-faq p, .content .quiz-engine-methodology p {line-height:1.6;}

/* References read as footnotes: smaller, muted, tight. The site's own
   counter styling for .content ol is undone here on purpose - a numbered
   source list wants plain decimals, not the big blue article counters. */
.content .quiz-engine-references ol {counter-reset:none;list-style:decimal;color:#5A6485;font-size:87%;}
.content .quiz-engine-references ol li {padding:6px 0 6px 4px;line-height:1.5;}
.content .quiz-engine-references ol li::before {content:none;}
.content .quiz-engine-references a {color:#5A6485;}

/* ---------- mobile / tablet ---------- */
@media (max-width: 1279px) {
.breadcrumbs {display:block;width:100%;padding:12px 0;border-bottom: 1px solid #dde4ea;}
/* On the box, not only on the links: the last crumb is the current page and
   is printed as plain text, so a size set on <a> alone left it inheriting
   the body size and towering over the trail. */
.breadcrumbs_box {font-size: 12px;line-height: 140%;}
.breadcrumbs a {text-decoration: none;margin:0 10px;color: #2e2e2e;font-size: 12px;line-height: 140%;}

.content ol {display:block;width:100%;list-style: none; counter-reset: li;margin:0 0 30px 0;}
.content ol li {padding:5px 0 5px 40px;}
.content ol li::before {content: counter(li); counter-increment: li;color:#1D5CD4;display: inline-block; width: 1em; margin-left: -2em;margin-right: 0.5em; text-align: right; direction: rtl;font-weight:700;font-size:112%;border-right:3px solid #1D5CD4;line-height:16px;padding:5px 0.3em 0 0;}
.content ul { list-style-type: none;display:block;width:100%;margin:0 0 30px 0;}
.content ul li {list-style-type: none;background-position:0 10px;background-repeat: no-repeat;background-image: url("/wp-content/themes/my/img/ul.svg");padding:5px 0 5px 30px;}

/* The site header scrolls away here since 2026-08-27, so the bar has the
   top of the screen to itself - only the admin bar, which WordPress does
   pin down to 783px, still needs allowing for. */
.content .quiz-engine-progress {top:0;}
body.admin-bar .content .quiz-engine-progress {top:32px;}

/* No card chrome at all here: at 375px a border plus its padding costs
   real reading width, and with one question in view at a time the frame
   isn't separating anything from anything. */
.content .quiz-engine-question {background:none;border:none;border-radius:0;padding:0;margin:0 0 28px 0;}
.content .quiz-engine-question legend {margin:0 0 10px 0;}
.content .quiz-engine-answer {padding:8px 0;border-radius:0;}
.content .quiz-engine-answer:hover {background:none;}
.content .quiz-engine-submit {display:block;width:100%;margin:20px 0 0 0;padding:14px 20px;font-size:100%;}
.content .quiz-engine-cta {margin:30px 0 0 0;}
.content .quiz-engine-cta-button {margin:16px 0 0 0;}
.content .quiz-engine-faq, .content .quiz-engine-methodology, .content .quiz-engine-references, .content .quiz-engine-test-share {margin-top:30px;padding-top:20px;}
/* Reading order here is title first, then the image, then the verdict -
   the name of the result is what the visitor came for, so it should not
   wait behind a full-width picture. Share row stays above everything. */
.content .quiz-engine-result {display:flex;flex-direction:column;}
.content .quiz-engine-result .quiz-engine-share {order:-3;margin:0 0 20px 0;}
.content .quiz-engine-result h2 {order:-2;}
.content .quiz-engine-result-image {order:-1;max-width:none;width:100vw;margin:0 0 16px calc(50% - 50vw);}
.content .quiz-engine-references ol {padding:0 0 0 20px;margin:0 0 20px 0;}
.content .quiz-engine-references ol li {padding:6px 0 6px 4px;}

/* Header stacks; the image goes above the title (order:-1) rather than
   below the intro, so the column reads image - title - intro instead of
   burying the picture under the text. */
/* Nothing is pinned at the top here any more except the admin bar, so the
   plugin's auto-scroll only has to clear that - see the desktop block for
   what this is. */
:root {--quiz-engine-scroll-offset:0px;}
:root:has(body.admin-bar) {--quiz-engine-scroll-offset:32px;}

/* Nothing between the header and the image: the header is in the flow now,
   so there is no gap to reserve and the breadcrumbs sit tight. */
.container {margin-top:0;}
.breadcrumbs {padding:8px 0;}

.content .quiz_head {display:flex;flex-direction:column;margin:0 0 20px 0;}
/* Edge to edge, escaping the 2% side margins .content carries: the column
   is 96% wide, so 50% of it minus 50vw is exactly the margin to cancel. */
.content .quiz_head_thumb {order:-1;max-width:none;width:100vw;margin:0 0 20px calc(50% - 50vw);}
.content .quiz_head_text h1 {margin-top:0;}
.content .quiz-engine-disclaimer {font-size:80%;line-height:1.45;padding:8px 10px 8px 12px;margin:0 0 20px 0;}

.endpost {display:block;width: 100%;padding:20px 0;background: linear-gradient(0deg, rgba(249, 250, 252, 0) -8.41%, #F7F8FA 98.27%);}
/* The banner is 3:4 now. Stretched to the full width of a phone it
   would be taller than the screen on its own, so it keeps the size it
   has on desktop and centres instead of filling the column. */
.endpost .sidebar_banner img {max-width:330px;margin:0 auto;}
.content .post_footer {display:block;width:100%;margin:30px 0 60px 0;padding:20px 0 0 0;border-top:1px solid #dde4ea;}
.content .post_footer_attribution {margin:0 0 16px 0;}
.content .post_footer_rating {display:block;margin:0;padding:0;width:auto;text-align:left;}
}

/* Below 783px WordPress stops pinning the admin bar - it scrolls away with
   the page, and with the site header in the flow nothing is left to clear. */
@media (max-width: 782px) {
body.admin-bar .content .quiz-engine-progress {top:0;}
}

/* Below 768px the plugin pins the result's share row to the top of the
   screen (position:fixed, top:0) in place of the progress bar. The site
   header is fixed and 50px tall here, so the row needs the same offset the
   progress bar gets - and no bottom margin, being out of flow. */
@media (max-width: 767px) {
/* WordPress stops pinning the admin bar below 783px, and the site header
   is in the flow - nothing left to clear. */
:root:has(body.admin-bar) {--quiz-engine-scroll-offset:0px;}
.content .quiz-engine-result .quiz-engine-share {top:0;margin:0;}
/* The plugin hides the row's heading at this width to keep the pinned bar
   compact. Kept, but small: without it the icons sit there with no idea
   what they are for. */
.content .quiz-engine-share .quiz-engine-share-heading {display:block;font-size:80%;margin:0 0 6px 0;}
}

/* ---------- desktop ---------- */
@media (min-width: 1280px) {
.breadcrumbs {display:block;width:100%;padding:12px 0;border-bottom: 1px solid #dde4ea;margin-bottom:50px;}
.breadcrumbs_in {width:1280px;margin:0 auto;}
.breadcrumbs_box {display:block;width:100%;font-size: 12px;line-height: 140%;}
.breadcrumbs a {text-decoration: none;margin:0 5px;color: #2e2e2e;font-size: 12px;line-height: 140%;}
.breadcrumbs_domain {margin:0 5px 0 0 !important;}
.breadcrumbs a:hover {text-decoration:underline;color: #2e2e2e;}

/* Height of what stays pinned at the top, for the plugin's auto-scroll
   (0.23.0 reads this custom property; it adds its own sticky elements on
   top by itself). The site header is static at this width, so only the
   admin bar counts - and only when logged in.

   Declared on :root, not body: the plugin reads it off documentElement,
   and custom properties inherit downwards only. WordPress puts admin-bar
   on body, hence :has() to reach back up. Unsupported browsers simply get
   the base value, which is right for logged-out visitors anyway. */
:root {--quiz-engine-scroll-offset:0px;}
:root:has(body.admin-bar) {--quiz-engine-scroll-offset:32px;}

/* Same shell as a post: sidebar fixed at 330px, 80px gap, 870px left. */
.single_layout {display:flex;align-items:flex-start;justify-content:space-between;width:1280px;}
.content {flex:0 0 870px;}
.endpost {flex:0 0 330px;margin:0;}

.content ol {display:block;width:830px;list-style: none; counter-reset: li;padding:0 0 0 40px;}
.content ol li {padding:5px 0;}
.content ol li::before {content: counter(li); counter-increment: li;color:#1D5CD4;display: inline-block; width: 1em; margin-left: -2em;margin-right: 0.5em; text-align: right; direction: rtl;font-weight:700;font-size:112%;border-right:3px solid #1D5CD4;line-height:16px;padding:5px 0.3em 0 0;}
.content ul { display:block;width:100%;list-style-type: none;}
.content ul li {list-style-type: none;background-position:0 10px;background-repeat: no-repeat;background-image: url("/wp-content/themes/my/img/ul.svg");padding:5px 0 5px 30px;}

.content .quiz-engine-question {padding:24px 28px;}
/* Answers indent under the question, the way an article's list does. */
.content .quiz-engine-answer {margin:0 0 0 4px;}
.content .quiz-engine-submit {display:block;width:400px;margin:30px auto 0 auto;padding:14px 25px;font-size:100%;}
/* Result layout: image on the right at its own 300px, title and opening
   paragraph beside it, the rest of the verdict full width underneath, and
   the share row centred above the lot.

   display:contents on the verdict wrapper is what makes "first paragraph
   next to the image, the rest full width" possible at all - it dissolves
   the wrapper's own box so its paragraphs become grid items in their own
   right, instead of one block that can only sit in a single cell.

   The [hidden] guard is not optional: .content .quiz-engine-result matches
   as strongly as the plugin's own .quiz-engine-result[hidden] and loads
   later, so without it every result would show at once. Rule 1 at the top
   of this file. */
.content .quiz-engine-result {display:grid;grid-template-columns:1fr 300px;column-gap:40px;}
.content .quiz-engine-result .quiz-engine-share {grid-column:1 / -1;grid-row:1;margin:0 0 30px 0;}
.content .quiz-engine-result-image {grid-column:2;grid-row:2 / span 3;align-self:start;max-width:100%;margin:0;}
/* Scales sit directly under the title, beside the image - they are the
   shape of the answer, not an afterthought. Row 3 stays collapsed when a
   test has no axes, since :empty hides the container entirely. */
.content .quiz-engine-scales {grid-column:1;grid-row:3;}
/* Left-aligned here, unlike the site's centred h2: beside a 300px image
   in a 530px column, a centred title reads as accidentally off-centre
   rather than as a heading of the column it belongs to. */
.content .quiz-engine-result h2 {grid-column:1;grid-row:2;text-align:left;}
.content .quiz-engine-result-verdict {display:contents;}
.content .quiz-engine-result-verdict > * {grid-column:1 / -1;}
.content .quiz-engine-result-verdict > p:first-child {grid-column:1;grid-row:4;}

.content .quiz-engine-cta {margin:50px 0 0 0;}
.content .quiz-engine-cta-button {margin:16px 0 0 0;}
.content .quiz-engine-faq, .content .quiz-engine-methodology, .content .quiz-engine-references, .content .quiz-engine-test-share {margin-top:50px;padding-top:30px;}
/* Sources sit narrower than body text - reference material, not something
   anyone reads across the full 870px. */
.content .quiz-engine-references ol {width:auto;padding:0 0 0 20px;}

/* Title + intro on the left, the test's image on the right at its own
   300px. min-width:0 on the text column so a long unbroken string can't
   push the image out of the row. */
.content .quiz_head {display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin:0 0 24px 0;}
.content .quiz_head_text {flex:1 1 auto;min-width:0;}
.content .quiz_head_text h1 {margin-top:0;}
.content .quiz_head_thumb {flex:0 0 300px;}
.content .quiz-engine-disclaimer {padding:14px 24px 14px 20px;margin:0 0 50px 0;}

/* Footer row: who made the test on the left, its rating on the right. */
/* 100px of air under the attribution/rating row: it is the last thing in
   the column, and without it the site footer starts immediately under the
   author's name. */
.content .post_footer {display:flex;align-items:center;justify-content:space-between;gap:40px;width:870px;margin:50px 0 100px 0;padding:24px 0 0 0;border-top:1px solid #dde4ea;}
.content .post_footer_attribution {flex:1 1 auto;min-width:0;}
.content .post_footer_rating {flex:0 0 auto;display:block;padding:0;width:auto;text-align:right;margin:0;}
}