/* Bottom navigation and floating invitation controls. */


.navbar {
    background-color: rgba(248, 249, 250, .82);
    backdrop-filter: blur(.5rem);
}


.navbar .nav-link {
    color: rgba(0, 0, 0, .56);
    position: relative;
    transition: color 0.3s ease;
}


.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--theme);
}


.navbar .nav-link::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: var(--theme);
    border-radius: 0 0 4px 4px;
    transition: transform 0.3s ease;
}


.navbar .nav-link.active::before {
    transform: translateX(-50%) scaleX(1);
}


.audio-float {
    bottom: 10vh;
    right: 2vh;
    z-index: 1030;
}


/* Compact five-item navigation window that follows the active invitation page. */
#navbar-menu .dynamic-page-navigation {
    display: flex;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
}


#navbar-menu .dynamic-page-navigation::-webkit-scrollbar {
    display: none;
}


#navbar-menu .dynamic-page-navigation > .nav-item {
    display: flex;
    min-width: 0;
    flex: 0 1 calc(100% / var(--visible-page-count, 5));
    max-width: 7.25rem;
    align-items: stretch;
    justify-content: center;
}


#navbar-menu .dynamic-page-navigation .nav-link {
    box-sizing: border-box;
    display: flex;
    width: calc(100% - .36rem);
    height: auto;
    margin-right: .18rem;
    margin-left: .18rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


#navbar-menu .dynamic-page-navigation .nav-link i {
    display: block;
    margin-right: auto;
    margin-left: auto;
    line-height: 1;
    text-align: center;
}


#navbar-menu .dynamic-page-navigation .nav-link span {
    display: block;
    width: 100%;
    text-align: center;
}


#navbar-menu .dynamic-page-navigation > .nav-item[hidden] {
    display: none;
}

#navbar-menu {
    z-index: 1100;
    min-height: calc(var(--invitation-nav-height) + var(--invitation-safe-bottom));
    padding-right: var(--invitation-safe-right);
    padding-bottom: var(--invitation-safe-bottom);
    padding-left: var(--invitation-safe-left);
}

body:not(.is-open) #navbar-menu {
    visibility: hidden;
    pointer-events: none;
}

#navbar-menu .dynamic-page-navigation {
    width: min(100%, var(--invitation-content-width));
    margin-inline: auto;
}

#navbar-menu .nav-link,
#navbar-menu .nav-link[aria-current="page"] {
    text-align: center;
}

#navbar-menu .nav-link[aria-current="page"] {
    color: inherit;
}

.audio-float {
    z-index: 1110;
    right: max(.7rem, var(--invitation-safe-right));
    bottom: calc(var(--invitation-nav-height) + .65rem + var(--invitation-safe-bottom));
}