/**
 * GRPCMedia Header Responsive CSS
 * 
 * 🇹🇷 TR: Header için özel responsive düzenlemeler
 * 🇬🇧 EN: Header-specific responsive fixes
 * 🎯 PURPOSE: Fix header responsive behavior across all devices
 * 
 * @package GRPCMedia
 * @version 1.0.0
 * 
 * CRITICAL: Override sticky-header.css white background
 */

/* =====================================================
   STICKY HEADER - SADECE NAV BAR (TOP BAR KAYBOLUR!)
   ===================================================== */
/* Elementor Header - STICKY! */
header.elementor,
header.elementor-418,
header.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: transparent !important;
    width: 100% !important;
}

/* Default Header - ESK GİBİ! (Scroll ile kaybolur, nav bar JavaScript ile fixed!) */
header#header.header,
header#header.header-layout-type-header-2rows,
header.header-layout-type-header-2rows {
    position: relative !important; /* Normal flow - scroll ile kaybolur */
    width: 100% !important;
    background: transparent !important;
    /* z-index kaldırıldı - child sticky olabilsin */
}

/* ULTRA CRITICAL - HEADER NAV WRAPPER - JavaScript'siz fallback */
/* JavaScript ile position: fixed yapılacak ama cache sorunu varsa bu kural devreye girer */
.header-nav-wrapper,
div.header-nav-wrapper,
.header-nav .header-nav-wrapper,
header#header .header-nav-wrapper,
header.header .header-nav-wrapper {
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    /* JavaScript position: fixed ekleyecek - burada sadece base styling */
    transition: all 0.3s ease !important;
}

/* =====================================================
   MOBILE - (< 768px)
   ===================================================== */
