/*
 * Extracted from mu-plugins/kalon-blog-archive-hero.php on 2026-04-10
 * (Phase 4 of the kalon-theme refactor).
 *
 * 2026-04-10 cleanup pass:
 *   - Block 1: pruned ~11 KB of dead Elementor selectors that no longer
 *     match anything under the kalon-theme markup. Removed everything
 *     targeting `.elementor-posts-container`, `.elementor-post*` (badge,
 *     title, thumbnail, read-more), `.elementor-widget-posts`,
 *     `.elementor-widget-heading .elementor-heading-title`,
 *     `.elementor-location-archive`, `.elementor-pagination`, and
 *     `.e-pagination`. Only the body-class gray background rule was kept.
 *   - Blocks 2 and 3 deduplicated: the original extraction kept block 3
 *     ("category hero") as a defensive byte-copy of block 2 ("blog
 *     archive hero") because each shortcode used to inline its own
 *     <style>. Now that the styles ship as a single external file, both
 *     [kalon_blog_archive_hero] (is_home) and [kalon_category_hero]
 *     (is_category) share the one canonical .kalon-bah* block — same
 *     class names, same rules, no functional difference.
 *
 * Source order preserved for the rules that remain:
 *   Block 1 (was id="kalon-blog-archive-css"):
 *       Body-class background only — the rest was inert Elementor cruft.
 *   Block 2 (was id="kalon-blog-archive-hero-css"
 *            AND id="kalon-category-hero-css" — now shared):
 *       .kalon-bah* hero rules + Elementor :has() container overrides.
 *       Used by both [kalon_blog_archive_hero] and [kalon_category_hero].
 *   Block 4 (was id="kalon-blog-categories-css"):
 *       .kalon-catbar* category-bar pill styles.
 *
 * 2026-04-10 — file renamed from kalon_blog_archive_hero.php to
 * kalon-blog-archive-hero.php (underscores to hyphens) for consistency
 * with every other kalon-* mu-plugin. The shortcode tags themselves
 * (kalon_blog_archive_hero, kalon_category_hero, kalon_blog_categories)
 * are unchanged.
 */

/* ── BLOCK 1: was kalon-blog-archive-css ── */
    /* ============================================
       BLOG ARCHIVE STYLES — Kalon Surf v1.4.0
       Gray background for blog/archive/category pages.
       (Elementor card/listing/pagination styling pruned 2026-04-10
       — all of those selectors targeted markup that no longer exists
       under the kalon-theme home/archive/category templates.)
       ============================================ */

    /* ── Gray page background ── */
    body.blog,
    body.archive,
    body.category {
        background-color: #f0f0f0 !important;
    }

