/* Header Styling */
header.bg-dark {
    padding-bottom: 0;
}

/* Navigation Container */
.navbar {
    position: relative;
    padding: 0.5rem 0;
}

    .navbar .container {
        position: relative;
        flex-wrap: wrap;
    }

/* Desktop Styles */
@media (min-width: 992px) {
    /* Make container relative for positioning */
    .navbar .container {
        flex-direction: column !important;
        padding: 0 12px;
    }

    /* Top row with logo */
    .navbar-brand {
        margin-right: auto;
        padding: 0.5rem 0 1rem 0;
    }

    /* Hide toggler on desktop */
    .navbar-toggler {
        display: none;
    }

    /* Make collapse visible */
    .navbar-collapse {
        display: flex !important;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        min-height: 50px;
    }

        /* Orchard menu container */
        .navbar-collapse nav {
            width: 100%;
        }

        /* Orchard menu - centered */
        .navbar-collapse .menu {
            display: flex !important;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
        }

            /* Menu items */
            .navbar-collapse .menu li {
                position: relative;
                list-style: none;
                margin: 0;
                width: auto !important;
            }

                /* Navigation links */
                .navbar-collapse .menu li a {
                    color: rgba(255, 255, 255, 0.85) !important;
                    font-weight: 500;
                    padding: 1rem 1.5rem;
                    transition: all 0.3s ease;
                    display: inline-block;
                    text-decoration: none;
                    white-space: nowrap;
                    width: auto !important;
                }

                    /* Navigation links hover */
                    .navbar-collapse .menu li a:hover {
                        color: #ff6b6b !important;
                        background-color: rgba(255, 255, 255, 0.05);
                    }

                /* Active menu item */
                .navbar-collapse .menu li.active > a,
                .navbar-collapse .menu li.current > a {
                    color: #ff6b6b !important;
                    border-bottom: 2px solid #ff6b6b;
                }

    /* Order Now button container */
    .d-none.d-lg-block {
        display: block !important;
        position: absolute;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        margin: 0;
        z-index: 10;
    }

    /* Order Now button - smaller size for desktop */
    .btn-danger {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
        border: none;
        padding: 0.4rem 1.2rem;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        white-space: nowrap;
        border-radius: 0.375rem;
        margin: 0;
        display: inline-block;
        width: auto !important;
        min-width: auto;
        text-align: center;
    }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
            background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
        }

    /* Add smaller padding to menu to prevent overlap */
    .navbar-collapse .menu {
        padding-right: 140px !important;
    }

    /* A signed-in customer also has "My account" + "Log out" beside Order Now: leave room for them too */
    body.has-account .navbar-collapse .menu {
        padding-right: 320px !important;
    }
}

/* Mobile Styles */
@media (max-width: 991.98px) {
    /* Normal flex row for mobile */
    .navbar .container {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Brand stays on left */
    .navbar-brand {
        flex: 1;
    }

    /* Toggler on right */
    .navbar-toggler {
        display: block;
    }

    /* Collapse menu */
    .navbar-collapse {
        margin-top: 1rem;
        width: 100%;
        padding: 0.5rem 0;
    }

        /* Orchard menu - vertical layout */
        .navbar-collapse .menu {
            flex-direction: column;
            width: 100%;
            margin: 0;
            padding: 0;
        }

            /* Menu items full width */
            .navbar-collapse .menu li {
                width: 100%;
                margin: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

                .navbar-collapse .menu li:last-child {
                    border-bottom: none;
                }

                /* Navigation links on mobile */
                .navbar-collapse .menu li a {
                    padding: 0.75rem 0;
                    width: 100%;
                    display: block;
                    white-space: normal;
                    font-size: 1rem;
                }

    /* Hide the separate Order Now button on mobile */
    .d-none.d-lg-block {
        display: none !important;
    }

    /* Optional: Style the last menu item as Order Now on mobile */
    .navbar-collapse .menu li:last-child a {
        color: #ff6b6b !important;
        font-weight: 600;
    }
}

/* Dropdown Menu Styling */
.navbar-collapse .dropdown-menu {
    background-color: #2c3e50;
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    margin-top: 0;
    padding: 0.5rem 0;
}

@media (min-width: 992px) {
    .navbar-collapse .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-menu {
        background-color: transparent;
        box-shadow: none;
        padding-left: 1.5rem;
        position: static;
        float: none;
        width: 100%;
        border: none;
    }
}

.navbar-collapse .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(255, 107, 107, 0.1);
        color: #ff6b6b;
        padding-left: 1.8rem;
    }

/* Dropdown toggle */
.dropdown-toggle::after {
    transition: transform 0.3s ease;
}

.dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Submenu support */
.navbar-collapse .dropdown-submenu {
    position: relative;
}

@media (min-width: 992px) {
    .navbar-collapse .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.5rem;
        margin-left: 0.5rem;
    }
}