@media (max-width: 767px) {
    /* 1. COMPACT TOP BAR (Phone, Email, Social Icons) */
    header.elementor .elementor-section:first-child,
    header.elementor-418 .elementor-section:first-child {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }
    
    /* 2. HEADER MAIN SECTION */
    header.elementor .elementor-section,
    header.elementor-418 .elementor-section {
        padding: 10px 0 !important;
    }
    
    header.elementor .elementor-container,
    header.elementor-418 .elementor-container {
        padding: 0 15px !important;
        flex-wrap: wrap !important;
    }
    
    /* 3. LOGO - Center on mobile */
    header.elementor .elementor-widget-theme-site-logo,
    header.elementor-418 .elementor-widget-theme-site-logo {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px;
    }
    
    header.elementor .elementor-widget-theme-site-logo img,
    header.elementor-418 .elementor-widget-theme-site-logo img {
        max-height: 50px !important;
        width: auto !important;
    }
    
    /* 4. NAVIGATION - Hamburger menu */
    header.elementor .elementor-widget-nav-menu,
    header.elementor-418 .elementor-widget-nav-menu {
        width: 100% !important;
    }
    
    header.elementor .elementor-nav-menu--main,
    header.elementor-418 .elementor-nav-menu--main {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 15px !important;
    }
    
    header.elementor .elementor-nav-menu--main.elementor-nav-menu--dropdown-mobile-active,
    header.elementor-418 .elementor-nav-menu--main.elementor-nav-menu--dropdown-mobile-active {
        display: flex !important;
    }
    
    header.elementor .elementor-nav-menu .elementor-item,
    header.elementor-418 .elementor-nav-menu .elementor-item {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee;
    }
    
    header.elementor .elementor-nav-menu .elementor-item:last-child,
    header.elementor-418 .elementor-nav-menu .elementor-item:last-child {
        border-bottom: none;
    }
    
    /* 5. HAMBURGER ICON */
    header.elementor .elementor-menu-toggle,
    header.elementor-418 .elementor-menu-toggle {
        display: block !important;
        position: absolute !important;
        top: 15px;
        right: 15px;
        font-size: 24px !important;
        color: #333;
        background: none !important;
        border: none !important;
        cursor: pointer;
        z-index: 10000 !important;
    }
    
    /* 5a. HAMBURGER → X TRANSFORMATION (UX CRITICAL!) */
    /* Elementor uses icon CLASS, not pseudo-element */
    /* Hide hamburger icon when ACTIVE */
    header.elementor .elementor-menu-toggle.elementor-active .eicon-menu-bar,
    header.elementor-418 .elementor-menu-toggle.elementor-active .eicon-menu-bar {
        display: none !important;
    }
    
    /* Show close (X) icon when ACTIVE */
    header.elementor .elementor-menu-toggle.elementor-active i::before,
    header.elementor-418 .elementor-menu-toggle.elementor-active i::before {
        content: "\e870" !important; /* Elementor close icon (eicon-close) */
        font-family: "eicons" !important;
        display: inline-block;
    }
    
    /* Smooth rotation animation for better UX */
    header.elementor .elementor-menu-toggle i,
    header.elementor-418 .elementor-menu-toggle i {
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    header.elementor .elementor-menu-toggle.elementor-active i,
    header.elementor-418 .elementor-menu-toggle.elementor-active i {
        transform: rotate(90deg);
    }
    
    /* 6. HIDE DROPDOWN ARROWS */
    header.elementor .elementor-nav-menu .sub-arrow,
    header.elementor-418 .elementor-nav-menu .sub-arrow {
        display: none !important;
    }
    
    /* 7. DROPDOWN MENU RESPONSIVE */
    header.elementor .elementor-nav-menu--dropdown,
    header.elementor-418 .elementor-nav-menu--dropdown {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border-top: 1px solid #eee !important;
        margin-top: 10px !important;
    }
    
    header.elementor .elementor-nav-menu--dropdown .elementor-item,
    header.elementor-418 .elementor-nav-menu--dropdown .elementor-item {
        padding-left: 30px !important;
        background: #f9f9f9;
    }
    
    /* 8. PREVENT TEXT WRAPPING */
    header.elementor .elementor-text-editor,
    header.elementor .elementor-icon-box-description,
    header.elementor-418 .elementor-text-editor,
    header.elementor-418 .elementor-icon-box-description {
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 9. STICKY HEADER ON MOBILE */
    header.elementor.elementor-sticky--active,
    header.elementor-418.elementor-sticky--active {
        padding: 5px 0 !important;
    }
    
    header.elementor.elementor-sticky--active .elementor-widget-theme-site-logo img,
    header.elementor-418.elementor-sticky--active .elementor-widget-theme-site-logo img {
        max-height: 40px !important;
    }
}

/* =====================================================
   MOBILE SMALL - (< 375px - iPhone SE)
   ===================================================== */
@media (max-width: 374px) {
    header.elementor .elementor-widget-theme-site-logo img,
    header.elementor-418 .elementor-widget-theme-site-logo img {
        max-height: 40px !important;
    }
    
    header.elementor .elementor-nav-menu .elementor-item,
    header.elementor-418 .elementor-nav-menu .elementor-item {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* =====================================================
   TABLET - (768px - 1024px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 1. TOP BAR - Compact (VISIBLE but smaller) */
    header.elementor .elementor-section:first-child,
    header.elementor-418 .elementor-section:first-child {
        padding: 8px 0 !important;
    }
    
    header.elementor .elementor-section:first-child .elementor-icon,
    header.elementor .elementor-section:first-child .elementor-text-editor,
    header.elementor-418 .elementor-section:first-child .elementor-icon,
    header.elementor-418 .elementor-section:first-child .elementor-text-editor {
        font-size: 12px !important;
    }
    
    header.elementor .elementor-section:first-child .elementor-icon,
    header.elementor-418 .elementor-section:first-child .elementor-icon {
        font-size: 14px !important;
    }
    
    /* 2. SOCIAL ICONS - Smaller */
    header.elementor .elementor-social-icon,
    header.elementor-418 .elementor-social-icon {
        font-size: 14px !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    /* 3. LOGO */
    header.elementor .elementor-widget-theme-site-logo img,
    header.elementor-418 .elementor-widget-theme-site-logo img {
        max-height: 60px !important;
    }
    
    /* 4. NAVIGATION - Smaller padding */
    header.elementor .elementor-nav-menu .elementor-item,
    header.elementor-418 .elementor-nav-menu .elementor-item {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
}

/* =====================================================
   DESKTOP - (> 1024px)
   ===================================================== */
@media (min-width: 1025px) {
    /* NO CHANGES - Let Elementor handle desktop styles */
    /* Only ensure hamburger is hidden (if present) */
    header.elementor .elementor-menu-toggle,
    header.elementor-418 .elementor-menu-toggle {
        display: none !important;
    }
}

/* =====================================================
   LANDSCAPE ORIENTATION FIXES
   ===================================================== */
@media (max-width: 1024px) and (orientation: landscape) {
    header.elementor .elementor-section,
    header.elementor-418 .elementor-section {
        padding: 5px 0 !important;
    }
    
    header.elementor .elementor-widget-theme-site-logo img,
    header.elementor-418 .elementor-widget-theme-site-logo img {
        max-height: 45px !important;
    }
}