/* ── BLOCK 2: was kalon-blog-archive-hero-css (also serves category hero) ── */
    /* ============================================
       KALON BLOG ARCHIVE HERO v1.3.1
       Shared between [kalon_blog_archive_hero] and [kalon_category_hero]
       (the old block 3 was a byte-copy of this block for the category
       shortcode; deduped 2026-04-10 — the rules are identical).
       ============================================ */
    .kalon-bah {
        --kalon-cyan: rgb(0, 179, 219);
        --kalon-green: rgb(88, 214, 82);
        --font-body: 'Montserrat', sans-serif;

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: var(--kalon-bah-height, 480px);
        overflow: hidden;
        background: #1a1a1a;
        margin: 0 !important;
        margin-bottom: -1px !important;
        padding: 0;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* Background image — real <img> with fetchpriority="high"
       for optimal LCP discovery and loading */
    .kalon-bah__bg-wrap {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1;
        overflow: hidden;
    }
    .kalon-bah__bg-wrap img {
        position: absolute;
        top: -1px; left: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        object-fit: cover;
        object-position: center;
    }

    .kalon-bah__overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(
            180deg,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.20) 30%,
            rgba(0,0,0,0.58) 100%
        );
        z-index: 2;
        pointer-events: none;
    }

    .kalon-bah__content {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 120px 40px 48px;
        text-align: center;
    }

    /* Breadcrumb */
    .kalon-bah__breadcrumb {
        font-family: var(--font-body);
        font-size: 12px; font-weight: 400;
        letter-spacing: 0.06em;
        color: rgba(255,255,255,0.50);
        margin: 0 0 24px 0; line-height: 1.4;
    }
    .kalon-bah__breadcrumb a {
        color: rgba(255,255,255,0.50);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .kalon-bah__breadcrumb a:hover { color: var(--kalon-cyan); }
    .kalon-bah__breadcrumb .sep {
        margin: 0 8px; opacity: 0.5; font-size: 10px;
    }

    /* Title */
    .kalon-bah__title {
        font-family: var(--font-body) !important;
        font-size: 40px !important; font-weight: 300 !important;
        line-height: 1.2 !important; letter-spacing: 0.06em !important;
        color: #fff !important; text-transform: uppercase !important;
        margin: 0 0 16px 0 !important; padding: 0 !important;
        text-shadow: 0 2px 20px rgba(0,0,0,0.25);
    }

    /* Subtitle */
    .kalon-bah__subtitle {
        font-family: var(--font-body);
        font-size: 15px; font-weight: 300;
        line-height: 1.6;
        color: rgba(255,255,255,0.70);
        letter-spacing: 0.03em;
        margin: 0 0 20px 0;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Post count */
    .kalon-bah__meta {
        font-family: var(--font-body);
        font-size: 12px; font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.45);
        margin: 0;
    }

    /* Gradient line */
    .kalon-bah-line {
        position: relative;
        z-index: 1;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        height: 4px;
        background: linear-gradient(90deg, rgb(0,179,219), rgb(88,214,82));
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .kalon-bah__content { padding: 100px 30px 40px; }
        .kalon-bah__title { font-size: 34px !important; }
        .kalon-bah__subtitle { font-size: 14px; }
    }
    @media (max-width: 768px) {
        .kalon-bah { height: calc(var(--kalon-bah-height, 480px) * 0.75); }
        .kalon-bah__content { padding: 80px 22px 32px; }
        .kalon-bah__breadcrumb { font-size: 11px; margin-bottom: 18px; }
        .kalon-bah__title { font-size: 26px !important; letter-spacing: 0.04em !important; margin-bottom: 12px !important; }
        .kalon-bah__subtitle { font-size: 13px; margin-bottom: 14px; }
        .kalon-bah__meta { font-size: 11px; }
    }
    @media (max-width: 480px) {
        .kalon-bah { height: calc(var(--kalon-bah-height, 480px) * 0.6); }
        .kalon-bah__content { padding: 70px 18px 26px; }
        .kalon-bah__breadcrumb { font-size: 10px; margin-bottom: 14px; }
        .kalon-bah__breadcrumb .sep { margin: 0 5px; }
        .kalon-bah__title { font-size: 22px !important; letter-spacing: 0.03em !important; line-height: 1.25 !important; }
        .kalon-bah__subtitle { font-size: 12px; line-height: 1.55; }
        .kalon-bah__meta { font-size: 10px; }
    }

    /* Elementor container overrides — only for the hero */
    .e-con:has(.kalon-bah), .e-con:has(.kalon-bah-line),
    .elementor-widget-shortcode:has(.kalon-bah),
    .elementor-widget-shortcode:has(.kalon-bah-line) {
        padding: 0 !important; margin: 0 !important;
        max-width: 100% !important; width: 100% !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .e-con:has(.kalon-bah), .e-con:has(.kalon-bah-line) {
        --padding-top: 0px !important; --padding-bottom: 0px !important;
        --padding-left: 0px !important; --padding-right: 0px !important;
        --min-height: 0px !important;
    }
    /* Kill Elementor ::before overlay on hero container */
    .e-con:has(.kalon-bah)::before,
    .e-con:has(.kalon-bah)::after,
    .e-con:has(.kalon-bah-line)::before,
    .e-con:has(.kalon-bah-line)::after {
        display: none !important;
        content: none !important;
    }
    .e-con-boxed:has(.kalon-bah) > .e-con-inner,
    .e-con-boxed:has(.kalon-bah-line) > .e-con-inner {
        max-width: 100% !important; padding: 0 !important;
        background: transparent !important;
    }

/* ── BLOCK 4: was kalon-blog-categories-css ── */
    /* ============================================
       KALON BLOG CATEGORY BAR v1.0
       ============================================ */
    .kalon-catbar {
        --kalon-cyan: rgb(0, 179, 219);
        --font-body: 'Montserrat', sans-serif;

        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        background: #f0f0f0;
        border-bottom: 1px solid rgba(0,0,0,0.04);
        padding: 0;
        position: relative;
        z-index: 10;
    }

    .kalon-catbar__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .kalon-catbar__pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border-radius: 100px;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none !important;
        white-space: nowrap;
        color: #666 !important;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .kalon-catbar__pill:hover {
        color: var(--kalon-cyan) !important;
        border-color: var(--kalon-cyan);
        background: rgba(0, 179, 219, 0.04);
    }

    /* Active state */
    .kalon-catbar__pill--active {
        color: #fff !important;
        background: var(--kalon-cyan) !important;
        border-color: var(--kalon-cyan) !important;
        font-weight: 600;
    }
    .kalon-catbar__pill--active:hover {
        color: #fff !important;
        background: var(--kalon-cyan) !important;
        border-color: var(--kalon-cyan) !important;
    }

    /* Post count badge */
    .kalon-catbar__count {
        font-size: 10px;
        font-weight: 400;
        opacity: 0.55;
        letter-spacing: 0;
    }
    .kalon-catbar__pill--active .kalon-catbar__count {
        opacity: 0.75;
    }

    /* Fade edges to hint at scroll on mobile */
    .kalon-catbar::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 40px;
        background: linear-gradient(90deg, transparent, #f0f0f0);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .kalon-catbar--scrollable::after {
        opacity: 1;
    }

    /* Elementor container overrides */
    .e-con:has(.kalon-catbar),
    .elementor-widget-shortcode:has(.kalon-catbar) {
        padding: 0 !important; margin: 0 !important;
        max-width: 100% !important; width: 100% !important;
    }
    .e-con:has(.kalon-catbar) {
        --padding-top: 0px !important; --padding-bottom: 0px !important;
        --padding-left: 0px !important; --padding-right: 0px !important;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .kalon-catbar__inner { padding: 16px 30px; gap: 8px; }
        .kalon-catbar__pill { padding: 7px 14px; font-size: 11px; }
    }
    @media (max-width: 768px) {
        .kalon-catbar__inner {
            padding: 14px 20px; gap: 6px;
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .kalon-catbar__inner::-webkit-scrollbar { display: none; }
        .kalon-catbar__pill { padding: 6px 12px; font-size: 10px; }
        .kalon-catbar__count { font-size: 9px; }
        .kalon-catbar::after { opacity: 1; }
    }
    @media (max-width: 480px) {
        .kalon-catbar__inner { padding: 12px 16px; gap: 5px; }
        .kalon-catbar__pill { padding: 6px 10px; font-size: 10px; letter-spacing: 0.02em; }
    }