/*
 * public/assets/css/home.css
 *
 * Stage 45A — Public Website & Homepage Architecture Restoration (original).
 * Stage 60A — Public Homepage Modernization (Stitch Integration).
 *
 * Dedicated stylesheet for the public Homepage (app/views/layouts/public.php
 * and app/views/home/index.php). Adapts the visual language of the uploaded
 * Stitch reference (stitch_main_page/code.html, "Aura Rail Prep" — generous
 * whitespace, quiet 1px borders instead of heavy boxes, icon-chip cards,
 * a calm navy/blue institutional palette) into MCQMaster's OWN, already
 * centralized Theme Architecture.
 *
 * Every colour, radius, shadow, spacing and font below is a var(--mcq-*)
 * Design Token, injected into <head> by
 * \App\Services\Theme\ThemeService::renderCssVariables() — the exact same
 * source every other layout (admin.php, main.php, auth.php) already reads
 * from. No second styling system, no hardcoded colours, no new font.
 * Local custom properties in :root below are aliases only, same convention
 * already used by auth.css and dashboard.css.
 */

:root {
    --mcq-home-bg:            var(--mcq-color-background, #f8fafc);
    --mcq-home-surface:       var(--mcq-color-surface, #ffffff);
    --mcq-home-surface-alt:   var(--mcq-color-surface-alt, #f1f5f9);
    --mcq-home-border:        var(--mcq-color-border, #e2e8f0);
    --mcq-home-text:          var(--mcq-color-text, #1e293b);
    --mcq-home-primary:       var(--mcq-color-primary, #0F3D5C);
    --mcq-home-secondary:     var(--mcq-color-secondary, #5b6472);
    --mcq-home-success:       var(--mcq-color-success, #1E7A4C);
    --mcq-home-info:          var(--mcq-color-info, #1B6FA8);
    --mcq-home-warning:       var(--mcq-color-warning, #C17A2C);
    --mcq-home-radius:        var(--mcq-radius-lg, 1rem);
    --mcq-home-radius-sm:     var(--mcq-radius-sm, 0.375rem);
    --mcq-home-radius-pill:   var(--mcq-radius-pill, 999px);
    --mcq-home-shadow:        var(--mcq-shadow-card, 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06));
    --mcq-home-shadow-hover:  var(--mcq-shadow-hover, 0 10px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04));
    --mcq-home-gutter:        var(--mcq-spacing-gutter, 1.5rem);
    --mcq-home-section-space: var(--mcq-spacing-section, 1.5rem);
    --mcq-home-font-heading:  var(--mcq-font-heading, 'Inter', sans-serif);
    --mcq-home-font-body:     var(--mcq-font-body, 'Inter', sans-serif);
    --mcq-home-motion:        var(--mcq-motion-base, 200ms ease);

    /* Stage 61A — Stitch "ProTrack Railway" redesign merge. Purely additive
       aliases on top of the same --mcq-* tokens above (still the single
       source of truth from ThemeService::renderCssVariables()) — no second
       styling system, no new hardcoded colours. --mcq-home-radius-xl gives
       the bigger 2xl/2rem rounding the reference uses for hero media/CTA
       banners; the four --mcq-home-tint-* are just the existing
       primary/success/info/warning tokens pre-mixed to pastel-card strength
       (~16%) and a stronger 45% mix for left-border accents, reused by the
       chip/feature/dept cards below instead of each rule re-deriving them. */
    --mcq-home-radius-xl: calc(var(--mcq-home-radius) * 2);

    /* Stage 62A — Homepage Card Accent redesign. The four rotating card
       tints below now read their BACKGROUND straight from the dedicated,
       Super-Admin-customisable --mcq-color-card-accent-1..4 tokens (Theme
       Manager → "Homepage Card Background Colours") instead of mixing the
       sitewide primary/success/info/warning brand colours to pastel
       strength. This intentionally decouples "what colour are the homepage
       cards" from "what colour are buttons/links/status badges" — the two
       were visually identical before Stage 62A only by coincidence of both
       deriving from the same four theme colours. The left-border accent is
       still derived (darkened ~14% toward black) FROM that same card
       colour, so background and border always stay visually paired no
       matter what an admin picks — matching the Stitch reference's own
       bg/border pairing (e.g. peach card + slightly deeper peach border).
       Names (tint-primary/-success/-info/-warning) are kept as-is so no
       markup class or PHP tint-rotation array needed to change. */
    --mcq-home-tint-primary-bg:     var(--mcq-color-card-accent-1, #FFDFBA);
    --mcq-home-tint-primary-border: color-mix(in srgb, var(--mcq-home-tint-primary-bg) 86%, #000 14%);
    --mcq-home-tint-success-bg:     var(--mcq-color-card-accent-2, #FFFFBA);
    --mcq-home-tint-success-border: color-mix(in srgb, var(--mcq-home-tint-success-bg) 86%, #000 14%);
    --mcq-home-tint-info-bg:        var(--mcq-color-card-accent-3, #BAFFC9);
    --mcq-home-tint-info-border:    color-mix(in srgb, var(--mcq-home-tint-info-bg) 86%, #000 14%);
    --mcq-home-tint-warning-bg:     var(--mcq-color-card-accent-4, #BAE1FF);
    --mcq-home-tint-warning-border: color-mix(in srgb, var(--mcq-home-tint-warning-bg) 86%, #000 14%);
}

body.mcq-public-page {
    background-color: var(--mcq-home-bg);
    color: var(--mcq-home-text);
    font-family: var(--mcq-home-font-body);
    min-height: 100vh;
}

.mcq-public-page h1,
.mcq-public-page h2,
.mcq-public-page h3,
.mcq-public-page h4 {
    font-family: var(--mcq-home-font-heading);
    color: var(--mcq-home-text);
}

.mcq-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--mcq-home-primary);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0 0 var(--mcq-home-radius-sm) 0;
}
.mcq-skip-link:focus {
    left: 0;
}

/* Visible focus ring for keyboard navigation (nav links, footer links, CTAs) */
.mcq-public-page a:focus-visible,
.mcq-public-page button:focus-visible,
.mcq-public-page [tabindex]:focus-visible {
    outline: 2px solid var(--mcq-home-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Theme-driven primary/outline buttons — same convention as auth.css'
   .mcq-auth-shell .btn-primary override, scoped to the public homepage so
   Bootstrap's default blue never appears instead of the active Theme's
   primary colour. */
.mcq-public-page .mcq-home-btn-primary.btn-primary {
    background-color: var(--mcq-home-primary);
    border-color: var(--mcq-home-primary);
}
.mcq-public-page .mcq-home-btn-primary.btn-primary:hover,
.mcq-public-page .mcq-home-btn-primary.btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--mcq-home-primary) 88%, #000);
    border-color: color-mix(in srgb, var(--mcq-home-primary) 88%, #000);
}
.mcq-public-page .mcq-home-btn-outline.btn-outline-primary {
    color: var(--mcq-home-primary);
    border-color: var(--mcq-home-primary);
    background-color: transparent;
}
.mcq-public-page .mcq-home-btn-outline.btn-outline-primary:hover,
.mcq-public-page .mcq-home-btn-outline.btn-outline-primary:focus-visible {
    background-color: color-mix(in srgb, var(--mcq-home-primary) 8%, transparent);
    color: var(--mcq-home-primary);
}
.mcq-public-page .btn {
    border-radius: var(--mcq-home-radius-sm);
    font-weight: 600;
    transition: transform var(--mcq-home-motion), box-shadow var(--mcq-home-motion), background-color var(--mcq-home-motion);
}

/* --- Nav bar --------------------------------------------------------------
   Stage 60A: sticky top bar, quiet border instead of a heavy shadow —
   matches the Stitch reference's header while staying on --mcq-* tokens. */
.mcq-public-navbar {
    /* Stage 61A — Stitch reference's soft tinted-to-white header gradient,
       built from the same primary token instead of a hardcoded blue. */
    background: linear-gradient(to right, color-mix(in srgb, var(--mcq-home-primary) 12%, var(--mcq-home-surface)), var(--mcq-home-surface));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mcq-home-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.mcq-public-navbar-inner {
    min-height: 64px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mcq-public-brand-name { font-weight: 700; letter-spacing: -0.01em; color: var(--mcq-home-text); }
.mcq-public-brand-icon { font-size: 1.4rem; color: var(--mcq-home-primary); }
.mcq-public-logo { height: 36px; width: auto; }

.mcq-public-nav-toggle {
    border: 1px solid var(--mcq-home-border);
    background: var(--mcq-home-surface);
    border-radius: var(--mcq-home-radius-sm);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    color: var(--mcq-home-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mcq-public-nav-links a {
    color: var(--mcq-home-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.4rem 0;
}
.mcq-public-nav-links a:hover,
.mcq-public-nav-links a:focus-visible {
    color: var(--mcq-home-primary);
}

@media (max-width: 991.98px) {
    .mcq-public-nav-collapse {
        border-top: 1px solid var(--mcq-home-border);
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }
}

/* --- Hero -----------------------------------------------------------------
   Stage 60B: two-column hero (copy left / illustration right), matching the
   Stitch reference's exact structure — "Learn · Practice · Improve ·
   Succeed" step row, primary CTA + secondary store badges, media column
   hidden below lg (same as Stitch's `hidden lg:block`). Still 100%
   var(--mcq-*) tokens, no hardcoded colours. */
.mcq-home-hero {
    background-color: var(--mcq-home-surface);
    padding: calc(var(--mcq-home-gutter) * 2.75) 0 calc(var(--mcq-home-gutter) * 2.5);
    overflow: hidden;
}

.mcq-home-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--mcq-home-gutter) * 2);
    align-items: center;
}
@media (min-width: 992px) {
    .mcq-home-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--mcq-home-gutter) * 3); }
}

.mcq-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: var(--mcq-label-letter-spacing, 0.05em);
    text-transform: uppercase;
    color: var(--mcq-home-primary);
    background-color: color-mix(in srgb, var(--mcq-home-primary) 8%, transparent);
    border-radius: var(--mcq-home-radius-pill);
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
}
.mcq-home-eyebrow-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--mcq-home-secondary);
    animation: mcqHomePulse 2s ease-in-out infinite;
}
@keyframes mcqHomePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.mcq-home-hero-title {
    font-size: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
}
.mcq-home-hero-title em {
    font-style: normal;
    color: var(--mcq-home-secondary);
}

/* "Learn · Practice · Improve · Succeed" step row — presentational only
   (no Homepage Builder field backs this copy, same as Stitch's own static
   row); the chevrons use the theme primary colour, labels use secondary. */
.mcq-home-hero-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin-bottom: 1.5rem;
    color: var(--mcq-home-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}
.mcq-home-hero-step { display: inline-flex; align-items: center; gap: 0.35rem; }
.mcq-home-hero-step i { color: var(--mcq-home-primary); font-size: 0.8rem; }

.mcq-home-hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mcq-home-secondary);
    margin-bottom: 2rem;
}

.mcq-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
}
.mcq-home-hero-actions .btn { padding: 0.85rem 1.9rem; border-radius: var(--mcq-home-radius); }

.mcq-home-hero-badges { display: flex; gap: 0.6rem; }
.mcq-home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--mcq-home-border);
    border-radius: var(--mcq-home-radius-sm);
    color: var(--mcq-home-text);
    background-color: var(--mcq-home-surface);
    font-size: 0.75rem;
    line-height: 1.15;
    text-decoration: none;
    transition: border-color var(--mcq-home-motion), transform var(--mcq-home-motion);
}
.mcq-home-hero-badge:hover { border-color: var(--mcq-home-primary); transform: translateY(-1px); color: var(--mcq-home-text); }
.mcq-home-hero-badge i { font-size: 1.3rem; color: var(--mcq-home-primary); }
.mcq-home-hero-badge-text { display: flex; flex-direction: column; }
.mcq-home-hero-badge-text small { font-size: 0.62rem; color: var(--mcq-home-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.mcq-home-hero-badge-text span { font-weight: 700; }

.mcq-home-hero-media {
    display: none;
    position: relative;
}
@media (min-width: 992px) {
    .mcq-home-hero-media { display: block; }
}
.mcq-home-hero-media svg { width: 100%; height: auto; display: block; }

/* --- Stats (Stage 60C — card layout, replacing the earlier divided strip) -
   Each counter (Students / Questions / Tests) sits in its own bordered,
   shadowed card with an icon chip, matching the visual language already
   established by .mcq-home-chip-card / .mcq-home-feature-card elsewhere on
   this page — same tokens, same hover-lift convention. */
.mcq-home-stats-bar {
    /* Stage 61A — Stitch reference floats these as cards overlapping the
       hero's bottom edge instead of a bordered full-width strip. */
    position: relative;
    z-index: 5;
    margin-top: calc(var(--mcq-home-gutter) * -2.25);
    padding-bottom: calc(var(--mcq-home-gutter) * 0.5);
}
@media (max-width: 767.98px) {
    .mcq-home-stats-bar { margin-top: calc(var(--mcq-home-gutter) * -1); }
}
.mcq-home-stat-card {
    background-color: var(--mcq-home-surface);
    border: 1px solid var(--mcq-home-border);
    border-radius: var(--mcq-home-radius-xl);
    box-shadow: var(--mcq-home-shadow);
    padding: calc(var(--mcq-home-gutter) * 1.1) 1rem;
    height: 100%;
    text-align: center;
    transition: border-color var(--mcq-home-motion), transform var(--mcq-home-motion), box-shadow var(--mcq-home-motion);
}
.mcq-home-stat-card:hover {
    border-color: var(--mcq-home-primary);
    box-shadow: var(--mcq-home-shadow-hover);
    transform: translateY(-2px);
}
.mcq-home-stat-card .mcq-home-chip-icon { margin: 0 auto 0.85rem; }
.mcq-home-stat-value {
    font-family: var(--mcq-home-font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--mcq-home-text);
    line-height: 1.2;
}
.mcq-home-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--mcq-label-letter-spacing, 0.05em);
    text-transform: uppercase;
    color: var(--mcq-home-secondary);
}

/* --- Section shell -------------------------------------------------------- */
.mcq-home-section { padding: calc(var(--mcq-home-gutter) * 2.25) 0; }
.mcq-home-section-alt { background-color: var(--mcq-home-surface-alt); }

.mcq-home-section-head { margin-bottom: calc(var(--mcq-home-gutter) * 1.5); }
.mcq-home-section-head h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}
/* Stage 61A — optional divider + accent rule under section heads, matching
   the Stitch reference's border-bottom / accent-bar section headers.
   Opt-in via an extra class so existing section heads keep their current
   look unless a section explicitly asks for it. */
.mcq-home-section-head--rule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: calc(var(--mcq-home-gutter) * 0.75);
    border-bottom: 1px solid var(--mcq-home-border);
}
.mcq-home-section-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mcq-home-secondary);
    margin-bottom: 0.5rem;
}
.mcq-home-section-head-bar {
    width: 4rem;
    height: 0.25rem;
    border-radius: var(--mcq-home-radius-pill);
    background-color: var(--mcq-home-secondary);
    flex-shrink: 0;
}

/* --- Slider --------------------------------------------------------------- */
.mcq-home-slider .mcq-home-slide img {
    border-radius: var(--mcq-home-radius);
    width: 100%;
    object-fit: cover;
    max-height: 420px;
}
.mcq-home-slide-caption { padding-top: 1rem; }
.mcq-home-slider-dots { position: relative; margin-top: 0.75rem; bottom: auto; }
.mcq-home-slider-dots [data-bs-target] {
    background-color: var(--mcq-home-primary);
}

/* --- Chip cards (Departments / Exams) — icon chip + label, quiet border,
       hover lift to primary, no heavy box shadow at rest. -------------- */
.mcq-home-chip-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background-color: var(--mcq-home-surface);
    border: 1px solid var(--mcq-home-border);
    border-left: 4px solid var(--mcq-home-border);
    border-radius: var(--mcq-home-radius);
    padding: 1.1rem 1.25rem;
    height: 100%;
    box-shadow: var(--mcq-home-shadow);
    transition: border-color var(--mcq-home-motion), background-color var(--mcq-home-motion), box-shadow var(--mcq-home-motion), transform var(--mcq-home-motion);
}
.mcq-home-chip-card:hover {
    box-shadow: var(--mcq-home-shadow-hover);
    transform: translateY(-2px);
}
.mcq-home-chip-label { font-weight: 700; font-size: 0.95rem; color: var(--mcq-home-text); }
.mcq-home-chip-desc { display: block; font-size: 0.8rem; font-weight: 400; color: var(--mcq-home-secondary); margin-top: 0.15rem; }

/* Stage 61A — Stitch reference tints the whole card (pastel background +
   coloured left border), not just the icon chip. Reuses the same
   --mcq-home-tint-* aliases the icon chips already sit on. */
.mcq-home-chip-card--primary { background-color: var(--mcq-home-tint-primary-bg); border-left-color: var(--mcq-home-tint-primary-border); }
.mcq-home-chip-card--success { background-color: var(--mcq-home-tint-success-bg); border-left-color: var(--mcq-home-tint-success-border); }
.mcq-home-chip-card--info    { background-color: var(--mcq-home-tint-info-bg);    border-left-color: var(--mcq-home-tint-info-border); }
.mcq-home-chip-card--warning { background-color: var(--mcq-home-tint-warning-bg); border-left-color: var(--mcq-home-tint-warning-border); }

.mcq-home-chip-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--mcq-home-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background-color var(--mcq-home-motion), color var(--mcq-home-motion);
}
.mcq-home-chip-primary { background-color: color-mix(in srgb, var(--mcq-home-primary) 16%, transparent); color: var(--mcq-home-primary); }
.mcq-home-chip-success { background-color: color-mix(in srgb, var(--mcq-home-success) 16%, transparent); color: var(--mcq-home-success); }
.mcq-home-chip-info    { background-color: color-mix(in srgb, var(--mcq-home-info) 16%, transparent); color: var(--mcq-home-info); }
.mcq-home-chip-warning { background-color: color-mix(in srgb, var(--mcq-home-warning) 16%, transparent); color: var(--mcq-home-warning); }