.navbar-collapse .dropdown-submenu:hover .dropdown-menu {
    display: block;
}

/* Dropdown animation */
.dropdown-menu {
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The header menu is a "list-group" <ul>; lay it out as a row on desktop and a column on mobile.
   Scoped to the header on purpose: the same Bootstrap class is used for ordinary lists in page content
   (About, Privacy, Terms) and must stay a normal vertical list there. */
header .list-group {
    display: flex !important;
    width: 100%;
}

@media (min-width: 992px) {
    header .list-group {
        flex-direction: row !important;
        justify-content: center;
    }

        header .list-group li {
            width: auto !important;
        }
}

@media (max-width: 991.98px) {
    header .list-group {
        flex-direction: column !important;
    }
}

/* ---- Mobile header menu (added 2026-10-12) -------------------------------------------------------------------------
   The mobile block above only styled the LAST menu item (assuming it was "Order Now") and left the other links as plain
   browser links: blue, underlined, flush to the edge. Give the whole mobile menu one clean look, keep the account buttons
   in line with it, and show an "Order Now" button next to the menu button (the desktop one is hidden on mobile). */
@media (max-width: 991.98px) {
    header .navbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
    }

    .navbar-toggler {
        padding: 0.3rem 0.6rem;
        border-color: rgba(255, 255, 255, 0.45);
        border-radius: 0.375rem;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
    }

    .navbar-collapse {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: 0.75rem;
        padding: 0.25rem 0 0.5rem;
    }

    .navbar-collapse .menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-collapse .menu li a,
    .navbar-collapse .menu li a:visited {
        color: rgba(255, 255, 255, 0.92) !important;
        text-decoration: none !important;
        font-weight: 500;
        padding: 0.85rem 0.25rem;
        display: block;
        width: 100%;
    }

    .navbar-collapse .menu li a:hover,
    .navbar-collapse .menu li a:focus,
    .navbar-collapse .menu li.active > a,
    .navbar-collapse .menu li.current > a {
        color: #ff8a8a !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* The old "last item is Order Now" rule turned an ordinary link (Contact) red and bold. */
    .navbar-collapse .menu li:last-child a {
        color: rgba(255, 255, 255, 0.92) !important;
        font-weight: 500;
    }

    /* "My account" / "Log out" added by the layout script when someone is signed in */
    header nav.navbar > .d-inline-flex {
        width: 100%;
        margin-left: 0 !important;
        padding: 0.75rem 0.25rem 0.25rem;
        gap: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    header nav.navbar > .d-inline-flex .btn {
        margin-right: 0 !important;
    }

    /* Order Now beside the menu button (the desktop button is hidden on mobile) */
    .order-now-mobile {
        margin-left: auto;
        margin-right: 0.6rem;
        white-space: nowrap;
        background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
        border: none;
        color: #fff;
        font-weight: 600;
        border-radius: 0.375rem;
    }
}

@media (min-width: 992px) {
    .order-now-mobile {
        display: none !important;
    }
}