/* ==========================================================================
   Phase C Slice 2B — Plugin-owned archive route shell
   Purpose:
   - Move archive page framing ownership out of the child theme and into QuizOps
   - Preserve the current archive look while keeping shared site chrome theme-owned
   ========================================================================== */

body.post-type-archive-quiz,
body.post-type-archive-quiz html {
  background:
    radial-gradient(circle at top center, rgba(42, 96, 167, 0.20), transparent 36%),
    linear-gradient(180deg, #071c31 0%, #061628 100%);
}

body.post-type-archive-quiz #page,
body.post-type-archive-quiz .site,
body.post-type-archive-quiz .site-content,
body.post-type-archive-quiz .content-area,
body.post-type-archive-quiz .site-main {
  background: transparent;
}

body.post-type-archive-quiz #site-header,
body.post-type-archive-quiz header.site-header,
body.post-type-archive-quiz #site-footer,
body.post-type-archive-quiz footer.site-footer {
  background: rgba(6, 22, 40, 0.88);
  backdrop-filter: blur(8px);
}

body.post-type-archive-quiz #site-header,
body.post-type-archive-quiz header.site-header {
  border-bottom: 1px solid rgba(111, 149, 205, 0.14);
}

body.post-type-archive-quiz #site-footer,
body.post-type-archive-quiz footer.site-footer {
  border-top: 1px solid rgba(111, 149, 205, 0.14);
}

body.post-type-archive-quiz #site-header a,
body.post-type-archive-quiz header.site-header a,
body.post-type-archive-quiz #site-footer,
body.post-type-archive-quiz footer.site-footer {
  color: #e6eef8;
}

body.post-type-archive-quiz #site-header a:hover,
body.post-type-archive-quiz header.site-header a:hover,
body.post-type-archive-quiz #site-footer a:hover,
body.post-type-archive-quiz footer.site-footer a:hover {
  color: #ffd373;
}

body.post-type-archive-quiz .site-main {
  padding: 24px 0 44px;
}

@media (max-width: 767px) {
  body.post-type-archive-quiz .site-main {
    padding-top: 16px;
    padding-bottom: 28px;
  }
}

/* ==========================================================================
   QuizOps – Quiz Hub Native Archive Refinements (Phase C - "Legacy Hub" match)
   File: quizops_quiz_hub_refine.css
   Scope: ONLY the native Quiz CPT archive wrapper (.ika-quiz-archive)

   Targets:
   - Restore the original hero (image + overlay + eyebrow + bullets)
   - Match original browse section header
   - Match card/chip styling & colors
   - Keep layout centered with no left/right clipping
   ========================================================================== */

/* Pass 7 — archive shell semantic bindings */
.ika-quiz-archive {
  --qo-archive-bg-page: var(--qo-color-bg-page-app, #0D131F);
  --qo-archive-shell-bg: linear-gradient(180deg, rgba(10,18,34,0.92) 0%, rgba(7,14,26,0.96) 100%);
  --qo-archive-shell-border: var(--qo-color-border-app-subtle, rgba(255,255,255,0.06));
  --qo-archive-shell-shadow: var(--qo-shadow-app-shell, 0 18px 42px rgba(0,0,0,0.45));
  --qo-archive-panel-bg: linear-gradient(180deg, rgba(8, 14, 26, 0.96), rgba(6, 11, 22, 0.96));
  --qo-archive-panel-border: var(--qo-color-border-app-soft, rgba(255,255,255,0.08));
  --qo-archive-panel-shadow: 0 26px 78px rgba(0,0,0,0.55);
  --qo-archive-card-bg: linear-gradient(180deg, rgba(24, 44, 74, 0.74), rgba(10, 18, 34, 0.90));
  --qo-archive-card-border: var(--qo-color-border-app-faint, rgba(255,255,255,0.10));
  --qo-archive-card-border-strong: rgba(98,169,242,0.30);
  --qo-archive-card-shadow: 0 16px 44px rgba(0,0,0,0.45);
  --qo-archive-card-shadow-hover: 0 20px 54px rgba(0,0,0,0.55);
  --qo-archive-chip-bg: var(--qo-color-surface-glass-app-subtle, rgba(255,255,255,0.06));
  --qo-archive-chip-border: var(--qo-color-border-app-faint, rgba(255,255,255,0.10));
  --qo-archive-chip-text: var(--qo-color-text-app-high-muted, rgba(234,242,255,0.82));
  --qo-archive-label-bg: var(--qo-color-surface-glass-app-strong, rgba(255,255,255,0.08));
  --qo-archive-label-border: var(--qo-color-border-app-emphasis, rgba(255,255,255,0.16));
  --qo-archive-label-text: var(--qo-color-text-app, rgba(255,255,255,0.96));
  --qo-archive-title-text: var(--qo-color-text-app-high, rgba(234,242,255,0.95));
  --qo-archive-body-text: var(--qo-color-text-app-high-muted, rgba(234,242,255,0.82));
  --qo-archive-subtle-text: var(--qo-color-text-app-high-subtle, rgba(234,242,255,0.72));
}

/* Base layout guardrails */
.site-main.ika-quiz-archive {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* hard stop against theme overflow quirks */
}

.ika-quiz-archive .ika-quiz-hub {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: visible;
}

/* -------------------------------
   HERO (full-bleed with image)
-------------------------------- */
.ika-quiz-archive .ika-quiz-hero-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 320px;
  padding: 86px 0 64px;
  background-image: var(--quizops-quiz-hub-hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.ika-quiz-archive .ika-quiz-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  /* lighter hero overlay (closer to the legacy page) */
  background:
    linear-gradient(180deg, rgba(6, 11, 22, 0.34), rgba(6, 11, 22, 0.56)),
    radial-gradient(900px 520px at 50% 20%, rgba(98,169,242,0.10), transparent 60%);
  pointer-events: none;
}

.ika-quiz-archive .ika-quiz-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.ika-quiz-archive .ika-quiz-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--qo-archive-chip-text);
  margin-bottom: 10px;
}

