/**
 * Mobile Menu Styles
 * 
 * This file contains styles for the mobile menu that are applied to all pages,
 * regardless of whether they have the hero section or not.
 * These styles ensure a consistent mobile experience across the site.
 */

/* Target tablets and smaller devices - handles both portrait and landscape */
@media (max-width: 1299px) {
    /* ===== TOP BAR ADJUSTMENTS ===== */
    
    /* Ensure top bar content is properly aligned */
    .top-bar .container {
        width: 100%;
        padding: 0 15px;
    }
    
    .top-bar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    /* Hide text in contact info, show only icons */
    /* More aggressive approach to hide text */
    .contact-info-mini span {
        font-size: 0;
        line-height: 0;
    }
    
    /* Keep only the icons visible */
    .contact-info-mini i {
        font-size: 16px !important;
        line-height: normal !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        vertical-align: middle !important;
    }
    
    /* Force text to be hidden */
    .contact-info-mini a {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure WhatsApp icon is visible too */
    .contact-info-mini .whatsapp1-mini a i {
        font-size: 16px !important;
    }
    
    /* Ensure screen reader text stays hidden */
    .screen-reader-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* Make contact info display horizontally */
    .contact-info-mini {
        display: flex;
        align-items: start;
        gap: 15px;
        margin-left: var(--lubinik-spacing-xs);
    }
    
    /* Ensure icons are visible and properly sized */
    
    /* ===== MAIN HEADER ADJUSTMENTS ===== */
    
    /* Container for logo and navigation */
    .site-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Logo adjustments */
    .site-branding {
        max-width: 70%;
    }
    
    .site-branding img,
    .custom-logo {
        max-height: 60px;
        width: auto;
    }
    
    /* Hide site description on mobile */
    .site-description {
        display: none;
    }
    
    /* Navigation adjustments */
    .main-navigation {
        display: flex;
        justify-content: flex-end;
    }
    
    /* Show hamburger, hide regular menu */
    .main-navigation ul {
        display: none;
    }
    

    
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
    }
    
    /* Style the hamburger icon */
    .menu-icon {
        display: block;
        width: 25px;
        height: 3px;
        background-color: currentColor;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .menu-icon:before,
    .menu-icon:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: currentColor;
        left: 0;
        transition: all 0.3s ease;
    }
    
    .menu-icon:before {
        top: -8px;
    }
    
    .menu-icon:after {
        bottom: -8px;
    }
    
    /* Style for when menu is active (open) */
    .menu-toggle[aria-expanded="true"] .menu-icon {
        background-color: transparent; /* Hide middle line */
    }
    
    .menu-toggle[aria-expanded="true"] .menu-icon:before {
        top: 0;
        transform: rotate(45deg);
    }
    
    .menu-toggle[aria-expanded="true"] .menu-icon:after {
        bottom: 0;
        transform: rotate(-45deg);
    }
}

/* Additional adjustments for very small screens */
@media (max-width: 576px) {
    .contact-info-mini {
        gap: 10px;
    }
    
    .site-branding img,
    .custom-logo {
        max-height: var(--lubinik-header-logo-max-size-mobile);
    }
}


/* ======================================
   Header Components
   ====================================== */

/* Top Bar */
@media (max-width: 991px) {

    
    .top-social-links {
        margin-right: var(--lubinik-spacing-xs);
    }

}