/* =====================================================================
   MINDAURA — Inline Test Embed v1.0
   Loaded only on pages carrying [xform mode="inline"] or [mindaura_test_embed].

   WHY THIS FILE EXISTS
   The test player is built to own the whole page: xform-rating-style.css and
   xform-mcq-style.css give the container min-height:100vh, make the header and
   nav position:sticky against the viewport, and make MCQ interstitials
   position:fixed;inset:0. That is correct on /tests/{slug}, where the test IS
   the page. Inside a blog post it blows the article apart.

   This file re-contains all of that WITHOUT touching the originals, so the
   standalone test pages are byte-for-byte unaffected. The JS half of the same
   job (skipping the body.xf*-active classes and xfrExpandToFullWidth) lives in
   js/xform-builder-script.js — see _applyFormData().

   SPECIFICITY NOTE
   Every rule here is scoped under .xform-container.xform-inline, which adds two
   classes on top of whatever the base file used, so these win on specificity
   even where the base rule is !important and this one is not. Where the base
   rule IS !important, the override repeats !important — required, not noise.
   ===================================================================== */

/* ── 1. The frame ─────────────────────────────────────────────────────
   On /tests/ the player sits on a full-bleed tinted page. Inline it needs to
   read as a distinct card inside the article, or it looks like broken layout. */
.xform-container.xform-inline {
  padding: 0 !important;
  margin: 32px 0 !important;
  background: transparent !important;
  max-width: 100% !important;
  /* contains the absolutely-positioned interstitial in section 5 */
  position: relative;
}

.xform-container.xform-inline #xform-single-container {
  position: relative !important;
  /* THE key override: 100vh inside an article makes the post unreadable. */
  min-height: 620px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;          /* clips the interstitial to the card */
  border: 1px solid #e6e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(28, 32, 64, .06) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8f9fc !important;
}

/* Rating tests use a slightly different page tint than MCQ — match it so the
   card interior doesn't band against the player's own background. */
.xform-container.xform-inline[data-form-type="rating"] #xform-single-container {
  background: #f1f2f8 !important;
}

.xform-container.xform-inline #xform-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.xform-container.xform-inline .xform-test-container,
.xform-container.xform-inline .xfr-test-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── 2. Intro screens — drop the 100vh centring ───────────────────────
   Both intro wrappers centre themselves in a full viewport. Inline that leaves
   a screen-tall empty gap above and below the start card. */
.xform-container.xform-inline .xfr-intro,
.xform-container.xform-inline .xfm-intro-wrap {
  min-height: 0 !important;
  height: auto !important;
  padding: 40px 20px !important;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.xform-container.xform-inline .xfr-intro__card,
.xform-container.xform-inline .xfm-intro-card {
  max-width: 100% !important;
}

/* ── 3. Sticky header / nav → static ──────────────────────────────────
   position:sticky resolves against the scrollport, i.e. the window — not this
   card. Left sticky, the test header would peel out of the card and float over
   the surrounding article text as the reader scrolls the post. The card is
   viewport-sized anyway, so static loses nothing. */
.xform-container.xform-inline .xfr-header,
.xform-container.xform-inline .xfr-bottom-nav,
.xform-container.xform-inline .xfm-topbar,
.xform-container.xform-inline .xfm-footer {
  position: static !important;
  z-index: auto !important;
}

/* ── 4. Preloader ─────────────────────────────────────────────────────
   Give the pre-intro spinner the card's height so the embed doesn't visibly
   collapse then re-expand while the form data resolves (layout shift; also a
   Core Web Vitals cost on the very page you're trying to rank). */
.xform-container.xform-inline .xform-preloader {
  min-height: 620px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── 5. Interstitials — fixed → absolute ──────────────────────────────
   .xfm-interstitial is position:fixed;inset:0;z-index:99999 in the MCQ file:
   inline, a motivational screen would black out the reader's entire browser
   window mid-article. Re-anchored to the card, which is position:relative in
   section 1. The player already calls scrollIntoView() on the container when it
   raises an interstitial (xform-builder-script.js, finish()), so the card is on
   screen when this fires. */
.xform-container.xform-inline .xfm-interstitial,
.xform-container.xform-inline .xfr-interstitial {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  padding: 40px 24px !important;
}

/* ── 6. Never touch the page shell from inline mode ───────────────────
   Defence in depth. The JS no longer adds body.xfr-active / body.xfm-active for
   inline embeds, so the header/footer-hiding rules in the type-specific files
   can't fire. But a page can legitimately hold BOTH a full-page test and an
   inline one (a /tests/ page with a related-test embed), and then the body
   class is present for the full-page player while this card is also on screen.
   These restore what those rules hide, scoped to that overlap only. */
body.xfr-active .xform-inline,
body.xfm-active .xform-inline {
  display: block !important;
}

/* ── 7. Small screens ─────────────────────────────────────────────────
   Edge-to-edge under 600px: a bordered card with the theme's own content
   padding outside it wastes ~48px of width on a phone, which is where most of
   these tests are taken. */
@media (max-width: 600px) {
  .xform-container.xform-inline #xform-single-container {
    border-radius: 12px !important;
    min-height: 560px !important;
  }
  .xform-container.xform-inline .xform-preloader {
    min-height: 560px !important;
  }
  .xform-container.xform-inline .xfr-intro,
  .xform-container.xform-inline .xfm-intro-wrap {
    padding: 28px 16px !important;
  }
}

/* =====================================================================
   8. The SEO block — server-rendered crawlable content around the player.
   Rendered by includes/class-inline-test-embed.php. This is the half that
   actually ranks: the player itself is Alpine-rendered client side and answer
   engines largely don't execute JS, so they see an empty div where the test is.
   Everything styled below is in the initial HTML response.
   ===================================================================== */
.ma-test-seo {
  --ma-seo-fg: #1a1a2e;
  --ma-seo-muted: #5b6178;
  --ma-seo-line: #e6e8f0;
  --ma-seo-accent: #7c3aed;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ma-seo-fg);
  margin: 28px 0;
}

.ma-test-seo__answer {
  background: #f7f5ff;
  border-left: 3px solid var(--ma-seo-accent);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
}
.ma-test-seo__answer p { margin: 0; }
.ma-test-seo__answer p + p { margin-top: 10px; }

.ma-test-seo h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--ma-seo-fg);
}
.ma-test-seo h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 20px 0 6px;
  color: var(--ma-seo-fg);
}
.ma-test-seo p { margin: 0 0 14px; }

