/* ---------------------------------------------------------------
   Base
   The page scrolls on the window (not on <body>), so anchors, the
   browser's scrollbar and full-page screenshots behave normally.
   --------------------------------------------------------------- */
:root {
    --kj-blue: #1e90ff;
    --kj-header-h: 118px; /* height of the fixed header (phones) */
}

@media (min-width: 992px) {
    :root {
        --kj-header-h: 162px; /* larger logo on desktop */
    }
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--kj-header-h); /* section titles land below the fixed header */
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    overflow-x: clip;
    /* Footer stays at the bottom of the screen on short pages */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    body > main {
        flex: 1 0 auto;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---------------------------------------------------------------
   Fixed header
   --------------------------------------------------------------- */
.kj-fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    padding: 1rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .kj-fixed-header .kj-logo {
        height: 80px;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
    }

    .kj-fixed-header .nav-link {
        color: white !important;
    }

        .kj-fixed-header .nav-link:hover {
            color: var(--kj-blue) !important;
        }

@media (min-width: 992px) {
    .kj-fixed-header .kj-logo {
        height: 120px;
    }

    .kj-fixed-header .nav-link {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Opened menu on phones gets a solid background so links stay readable */
@media (max-width: 991.98px) {
    .kj-fixed-header .navbar-collapse.show,
    .kj-fixed-header .navbar-collapse.collapsing {
        background-color: rgba(0, 0, 0, 0.85);
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
    }
}

/* Pages without a hero (Partners, Privacy): solid header over the white page */
body:has(.kj-header-spacer) .kj-fixed-header {
    background-color: rgba(0, 0, 0, 0.88);
}

/* Pages without a hero (Partners, Privacy) start below the header */
.kj-header-spacer {
    height: var(--kj-header-h);
}

/* ---------------------------------------------------------------
   Hero carousel
   Fills the screen behind the transparent header; images are cropped
   to fit (object-fit) instead of shrinking to a strip on phones.
   --------------------------------------------------------------- */
#heroCarousel,
#heroCarousel .carousel-item {
    height: 100vh;
    min-height: 560px;
    max-height: 1080px;
}

@media (max-width: 767.98px) {
    #heroCarousel,
    #heroCarousel .carousel-item {
        height: 85vh;
        min-height: 520px;
    }
}

.kj-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kj-hero-caption {
    position: absolute;
    inset: 0;
    padding: calc(var(--kj-header-h) + 1rem) 12% 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
}

    /* Text on the right side (used where the image leaves the right side empty) */
    .kj-hero-caption.kj-hero-caption-end {
        align-items: flex-end;
        text-align: right;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .kj-hero-caption h1,
    .kj-hero-caption h2 {
        font-size: clamp(2rem, 4.5vw, 3.75rem);
        font-weight: 700;
        line-height: 1.1;
        max-width: 14em;
        margin-bottom: 1rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    }

    .kj-hero-caption p {
        font-size: clamp(1rem, 1.6vw, 1.35rem);
        max-width: 32em;
        margin-bottom: 1.75rem;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    }

@media (max-width: 767.98px) {
    .kj-hero-caption,
    .kj-hero-caption.kj-hero-caption-end {
        padding-left: 8%;
        padding-right: 8%;
        align-items: flex-start;
        text-align: left;
        background: rgba(0, 0, 0, 0.35);
    }
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 6%;
}

/* ---------------------------------------------------------------
   Partners page: the three logos share one style
   --------------------------------------------------------------- */
.kj-partner-logo {
    max-width: 75%;
    max-height: 260px;
    object-fit: contain;
    padding: 2rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}