/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Fix for Bootstrap's container-fluid class */
.container-fluid {
    box-sizing: border-box;
}

/* ── Header & navigation ─────────────────────────────────────────────────── */

.header {
    height: 65px;
    border-bottom: 1px solid #333333;
    background-color: #000000;
    color: #ffffff;
    margin-bottom: 40px;

    .main-nav {
        .main-nav-link {
            color: #ffffff;
            white-space: nowrap;
            padding: 4px 12px;
            border-radius: 5px;
            transition: background-color 175ms;
            font-size: .9em;
            text-decoration: none;

            &:hover, &.selected {
                background-color: #262626;
            }

            &:active {
                background-color: #171717;
            }
        }
    }

    @media (max-width: 992px) {
        margin-bottom: 66px;

        .main-nav {
            background-color: #000000;
            position: absolute;
            top: 66px;
            left: 0;
            border-bottom: 1px solid #333333;
            width: 100%;
            min-width: 100%;
            box-sizing: border-box;
            overflow-x: auto;
            padding: 10px;
        }
    }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
    position: relative;
    z-index: 1;
    padding: 15px 0;

    &.top-footer {
        margin-top: 40px;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        background-color: var(--background-secondary-color);
        font-size: .9em;

        .logo {
            font-size: 1em;
        }
    }

    &.bottom-footer {
        font-size: .8em;
    }

    .footer-link {
        color: var(--color);
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.logo-wrapper {
    gap: 15px;
    font-size: 22px;
    font-family: 'Rye', cursive, sans-serif;

    a {
        text-decoration: none !important;
        color: var(--color);
    }

    .logo-image {
        height: 30px;
        width: auto;
        object-fit: contain;
    }

    .logo-white {
        color: #ffffff;
    }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
    a {
        color: var(--color);

        &:hover {
            color: var(--link-color);
        }
    }
}

/* ── Images ─────────────────────────────────────────────────────────────── */

.header-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
}