/* File: /assets/header/header-mega-mobile.css
 * v14.2.7 — yeh CSS pehle header.php ke andar <style id="smd-mega-mobile-critical">
 * ke tor par INLINE thi (6,135 B, har page par HTML ke saath, har visitor ke liye
 * dobara). Wajah likhi thi: "cache cannot hide layout fix". Ab jab LiteSpeed
 * combined CSS apna hash khud badalta hai (aur assets par ?ver= bhi hai), inline
 * rakhna zaroori nahi — file browser/LiteSpeed/CDN teeno se cache hoti hai.
 * Selectors bilkul wahi hain (sab !important), is liye tarteeb ka asar nahi. */
    /* Mobile mega: 3 section columns — larger readable text, clickable feel */
    @media (max-width: 768px) {
        .site-header .smd-mega-menu {
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            margin: 0 !important;
            transform: none !important;
            box-sizing: border-box !important;
        }
        .site-header .smd-mega-wrap {
            display: grid !important;
            grid-template-columns: 1fr 1fr 1fr !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 14px 10px 12px !important;
            gap: 10px 12px !important;
            max-height: min(78vh, calc(100dvh - 100px)) !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            box-sizing: border-box !important;
        }
        .site-header .smd-mega-col {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 4px !important;
            gap: 0 !important;
            box-sizing: border-box !important;
        }
        /* Section title — larger, elegant */
        .site-header .smd-mega-col h3 {
            width: 100% !important;
            margin: 0 0 8px !important;
            padding: 0 0 8px !important;
            font-size: clamp(1rem, 3.8vw, 1.15rem) !important;
            font-weight: 400 !important;
            line-height: 1.85 !important;
            text-align: center !important;
            color: #F3D98B !important;
            letter-spacing: 0.02em;
            background: none !important;
            border: 0 !important;
            border-bottom: 2px solid rgba(201, 151, 28, 0.45) !important;
            border-radius: 0 !important;
            box-sizing: border-box !important;
        }
        .site-header .smd-mega-col h3::after { display: none !important; }
        /* Links — bigger text, airy lines, still text-only but clearly tappable */
        .site-header .smd-mega-col a {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 10px 4px !important;
            min-height: 44px !important;
            font-size: clamp(0.92rem, 3.5vw, 1.05rem) !important;
            line-height: 1.9 !important;
            text-align: center !important;
            color: #E8E2D4 !important;
            text-decoration: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            box-sizing: border-box !important;
            -webkit-tap-highlight-color: rgba(201, 151, 28, 0.2);
        }
        .site-header .smd-mega-col a:active,
        .site-header .smd-mega-col a:hover,
        .site-header .smd-mega-col a:focus {
            color: #FFE9B8 !important;
            background: rgba(201, 151, 28, 0.08) !important;
            text-decoration: none !important;
            padding-right: 4px !important;
        }
        .site-header .smd-mega-col a .smd-link-icon,
        .site-header .smd-mega-col h3 .smd-col-icon {
            display: none !important;
        }
        .site-header .smd-mega-bottom {
            width: 100% !important;
            box-sizing: border-box !important;
            padding: 12px 10px !important;
            font-size: clamp(0.85rem, 3.2vw, 0.98rem) !important;
            line-height: 1.8 !important;
        }

        /* ═══ KHOOBSURAT LOOK — mobile (2026-08-21) ═══
           Layout wahi teen column hai, sirf rang aur gehrai:
           har column ab halka panel hai (pehle sab links khali
           kaale par bikhre lagte the), unwaan ke upar peetal ki
           lakeer, aur dabane par sunehri jhalak. */
        .site-header .smd-mega-col {
            position: relative !important;
            padding: 12px 8px 8px !important;
            border: 1px solid rgba(201, 151, 28, 0.18) !important;
            border-radius: 14px !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
            overflow: hidden !important;
        }
        .site-header .smd-mega-col::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important; right: 0 !important; left: 0 !important;
            height: 2px !important;
            background: linear-gradient(90deg, transparent, rgba(201,151,28,0.85), transparent) !important;
        }
        .site-header .smd-mega-col h3 {
            border-bottom: 1px solid rgba(201, 151, 28, 0.30) !important;
            color: #F7DF98 !important;
        }
        .site-header .smd-mega-col a {
            border-radius: 9px !important;
            margin-bottom: 2px !important;
        }
        .site-header .smd-mega-col a:active,
        .site-header .smd-mega-col a:hover,
        .site-header .smd-mega-col a:focus {
            background: rgba(201, 151, 28, 0.16) !important;
            color: #FFE9B8 !important;
        }
        .site-header .smd-mega-bottom {
            border-top: 1px solid rgba(201, 151, 28, 0.18) !important;
            background: linear-gradient(180deg, rgba(201,151,28,0.06), transparent) !important;
        }
    }
    /* Small phones: still readable, not tiny */
    @media (max-width: 360px) {
        .site-header .smd-mega-wrap {
            padding: 12px 6px 10px !important;
            gap: 8px 8px !important;
        }
        .site-header .smd-mega-col h3 {
            font-size: 0.95rem !important;
            line-height: 1.8 !important;
        }
        .site-header .smd-mega-col a {
            font-size: 0.88rem !important;
            padding: 9px 2px !important;
            min-height: 42px !important;
            line-height: 1.85 !important;
        }
    }