/* LRAI Interview-Questions components — loaded only on /interview-questions/ pages.
   Tailwind is purged in this theme, so every component carries its own CSS. */

:root{
  --iq-blue:#2563eb; --iq-blue-dark:#1d4ed8; --iq-blue-50:#eff6ff; --iq-blue-100:#dbeafe;
  --iq-ink:#0f172a; --iq-g700:#334155; --iq-g500:#64748b; --iq-g200:#e2e8f0; --iq-g100:#f1f5f9; --iq-g50:#f8fafc;
}

/* article section headings (prose typography is weak in this theme) */
.prose h2{position:relative;font-size:1.55rem;line-height:1.3;font-weight:800;color:var(--iq-ink);margin:2.75rem 0 1.1rem;padding-bottom:.55rem;border-bottom:1px solid var(--iq-g200);scroll-margin-top:90px}
.prose h2:after{content:"";position:absolute;left:0;bottom:-1px;width:2.75rem;height:3px;background:var(--iq-blue);border-radius:2px}
.prose h3{font-size:1.18rem;line-height:1.35;font-weight:700;color:var(--iq-ink);margin:2rem 0 .7rem}
.prose h2:first-of-type{margin-top:1.25rem}

/* ---- breadcrumb ---- */
.iq-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--iq-g500);margin:0 0 1.25rem}
.iq-crumb a{color:var(--iq-g500);text-decoration:none}
.iq-crumb a:hover{color:var(--iq-blue);text-decoration:underline}
.iq-crumb__sep{color:#cbd5e1}
.iq-crumb__cur{color:var(--iq-g700);font-weight:600}

/* ---- on-this-page TOC ---- */
.iq-toc{background:var(--iq-g50);border:1px solid var(--iq-g200);border-radius:.75rem;padding:1rem 1.25rem;margin:0 0 2rem}
.iq-toc__title{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--iq-g500);font-weight:700;margin-bottom:.6rem}
.iq-toc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.35rem}
@media(min-width:640px){.iq-toc__list{grid-template-columns:1fr 1fr}}
.iq-toc__list a{display:inline-block;color:var(--iq-g700);text-decoration:none;font-size:.92rem;padding:.15rem 0;border-bottom:1px solid transparent}
.iq-toc__list a:hover{color:var(--iq-blue);border-bottom-color:var(--iq-blue)}

/* ---- stats bar ---- */
.iq-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem 0 2rem}
@media(min-width:640px){.iq-stats{grid-template-columns:repeat(4,1fr)}}
.iq-stat{background:#fff;border:1px solid var(--iq-g200);border-radius:.75rem;padding:1rem;text-align:center;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.iq-stat__value{display:block;font-size:1.35rem;font-weight:800;color:var(--iq-ink);line-height:1.2}
.iq-stat__label{display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--iq-g500);margin-top:.3rem;font-weight:600}

/* ---- process timeline ---- */
.iq-timeline{position:relative;margin:1.5rem 0 2.25rem;padding-left:1.75rem}
.iq-timeline:before{content:"";position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(var(--iq-blue-100),var(--iq-g200))}
.iq-step{position:relative;padding:0 0 1.4rem}
.iq-step:last-child{padding-bottom:0}
.iq-step__dot{position:absolute;left:-1.75rem;top:.15rem;width:1rem;height:1rem;border-radius:50%;background:#fff;border:3px solid var(--iq-blue);box-shadow:0 0 0 3px var(--iq-blue-50)}
.iq-step__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:.2rem}
.iq-step__title{font-weight:700;color:var(--iq-ink);font-size:1.02rem}
.iq-step__meta{font-size:.78rem;font-weight:600;color:var(--iq-blue-dark);background:var(--iq-blue-50);padding:.1rem .5rem;border-radius:999px}
.iq-step__desc{color:var(--iq-g700);font-size:.95rem;line-height:1.6}
.iq-step__desc p{margin:.3rem 0}

