/* 128px logo when unsticky, 76px when sticky; animations to smoothen the change */
.header-fixed-top > .navbar .navbar-brand img {
    transition: max-height .4s cubic-bezier(.55, .04, .43, 1);
    max-height: 128px;
}
.header-fixed-top.is-fixed > .navbar .navbar-brand img {
    transition: max-height .4s cubic-bezier(.55,.04,.43,1);
    max-height: 76px;
}

/* background black opacity for the header to make text readable */
header {
    background-color: rgba(var(--bs-body-bg-rgb), .6);
}
header.header-fixed-top.is-fixed {
    background-color: transparent;
    transition: background-color .3s cubic-bezier(.55,.04,.43,1);
}

/* have dark text for top nav when non-sticky in light mode */
[data-bs-theme="light"] header .navbar .navbar-toggler {
    color: rgba(255,255,255,0.65);
}
@media (min-width: 992px) {
    [data-bs-theme="light"] header:not(.is-fixed) .navbar .navbar-nav > .nav-item > .nav-link {
        color: rgba(255,255,255,0.65);
    }
}

.pt-header {
    padding-top: 100px !important;
}
.mt-header {
    margin-top: 100px !important;
}
@media (min-width: 992px) {
    .pt-header {
        padding-top: 116px !important;
    }
    .mt-header {
        margin-top: 116px !important;
    }
}

/* FullCalendar */
.fc-col-header-cell.fc-day a {
    color: var(--bs-gray-900);
}
.fc-timegrid-slot-label {
    color: var(--bs-white);
}
.fc-event-title {
    font-size: 0.75em;
}
/*
    Vertically align elements within nodes that do not have a set height
    Credit to https://css-tricks.com/centering-in-the-unknown/
 */
.vertical-align-unknown-container {
    font-size: 0;
}
.vertical-align-unknown-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.vertical-align-unknown-content {
    display: inline-block;
    vertical-align: middle;
    font-size: unset;
}

/*
    Take into account the fixed header height when scrolling to an anchor on a page
 */
:target {
    scroll-margin-top: 100px;
}
@media (min-width: 992px) {
    :target {
        scroll-margin-top: 116px;
    }
}

.nice-showcase-height {
    height: 500px;
    max-height: 100vh;
}
@media (min-width: 1200px) {
    .nice-showcase-height {
        height: 700px;
    }
}