@font-face {
    font-family: 'Mulish';
    src: url('fonts/mulish-v13-latin-regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Mulish';
    src: url('fonts/mulish-v13-latin-300.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'Mulish';
    src: url('fonts/mulish-v13-latin-700.woff2') format('woff2');
    font-weight: 700;
}

:root {
    --primary-color: #00bf9c;
    --secondary-color:#00bf9c;
    --text-color: #000000;
    --background-color: #181616;
}

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

body {
    font-family: 'Mulish', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    position: relative; /* Ensure cookie banner positioning works */
}

body.consent-given {
    overflow: auto; /* Restore scrolling after consent */
}

header {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem; /* Reduced padding to fine-tune height */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Space between title and menu */
    height: 60px; /* Fixed height for consistent alignment */
}

header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0; /* Remove default margin */
    line-height: 1; /* Ensure text fits within the height */
}

nav {
    position: relative;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    float: right;
}

.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #000000; /* Black background for mobile */
    width: 200px;
    padding: 1rem;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 0 0 0 15px; /* Rounded corners: top-left and bottom-left only on mobile */
    overflow-y: scroll; /* Force scrollbar to always be visible */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Style the scrollbar for WebKit browsers (Chrome, Safari) */
.nav-menu::-webkit-scrollbar {
    width: 12px; /* Thicker scrollbar (12px as requested) */
    display: block; /* Always visible */
}

.nav-menu::-webkit-scrollbar-track {
    background: #000000; /* Match the menu background */
    border-radius: 5px; /* Rounded corners for the track */
}

.nav-menu::-webkit-scrollbar-thumb {
    background: #ffffff; /* White thumb for contrast */
    border-radius: 5px; /* Rounded corners for the thumb */
    border: 2px solid #000000; /* Border to match background and create contrast */
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: #cccccc; /* Lighter white on hover for feedback */
}

/* Fallback for Firefox */
.nav-menu {
    scrollbar-width: thin; /* Use thin scrollbar in Firefox */
    scrollbar-color: #ffffff #000000; /* White thumb / Black track */
}

/* Ensure scrollbar is always visible in all browsers */
.nav-menu {
    -ms-overflow-style: scrollbar; /* For IE/Edge */
}

.nav-menu.active {
    display: flex;
    max-height: 600px; /* Limit height to 600px on mobile when active */
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    font-weight: 300;
    flex-shrink: 0; /* Prevent links from shrinking */
}

.nav-menu a:hover {
    color: var(--secondary-color);
}

.close-menu {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem;
}

.close-menu:hover {
    color: var(--secondary-color);
}

main {
    margin-top: 50px; /* Reduced from 70px to optimize gap below header */
    padding: 1rem;
}

.menu-container {
    max-width: 800px;
    margin: 0 auto;
}

.menu-category {
    margin-bottom: 2rem;
    scroll-margin-top: 70px; /* Reduced from 100px to minimize gap below header when scrolling */
    padding-top: 2rem;
}

.menu-category h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
}

.menu-items {
    display: grid;
    gap: 0.5rem;
}

.menu-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.item-header h3 {
    font-weight: 700;
    font-size: 1.1rem;
}

.price {
    color: var(--secondary-color);
    font-weight: 700;
}

.menu-item p {
    font-size: 0.9rem;
    color: #666;
}

.menu-item small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #888;
}

.allergen-info {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto 2rem;
}

.allergen-info h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
}

.allergen-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.contact-info {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem auto 2rem; /* Adjusted margin to position before menu */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px; /* Match menu-container width */
}

.contact-info h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
}

.contact-info p, .contact-info ul {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.contact-info ul {
    list-style: none;
    padding-left: 0;
}

.contact-info li {
    margin-bottom: 0.3rem;
}

.contact-info strong {
    color: var(--text-color);
    font-weight: 700;
}

.phone-link {
    color: var(--secondary-color); /* Green for clickable link */
    text-decoration: none;
    font-size: 1.2rem; /* Larger phone number as requested */
    font-weight: 700;
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.phone-link:hover {
    color: #2ecc71; /* Slightly darker green on hover for feedback */
}

@media (max-width: 1520px) {
    .phone-link {
        display: inline-block; /* Ensure clickable on mobile */
        padding: 0.2rem 0; /* Slight padding for touch targets */
    }
}

@media (min-width: 1520px) {
    .menu-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        position: static;
        width: auto;
        padding: 0;
        box-shadow: none;
        background: none; /* No background on desktop, inherits header color */
        float: right;
        flex-direction: row;
        gap: 1rem;
        border-radius: 0; /* Remove rounded corners on desktop */
        max-height: none; /* Remove max-height on desktop */
        overflow-y: visible; /* Remove scrolling on desktop */
        align-items: center; /* Align menu items vertically with title */
    }

    .close-menu {
        display: none; /* Hide close button on desktop */
    }

    .menu-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Cookie Consent Banner Styles */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black for prominence */
    color: white;
    padding: 1rem;
    z-index: 1001; /* Above other content */
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.cookie-consent h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.cookie-consent p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.cookie-consent button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Mulish', sans-serif;
}

.cookie-consent button:hover {
    background-color: var(--secondary-color);
}

.cookie-consent .exit {
    background-color: #ff4444; /* Red for "Leave" button to stand out */
}

.cookie-consent .exit:hover {
    background-color: #cc0000; /* Darker red on hover */
}

/* Hide main content until consent is given */
body:not(.consent-given) main,
body:not(.consent-given) header {
    display: none; /* Hide content until cookies are accepted */
}

body:not(.consent-given) #cookie-consent {
    display: block; /* Show cookie banner by default */
}