/* ---- accordion Q&A ---- */
.iq-qa{position:relative;border:1px solid var(--iq-g200);border-radius:.85rem;margin:.7rem 0;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:box-shadow .18s,border-color .18s}
.iq-qa:hover{border-color:#c7d2fe;box-shadow:0 4px 16px rgba(37,99,235,.08)}
.iq-qa.is-open{border-color:#bfdbfe;box-shadow:inset 3px 0 0 var(--iq-blue),0 10px 28px rgba(37,99,235,.12)}
.iq-qa__q{all:unset;display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.35rem;cursor:pointer;font-weight:650;background:#fff !important;color:var(--iq-ink) !important}
/* keep the header light + dark-text in every state (site's global button styles add a dark-blue fill otherwise) */
.iq-qa__q:hover,.iq-qa__q:focus,.iq-qa__q:active,.iq-qa__q:focus-visible{background:#fbfcff !important;color:var(--iq-ink) !important}
.iq-qa.is-open .iq-qa__q{background:var(--iq-blue-50) !important;border-bottom:1px solid #dbe6ff}
.iq-qa__q:focus-visible{outline:2px solid var(--iq-blue);outline-offset:-2px}
.iq-qa__qtext{color:var(--iq-ink) !important;font-size:1.03rem;line-height:1.45;font-weight:500}
.iq-qa__meta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.iq-qa__tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--iq-g500);font-weight:700}
.iq-qa__chev{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--iq-g100);flex-shrink:0;transition:background .2s}
.iq-qa__chev:after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--iq-g500);border-bottom:2px solid var(--iq-g500);transform:rotate(45deg);margin-top:-.18rem;transition:transform .2s,border-color .2s}
.iq-qa.is-open .iq-qa__chev{background:var(--iq-blue-100)}
.iq-qa.is-open .iq-qa__chev:after{transform:rotate(-135deg);margin-top:.12rem;border-color:var(--iq-blue-dark)}
.iq-qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.iq-qa.is-open .iq-qa__a{grid-template-rows:1fr}
.iq-qa__a-inner{overflow:hidden;color:var(--iq-g700);line-height:1.72}
.iq-qa__a-inner>*{margin:0 1.35rem}
.iq-qa__a-inner>:first-child{padding-top:.9rem}
.iq-qa__a-inner>:last-child{padding-bottom:1.2rem;margin-bottom:0}
.iq-qa__a-inner>.iq-code{margin:1rem 1.35rem}
.prose .iq-qa__a-inner p{margin:.65rem 1.35rem}

