/**
 * ja_nexora — FEATURED PAGE overlay (com_content.featured, menu item-4010).
 * All rules scoped to body.layout-default.view-featured — zero cross-page risk.
 * Injected via addCustomTag + filemtime() cache-bust in html/com_content/featured/default.php.
 *
 * FA1 [WRONG-GREY-TOKEN] --nx-feat-dim: #8A90AB (light) → var(--color-text-dim) = #888EA6
 *      The SCSS hardcodes #8A90AB (a wrong grey ≠ $text-dim #888EA6). Override with the
 *      correct token. Dark is also corrected (--color-text-dim = #6B7196 in dark). Affects
 *      date, dot, cat-count, search-icon, and ::placeholder on search+newsletter inputs.
 * FA3 [MOBILE-CTA-NOT-ALWAYS-ACCENT] Mobile CTA must be always-accent (#0062FF + radial
 *      #6366F1@.9 from bottom) per .pen i1oWzj/b4gidX. Desktop stays theme-flipping.
 * FA4 [MOBILE-NEWSLETTER-WRONG-BG] Mobile newsletter card: .pen i1oWzj/Pgpji fill=#101023
 *      ($bg-elev), NOT #181A33 ($bg-card-2). The shared rule sets $bg-card-2 always.
 * FA5 [MOBILE-SECCARD-WRONG-BORDER] Mobile secondary cards: .pen i1oWzj sec cards use
 *      stroke=#1C1E38 ($border-soft), not $border (#262945 dark / #E2E6F0 light).
 */

/* ── FA1: Fix --nx-feat-dim wrong grey in LIGHT (and ensure correct dark value) ────────── */
/* Light mode: token should equal $text-dim #888EA6 = var(--color-text-dim) */
html:not([data-bs-theme="dark"]) body.layout-default.view-featured {
    --nx-feat-dim: var(--color-text-dim); /* resolves to #888EA6 in light */
}
/* Dark mode: correct value is already #6B7196 = var(--color-text-dim) in dark;
   but the SCSS fallback #8A90AB would win if --color-text-dim wasn't defined there.
   Pin it explicitly to be safe. */
html[data-bs-theme="dark"] body.layout-default.view-featured {
    --nx-feat-dim: var(--color-text-dim); /* resolves to #6B7196 in dark */
}

/* ── FA3: Mobile CTA — always-accent (#0062FF + radial indigo) per .pen i1oWzj/b4gidX ── */
@media (max-width: 767.98px) {
    body.layout-default.view-featured .nx-feat-cta {
        padding: 0 20px 40px;
        background: var(--color-bg);
    }
    body.layout-default.view-featured .nx-feat-cta__card {
        background-color: #0062FF !important;
        background-image: radial-gradient(
            120% 120% at 50% 100%,
            rgba(99, 102, 241, 0.9),
            transparent
        ) !important;
        border: none !important;
        color: #FFFFFF !important;
    }
    body.layout-default.view-featured .nx-feat-cta__title {
        color: #FFFFFF !important;
    }
    body.layout-default.view-featured .nx-feat-cta__sub {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    body.layout-default.view-featured .nx-feat-cta__primary {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.35);
        color: #FFFFFF;
    }
    body.layout-default.view-featured .nx-feat-cta__secondary {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.35);
        color: #FFFFFF;
    }
    body.layout-default.view-featured .nx-feat-cta__secondary:hover {
        border-color: rgba(255, 255, 255, 0.7);
        color: #FFFFFF;
    }

    /* ── FA4: Mobile newsletter card → $bg-elev (#101023 dark / #F5F6FB light) ──────────── */
    body.layout-default.view-featured .nx-feat-nl {
        background-color: var(--color-bg-alt) !important; /* --color-bg-alt = $bg-elev */
    }

    /* ── FA5: Mobile secondary cards → $border-soft stroke ──────────────────────────────── */
    body.layout-default.view-featured .nx-feat-card {
        border-color: var(--color-border-soft) !important;
    }
}