/* Row variant — "Choose Your Target Exam" list cards: icon + label on the
   left, chevron on the right (Stitch's Target Exam section), built on top
   of the same .mcq-home-chip-card base above. */
.mcq-home-chip-row {
    justify-content: space-between;
    cursor: pointer;
}
.mcq-home-chip-row-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.mcq-home-chip-chevron {
    flex-shrink: 0;
    color: var(--mcq-home-border);
    font-size: 1.1rem;
    transition: color var(--mcq-home-motion), transform var(--mcq-home-motion);
}
.mcq-home-chip-row:hover .mcq-home-chip-chevron {
    color: var(--mcq-home-secondary);
    transform: translateX(3px);
}

/* --- Feature cards (What You Get) ------------------------------------------ */
.mcq-home-feature-card {
    background-color: var(--mcq-home-surface);
    border: 1px solid var(--mcq-home-border);
    border-radius: var(--mcq-home-radius-xl);
    box-shadow: var(--mcq-home-shadow);
    padding: calc(var(--mcq-home-gutter) * 1.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--mcq-home-motion), box-shadow var(--mcq-home-motion), background-color var(--mcq-home-motion);
}
.mcq-home-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mcq-home-shadow-hover);
}
/* Stage 61A — pastel card tints, same aliases as the chip cards above. */
.mcq-home-feature-card--primary { background-color: var(--mcq-home-tint-primary-bg); }
.mcq-home-feature-card--success { background-color: var(--mcq-home-tint-success-bg); }
.mcq-home-feature-card--info    { background-color: var(--mcq-home-tint-info-bg); }
.mcq-home-feature-card--warning { background-color: var(--mcq-home-tint-warning-bg); }
.mcq-home-feature-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--mcq-home-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    transition: transform var(--mcq-home-motion);
}
.mcq-home-feature-card:hover .mcq-home-feature-icon { transform: scale(1.08); }
.mcq-home-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.mcq-home-feature-card p {
    font-size: 0.9rem;
    color: var(--mcq-home-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.mcq-home-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mcq-home-primary);
    text-decoration: none;
}
.mcq-home-feature-link:hover { text-decoration: underline; }

