/**
 * Infohub-overzicht (Figma: Pages → Infohub).
 *
 * De pagina is één verloopvlak met de CodePen-vormen (.alma-codepen,
 * codepen.css), 16px van de rand en bovenaan onder de menubalk door
 * (header.css). Daarin links de kop "Infohub" (Display D-1, wit) en
 * daaronder het plugin-blok carmel-core/infohub-overzicht:
 * - links de navigatie als witte kaart (376px), actief item lichtgrijs;
 * - rechts de inhoud als witte kaart (±960px, 40px binnenruimte): de
 *   sectietitel ("Algemeen") en de categorieën in drie kolommen, elk
 *   met een vette titel en de links eronder.
 * Gemeten op de 36%-weergave van Figma (±5px).
 *
 * Opbouw: Kadence-rij (volle breedte) met de klassen "alma-infohub-pagina
 * alma-codepen", daarin een H1 en het blok Infohub overzicht. De items
 * zijn de CPT infohub met de categorieën infohub_categorie.
 */

.alma-infohub-pagina {
    /* kleuren zoals Figma: roze, onder naar donkerblauw, de boog
       linksboven lichter roze, de golf rechtsonder lichtblauw (zoals de
       profielen-overzichtspagina) */
    --alma-cta-k1: var(--alma-roze);
    --alma-cta-k2: var(--alma-roze);
    --alma-cta-k3: var(--alma-roze);
    --alma-cta-k4: var(--alma-donker-blauw);
    --alma-cta-lb-k1: var(--alma-rood);
    --alma-cta-lb-k4: var(--alma-roze);
    --alma-cta-ro-k3: var(--alma-licht-blauw);
    --alma-codepen-lb-grootte: auto 34%;
    --alma-codepen-ro-grootte: 44% 14%;
    --alma-codepen-ro-plek: 101.4% 104%;

    margin-bottom: var(--section-gap) !important;
    padding: 0 !important;
    color: var(--alma-neutral-0);

    > .kt-row-column-wrap {
        max-width: calc(var(--global-content-width, 1471px) - 2 * var(--global-content-edge-padding, 16px)) !important;
        margin: 0 auto;
        padding: 104px var(--global-content-edge-padding, 16px) 80px !important;
    }

    :is(.kt-inside-inner-col, .kadence-inner-column-inner) {
        padding: 0 !important;
    }

    h1 {
        margin: 0 0 120px !important;
        font-family: var(--carmel-font-heading);
        font-size: var(--carmel-font-size-display1) !important;
        line-height: var(--carmel-line-height-display1) !important;
        letter-spacing: var(--carmel-letter-spacing-display1) !important;
        font-weight: var(--carmel-font-weight-display1) !important;
        color: var(--alma-neutral-0) !important;
    }
}

/* Volle breedte, maar 16px van de rand (zoals de profielen-overzichtspagina) */
.entry-content > .alma-infohub-pagina.alignfull {
    --alma-uitbreken: calc((100% - (100vw - var(--carmel-scrollbar-width, 15px))) / 2 + 16px);
    width: auto !important;
    max-width: none !important;
    margin-left: var(--alma-uitbreken) !important;
    margin-right: var(--alma-uitbreken) !important;
}

/* Bovenaan de pagina onder de menubalk door (header.css): de kop staat
   dan 104px onder de menubalk */
@media (min-width: 1025px) {
    .entry-content > .alma-infohub-pagina:first-child > .kt-row-column-wrap {
        padding-top: calc(var(--alma-header-gap, 16px) + var(--alma-mainbar-h, 80px) + 104px) !important;
    }
}

/* ---------------------------------------------------------------
   Het overzicht: navigatiekaart links, inhoudskaart rechts
   --------------------------------------------------------------- */
.alma-infohub-pagina .carmel-infohub {
    display: grid;
    grid-template-columns: minmax(0, 376px) minmax(0, 1fr);
    column-gap: 100px;
    align-items: start;
    color: var(--alma-donker-blauw);
}

.alma-infohub-pagina .carmel-infohub__nav {
    padding: 16px;
    background: var(--alma-neutral-0);
    border-radius: var(--carmel-radius-md);

    ul {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        display: block;
        padding: 12px 16px;
        border-radius: var(--carmel-radius-sm);
        color: var(--alma-donker-blauw) !important;
        font-family: var(--carmel-font-body);
        font-size: 16px;
        line-height: 120%;
        text-decoration: none;
        transition: background-color 0.2s;

        &:is(:hover, :focus-visible, .is-active) {
            background: var(--alma-ac-grijs);
        }
    }
}

.alma-infohub-pagina .carmel-infohub__content {
    padding: 40px;
    background: var(--alma-neutral-0);
    border-radius: var(--carmel-radius-md);

    section + section {
        margin-top: 56px;
    }
}

.alma-infohub-pagina .carmel-infohub__section-title {
    margin: 0 0 40px !important;
    font-family: var(--carmel-font-heading);
    font-size: var(--carmel-font-size-h5) !important;
    line-height: var(--carmel-line-height-h5) !important;
    color: var(--alma-donker-blauw) !important;
}

