/* =============================================================
   BB Nav Enhancements — Fullscreen Overlay Style
   /bb-nav-enhancements/styles/fullscreen-overlay/fullscreen-overlay.css
   ============================================================= */


/* ----------------------------------------------------------
   Custom toggle button
   ---------------------------------------------------------- */

.bb-nav-fullscreen-toggle {
    display: none;
}

@media (max-width: 768px) {
    .bb-nav-fullscreen-toggle {
        display: flex;
    }
}

.bb-nav-fullscreen-toggle {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--bb-nav-bar-gap, 6px);
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100001; /* above overlay */
    width: 40px;
    height: 40px;
}

.bb-nav-fullscreen-toggle:focus,
.bb-nav-fullscreen-toggle:focus-visible,
.bb-nav-fullscreen-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: var(--bb-nav-toggle-focus-bg, transparent) !important;
}


/* ----------------------------------------------------------
   The three bars
   ---------------------------------------------------------- */

.bb-nav-fullscreen-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--bb-nav-toggle-color, currentColor);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
        opacity   0.2s ease,
        width     0.3s ease;
}


/* ----------------------------------------------------------
   Open state — morph to X
   ---------------------------------------------------------- */

/* Middle bar fades and shrinks */
.bb-nav-fullscreen-toggle--open .bb-nav-fullscreen-toggle__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

/* Top bar rotates down to form top arm of X */
.bb-nav-fullscreen-toggle--open .bb-nav-fullscreen-toggle__bar:nth-child(1) {
    transform: translateY(calc(var(--bb-nav-bar-gap, 6px) + 2px)) rotate(45deg);
}

/* Bottom bar rotates up to form bottom arm of X */
.bb-nav-fullscreen-toggle--open .bb-nav-fullscreen-toggle__bar:nth-child(3) {
    transform: translateY(calc((var(--bb-nav-bar-gap, 6px) + 2px) * -1)) rotate(-45deg);
}


/* ----------------------------------------------------------
   Fullscreen overlay panel
   ---------------------------------------------------------- */

.bb-nav-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    background-color: rgba(0, 0, 0, 0.15); /* overridden per-module by inline PHP */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.bb-nav-fullscreen-overlay--active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


/* ----------------------------------------------------------
   Nav items inside the overlay
   ---------------------------------------------------------- */

.bb-nav-fullscreen-overlay__nav {
    text-align: center;
    width: 100%;
    padding: 2rem;
}

.bb-nav-fullscreen-overlay__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-nav-fullscreen-overlay__nav ul li {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.bb-nav-fullscreen-overlay--active .bb-nav-fullscreen-overlay__nav ul li {
    opacity: 1;
    transform: translateY(0);
}

/* Strip BB layout styling from cloned list */
.bb-nav-fullscreen-overlay__nav ul,
.bb-nav-fullscreen-overlay__nav ul li,
.bb-nav-fullscreen-overlay__nav ul li a {
    float: none !important;
    display: block !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.bb-nav-fullscreen-overlay__nav ul li a {
    display: inline-block !important;
    padding: 0.5em 0 !important;
    text-decoration: none;
    color: var(--bb-nav-link-color, currentColor) !important;
    transition: color 0.2s ease;
}

.bb-nav-fullscreen-overlay__nav ul li a:hover {
    color: var(--bb-nav-link-hover-color, var(--bb-nav-link-color, currentColor)) !important;
}

/* Sub-menus */
.bb-nav-fullscreen-overlay__nav ul ul {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
}

.bb-nav-fullscreen-overlay__nav ul ul li a {
    font-size: 0.75em !important;
    opacity: 0.75;
}


/* ----------------------------------------------------------
   Hide BB's native mobile drawer when our style is active
   ---------------------------------------------------------- */

.bb-nav-fullscreen-mode .fl-menu-mobile-nav-collapse {
    display: none !important;
}