/* ========================================
Rushcliffe Garden Care
Navbar
======================================== */


/* ---------- Navbar shell ---------- */

.wg-navbar {
    background: var(--brand);
    padding: 0.75rem 0;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);

    position: relative;
    z-index: 1030;
}


/* ---------- Icons ---------- */

.wg-navbar i {
    color: var(--leaf);
    transition: color 0.2s ease;
}


/* ---------- Brand ---------- */

.wg-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    color: var(--ivory);

    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.02em;

    transition: color 0.2s ease;
}

.wg-navbar .navbar-brand:hover,
.wg-navbar .navbar-brand:focus {
    color: var(--gold);
}

.wg-navbar .brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    line-height: 1;
}

.wg-navbar .brand-sub {
    margin-top: 4px;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-indent: 0.25em;

    color: var(--ivory);
    opacity: 0.7;
}


/* ---------- Navigation Links ---------- */

.wg-navbar .nav-link {
    color: var(--ivory);

    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;

    padding: 0.55rem 1rem;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Hover = gold */

.wg-navbar .nav-link:hover {
    color: var(--gold);
}


/*
Keep clicked/focused links ivory.
This prevents Bootstrap's focus/active state
from leaving the navigation link gold.
*/

.wg-navbar .nav-link:focus,
.wg-navbar .nav-link:focus-visible,
.wg-navbar .nav-link:active,
.wg-navbar .nav-link.show,
.wg-navbar .nav-link.active {
    color: var(--ivory) !important;

    outline: none;
    box-shadow: none;
}


/* ---------- Dropdown Toggle ---------- */

.wg-navbar .dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.18em;

    opacity: 0.8;

    transition: transform 0.2s ease;
}


/*
Bootstrap adds .show directly to the
dropdown toggle when opened on mobile.
*/

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


/* ---------- Dropdown Surface ---------- */

.wg-navbar .dropdown-menu {
    background: var(--cream);

    border: none;
    border-radius: 0.5rem;

    padding: 0.35rem;
    margin-top: 0.35rem;

    min-width: 15rem;

    box-shadow:
        0 12px 32px rgba(36, 38, 34, 0.28);
}


/* ---------- Dropdown Items ---------- */

.wg-navbar .dropdown-item {
    position: relative;

    color: var(--charcoal);

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.95rem;

    border-radius: 0.35rem;

    padding: 0.55rem 0.9rem 0.55rem 1.1rem;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


/* Burgundy accent bar */

.wg-navbar .dropdown-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    transform: translateY(-50%);

    background: var(--burgundy);

    border-radius: 0 2px 2px 0;

    transition: height 0.18s ease;
}


/* ---------- Dropdown Hover / Focus ---------- */

.wg-navbar .dropdown-item:hover,
.wg-navbar .dropdown-item:focus {
    background: var(--ivory);
    color: var(--charcoal);
}

.wg-navbar .dropdown-item:hover::before,
.wg-navbar .dropdown-item:focus::before {
    height: 60%;
}


/* ---------- Mobile Toggle ---------- */

.wg-navbar .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.5rem;

    padding: 0;

    color: var(--ivory);
    background: transparent;

    border: 1px solid rgba(244, 235, 221, 0.45);
    border-radius: 0.4rem;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


/* ---------- Hamburger Icon ---------- */

.wg-navbar .navbar-toggler i {
    color: var(--ivory);

    font-size: 1.1rem;

    transition: color 0.2s ease;
}


/* ---------- Hamburger Hover ---------- */

.wg-navbar .navbar-toggler:hover {
    color: var(--gold);

    border-color: var(--gold);

    background: rgba(217, 165, 20, 0.08);
}

.wg-navbar .navbar-toggler:hover i {
    color: var(--gold);
}


/* ---------- Hamburger Focus ---------- */

.wg-navbar .navbar-toggler:focus,
.wg-navbar .navbar-toggler:focus-visible {
    color: var(--ivory);

    border-color: rgba(244, 235, 221, 0.45);

    background: transparent;

    box-shadow: none;

    outline: none;
}

.wg-navbar .navbar-toggler:focus i,
.wg-navbar .navbar-toggler:focus-visible i {
    color: var(--ivory);
}


/* ---------- Desktop Dropdown Behaviour ---------- */

@media (min-width: 992px) {

    /* Hide mobile hamburger on desktop */

    .wg-navbar .navbar-toggler {
        display: none;
    }


    /* Open dropdown on hover */

    .wg-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;

        margin-top: 0;
    }


    /* Rotate dropdown arrow on hover */

    .wg-navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }


    /* Hide dropdown when not hovered */

    .wg-navbar .nav-item.dropdown:not(:hover) > .dropdown-menu {
        display: none !important;
    }

}