/* Categorieën in drie kolommen; een categorie breekt niet over twee
   kolommen */
.alma-infohub-pagina .carmel-infohub__categories {
    display: block !important;
    columns: 3;
    column-gap: 40px;
}

.alma-infohub-pagina .carmel-infohub__category {
    break-inside: avoid;
    margin: 0 0 32px;
}

.alma-infohub-pagina .carmel-infohub__category-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--carmel-font-body) !important;
    font-size: 16px !important;
    line-height: 120% !important;
    font-weight: 700 !important;
    color: var(--alma-donker-blauw) !important;
}

.alma-infohub-pagina .carmel-infohub__links {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        margin: 0 0 8px;
        padding: 0;
    }

    a {
        color: var(--alma-donker-blauw) !important;
        font-size: var(--alma-font-size-body-small) !important;
        line-height: 140%;
        text-decoration: underline transparent;
        text-underline-offset: 3px;
        transition: text-decoration-color 0.2s;

        &:is(:hover, :focus-visible) {
            text-decoration-color: currentColor;
        }
    }
}

/* ---------------------------------------------------------------
   Tablet en mobiel: kaarten onder elkaar, minder kolommen
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .entry-content > .alma-infohub-pagina:first-child {
        margin-top: -86px !important;

        > .kt-row-column-wrap {
            padding-top: 140px !important;
        }
    }

    .alma-infohub-pagina {
        > .kt-row-column-wrap {
            padding-bottom: 64px !important;
        }

        h1 {
            margin-bottom: 48px !important;
            font-size: var(--carmel-font-size-display1-mobile) !important;
            letter-spacing: var(--carmel-letter-spacing-display1-mobile) !important;
        }

        .carmel-infohub {
            grid-template-columns: minmax(0, 1fr);
            row-gap: 16px;
        }

        .carmel-infohub__categories {
            columns: 2;
        }
    }
}

@media (max-width: 767px) {
    .alma-infohub-pagina {
        --alma-codepen-lb-grootte: auto 12%;
        --alma-codepen-ro-grootte: 90% 5%;
        --alma-codepen-ro-plek: 100% 101%;

        .carmel-infohub__content {
            padding: 24px;
        }

        .carmel-infohub__categories {
            columns: 1;
        }
    }
}

/* ---------------------------------------------------------------
   Infohub-item en Veelgestelde vragen (Figma: Pages → Infohub -
   Subpagina / Infohub - FAQ; Kadence Element "Infohub template" en de
   pagina Veelgestelde vragen, rij .alma-artikel met .infohubbuttons en
   .infohubcontent): de terugknop links op de contentlijn, de inhoud in
   een kolom van 704px die op de pagina gecentreerd staat, de kop groot
   (Display D-1) en de inhoud direct eronder.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
    .alma-artikel:has(.infohubcontent) > .kt-row-column-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 704px) minmax(0, 1fr) !important;
        column-gap: 24px !important;
        max-width: calc(var(--global-content-width, 1471px) - 2 * var(--global-content-edge-padding, 16px)) !important;
        margin: 0 auto;
        padding-inline: 0 !important;

        > .wp-block-kadence-column:first-child {
            grid-column: 1;
        }

        > .infohubcontent {
            grid-column: 2;
        }
    }
}

.infohubcontent > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, .wp-block-kadence-advancedheading:first-child) {
    margin: 0 0 40px !important;
    font-family: var(--carmel-font-heading);
    font-size: var(--carmel-font-size-display1) !important;
    line-height: var(--carmel-line-height-display1) !important;
    letter-spacing: var(--carmel-letter-spacing-display1) !important;
    font-weight: var(--carmel-font-weight-display1) !important;
    color: var(--alma-donker-blauw);
}

@media (max-width: 1024px) {
    .infohubcontent > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :is(h1, .wp-block-kadence-advancedheading:first-child) {
        margin-bottom: 24px !important;
        font-size: var(--carmel-font-size-display1-mobile) !important;
        letter-spacing: var(--carmel-letter-spacing-display1-mobile) !important;
    }
}

/* Terugknop als klein tekstlinkje "‹ Infohub" (Figma), geen pil-knop */
.alma-artikel:has(.infohubcontent) .infohubbuttons :is(.kb-button, .kt-button) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--alma-donker-blauw) !important;
    font-family: var(--carmel-font-body);
    font-size: 14px !important;
    line-height: 120%;

    /* ::before is bij de secundaire knop de gloed (style.css): die
       eigenschappen terugzetten */
    &::before {
        content: '‹';
        position: static !important;
        inset: auto !important;
        background: none !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        font-size: 18px;
        line-height: 1;
    }

    :is(.kb-svg-icon-wrap, .kt-btn-svg-icon) {
        display: none !important;
    }

    &:is(:hover, :focus-visible) .kt-btn-inner-text {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}