/**
 * Klaas Puul — Footer (Figma Design)
 * Background: #0D1C38
 * Fonts: "sofia-pro" (headings), "acumin-pro" (body)
 * 
 * Structure:
 * .kp-footer
 *   .inner
 *     .kp-footer__row
 *       .kp-footer__branding       (left: tagline, description, logo)
 *       .kp-footer__right          (right: columns + bottom bar)
 *         .kp-footer__columns
 *           .kp-footer__col × 3    (Menu, Contact, Connect)
 *         .kp-footer__bottom        (credits, legal)
 */

/* ============================================================================
   1. BASE
   ============================================================================ */
.kp-footer {
    background: #0D1C38;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.kp-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.kp-footer a:hover {
    opacity: 0.7;
}

.kp-footer .inner {
    width: 100%;
    max-width: 109.5rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================================================
   2. MAIN ROW — side by side on desktop
   ============================================================================ */
.kp-footer__row {
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   3. LEFT: BRANDING
   ============================================================================ */
.kp-footer__branding {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 0;
}

.kp-footer__branding-text {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.kp-footer__tagline {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 40px;
    line-height: 120%;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.kp-footer__description {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.kp-footer__logo-wrap {
    margin-top: 64px;
}

.kp-footer__logo {
    width: 169px;
    height: auto;
    display: block;
}

/* ============================================================================
   4. RIGHT: COLUMNS + BOTTOM
   ============================================================================ */
.kp-footer__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 0;
}

.kp-footer__columns {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ============================================================================
   5. COLUMN TITLES & CONTENT
   ============================================================================ */
.kp-footer__col-title {
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    color: #ffffff;
}

.kp-footer__toggle {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* KP chevron icon (mobile accordion) — Figma: 8x17.45px */
.kp-footer__icon {
    display: block;
    width: 8px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 18' fill='none'%3E%3Cpath d='M0 0C.025 1.786.91 3.809 2.55 5.45 4.188 7.092 6.214 7.975 8 8L0 0Z' fill='%23ffffff'/%3E%3Cpath d='M8 9.452C6.214 9.477 4.191 10.362 2.55 12.001.908 13.64.025 15.666 0 17.452L8 9.452Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}
.kp-footer__icon::before,
.kp-footer__icon::after {
    display: none;
}
.kp-footer__toggle[aria-expanded="true"] .kp-footer__icon {
    transform: rotate(90deg);
}

/* Nav links */
.kp-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kp-footer__nav li a,
.kp-footer__contact-info p,
.kp-footer__contact-info a {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: #ffffff;
}

.kp-footer__contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-footer__contact-info p {
    margin: 0;
}

.kp-footer__socials {
    margin-top: 40px;
}

/* ============================================================================
   6. BOTTOM BAR
   ============================================================================ */
.kp-footer__bottom {
    display: flex;
    gap: 120px;
    align-items: center;
    padding-top: 40px;
}

.kp-footer__credits,
.kp-footer__credits a,
.kp-footer__legal-link {
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: #ffffff;
}

/* ============================================================================
   7. DESKTOP (≥ 1024px) — Two-column layout
   ============================================================================ */
@media (min-width: 1024px) {

    .kp-footer__row {
        flex-direction: row;
        gap: 64px;
        min-height: 800px;
    }

    /* Left branding: flexible width, border right */
    .kp-footer__branding {
        flex: 1;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
        padding-right: 64px;
    }

    /* Right side: columns fill remaining space */
    .kp-footer__right {
        flex-shrink: 0;
        width: 60%;
    }

    /* Columns side by side */
    .kp-footer__columns {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .kp-footer__col {
        flex: 0 0 auto;
    }

    /* Column title has gap to content */
    .kp-footer__col-title {
        display: block;
        margin-bottom: 64px;
        min-height: 33.6px; /* 24px font × 140% line-height — matches title height even when empty */
    }

    /* Desktop: no accordion, always open */
    .kp-footer__icon {
        display: none;
    }
    .kp-footer__toggle {
        cursor: default;
    }
    .kp-footer__content {
        display: block !important;
    }
}

/* ============================================================================
   8. MOBILE (< 1024px) — Stacked accordion
   ============================================================================ */
@media (max-width: 1023px) {

    /* Figma mobile: padding 64px 64px 24px 0, border-bottom */
    .kp-footer__branding {
        padding: 64px 64px 24px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }
    /* Figma mobile: tagline + description, gap 24px, NO logo */
    .kp-footer__branding-text {
        gap: 24px;
    }
    .kp-footer__tagline {
        font-size: 40px;
    }
    .kp-footer__logo-wrap {
        display: none;
    }

    /* Figma: right section padding 24px 0 64px, gap 40px between toggles and credits */
    .kp-footer__right {
        padding: 24px 0 64px;
        gap: 40px;
    }

    /* Figma: stacked column, no gap (border-bottom handles dividers) */
    .kp-footer__columns {
        gap: 0;
        flex-direction: column;
        padding-top: 0;
    }
    /* Figma: col padding 0, border-bottom as divider */
    .kp-footer__col {
        padding: 0;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Mobile accordion */
    .kp-footer__icon {
        display: block;
    }
    /* Figma: toggle padding 14px 0 12px, no border on toggle */
    .kp-footer__toggle {
        cursor: pointer;
        pointer-events: auto;
        padding: 14px 0 12px;
        border-bottom: none;
    }
    .kp-footer__content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        padding: 0;
        margin: 0;
        border: none;
        font-size: 0;
        line-height: 0;
    }
    .kp-footer__toggle.is-active + .kp-footer__content {
        padding-top: 0;
        padding-bottom: 20px;
        font-size: 16px;
        line-height: 150%;
    }
    /* Figma: col title is acumin 16px regular (not heading font) */
    .kp-footer__col-title {
        font-family: var(--font-main, "acumin-pro", sans-serif);
        font-size: 16px;
        line-height: 150%;
        font-weight: 400;
        text-align: left;
    }

    /* Figma: bottom credits gap 8px, stacked column, no extra padding */
    .kp-footer__bottom {
        gap: 8px;
        flex-direction: column;
        flex-wrap: nowrap;
        padding-top: 0;
        align-items: flex-start;
    }
}