/* ============================================================
   SANGEETHA — Navbar
   Desktop > 900px | Tablet 768–900px | Mobile < 768px
============================================================ */

/* ── Header shell ──────────────────────────────────────── */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(61,26,8,0.15);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    transition: box-shadow var(--transition);
}

#site-header.scrolled {
    box-shadow: 0 2px 20px rgba(61,31,13,0.13);
}

/* ── Inner layout ──────────────────────────────────────── */
.navbar-inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
}

/* ── Logo ──────────────────────────────────────────────── */
.navbar-logo {
    flex-shrink: 0;
}
.navbar-logo img {
    height: 60px;
    width: auto;
    display: block;
}

/* ── Desktop nav links ─────────────────────────────────── */
.navbar-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%;
}

/* Items stretch the full bar height so the dropdown (anchored at 100%)
   opens below the header rather than inside it. */
.navbar-links {
    display: flex;
    align-items: stretch;
    list-style: none;
    gap: 0;
    height: 100%;
}

.navbar-links > li {
    display: flex;
    align-items: center;
}

.navbar-links li a {
    display: block;
    padding: 6px 18px;
    font-size: 15.5px;
    font-weight: 500;
    color: #3D1A08;
    white-space: nowrap;
    position: relative;
    transition: color var(--transition);
}

.navbar-links li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #3D1A08;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.navbar-links li a:hover,
.navbar-links li a.active {
    color: #3D1A08;
}

.navbar-links li a:hover::after,
.navbar-links li a.active::after {
    transform: scaleX(1);
}

/* ── Right cluster ─────────────────────────────────────── */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Book a Table button ───────────────────────────────── */
.btn-book-table {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--maroon);
    color: var(--cream);
    border: 2px solid var(--maroon);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.btn-book-table:hover {
    background: var(--deep-maroon);
    border-color: var(--deep-maroon);
    color: var(--cream);
}

/* ── Hamburger ─────────────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #3D1A08;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate to × when open */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Nav Drawer (tablet + mobile) ─────────────────────── */
.nav-drawer {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(61,26,8,0.15);
    box-shadow: 0 8px 28px rgba(61,31,13,0.12);
    padding: 8px 1.5rem 24px;
    z-index: 999;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
}

.nav-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0s;
}

.nav-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-drawer ul li a {
    display: block;
    padding: 13px 0;
    font-size: 15px;
    font-weight: 500;
    color: #3D1A08;
    border-bottom: 1px solid rgba(61,31,13,0.08);
    transition: color var(--transition);
}

.nav-drawer ul li:last-child a {
    border-bottom: none;
}

.nav-drawer ul li a:hover {
    color: #3D1A08;
}

/* Book a Table inside drawer — mobile only */
.drawer-book-btn {
    display: none;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    padding: 13px 20px;
}

/* ── Small laptops / scaled displays (901px – 1164px) ─────
   The enlarged logo and nav font need ~1165px to lay out. Below that
   the bar overflows its own container and "Reserve a Table" is clipped
   off the right edge — 177px over at a 977px viewport.
   Very common in the wild: a high-res laptop at 150-200% Windows
   scaling, or any window that isn't maximised.
   Step the bar down here instead of falling back to the hamburger, so
   all seven links stay one click away on a real laptop. */
@media (min-width: 901px) and (max-width: 1164px) {
    :root { --nav-height: 68px; }

    .navbar-inner {
        padding-inline: clamp(1rem, 2vw, 1.5rem);
        gap: 0.5rem;
    }
    .navbar-logo img { height: 44px; }

    /* Link padding is fluid, not a flat step: 901px is the tightest point in
       the band (seven links plus logo, phone and Reserve button all have to
       fit), so it tapers to 7px there and eases back out toward 1164px. */
    /* The .nav-dropdown-toggle rules live further down this file, so a bare
       .nav-dropdown-toggle selector here would lose on source order and leave
       Menu and Events visibly wider than the other five links. Qualify with
       .navbar-links to win on specificity instead. */
    .navbar-links li a,
    .navbar-links .nav-dropdown-toggle {
        padding: 6px clamp(7px, 0.78vw, 12px);
        font-size: 14.5px;
    }
    .navbar-links .nav-dropdown-toggle::after {
        left: clamp(7px, 0.78vw, 12px);
        right: clamp(7px, 0.78vw, 12px);
    }

    .navbar-right { gap: 6px; }
    .navbar-right .btn-book-table {
        padding: 8px 12px;
        font-size: 12.5px;
    }
}

/* ── Tablet (768px – 900px) ─────────────────────────────── */
@media (max-width: 900px) {
    .navbar-nav {
        display: none;
    }
    .hamburger {
        display: flex;
    }
}

/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 767px) {
    .navbar-right .btn-book-table {
        display: none;
    }
    .drawer-book-btn {
        display: inline-flex;
    }
    /* Slightly shorter bar + logo on phones, still well up from the old 48px.
       Override the variable (not just the header) so the drawer offset and
       hero top-padding stay in sync. */
    :root {
        --nav-height: 78px;
    }
    .navbar-logo img {
        height: 58px;
    }
}

/* ── Dropdown ──────────────────────────────────────────── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 18px;
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 500;
    color: #3D1A08;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color var(--transition);
}

.nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #3D1A08;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
    color: #3D1A08;
}

.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown-toggle.active::after {
    transform: scaleX(1);
}

.nav-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 185px;
    background: #FFFFFF;
    border: 1px solid rgba(61,26,8,0.15);
    border-radius: 10px;
    padding: 6px 0;
    list-style: none;
    box-shadow: 0 8px 28px rgba(61,31,13,0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.nav-dropdown-menu li a {
    display: block;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 500;
    color: #3D1A08;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}

.nav-dropdown-menu li a:hover {
    color: #8B6347;
    background: rgba(61,26,8,0.06);
}

.nav-dropdown-menu li a::after {
    display: none;
}

/* ── Drawer labels & sub-items ─────────────────────────── */
.drawer-label {
    padding: 12px 0 4px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #3D1A08;
}

.nav-drawer ul li.drawer-label {
    border-bottom: none;
}

.drawer-sub-item a {
    padding-left: 16px !important;
    color: #5C3D2A !important;
    font-size: 14px !important;
}