/* Header Layout CSS - Layout and Positioning Only (No Colors) */

/* Base header styles - TALLER HEADER */
.neatspecs-header,
.establishment-header {
    padding: 0.5rem 0;
    border-bottom: 0;
    min-height: 200px;      /* Increased minimum height for taller header */
    max-width: 800px;
    margin: 0 auto;         /* Centered */
    display: flex;
    align-items: center;    /* Center content vertically */
}

/* CRITICAL: Header container - taller header */
.neatspecs-header .header-container,
.establishment-header .header-container {
    padding: 1rem 1rem;     /* Increased vertical padding for taller look */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;    /* Vertically center everything */
}

/* Three-column layout using flexbox - matches HeaderComponent */
.neatspecs-header .header-layout,
.establishment-header .header-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Left section (menu) - BALANCED FLEXIBILITY */
.neatspecs-header .header-left,
.establishment-header .header-left {
    min-width: 45px;        /* Reasonable minimum for menu button */
    width: 120px;           /* Preferred width */
    flex-shrink: 1;         /* Normal shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center section (logo) - BALANCED LOGO SPACE */
.neatspecs-header .header-center,
.establishment-header .header-center {
    flex: 1;                /* Takes remaining space between left/right */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-width: 200px;       /* Reduced from 300px to give sides more room */
    flex-shrink: 0;         /* Don't shrink the center - let sides shrink instead */
    height: auto;
    overflow: hidden;
}

/* Right section (auth) - BALANCED FLEXIBILITY */
.neatspecs-header .header-right,
.establishment-header .header-right {
    min-width: 45px;        /* Reasonable minimum for auth button */
    width: 120px;           /* Preferred width */
    flex-shrink: 1;         /* Normal shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo container - WITH MINIMUM WIDTH PROTECTION */
.neatspecs-header .logo-container {
    margin: 0 auto;
    min-width: 180px;       /* Match actual logo size - INCREASED */
    width: 300px;           /* Preferred width */
    max-width: 100%;        /* Don't exceed container */
}

/* Establishment logo container - smaller but protected */
.establishment-header .logo-container {
    margin: 0 auto;
    min-width: 160px;       /* Reasonable minimum for establishment logos */
    width: 200px;           /* Preferred width */
    max-width: 100%;        /* Don't exceed container */
}

/* Logo styling - Layout and sizing only */
.neatspecs-header .logo-container img,
.establishment-header .logo-container img {
    max-width: 100%;
    max-height: 90px;      /* Height constraint for layout */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Menu button and auth button layout and sizing */
.neatspecs-header .menu-button,
.neatspecs-header .auth-btn,
.establishment-header .menu-button,
.establishment-header .auth-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Unified icon sizing for all header icons */
.neatspecs-header .menu-icon,
.neatspecs-header .profile-icon,
.establishment-header .menu-icon,
.establishment-header .profile-icon,
.profile-icon {
    width: 40px;
    height: 40px;
}

/* CRITICAL: Sign in icon size from HeaderComponent */
.neatspecs-header .sign-in-icon,
.sign-in-icon,
.establishment-header .sign-in-icon {
    width: 40px;
    height: 40px;
}

/* Dropdown menu layout and positioning */
.neatspecs-header .dropdown-menu,
.dropdown-menu,
.establishment-header .dropdown-menu {
    display: none;
    position: absolute;
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    min-width: 10rem;
    z-index: 1000;
}

.neatspecs-header .dropdown-menu.show,
.dropdown-menu.show,
.establishment-header .dropdown-menu.show {
    display: block;
}

/* Dropdown item layout */
.neatspecs-header .dropdown-item,
.dropdown-item,
.establishment-header .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    color: var(--text-color);
    background-color: transparent;
    border: 0;
    text-decoration: none;
}

/* Position relative for dropdown positioning */
.neatspecs-header .position-relative,
.position-relative,
.establishment-header .position-relative {
    position: relative;
}

/* Utility classes */
.hidden {
    display: none;
}

html {
    scroll-behavior: smooth;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ensure links don't have default styling */
.neatspecs-header a,
.establishment-header a {
    text-decoration: none;
}

.neatspecs-header a:hover,
.establishment-header a:hover {
    text-decoration: none;
}

/* Mobile responsiveness - IMPROVED FLEXIBLE LAYOUT */
@media (max-width: 767.98px) {
    .neatspecs-header .header-container,
    .establishment-header .header-container {
        padding: 0 0.5rem;
    }
    
    .neatspecs-header .header-left,
    .establishment-header .header-left,
    .neatspecs-header .header-right,
    .establishment-header .header-right {
        width: 70px;           /* Reasonable mobile width */
        min-width: 45px;       /* Usable minimum */
    }
    
    .establishment-header .logo-container {
        min-width: 110px;      /* Smaller minimum for mobile - INCREASED */
    }
    
    .neatspecs-header .logo-container {
        min-width: 130px;      /* Platform logo minimum on mobile - INCREASED */
    }
    
    .neatspecs-header .profile-icon,
    .profile-icon,
    .establishment-header .profile-icon {
        width: 40px;
        height: 40px;
    }
}

/* Small screens - further adjustments */
@media (max-width: 575.98px) {
    .neatspecs-header .header-left,
    .establishment-header .header-left,
    .neatspecs-header .header-right,
    .establishment-header .header-right {
        width: 45px;           /* Even smaller preferred width */
        min-width: 20px;       /* Very reduced minimum */
    }
    
    .establishment-header .logo-container {
        min-width: 100px;      /* Adjusted for small screens - INCREASED */
    }
    
    .neatspecs-header .logo-container {
        min-width: 120px;      /* Platform logo minimum on small screens - INCREASED */
    }
}

/* Very small screens - prioritize logo */
@media (max-width: 359.98px) {
    .neatspecs-header .header-left,
    .establishment-header .header-left,
    .neatspecs-header .header-right,
    .establishment-header .header-right {
        min-width: 15px;       /* Absolute minimum for buttons */
        width: 35px;           /* Very small preferred width */
    }
    
    .establishment-header .logo-container {
        min-width: 90px;       /* Emergency minimum - INCREASED */
    }
    
    .neatspecs-header .logo-container {
        min-width: 110px;      /* Platform logo emergency minimum - INCREASED */
    }
    
    .neatspecs-header .profile-icon,
    .profile-icon,
    .establishment-header .profile-icon {
        width: 35px;
        height: 35px;
    }
    
    .neatspecs-header .sign-in-icon,
    .sign-in-icon,
    .establishment-header .sign-in-icon {
        width: 20px;
        height: 20px;
    }
}

/* Ensure icons don't block button clicks */
.auth-btn object,
.auth-btn svg,
.auth-btn img {
    pointer-events: none;
}