.ika-quiz-archive .ika-quiz-hero__title {
  margin: 0 0 10px 0;
}

.ika-quiz-archive .ika-quiz-hero__title .elementor-heading-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.ika-quiz-archive .ika-quiz-hero__sub {
  display: block;
  max-width: 760px;
  margin: 10px auto 0;
  color: var(--qo-archive-chip-text);
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

.ika-quiz-archive .ika-quiz-hero__bullets {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  color: var(--qo-archive-chip-text);
  font-size: 13px;
}

/* Hero bullet accent (gold) + larger icons */
.ika-quiz-archive .ika-quiz-hero__bullets,
.ika-quiz-archive .ika-quiz-hero__bullet span {
  color: rgba(255, 211, 115, 0.95);
}

.ika-quiz-archive .ika-quiz-hero__icon {
  width: 22px;
  height: 22px;
  opacity: 0.95;
}

.ika-quiz-archive .ika-quiz-hero__icon img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Text-based icon (e.g., ✦) */
.ika-quiz-archive .ika-quiz-hero__icon {
  font-size: 18px;
  line-height: 1;
}

/* Emoji image icon (e.g., ⏱) */
.ika-quiz-archive .ika-quiz-hero__icon img {
  width: 22px;
  height: 22px;
  display: block;
}

.ika-quiz-archive .ika-quiz-hero__bullet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ika-quiz-archive .ika-quiz-hero__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

/* CTA slot in hero */
.ika-quiz-archive .ika-quiz-hub__continue-slot {
  margin: 22px auto 0;
  max-width: 560px;
}

.ika-quiz-archive .ika-quiz-continue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8, 16, 34, 0.62), rgba(6, 12, 26, 0.72));
  border: 1px solid var(--qo-archive-label-border);
  box-shadow: 0 18px 54px rgba(0,0,0,0.52);
  backdrop-filter: blur(12px);
}


.ika-quiz-archive .ika-quiz-continue-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--qo-archive-label-text);
  background: var(--qo-archive-label-bg);
  border: 1px solid var(--qo-archive-label-border);
}

.ika-quiz-archive .ika-quiz-continue-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  color: #0b1320;
  background: linear-gradient(180deg, rgba(255, 211, 115, 0.98), rgba(255, 183, 64, 0.96));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}


.ika-quiz-archive .ika-quiz-continue-link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.03);
}


/* -------------------------------
   BROWSE SECTION (panel)
-------------------------------- */
.ika-quiz-archive .ika-quiz-hub__inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 24px 56px !important;
  position: relative;
  overflow: hidden !important;
  border-radius: 26px;
  background: var(--qo-archive-panel-bg);
  border: 1px solid var(--qo-archive-panel-border);
  box-shadow: var(--qo-archive-panel-shadow);
}


.ika-quiz-archive .ika-quiz-browse-header {
  margin-top: -44px; /* pull up into the hero like the original */
  padding: 26px 0 18px;
}