/* Fact strip. A <dl>, so none of the theme's ul/li bullet, indent or margin
   rules reach it — that was why this block rendered as loose stacked text on the
   live post. Every property that a theme commonly resets is set explicitly. */
.ma-test-seo__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid var(--ma-seo-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ma-seo-line);
  gap: 1px;
}
.ma-test-seo__fact {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  min-width: 0;
}
.ma-test-seo__facts dt {
  margin: 0 0 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ma-seo-muted);
  line-height: 1.3;
}
.ma-test-seo__facts dd {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ma-seo-fg);
  letter-spacing: -0.01em;
}

.ma-test-seo__steps { margin: 0 0 20px; padding-left: 22px; }
.ma-test-seo__steps li { margin-bottom: 8px; }

.ma-test-seo__measures { margin: 0 0 20px; padding-left: 22px; }
.ma-test-seo__measures li { margin-bottom: 8px; }
.ma-test-seo__measures strong { font-weight: 650; }

.ma-test-seo__samples {
  border: 1px solid var(--ma-seo-line);
  border-radius: 10px;
  padding: 4px 20px;
  margin: 0 0 20px;
  background: #fcfcfe;
}
.ma-test-seo__sample {
  padding: 16px 0;
  border-bottom: 1px solid var(--ma-seo-line);
}
.ma-test-seo__sample:last-child { border-bottom: none; }
.ma-test-seo__sample-q {
  font-weight: 650;
  margin: 0 0 8px;
}
.ma-test-seo__sample-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ma-test-seo__sample-opts li {
  font-size: 13px;
  color: var(--ma-seo-muted);
  background: #f3f4f8;
  border-radius: 6px;
  padding: 4px 10px;
}

/* <details> keeps the FAQ compact for readers while leaving every answer in the
   HTML for crawlers — collapsed content is indexed normally, unlike anything
   injected by JS on click. */
.ma-test-seo__faq { margin: 0 0 8px; }
.ma-test-seo__faq-item {
  border-bottom: 1px solid var(--ma-seo-line);
}
.ma-test-seo__faq-item summary {
  cursor: pointer;
  padding: 14px 28px 14px 0;
  font-weight: 650;
  list-style: none;
  position: relative;
}
.ma-test-seo__faq-item summary::-webkit-details-marker { display: none; }
.ma-test-seo__faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 12px;
  font-size: 20px;
  font-weight: 400;
  color: var(--ma-seo-muted);
  line-height: 1;
}
.ma-test-seo__faq-item[open] summary::after { content: "\2212"; }
.ma-test-seo__faq-item > div {
  padding: 0 0 16px;
  color: var(--ma-seo-muted);
}
.ma-test-seo__faq-item > div p { margin: 0 0 10px; }
.ma-test-seo__faq-item > div p:last-child { margin-bottom: 0; }

/* CTA card used by [mindaura_test_embed player="cta"] — the zero-risk variant that
   links out to /tests/{slug} instead of mounting the player in the article. */
.ma-test-cta {
  border: 1px solid var(--ma-seo-line, #e6e8f0);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 28px 0;
  background: linear-gradient(180deg, #faf9ff 0%, #fff 100%);
  text-align: center;
}
.ma-test-cta__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1a1a2e;
}
.ma-test-cta__meta {
  font-size: 13px;
  color: #5b6178;
  margin: 0 0 18px;
}
.ma-test-cta__btn {
  display: inline-block;
  background: #7c3aed;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 650;
  font-size: 15px;
  padding: 13px 32px;
  border-radius: 10px;
  transition: background .18s, transform .12s;
}
.ma-test-cta__btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .ma-test-seo { font-size: 15px; }
  .ma-test-seo h2 { font-size: 19px; }
  .ma-test-seo__answer { font-size: 16px; padding: 16px 18px; }
  .ma-test-seo__facts { grid-template-columns: 1fr 1fr; }
  .ma-test-seo__facts dd { font-size: 16px; }
}