/* Navigation */
.navbar {
    background-color: honeydew;
}

@media (min-width: 768px) {
    .navbar {
        max-height: 10vh;
        overflow: hidden;
    }
}

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

.navbar-brand img {
    height: 2rem;
    max-height: calc(10vh - 1rem);
    width: auto;
}

.navbar .nav-link {
    color: #15803d;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #0f5f2e;
}

@media (max-width: 767.98px) {
    .navbar-collapse .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .navbar-collapse .nav-item {
        flex: 0 0 33.333%;
        text-align: center;
        position: relative;
    }

    .navbar-collapse .nav-item:not(:nth-child(3n))::after {
        content: '|';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #15803d;
    }

    .navbar-collapse .nav-link {
        padding: 0.5rem 0;
    }
}

/* Base link */
a.base-link {
    color: #15803d;
    text-decoration: none;
}

a.base-link:hover {
    text-decoration: underline;
}

/* Base button */
.base-button {
    background-color: honeydew;
    border-color: #15803d;
    color: #15803d;
    vertical-align: baseline;
    padding: 0.15rem 0.35rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
}

.base-button:hover,
.base-button:focus {
    background-color: #d1fae5;
    border-color: #15803d;
    color: #15803d;
}

/* Offcanvas styling */
#offcanvasRight {
    background-color: honeydew;
    border-radius: 0.75rem 0 0 0.75rem;
}

#offcanvasRight .btn-close {
    filter: invert(27%) sepia(60%) saturate(600%) hue-rotate(100deg) brightness(80%);
}

@media (max-width: 767.98px) {
    #offcanvasRight {
        width: 75%;
    }
}

/* About Me page — nav button cards */
#aboutme-tabs .nav-link { color: #15803d; }
#aboutme-tabs .nav-link:hover,
#aboutme-tabs .nav-link.active { color: #0f5f2e; }
#aboutme-tabs .card-body span { font-size: 0.75rem; }

@media (max-width: 767.98px) {
    #aboutme-tabs .nav-link {
        flex: 0 0 calc(25% - 0.375rem); /* 4 per row with gap-2: 3×0.5rem / 4 = 0.375rem */
    }
    #aboutme-tabs .card-body {
        padding: 0.4rem 0.2rem !important;
    }
    #aboutme-tabs .card-body .bi {
        font-size: 1.1rem;
    }
    #aboutme-tabs .card-body span {
        font-size: 0.6rem;
    }
}

/* Columbo carousel */
#carouselColumboEpisodes .card {
    font-size: 0.85em;
}
#carouselColumboEpisodes .card-header h5 {
    font-size: 1rem;
}
#carouselColumboEpisodes .card-header h6 {
    font-size: 0.8rem;
}

/* Episodes page — sticky heading and table header */
.episodes-heading-row {
    position: sticky;
    top: 58px;
    z-index: 100;
    background-color: white;
}

.episodes-table thead th {
    position: sticky;
    top: calc(58px + 32px);
    background-color: white;
    z-index: 99;
}