/**
 * Footer (Kadence footer-builder + widgets, overgenomen van CCS).
 *
 * Figma: SECTIONS → Footer. Eén afgerond vlak met een draaiend verloop
 * (#2C2A67 → #E5007E, zoals de hero's), 16px van de rand; vier
 * kolommen (Direct naar, Profielen, Onderwijsaanbod, Contact) en een
 * onderbalk met "Met de kracht van" + logo's, copyright en links.
 * Witte tekst; pijltjes in een rondje met een lichte rand.
 *
 * De pijl-animatie, de hover op social-iconen/logo en de uitklap op
 * mobiel (.js-toggle) komen uit de plugin.
 */

/* Hoek van het footer-verloop als animeerbare hoek; start diagonaal
   (donkerblauw linksboven, roze rechtsonder), één volle draai. */
@property --alma-footer-hoek {
    syntax: '<angle>';
    inherits: false;
    initial-value: 135deg;
}

@keyframes alma-footer-draai {
    from { --alma-footer-hoek: 135deg; }
    to   { --alma-footer-hoek: 495deg; }
}

footer.site-footer {
    --body-size: var(--carmel-font-size-caption);
    --body-line-height: 100%;
    --body-weight: var(--carmel-font-weight-regular);
    --body-color: var(--alma-neutral-0);
    padding: 0;
    text-align: left;
    color: var(--alma-neutral-0);

    /* Het verloop loopt door beide rijen heen: één achtergrond op de
       wrapper, de rijen zelf transparant. Doorlopend, naadloos draaiend
       verloop van #2C2A67 naar #E5007E (Figma Motion, footer), zonder
       vormen. Zelfde beweging als de hero's (hero-_basis.css). */
    > .site-footer-wrap {
        background: linear-gradient(var(--alma-footer-hoek), var(--alma-donker-blauw) 0%, var(--alma-roze) 100%);
        border-radius: var(--carmel-radius-lg);
        overflow: hidden;
        animation: alma-footer-draai 24s linear infinite;
    }

    .site-top-footer-wrap,
    .site-middle-footer-wrap,
    .site-top-footer-wrap > div,
    .site-middle-footer-wrap > div {
        background: transparent !important;
        border: 0 !important;
    }

    a,
    p,
    .widget,
    .footer-html-inner {
        color: var(--alma-neutral-0);
    }

    a {
        letter-spacing: var(--carmel-letter-spacing-body-medium);
    }

    /* Kolomkop ("Direct naar", ...) */
    .footer-widget-area-inner > .widget_block.widget_text:first-child p {
        color: var(--alma-neutral-0) !important;
        font-size: var(--carmel-font-size-caption);
        margin-bottom: var(--carmel-space-sm);
    }

    .wp-block-kadence-rowlayout {
        margin-bottom: 34px;
    }

    .linklist {
        a {
            color: var(--alma-neutral-0) !important;
            font-size: var(--carmel-font-size-body-medium);
            padding-right: 52px;

            &:after {
                border-radius: 50%;
                border: 1px solid rgba(255, 255, 255, 0.4);
            }
        }

        /* Lange namen ("Produceren, Installeren en Energie") mogen over
           twee regels. */
        p {
            height: auto;
            min-height: 32px;
            justify-content: flex-start;
            margin-bottom: var(--carmel-space-xs);
        }
    }

    .contactgegevensfooter {
        --body-size: var(--carmel-font-size-body-medium);
        --body-letter-spacing: var(--carmel-letter-spacing-body-medium);
        --body-line-height: var(--carmel-line-height-body-medium);

        a {
            text-decoration: underline;
        }
    }

    /* "Alle contactgegevens": klein wit knopje met donkerblauwe tekst */
    .kb-button.kt-button.button {
        border-color: var(--alma-neutral-0) !important;
        background-color: var(--alma-neutral-0) !important;
        color: var(--alma-donker-blauw) !important;
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 12px !important;
        border-radius: var(--carmel-radius-sm) !important;
        font-size: var(--carmel-font-size-caption);

        svg path {
            stroke: var(--alma-donker-blauw) !important;
        }
    }

    /* "Met de kracht van": Carmel, OSG Twente en CSG Oost (html-blok in
       footer6, svg's in de mediabibliotheek) */
    .site-footer-middle-section-1 .kt-row-column-wrap.kt-has-2-columns {
        grid-template-columns: auto auto !important;
        justify-content: start;
        align-items: center;
        column-gap: var(--carmel-space-sm);
    }

    .alma-footer-logos {
        display: flex;
        align-items: center;
        gap: var(--carmel-space-sm);

        img {
            display: block;
            width: auto;
            max-width: none;
        }
    }

    .footer-html {
        margin: 14px 0;
    }

    .footer-html-inner a {
        text-decoration: none;
        margin-left: var(--carmel-space-sm);
    }
}

@media (min-width: 1024px) {
    footer.site-footer {
        padding: var(--carmel-space-sm);
    }
}

@media (min-width: 1025px) {
    footer.site-footer {
        .site-top-footer-wrap .site-footer-row {
            padding-top: 64px !important;
            padding-bottom: 48px !important;
        }

        /* Onderbalk: logo's | copyright + links; de lege derde kolom
           neemt geen ruimte. */
        .site-middle-footer-inner-wrap {
            grid-template-columns: max-content 1fr auto !important;
            column-gap: 64px;
        }

        .contactgegevensfooter p {
            margin-bottom: var(--carmel-space-xs);
        }
    }
}

@media (min-width: 1024px) and (max-width: 1400px) {
    footer.site-footer .linklist a {
        font-size: var(--carmel-font-size-caption);
    }
}

@media (max-width: 1024px) {
    footer.site-footer {
        > .site-footer-wrap {
            border-radius: 0;
        }

        .wp-block-kadence-rowlayout {
            margin-bottom: 0;
        }

        .site-top-footer-inner-wrap,
        .site-middle-footer-inner-wrap {
            grid-row-gap: 0;
        }

        /* Uitklapkoppen op mobiel: lijn eronder */
        .footer-widget-area-inner > .widget_block.widget_text:first-child p {
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            padding-bottom: var(--carmel-space-sm);
        }
    }
}

@media (max-width: 768px) {
    footer.site-footer {
        /* Copyright, Disclaimer en Privacy onder elkaar */
        .site-footer-middle-section-2 .footer-html-inner p {
            display: grid;
            justify-items: start;
            row-gap: var(--carmel-space-xs);

            > a { margin-left: 0; }
            > a:first-of-type { grid-row: 2; }
            > a:last-of-type  { grid-row: 3; }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    footer.site-footer > .site-footer-wrap {
        animation: none;
    }
}