/* --- Latest Updates -------------------------------------------------------- */
.mcq-home-update-card {
    background-color: var(--mcq-home-surface);
    border: 1px solid var(--mcq-home-border);
    border-radius: var(--mcq-home-radius-sm);
    padding: 1.1rem;
}
.mcq-home-update-date {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--mcq-label-letter-spacing, 0.05em);
    text-transform: uppercase;
    color: var(--mcq-home-secondary);
    margin-bottom: 0.4rem;
}
.mcq-home-update-title { font-weight: 600; font-size: 0.95rem; color: var(--mcq-home-text); }

/* --- CTA ------------------------------------------------------------------ */
.mcq-home-cta {
    position: relative;
    overflow: hidden;
    background-color: var(--mcq-home-primary);
    color: #fff;
    border-radius: var(--mcq-home-radius-xl);
    padding: calc(var(--mcq-home-gutter) * 2.25) calc(var(--mcq-home-gutter) * 1.5);
    box-shadow: var(--mcq-home-shadow-hover);
}
/* Stage 61A — decorative radial overlay, matching the Stitch CTA banner's
   abstract pattern. Purely visual, aria-hidden in the markup. */
.mcq-home-cta-pattern {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.16), transparent 42%);
    pointer-events: none;
}
.mcq-home-cta > * { position: relative; z-index: 1; }
.mcq-home-cta h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 800; margin-bottom: 0.6rem; }
.mcq-home-cta p { color: rgba(255,255,255,0.85); margin-bottom: 1.75rem; font-size: 1.05rem; }
.mcq-home-cta-btn {
    color: #fff;
    font-weight: 700;
    padding: 0.9rem 2.25rem;
    border-radius: var(--mcq-home-radius);
    background-color: var(--mcq-home-warning);
    border-color: var(--mcq-home-warning);
    transition: transform var(--mcq-home-motion), box-shadow var(--mcq-home-motion), background-color var(--mcq-home-motion);
}
.mcq-home-cta-btn:hover,
.mcq-home-cta-btn:focus-visible {
    color: #fff;
    background-color: color-mix(in srgb, var(--mcq-home-warning) 88%, #000);
    border-color: color-mix(in srgb, var(--mcq-home-warning) 88%, #000);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--mcq-home-warning) 55%, transparent);
}

/* --- Footer promo badge -----------------------------------------------------
   Stage 61A — Stitch reference shows this as a floating pill fixed to the
   bottom-right corner with a gentle bounce (desktop only, `hidden md:flex`
   below lg); on mobile it stays an inline bar so the promo text is never
   lost, since there's no separate title/subtitle field to split it into a
   two-line bubble on small screens. */
.mcq-home-footer-promo {
    background-color: var(--mcq-home-primary);
    color: #fff;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
@media (min-width: 992px) {
    .mcq-home-footer-promo {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 1030;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 22rem;
        background-color: var(--mcq-home-surface);
        color: var(--mcq-home-text);
        border: 1px solid var(--mcq-home-border);
        border-radius: var(--mcq-home-radius-xl);
        padding: 0.85rem 1.4rem 0.85rem 0.85rem;
        box-shadow: var(--mcq-home-shadow-hover);
        font-weight: 500;
        text-align: left;
        animation: mcqHomeBounce 3s ease-in-out infinite;
    }
    .mcq-home-footer-promo-icon {
        flex-shrink: 0;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--mcq-home-radius);
        background-color: var(--mcq-home-warning);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
}
@keyframes mcqHomeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .mcq-home-footer-promo { animation: none; }
}

/* --- Footer ------------------------------------------------------------ */
.mcq-public-footer {
    background-color: var(--mcq-home-surface);
    border-top: 1px solid var(--mcq-home-border);
    color: var(--mcq-home-secondary);
    padding: calc(var(--mcq-home-gutter) * 2) 0 calc(var(--mcq-home-gutter) * 1);
}
.mcq-public-footer-cols { margin-bottom: calc(var(--mcq-home-gutter) * 1.5); }
.mcq-public-footer-logo { height: 28px; width: auto; }
.mcq-public-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mcq-home-text);
}
.mcq-public-footer-brand i { color: var(--mcq-home-primary); font-size: 1.3rem; }
.mcq-public-footer-heading {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: var(--mcq-label-letter-spacing, 0.05em);
    text-transform: uppercase;
    color: var(--mcq-home-text);
    margin-bottom: 0.85rem;
}
.mcq-public-footer a { color: var(--mcq-home-secondary); }
.mcq-public-footer a:hover,
.mcq-public-footer a:focus-visible { color: var(--mcq-home-primary); }
.mcq-public-footer-rule { border-color: var(--mcq-home-border); opacity: 1; margin: 0 0 1.25rem; }
.mcq-public-footer-copyright { font-size: 0.8rem; }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .mcq-home-hero { padding: calc(var(--mcq-home-gutter) * 2) 0 calc(var(--mcq-home-gutter) * 1.5); }
    .mcq-home-section { padding: calc(var(--mcq-home-gutter) * 1.5) 0; }
    .mcq-home-cta { padding: calc(var(--mcq-home-gutter) * 1.5) 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mcq-public-page * {
        transition: none !important;
    }
}