/*=========================================================
MASALAKRAFT HEADER.CSS (FINAL RESPONSIVE FIX)
=========================================================*/
:root {
    --brand-brown: #8B3A12;
    --brand-dark: #5C250A;
    --text-main: #3D2920;
    --bg-white: #FFFFFF;
    --accent: #D17E25;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-white);
    color: var(--text-main);
    line-height: 1.6;
    padding-top: 90px; /* Pushes content down so header doesn't cover it */
}

a { 
    text-decoration: none !important; 
    transition: .30s ease; 
}

ul { 
    list-style: none !important; 
    margin: 0; 
    padding: 0; 
}

img { 
    max-width: 100%; 
    display: block; 
}

/*=========================================
1. HEADER CONTAINER (Global)
=========================================*/
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 15px 5% !important;
    background: var(--brand-brown) !important;
    border-bottom: 2px solid var(--accent) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/*=========================================
2. LOGO
=========================================*/
.logo-container {
    display: flex !important; 
    align-items: center !important; 
    gap: 15px;
}

.logo-img { 
    height: 48px; 
    width: auto; 
    background: #fff; 
    border-radius: 50%; 
    padding: 3px; 
    transition: .30s ease;
}

.logo-container:hover .logo-img { 
    transform: scale(1.05); 
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF !important; 
}

.logo-text span { 
    color: var(--accent) !important; 
}

/*=========================================
3. DESKTOP NAVIGATION
=========================================*/
/* Hide the hamburger icon on desktop */
.menu-toggle { 
    display: none !important; 
}

/* Force menu to show on desktop */
#mainNav { 
    display: block !important; 
    position: static !important;
    background: transparent !important;
    width: auto !important;
}

#mainNav ul { 
    display: flex !important; 
    flex-direction: row !important; /* Forces items side-by-side */
    align-items: center !important; 
    gap: 20px !important; 
}

#mainNav ul li a {
    display: block;
    color: #FFFFFF !important; 
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 0;
}

#mainNav ul li a:hover { 
    color: var(--accent) !important; 
}

/*=========================================
4. NAVIGATION BUTTONS
=========================================*/
.btn-book-nav {
    display: inline-block;
    background: #FFFFFF !important;
    color: var(--brand-brown) !important; 
    border: 1px solid #FFFFFF !important;
    border-radius: 4px;
    padding: 10px 18px !important; 
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    white-space: nowrap !important;
    transition: .30s ease;
    text-align: center;
}

.btn-book-nav:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #FFFFFF !important; 
}

.order-btn-nav { 
    position: relative; 
}

.offer-badge-nav {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #FFD84D;
    color: #222;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 30px;
}

/*=========================================
5. RESPONSIVE QUERIES (TABLET & MOBILE)
=========================================*/
@media (max-width: 1024px) {
    .logo-text { font-size: 21px; }
    #mainNav ul { gap: 12px !important; }
    .btn-book-nav { padding: 8px 12px !important; font-size: 13px; }
}

@media (max-width: 900px) {
    /* Show Hamburger Menu */
    .menu-toggle {
        display: flex !important; 
        align-items: center; 
        justify-content: center;
        width: 38px; 
        height: 38px; 
        font-size: 24px;
        cursor: pointer;
        color: #FFFFFF !important; 
        background: none; 
        border: none; 
        margin-left: auto;
    }
    
    /* Mobile Dropdown Hidden by Default */
    #mainNav {
        display: none !important; /* Keeps it closed initially */
        position: absolute !important; 
        top: 100% !important; /* Snaps exactly to the bottom of the header */
        left: 0 !important; 
        width: 100% !important; /* Forces it to span the full screen width */
        background: var(--brand-brown) !important; 
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    
    /* When Hamburger is Clicked (Active State) */
    #mainNav.active { 
        display: block !important; 
    }
    
    /* Mobile List Layout */
    #mainNav ul { 
        display: flex !important;
        flex-direction: column !important; /* Stacks links vertically */
        align-items: center !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #mainNav ul li { 
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; 
    }
    
    #mainNav ul li a { 
        display: block !important;
        width: 100% !important;
        padding: 16px 0 !important; 
        text-align: center !important; 
    }
    
    /* Mobile Buttons */
    .btn-book-nav { 
        display: block !important; 
        width: 240px !important; /* Makes both buttons uniformly wide */
        margin: 15px auto !important; 
    }
}

@media (max-width: 480px) {
    header { padding: 12px 4% !important; }
    .logo-img { height: 38px; }
    .logo-text { font-size: 18px; }
}