/* ==========================================================================
 * Landing Mobile — Header & Navigation
 * Header sticky dengan navigasi horizontal scroll ala mobile app.
 * Hanya aktif di layar ≤ 1024px.
 *
 * @package CredibleCompany
 * ========================================================================== */

@media (max-width: 1024px) {

    /* ----------------------------------------------------------------------
     * 1. Site Header
     * ---------------------------------------------------------------------- */
    .site-header {
        position: var(--cc-header-sticky, relative) !important;
        top: var(--cc-header-sticky-top-mobile, 0) !important;
        background-color: var(--cc-header-mobile-bg, var(--brand-red)) !important;
        z-index: 2000;
        border: none;
        margin: 0 !important;
    }

    /* Kompensasi Admin Bar WordPress */
    .admin-bar .site-header {
        top: var(--cc-header-sticky-top-admin, 32px) !important;
    }

    @media screen and (max-width: 782px) {
        .admin-bar .site-header {
            top: var(--cc-header-sticky-top-mobile-admin, 46px) !important;
        }
    }

    .site-header .container {
        height: auto;
        padding: 0;
        gap: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        background-color: var(--cc-header-mobile-bg, var(--brand-red)) !important;
    }

    /* Baris Logo & Actions (Row 1) */
    .site-header .site-logo,
    .site-header .header-right-actions {
        height: 50px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        background-color: var(--cc-header-mobile-bg, var(--brand-red)) !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    /* Sembunyikan hamburger toggle bawaan (di-override oleh gaya klasik/centered) */
    .menu-toggle {
        display: none !important;
    }

    .site-header:not(.header-style-glass) .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none;
        padding: 0;
        height: 50px;
        width: 40px;
        color: var(--cc-header-mobile-text, #ffffff) !important;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .site-logo img {
        height: 30px !important;
        width: auto !important;
        display: block;
    }

    .site-logo {
        flex-shrink: 0;
    }
    .site-logo a {
        color: var(--cc-header-mobile-text, #ffffff) !important;
    }

    /* ----------------------------------------------------------------------
     * 2. Header Icons
     * ---------------------------------------------------------------------- */
    .header-right-actions {
        display: flex !important;
        margin-left: auto;
        align-items: center;
        gap: 0;
        height: 100%;
    }

    .header-icons {
        display: flex !important;
        align-items: center;
        gap: 0;
        height: 100%;
    }

    .header-icons button,
    .header-icons a {
        color: var(--cc-header-mobile-text, #ffffff) !important;
        background: transparent !important;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        width: 40px;
    }

    .header-icons svg {
        width: 20px;
        height: 20px;
        stroke: var(--cc-header-mobile-text, #ffffff) !important;
    }

    /* ----------------------------------------------------------------------
     * 3. Navigasi Horizontal Scroll (App Tabs)
     * ---------------------------------------------------------------------- */
    .primary-nav {
        display: block !important;
        width: 100%;
        background: #f1f5f9 !important;
        padding: 0 16px;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        order: 10;
        margin: 0 !important;
        box-sizing: border-box;
        height: 44px;
        /* Sticky di atas, overlap header utama */
        position: sticky;
        top: 0;
        z-index: 2001;
    }

    .primary-nav::-webkit-scrollbar {
        display: none;
    }

    .primary-nav ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
        padding: 0;
        margin: 0;
        height: 100%;
        align-items: center;
    }

    .primary-nav li {
        flex-shrink: 0;
        list-style: none;
        display: flex;
        align-items: center;
    }

    .primary-nav a {
        padding: 7px 14px !important;
        font-size: 0.8rem !important;
        background: #f1f5f9 !important;
        color: #475569;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        border-radius: 50px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 600;
        border: none;
        line-height: 1;
    }

    /* Highlight untuk menu aktif */
    .primary-nav a:active,
    .primary-nav a:hover,
    .primary-nav li.current-menu-item a {
        background: var(--cc-header-mobile-text-hover, var(--brand-red)) !important;
        color: var(--cc-header-mobile-text, #ffffff) !important;
        box-shadow: 0 4px 8px rgba(220, 38, 38, 0.2);
    }

    .primary-nav a::after {
        display: none;
    }

    /* ----------------------------------------------------------------------
     * 4. Glassmorphism Mobile Override
     * ---------------------------------------------------------------------- */
    .site-header.header-style-glass {
        background-color: var(--cc-header-mobile-glass-bg, rgba(255, 255, 255, 0.45)) !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        border: var(--cc-header-border, 1px solid rgba(255, 255, 255, 0.25)) !important;
        margin: 0.75rem auto 0 auto !important;
        width: calc(100% - 1.5rem) !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important;
        /* Hapus overflow: hidden agar search overlay tidak terpotong saat aktif */
        overflow: visible !important;
    }

    /* Penyelarasan Search Overlay khusus tipe Glassmorphism */
    .header-style-glass .header-search-overlay {
        background: rgba(15, 23, 42, 0.95) !important; /* Senada dengan warna kapsul gelap */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 20px !important;
        margin-top: 0.5rem !important;
        padding: 0.75rem 1.25rem !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
        width: 100% !important;
        left: 0 !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-sizing: border-box;
    }

    .header-style-glass .header-search-overlay form {
        display: flex !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .header-style-glass .header-search-overlay input[type="search"] {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 99px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        flex: 1 !important;
    }

    .header-style-glass .header-search-overlay input[type="search"]::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .header-style-glass .header-search-overlay button {
        background-color: var(--brand-yellow, #EAB308) !important;
        color: #0f172a !important;
        border-radius: 99px !important;
        padding: 0.5rem 1.25rem !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
    }

    .site-header.header-style-glass .container,
    .site-header.header-style-glass .site-logo,
    .site-header.header-style-glass .header-icons {
        background-color: transparent !important;
    }

    .site-header.header-style-glass .site-logo a,
    .site-header.header-style-glass .header-icons button,
    .site-header.header-style-glass .header-icons a {
        color: var(--cc-header-mobile-text, #1e293b) !important;
    }

    .site-header.header-style-glass .header-icons svg {
        stroke: var(--cc-header-mobile-text, #1e293b) !important;
    }

    /* Primary Nav (Horizontal Scroll) Glassmorphism */
    .primary-nav.header-style-glass {
        background: var(--cc-header-mobile-glass-bg, rgba(255, 255, 255, 0.45)) !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        border: var(--cc-header-border, 1px solid rgba(255, 255, 255, 0.25)) !important;
        border-top: none !important;
        margin: 0 auto 0 auto !important;
        width: calc(100% - 1.5rem) !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
        padding: 0 16px;
    }

    .primary-nav.header-style-glass a {
        background: rgba(255, 255, 255, 0.5) !important;
        color: var(--cc-header-mobile-text, #475569) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    .primary-nav.header-style-glass a:active,
    .primary-nav.header-style-glass a:hover,
    .primary-nav.header-style-glass li.current-menu-item a {
        background: var(--cc-header-mobile-text-hover, var(--brand-blue, #1d4ed8)) !important;
        color: #ffffff !important;
        border-color: var(--cc-header-mobile-text-hover, var(--brand-blue, #1d4ed8)) !important;
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25) !important;
    }
}