.ika-quiz-archive .ika-quiz-browse-title {
  margin: 15px 0 8px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--qo-archive-title-text);
}

.ika-quiz-archive .ika-quiz-browse-subtitle {
  margin: 0;
  color: var(--qo-archive-subtle-text);
  font-size: 13px;
  line-height: 1.5;
}

/* -------------------------------
   Cards & chips match (legacy)
-------------------------------- */
.ika-quiz-archive .ika-quiz-card {
  position: relative; /* ensure status chips (::after) are anchored to the card, not the toolbar */
  background: var(--qo-archive-card-bg);
  border: 1px solid var(--qo-archive-card-border);
  box-shadow: var(--qo-archive-card-shadow);
}

.ika-quiz-archive .ika-quiz-card:hover {
  border-color: var(--qo-archive-card-border-strong);
  box-shadow: var(--qo-archive-card-shadow-hover);
}

/* Top meta pills should be left-aligned */
.ika-quiz-archive .ika-quiz-card .ika-quiz-card__meta,
.ika-quiz-archive .ika-quiz-card .ika-quiz-card__pills,
.ika-quiz-archive .ika-quiz-card .ika-quiz-card__chips {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Difficulty/topic pills (subtle) */
.ika-quiz-archive .ika-quiz-card .ika-pill,
.ika-quiz-archive .ika-quiz-card .ika-chip {
  background: var(--qo-archive-chip-bg);
  border: 1px solid var(--qo-archive-chip-border);
  color: var(--qo-archive-chip-text);
}

/* Status chips (match screenshot colors) */
.ika-quiz-archive .ika-quiz-card.is-complete::after,
.ika-quiz-archive .ika-quiz-card.is-started::after,
.ika-quiz-archive .ika-quiz-card.is-new::after {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  content: "";
}

.ika-quiz-archive .ika-quiz-card.is-complete::after {
  content: "COMPLETED";
  background: var(--ika-chip-complete-bg);
  border-color: var(--ika-chip-complete-border);
  color: var(--ika-chip-complete-text);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}

.ika-quiz-archive .ika-quiz-card.is-started::after {
  content: "IN PROGRESS";
  background: var(--ika-chip-progress-bg);
  border-color: var(--ika-chip-progress-border);
  color: var(--ika-chip-progress-text);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}

.ika-quiz-archive .ika-quiz-card.is-new::after {
  content: "NEW";
  background: var(--ika-chip-new-bg);
  border-color: var(--ika-chip-new-border);
  color: var(--ika-chip-new-text);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
}

/* Responsive */
@media (max-width: 767px) {
  .ika-quiz-archive .ika-quiz-hero-wrap {
    padding: 72px 0 54px;
    min-height: 320x;
  }

  .ika-quiz-archive .ika-quiz-hero__title .elementor-heading-title {
    font-size: 42px;
  }

  .ika-quiz-archive .ika-quiz-hero__bullets {
    gap: 14px;
    flex-wrap: wrap;
  }

  .ika-quiz-archive .ika-quiz-hub__inner,
  .ika-quiz-archive .ika-quiz-hero-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ika-quiz-archive .ika-quiz-browse-header {
    margin-top: -34px;
  }
}

/* ------------------------------------------------------------
   Phase C: Mobile toolbar spacing fixes (surgical)
   Goal: remove the big vertical gap under the search input and
         make controls stack cleanly on mobile.
------------------------------------------------------------ */
@media (max-width: 767px) {

  /* 1) Kill any accidental min-height / tall rows on the controls wrapper */
  .ika-quiz-archive :is(
    .ika-quiz-hub__controls,
    .ika-quiz-hub__toolbar,
    .ika-quiz-controls,
    .ika-quiz-toolbar,
    .ika-quiz-filters,
    .ika-quiz-filterbar
  ) {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 12px !important;
    gap: 12px !important;
  }

  /* 2) Force a clean, single-column stack for the mobile controls */
  .ika-quiz-archive :is(
    .ika-quiz-hub__controls,
    .ika-quiz-hub__toolbar,
    .ika-quiz-controls,
    .ika-quiz-toolbar,
    .ika-quiz-filters,
    .ika-quiz-filterbar
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 3) Make the button + sort dropdown full width (ONLY inside controls) */
  .ika-quiz-archive :is(
    .ika-quiz-hub__controls,
    .ika-quiz-hub__toolbar,
    .ika-quiz-controls,
    .ika-quiz-toolbar,
    .ika-quiz-filters,
    .ika-quiz-filterbar
  ) :is(button, input[type="submit"], .ika-btn, .ika-button, .button) {
    width: 100% !important;
    max-width: none !important;
  }

  .ika-quiz-archive :is(
    .ika-quiz-hub__controls,
    .ika-quiz-hub__toolbar,
    .ika-quiz-controls,
    .ika-quiz-toolbar,
    .ika-quiz-filters,
    .ika-quiz-filterbar
  ) :is(select, .ika-select) {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================
   Phase C: Quiz Hub toolbar/controls — mobile spacing + stacking
   Scope: .ika-quiz-archive only
============================================================ */

/* Base toolbar structure (safe defaults, helps override globals) */
.ika-quiz-archive .ika-quiz-hub__toolbar{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ika-quiz-archive .ika-quiz-hub__controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

/* Left side: search input + button */
.ika-quiz-archive .ika-quiz-hub__controls-left{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.ika-quiz-archive .ika-quiz-hub__search{
  flex: 1 1 auto;
  min-width: 0;
}

.ika-quiz-archive .ika-quiz-hub__search input[type="search"]{
  width: 100%;
}

/* Prevent mystery margins creating the “dead gap” */
.ika-quiz-archive .ika-quiz-hub__apply{
  margin: 0 !important;
  padding: 0 !important;
}

.ika-quiz-archive .ika-quiz-hub__go{
  margin: 0 !important;
  height: 44px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Right side: sort */
.ika-quiz-archive .ika-quiz-hub__controls-right{
  flex: 0 0 auto;
}

/* ---------------- Mobile: stack everything tightly ---------------- */
@media (max-width: 767px){

  .ika-quiz-archive .ika-quiz-hub__controls{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ika-quiz-archive .ika-quiz-hub__controls-left{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ika-quiz-archive .ika-quiz-hub__go{
    width: 100%;
  }

  .ika-quiz-archive .ika-quiz-hub__sort select{
    width: 100%;
  }
}

/* ============================================================
   Phase C: Mobile polish (tracks NEW badge, sort spacing, hero gap)
   Scope: .ika-quiz-archive only
============================================================ */
@media (max-width: 767px){

  /* (3) Give "Browse Quizzes" more separation from the hero */
  .ika-quiz-archive .ika-quiz-browse-header{
    padding-top: 34px !important; /* add breathing room */
  }

  /* (1) If a "NEW" badge is injected via ::after on tracks, hide it on mobile
         (prevents overlap on the last track pill) */
  .ika-quiz-archive .ika-quiz-hub__tracks::after{
    display: none !important;
    content: none !important;
  }

  /* (2) Center the sort dropdown and add space before the card grid */
  .ika-quiz-archive .ika-quiz-hub__controls-right{
    display: flex !important;
    justify-content: center !important;
  }

  .ika-quiz-archive .ika-quiz-hub__sort{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .ika-quiz-archive .ika-quiz-hub__sort select{
    width: 100% !important;
    max-width: 420px !important;  /* keeps it from feeling too wide */
    margin: 0 auto !important;
    text-align: left;
  }

  /* Add spacing between dropdown and first quiz card */
  .ika-quiz-archive .ika-quiz-hub__toolbar{
    padding-bottom: 18px !important;
  }
}

@media (max-width: 767px){
  .ika-quiz-archive .ika-quiz-hub__tracks{
    gap: 10px !important;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Phase C: Remove the injected global "NEW" pill (all breakpoints)
   Scope: .ika-quiz-archive only
   Note: Not in HTML, so it must be a ::before/::after from another stylesheet.
============================================================ */
.ika-quiz-archive .ika-quiz-hub__tracks::before,
.ika-quiz-archive .ika-quiz-hub__tracks::after,
.ika-quiz-archive .ika-quiz-hub__toolbar::before,
.ika-quiz-archive .ika-quiz-hub__toolbar::after{
  content: none !important;
  display: none !important;
}

/* ============================================================
   Phase C: Prevent quiz-card status chips from overlapping toolbar
   Cause: grid sits too tight + toolbar not above in stacking order
   Scope: .ika-quiz-archive only
============================================================ */

/* Ensure the toolbar (tracks + controls) always sits above the grid */
.ika-quiz-archive .ika-quiz-hub__toolbar{
  position: relative;
  z-index: 10;
  padding-bottom: 14px; /* breathing room before first card */
}

/* Add a small top margin so the first card (and its NEW chip) never touches the toolbar */
.ika-quiz-archive .ika-quiz-hub__grid{
  margin-top: 10px;
}

/* ============================================================
   Quiz Hub: prevent first card status chip from reading like a "tracks" badge
   Keep card chips; add separation + correct stacking.
   Scope: .ika-quiz-archive only
============================================================ */

/* Toolbar should always sit above cards */
.ika-quiz-archive .ika-quiz-hub__toolbar{
  position: relative !important;
  z-index: 5 !important;
  padding-bottom: 14px !important; /* creates a buffer above first card */
}

/* Grid should start a bit lower (all breakpoints) */
.ika-quiz-archive .ika-quiz-hub__grid{
  margin-top: 12px !important;
}

/* Mobile needs a touch more buffer because everything stacks tightly */
@media (max-width: 767px){
  .ika-quiz-archive .ika-quiz-hub__grid{
    margin-top: 16px !important;
  }
}

/* ==========================================================================
   Phase C – Dark Hub Polish Pass (keeps dark background; improves depth)
   NOTE: Safe, additive overrides. Scoped to quiz archive only.
   ========================================================================== */

/* Page background: richer dark with subtle top glow (product feel) */
body.post-type-archive-quiz,
body.archive.post-type-archive-quiz {
  background: radial-gradient(1200px 600px at 50% -120px, rgba(98,169,242,0.18), rgba(98,169,242,0) 60%),
              linear-gradient(180deg, #0b1f33 0%, #081426 100%) !important;
}

/* Keep the archive content centered and breathing (matches results “stage”) */
.ika-quiz-archive .ika-quiz-hub__inner {
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--qo-archive-shell-border);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}

/* Primary dark panel: higher-quality surface + consistent radius */
.ika-quiz-archive .ika-quiz-hub__panel {
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(12,32,58,0.88) 0%, rgba(8,18,34,0.92) 100%) !important;
  position: relative;
}

/* Subtle inner vignette (adds depth; prevents “flat slab” look) */
.ika-quiz-archive .ika-quiz-hub__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,211,115,0.07), rgba(255,211,115,0) 55%),
              radial-gradient(1200px 700px at 50% 110%, rgba(98,169,242,0.10), rgba(98,169,242,0) 60%);
  opacity: 1;
}

/* Hero stage: rounded + clipped like the results page (premium frame) */
.ika-quiz-archive .ika-quiz-hero-wrap {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
  border: 1px solid var(--qo-archive-shell-border);
}

/* Toolbar + grid: gentle separation (but keep your current layout intact) */
.ika-quiz-archive .ika-quiz-hub__toolbar {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ika-quiz-archive .ika-quiz-grid {
  padding-bottom: 22px;
}

/* Cards: slightly richer surface and consistent outline (closer to legacy hub) */
.ika-quiz-archive a.ika-quiz-card {
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 26px rgba(0,0,0,0.40);
}

/* Card hover: cleaner lift without harsh glow */
.ika-quiz-archive a.ika-quiz-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.50);
}

/* Status chip: crisp text + subtle depth (no layout changes) */
.ika-quiz-archive a.ika-quiz-card::after {
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  letter-spacing: 0.08em;
}

/* Pagination: match the dark UI tone a bit more */
.ika-quiz-archive .ika-quiz-pagination a,
.ika-quiz-archive .ika-quiz-pagination button {
  border: 1px solid var(--qo-archive-chip-border);
  background: rgba(10,20,34,0.55);
}


/* =========================================================
   Rounded Corners Restore (v2)
   Goal: make the Browse content "stage" corners clearly visible,
   matching the Quiz Results page feel, without changing layout.
   ========================================================= */

/* Ensure the archive wrapper doesn't paint a flat/black bg that hides rounding */
.ika-quiz-archive{
  background: transparent !important;
}

/* Make the stage feel like a true card on the dark page */
.ika-quiz-archive .ika-quiz-hub__inner{
  border-radius: 32px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.94) 0%, rgba(9, 16, 30, 0.94) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset !important;
}

/* Prevent inner sections from visually "squaring off" the rounded edges */
.ika-quiz-archive .ika-quiz-hub,
.ika-quiz-archive .ika-quiz-hub__toolbar,
.ika-quiz-archive .ika-quiz-grid{
  background: transparent !important;
}

/* Optional: a subtle vignette like results page, contained within rounding */
.ika-quiz-archive .ika-quiz-hub__inner::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 420px at 50% 0%, rgba(98,169,242,0.10), rgba(98,169,242,0) 60%);
  opacity: 0.9;
}


/* ==========================================================================
   Phase C polish fix: Rounded outer shell MUST include Hero + Browse panel
   (apply radius/overflow to the SECTION that wraps both)
   ========================================================================== */
.ika-quiz-archive .ika-quiz-hub{
  /* unify hero + browse into one rounded container like results page */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  border-radius: 26px;
  overflow: hidden;

  /* keep the dark shell feel even if inner is transparent */
  background: var(--qo-archive-shell-bg);
  border: 1px solid var(--qo-archive-shell-border);
  box-shadow: var(--qo-archive-shell-shadow);
}

/* inner panel should not be the clipping box anymore (avoid “double rounding”) */
.ika-quiz-archive .ika-quiz-hub__inner{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* keep the browse panel rounding subtle INSIDE the shell (optional, safe) */
.ika-quiz-archive .ika-quiz-hub__panel{
  border-radius: 20px;
}

/* ensure the hero image respects the new outer radius */
.ika-quiz-archive .ika-quiz-hero-wrap{
  border-radius: 0; /* outer shell handles rounding */
}

/* mobile: keep same unified shell width/padding */
@media (max-width: 768px){
  .ika-quiz-archive .ika-quiz-hub{
    max-width: calc(100% - 24px);
  }
}



/* ==========================================================================
   Rounded Shell (includes HERO) — Dark Theme Container
   NOTE: The hero was previously full-bleed (100vw with negative margins).
         For a unified rounded container like the Results page, we keep the hero
         INSIDE the shell on the archive page.
   ========================================================================== */
.site-main.ika-quiz-archive{
  background: linear-gradient(180deg, rgba(9,18,33,1) 0%, rgba(7,14,26,1) 100%);
}

/* Unified shell that wraps hero + browse */
.ika-quiz-archive .ika-quiz-hub{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  border-radius: 26px !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, rgba(10,18,34,0.92) 0%, rgba(7,14,26,0.96) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.45) !important;
}

/* Keep hero inside the shell (override prior full-bleed rules) */
.ika-quiz-archive .ika-quiz-hero-wrap{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  border-radius: 0 !important; /* shell provides rounding */
}

/* Inner should not try to be the clipping/rounded container anymore */
.ika-quiz-archive .ika-quiz-hub__inner{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Mobile: keep the shell inset from edges */
@media (max-width: 768px){
  .ika-quiz-archive .ika-quiz-hub{
    max-width: calc(100% - 24px) !important;
  }
}

/* =========================================================
   TRUE FIX: Remove shell padding so hero can go edge-to-edge
   ========================================================= */

/* Remove horizontal padding from the rounded shell */
.ika-quiz-archive section.ika-quiz-hub {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Add padding back ONLY to the browse content below hero */
.ika-quiz-archive .ika-quiz-hub__inner {
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-bottom: 32px !important;
}

/* Ensure hero truly fills shell */
.ika-quiz-archive .ika-quiz-hero-wrap {
  width: 100% !important;
  margin: 0 !important;
}

/* =========================================================
   UX Alignment Pass 2.5 — Quiz Hub shell rhythm
   Scope: .ika-quiz-archive only
   Goal: normalize hero → browse-panel → toolbar → grid spacing.
   ========================================================= */
.ika-quiz-archive .ika-quiz-hero-wrap{
  padding-top: 82px !important;
  padding-bottom: 58px !important;
}

.ika-quiz-archive .ika-quiz-hub__continue-slot{
  margin-top: 18px !important;
}

.ika-quiz-archive .ika-quiz-hub__inner{
  padding-top: 28px !important;
  padding-bottom: 40px !important;
}

.ika-quiz-archive .ika-quiz-browse-header{
  margin-top: -34px !important;
  padding: 22px 0 14px !important;
}

.ika-quiz-archive .ika-quiz-browse-title{
  margin: 0 0 8px 0 !important;
  line-height: 1.12;
}

.ika-quiz-archive .ika-quiz-browse-subtitle{
  max-width: 760px;
}

.ika-quiz-archive .ika-quiz-hub__toolbar{
  margin-top: 2px;
  padding-top: 6px;
  padding-bottom: 16px !important;
}

.ika-quiz-archive .ika-quiz-hub__grid,
.ika-quiz-archive .ika-quiz-grid{
  margin-top: 14px !important;
}

@media (max-width: 767px){
  .ika-quiz-archive .ika-quiz-hero-wrap{
    padding-top: 68px !important;
    padding-bottom: 46px !important;
  }

  .ika-quiz-archive .ika-quiz-hub__inner{
    padding-top: 22px !important;
    padding-bottom: 28px !important;
  }

  .ika-quiz-archive .ika-quiz-browse-header{
    margin-top: -24px !important;
    padding: 18px 0 12px !important;
  }

  .ika-quiz-archive .ika-quiz-hub__toolbar{
    padding-top: 2px;
    padding-bottom: 14px !important;
  }

  .ika-quiz-archive .ika-quiz-hub__grid,
  .ika-quiz-archive .ika-quiz-grid{
    margin-top: 12px !important;
  }
}


/* =========================================================
   UX Alignment Pass 2.6 — Quiz Hub typography finish
   Scope: .ika-quiz-archive only
   Goal: tighten hero/browse heading hierarchy without changing layout.
   ========================================================= */
.ika-quiz-archive .ika-quiz-hero__eyebrow{
  font-size:13px;
  letter-spacing:0.16em;
  font-weight:700;
  color:rgba(234,242,255,0.84);
}

.ika-quiz-archive .ika-quiz-hero__title .elementor-heading-title{
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.04;
  letter-spacing:-0.022em;
}

.ika-quiz-archive .ika-quiz-hero__sub{
  font-size:16px;
  line-height:1.62;
  color:rgba(234,242,255,0.86);
  max-width:68ch;
}

.ika-quiz-archive .ika-quiz-browse-title{
  font-size:clamp(22px, 2.2vw, 26px);
  line-height:1.14;
  letter-spacing:-0.016em;
}

.ika-quiz-archive .ika-quiz-browse-subtitle{
  font-size:14px;
  line-height:1.58;
  color:rgba(234,242,255,0.76);
  max-width:68ch;
}

@media (max-width: 767px){
  .ika-quiz-archive .ika-quiz-hero__sub{
    font-size:15px;
    line-height:1.58;
  }

  .ika-quiz-archive .ika-quiz-browse-subtitle{
    font-size:13px;
    line-height:1.56;
  }
}

/* ========================================================================== 
   PA-41L: Elementor-free product rail containment
   Keep the native quiz archive aligned with the product header/footer rail when
   Elementor no longer contributes wrapper sizing.
   ========================================================================== */
body.post-type-archive-quiz,
body.ika-flightdeck-family {
  --ika-product-rail-max: var(--ika-nav-max-product, 1440px);
  --ika-product-rail-width: min(calc(100% - 32px), var(--ika-product-rail-max));
}

body.post-type-archive-quiz main#primary.site-main,
body.post-type-archive-quiz .site-main.ika-quiz-archive,
body.ika-flightdeck-family main#primary.site-main.ika-quiz-archive,
body.ika-flightdeck-family .site-main.ika-quiz-archive {
  width: var(--ika-product-rail-width) !important;
  max-width: var(--ika-product-rail-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.post-type-archive-quiz .ika-quiz-archive .ika-quiz-hub,
body.ika-flightdeck-family .ika-quiz-archive .ika-quiz-hub {
  width: 100% !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  body.post-type-archive-quiz,
  body.ika-flightdeck-family {
    --ika-product-rail-width: min(calc(100% - 24px), var(--ika-product-rail-max));
  }
}

/* ==========================================================================
   PA-42: Elementor-free Quiz Hub rail, typography, and hover guardrails

   Keep the archive shell inside the shared product rail and prevent parent
   theme hover/button defaults from leaking red or browser-default styles into
   the dark QuizOps surface.
   ========================================================================== */
body.post-type-archive-quiz {
  --ika-product-rail-max: var(--ika-nav-max-product, 1440px);
  --ika-product-rail-width: min(calc(100% - 32px), var(--ika-product-rail-max));
}

body.post-type-archive-quiz main#primary.site-main.ika-quiz-archive,
body.post-type-archive-quiz .site-main.ika-quiz-archive {
  width: var(--ika-product-rail-width) !important;
  max-width: var(--ika-product-rail-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.post-type-archive-quiz .ika-quiz-archive .ika-quiz-hub {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.post-type-archive-quiz .ika-quiz-archive,
body.post-type-archive-quiz .ika-quiz-hub,
body.post-type-archive-quiz .ika-quiz-hub p,
body.post-type-archive-quiz .ika-quiz-card,
body.post-type-archive-quiz .ika-quiz-card__meta,
body.post-type-archive-quiz .ika-quiz-card__score,
body.post-type-archive-quiz .ika-quiz-hero__sub,
body.post-type-archive-quiz .ika-quiz-browse-subtitle {
  font-family: var(--ika-font-body, "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}

body.post-type-archive-quiz .ika-quiz-archive h1,
body.post-type-archive-quiz .ika-quiz-archive h2,
body.post-type-archive-quiz .ika-quiz-archive h3,
body.post-type-archive-quiz .ika-quiz-hero__eyebrow,
body.post-type-archive-quiz .ika-quiz-hero__bullet,
body.post-type-archive-quiz .ika-quiz-card__title,
body.post-type-archive-quiz .ika-quiz-card__cta,
body.post-type-archive-quiz .ika-pill,
body.post-type-archive-quiz .ika-quiz-hub__track,
body.post-type-archive-quiz .ika-quiz-hub__go,
body.post-type-archive-quiz .ika-qh-apply,
body.post-type-archive-quiz .ika-quiz-hub button,
body.post-type-archive-quiz .ika-quiz-hub select,
body.post-type-archive-quiz .ika-quiz-hub input {
  font-family: var(--ika-font-control, "Montserrat", "Open Sans", system-ui, sans-serif) !important;
}

body.post-type-archive-quiz .ika-quiz-archive a:hover,
body.post-type-archive-quiz .ika-quiz-hub a:hover {
  color: var(--qo-single-shell-link-hover, #ffd373) !important;
}

body.post-type-archive-quiz .ika-quiz-hub button:hover,
body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-hub__go:hover,
body.post-type-archive-quiz .ika-quiz-hub .ika-qh-apply:hover {
  color: rgba(255,255,255,0.96) !important;
}

body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-card__cta:hover,
body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-card:hover .ika-quiz-card__cta {
  color: #8fc3ff !important;
}

body.post-type-archive-quiz .ika-quiz-hub input,
body.post-type-archive-quiz .ika-quiz-hub select,
body.post-type-archive-quiz .ika-quiz-hub button {
  font-size: 14px;
  line-height: 1.25;
}

@media (max-width: 767px) {
  body.post-type-archive-quiz {
    --ika-product-rail-width: min(calc(100% - 24px), var(--ika-product-rail-max));
  }
}

/* ========================================================================== 
   PA-42B: Quiz Hub contained outer shell + card title color/weight
   Scope: /quizzes/ archive only.

   Elementor-free cleanup: the main archive wrapper was still painting a near
   full-width dark rounded panel. Keep the dark product look, but move the
   visible shell to the existing contained Quiz Hub container.
   ========================================================================== */
body.post-type-archive-quiz main#primary.site-main.ika-quiz-archive,
body.post-type-archive-quiz .site-main.ika-quiz-archive {
  width: min(calc(100% - 32px), 1200px) !important;
  max-width: 1200px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.post-type-archive-quiz .ika-quiz-archive .ika-quiz-hub {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: linear-gradient(180deg, rgba(10,18,34,0.94) 0%, rgba(7,14,26,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.45) !important;
  overflow: hidden !important;
}

body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-card,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:visited {
  color: rgba(234,242,255,0.84) !important;
  text-decoration: none !important;
}

body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-card__title,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card .ika-quiz-card__title,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:visited .ika-quiz-card__title {
  color: rgba(234,242,255,0.96) !important;
  font-family: var(--ika-font-control, "Montserrat", "Open Sans", system-ui, sans-serif) !important;
  font-size: clamp(17px, 1.15vw, 19px) !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.012em !important;
}

body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:hover,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:focus-visible {
  color: rgba(234,242,255,0.9) !important;
}

body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:hover .ika-quiz-card__title,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:focus-visible .ika-quiz-card__title {
  color: #ffffff !important;
}

body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:hover .ika-quiz-card__cta,
body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card:focus-visible .ika-quiz-card__cta {
  color: #8fc3ff !important;
}

@media (max-width: 767px) {
  body.post-type-archive-quiz main#primary.site-main.ika-quiz-archive,
  body.post-type-archive-quiz .site-main.ika-quiz-archive {
    width: min(calc(100% - 24px), 1200px) !important;
  }

  body.post-type-archive-quiz .ika-quiz-hub .ika-quiz-card__title,
  body.post-type-archive-quiz .ika-quiz-hub a.ika-quiz-card .ika-quiz-card__title {
    font-size: 17px !important;
  }
}