/* ---- difficulty badge ---- */
.iq-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.15rem .5rem;border-radius:999px;white-space:nowrap}
.iq-badge--easy{background:#dcfce7;color:#166534}
.iq-badge--medium{background:#fef3c7;color:#92400e}
.iq-badge--hard{background:#fee2e2;color:#991b1b}

/* ---- code block ---- */
.iq-code{margin:1rem 0;border-radius:.7rem;overflow:hidden;border:1px solid #1e293b;background:#282c34}
.iq-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.4rem .8rem;background:#1e2530;border-bottom:1px solid #0f172a}
.iq-code__lang{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;font-weight:700}
.iq-code__copy{all:unset;cursor:pointer;font-size:.74rem;color:#cbd5e1;background:#334155;padding:.2rem .6rem;border-radius:.35rem}
.iq-code__copy:hover{background:#475569;color:#fff}
.iq-code__copy.is-copied{background:#16a34a;color:#fff}
.iq-code pre{margin:0;padding:1rem;overflow-x:auto;font-size:.86rem;line-height:1.55}
.iq-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:none;padding:0}

/* ---- callout ---- */
.iq-callout{border-radius:.7rem;padding:1rem 1.2rem;margin:1.25rem 0;border:1px solid;border-left-width:4px}
.iq-callout__title{font-weight:800;margin-bottom:.3rem;font-size:.95rem}
.iq-callout__body{font-size:.95rem;line-height:1.65}
.iq-callout__body p{margin:.4rem 0}
.iq-callout__body :last-child{margin-bottom:0}
.iq-callout--tip{background:var(--iq-blue-50);border-color:#bfdbfe}
.iq-callout--tip .iq-callout__title{color:var(--iq-blue-dark)}
.iq-callout--insight{background:#faf5ff;border-color:#e9d5ff}
.iq-callout--insight .iq-callout__title{color:#7e22ce}
.iq-callout--warning{background:#fffbeb;border-color:#fde68a}
.iq-callout--warning .iq-callout__title{color:#b45309}

/* ---- related guides ---- */
.iq-related{margin:2.5rem 0 1rem}
.iq-related__title{font-size:1.05rem;font-weight:800;color:var(--iq-ink);margin-bottom:.9rem}
.iq-related__grid{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:640px){.iq-related__grid{grid-template-columns:1fr 1fr}}
.iq-rel__card{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem;border:1px solid var(--iq-g200);border-radius:.7rem;background:#fff;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.iq-rel__card:hover{border-color:var(--iq-blue);transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,99,235,.1)}
.iq-rel__t{font-weight:650;color:var(--iq-ink);font-size:.95rem}
.iq-rel__arrow{color:var(--iq-blue);font-weight:700;flex-shrink:0}

/* ---- service suite strip (funnel to products) ---- */
.iq-suite{margin:2.75rem 0 1.5rem;padding:1.5rem;border:1px solid var(--iq-g200);border-radius:1rem;background:linear-gradient(180deg,var(--iq-g50),#fff)}
.iq-suite__head{margin-bottom:1.1rem}
.iq-suite__title{font-size:1.18rem;font-weight:800;color:var(--iq-ink);line-height:1.3}
.iq-suite__sub{font-size:.9rem;color:var(--iq-g500);margin-top:.25rem}
.iq-suite__grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.iq-suite__grid{grid-template-columns:1fr 1fr}}
.iq-suite__card{position:relative;display:block;padding:1rem 2.4rem 1rem 1.1rem;border:1px solid var(--iq-g200);border-radius:.75rem;background:#fff;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.iq-suite__card:hover{border-color:var(--iq-blue);transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,99,235,.1)}
.iq-suite__t{display:block;font-weight:700;color:var(--iq-ink);font-size:.98rem}
.iq-suite__d{display:block;color:var(--iq-g500);font-size:.85rem;margin-top:.2rem;line-height:1.45}
.iq-suite__arrow{position:absolute;right:1.05rem;top:50%;transform:translateY(-50%);color:var(--iq-blue);font-weight:700;font-size:1.05rem}

/* ---- mid-article promo: keep the CTA button label white (the theme's .prose a rule would hide it on iq pages) ---- */
.iq-content .lrai-mini__cta,.prose .lrai-mini__cta,.lrai-mini a.lrai-mini__cta{color:#fff !important}
.lrai-mini{margin:1.6rem 0}

/* ---- sources ---- */
.iq-sources{margin:2rem 0 1rem;background:var(--iq-g50);border:1px solid var(--iq-g200);border-radius:.7rem;padding:1.1rem 1.3rem}
.iq-sources__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--iq-g500);font-weight:800;margin-bottom:.5rem}
.iq-sources__list{margin:0;padding-left:1.1rem;columns:1}
@media(min-width:640px){.iq-sources__list{columns:2;column-gap:2rem}}
.iq-sources__list li{margin:.25rem 0;font-size:.9rem;break-inside:avoid}
.iq-sources__list a{color:var(--iq-blue-dark);text-decoration:none}
.iq-sources__list a:hover{text-decoration:underline}

/* ---- CTA card ---- */
.iq-cta{margin:2.5rem 0;border-radius:1rem;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);color:#fff;box-shadow:0 18px 40px rgba(37,99,235,.25)}
.iq-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.6rem 1.8rem}
.iq-cta__kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#bfdbfe;margin-bottom:.3rem}
.iq-cta__title{font-size:1.3rem;font-weight:800;line-height:1.25}
.iq-cta__body{margin:.5rem 0 0;color:#dbeafe;font-size:.95rem;line-height:1.55;max-width:34rem}
.iq-cta__actions{display:flex;flex-direction:column;gap:.6rem;flex-shrink:0}
.iq-cta__btn{display:inline-block;background:#fff;color:var(--iq-blue-dark);font-weight:800;padding:.7rem 1.4rem;border-radius:.6rem;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s}
.iq-cta__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.iq-cta__link{color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;text-align:center;opacity:.92}
.iq-cta__link:hover{opacity:1;text-decoration:underline}

@media(max-width:520px){
  .iq-cta__inner{padding:1.4rem}
  .iq-cta__actions{width:100%}
  .iq-cta__btn{width:100%;box-sizing:border-box}
}

/* ==================================================================
   v2 premium upgrade (2026-07) — scoped to iq singles (body.single-iq).
   Overrides the flat v1 styles above; NO markup/shortcode changes.
   Delivers: wider column w/ capped reading measure, serif display
   headings, tinted stat tiles, difficulty-colored Q&A rails (:has),
   dot badges. Per-company hero color + practice CTA come later (need
   the [iq_qa]/[iq_stats] shortcode + single-iq.php template pass).
   ================================================================== */
body.single-iq{
  --iq-accent:#4338ca;            /* refined indigo; per-company override lands in phase 2 */
  --iq-accent-ink:#3730a3;
  --iq-accent-wash:#eef2ff;
  --iq-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Hoefler Text",Georgia,ui-serif,serif;
}

/* --- wider column, but keep body text at a readable measure --- */
body.single-iq article > .container.max-w-4xl{max-width:72rem}
body.single-iq .prose > p,
body.single-iq .prose > ul,
body.single-iq .prose > ol,
body.single-iq .prose > blockquote{max-width:46rem}

/* --- serif display headline + section headings --- */
body.single-iq h1{font-family:var(--iq-serif);font-weight:600;letter-spacing:-.012em;line-height:1.04}
body.single-iq .prose h2{font-family:var(--iq-serif);font-weight:600;letter-spacing:-.008em}
body.single-iq .prose h2:after{background:var(--iq-accent)}

/* --- stat tiles: tinted, left-aligned, accent bar, bigger number --- */
body.single-iq .iq-stat{position:relative;overflow:hidden;text-align:left;padding:1rem 1rem 1rem 1.15rem;
  background:linear-gradient(180deg,var(--iq-g50),#fff);border-color:var(--iq-g200)}
body.single-iq .iq-stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--iq-accent)}
body.single-iq .iq-stat__value{font-size:1.45rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
body.single-iq .iq-stat__label{margin-top:.35rem}

/* --- Q&A cards: difficulty-colored left rail via :has(), calmer shadows --- */
body.single-iq .iq-qa{--rail:var(--iq-g200);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -16px rgba(15,23,42,.18)}
body.single-iq .iq-qa:has(.iq-badge--easy){--rail:#16a34a}
body.single-iq .iq-qa:has(.iq-badge--medium){--rail:#d97706}
body.single-iq .iq-qa:has(.iq-badge--hard){--rail:#dc2626}
body.single-iq .iq-qa:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--rail);z-index:1;transition:top .2s,bottom .2s}
body.single-iq .iq-qa:hover{border-color:color-mix(in srgb,var(--rail) 45%,var(--iq-g200));
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 22px 44px -22px rgba(15,23,42,.28);transform:translateY(-2px)}
body.single-iq .iq-qa{transition:box-shadow .18s,border-color .18s,transform .18s}
body.single-iq .iq-qa.is-open{border-color:color-mix(in srgb,var(--rail) 45%,var(--iq-g200));
  box-shadow:0 10px 28px -8px rgba(15,23,42,.16)}
body.single-iq .iq-qa.is-open:before{top:0;bottom:0}
body.single-iq .iq-qa.is-open .iq-qa__q{background:var(--iq-g50) !important;border-bottom-color:var(--iq-g200)}
body.single-iq .iq-qa.is-open .iq-qa__chev{background:var(--iq-g100)}
body.single-iq .iq-qa.is-open .iq-qa__chev:after{border-color:var(--iq-g700)}

/* --- badges: dot + label, crisper --- */
body.single-iq .iq-badge{display:inline-flex;align-items:center;gap:.4em;font-weight:700}
body.single-iq .iq-badge:before{content:"";width:.42em;height:.42em;border-radius:50%;background:currentColor}

/* --- TOC: sticky feel + accent active state (still inline; full sidebar is phase 2) --- */
body.single-iq .iq-toc__list a:hover{color:var(--iq-accent-ink);border-bottom-color:var(--iq-accent)}

@media(max-width:640px){
  body.single-iq article > .container.max-w-4xl{max-width:100%}
}

/* ============================================================================
   v3 OPEN ARTICLE LAYOUT (Final Round style): difficulty sections, numbered
   questions, no accordion. Applies on all .single-iq pages. 2026-07-18.
   ============================================================================ */
body.single-iq{counter-reset:iqn}

/* difficulty section headers (from [iq_dsec level="" n=""]) */
body.single-iq .iq-dsec{margin:36px 0 6px}
body.single-iq .iq-dsec__row{display:flex;align-items:center;gap:12px}
body.single-iq .iq-dsec__h{font-family:var(--iq-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif);
  font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:600;letter-spacing:-.01em;margin:0;
  display:flex;align-items:center;gap:12px;color:var(--iq-ink)}
body.single-iq .iq-dsec__dot{width:12px;height:12px;border-radius:50%;background:var(--sec,#4338ca);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sec,#4338ca) 16%,transparent)}
body.single-iq .iq-dsec__n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;font-weight:700;
  color:var(--sec,#4338ca);background:color-mix(in srgb,var(--sec,#4338ca) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--sec,#4338ca) 28%,transparent);padding:2px 9px;border-radius:999px}
body.single-iq .iq-dsec__bar{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--sec,#4338ca),transparent);
  margin:10px 0 4px;opacity:.5;max-width:640px}
body.single-iq .iq-dsec--easy{--sec:#16a34a}
body.single-iq .iq-dsec--medium{--sec:#d97706}
body.single-iq .iq-dsec--hard{--sec:#dc2626}
body.single-iq .iq-dsec--scenario{--sec:var(--iqa,#4338ca)}

/* open cards: strip the accordion chrome, render question as a numbered serif heading */
body.single-iq .iq-qa{counter-increment:iqn;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  background:transparent !important;margin:0 !important;padding:26px 0 8px !important;
  border-top:1px solid var(--iq-g100) !important;overflow:visible !important;transform:none !important}
body.single-iq .iq-dsec + .iq-qa{border-top:0 !important}
body.single-iq .iq-qa:before{display:none !important}          /* remove v2 difficulty rail */
body.single-iq .iq-qa:hover{border-color:transparent !important;box-shadow:none !important;transform:none !important}
body.single-iq .iq-qa__q{all:unset;display:block !important;cursor:default !important;padding:0 0 10px !important;
  background:transparent !important}
body.single-iq .iq-qa.is-open .iq-qa__q,
body.single-iq .iq-qa__q:hover,
body.single-iq .iq-qa__q:focus,
body.single-iq .iq-qa__q:focus-visible{background:transparent !important;border-bottom:0 !important;outline:none !important}
body.single-iq .iq-qa__qtext{display:block;
  font-family:var(--iq-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif);
  font-size:clamp(1.24rem,2.1vw,1.5rem) !important;line-height:1.3;font-weight:600 !important;color:var(--iq-ink) !important}
body.single-iq .iq-qa__qtext:before{content:counter(iqn) ". ";color:var(--iqa,#4338ca);font-weight:700;
  font-variant-numeric:tabular-nums}
body.single-iq .iq-qa__meta{display:none !important}          /* difficulty conveyed by the section, not per card */
body.single-iq .iq-qa__a{display:block !important}
body.single-iq .iq-qa.is-open .iq-qa__a,body.single-iq .iq-qa__a{grid-template-rows:none !important}
body.single-iq .iq-qa__a-inner{overflow:visible !important}
body.single-iq .iq-qa__a-inner>*{margin-left:0 !important;margin-right:0 !important}
body.single-iq .iq-qa__a-inner>:first-child{padding-top:0 !important}
body.single-iq .prose .iq-qa__a-inner p{margin-left:0 !important;margin-right:0 !important}
body.single-iq .iq-qa__a-inner .iq-code{margin-left:0 !important;margin-right:0 !important}
/* answers span the full content column, matching the question headings above them */
body.single-iq .iq-qa__a-inner{max-width:none}
body.single-iq .iq-qa__a-inner .iq-code{max-width:none}