/**
 * Breadcrumbs onder het menu (includes/breadcrumbs.php).
 *
 * De buitenste laag neemt geen ruimte in (height: 0), zodat de hero
 * eronder niet verschuift; het kruimelpad zelf zweeft eroverheen.
 * breadcrumbs.js zet --carmel-bc-left / --carmel-bc-top op de positie
 * net onder de witte menubalk; zonder JS valt het terug op de
 * content-breedte van Kadence.
 *
 * Horizontale verschuiving t.o.v. het logo per thema:
 *   --carmel-breadcrumbs-offset-x        bv. -16px
 *
 * Kleuren per thema instellen:
 *   --carmel-breadcrumbs-color-on-light  tekst op een lichte achtergrond
 *   --carmel-breadcrumbs-color-on-dark   tekst op een donkere achtergrond / foto
 */
.carmel-header-breadcrumbs {
    position: relative;
    z-index: 9;
    height: 0;
}

.carmel-header-breadcrumbs__inner {
    position: absolute;
    top: var(--carmel-bc-top, 16px);
    /* --carmel-breadcrumbs-offset-x: per thema bijstellen t.o.v. het logo
       (bv. -16px = gelijk met de buitenrand van de menubalk) */
    left: calc(var(--carmel-bc-left, max(var(--global-content-edge-padding, 16px), calc((100% - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 16px)))) + var(--carmel-breadcrumbs-offset-x, 0px));
    right: var(--global-content-edge-padding, 16px);
    color: var(--carmel-breadcrumbs-color-on-light, var(--carmel-color-text, #020a0a));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.carmel-header-breadcrumbs.is-ready .carmel-header-breadcrumbs__inner {
    opacity: 1;
}

.carmel-header-breadcrumbs.is-on-dark .carmel-header-breadcrumbs__inner {
    color: var(--carmel-breadcrumbs-color-on-dark, #ffffff);
}

/* Basisopmaak van het WordPress Breadcrumbs-blok (wp-includes/blocks/
   breadcrumbs/style.css). WordPress laadt die alleen als het blok zelf
   gerenderd wordt; bij eigen berichttypes (bv. infohub) tekent de plugin
   dezelfde HTML zelf, en dan ontbrak deze CSS (genummerde lijst onder
   elkaar). Daarom hier zelf. */
.carmel-header-breadcrumbs .wp-block-breadcrumbs {
    box-sizing: border-box;
}
.carmel-header-breadcrumbs .wp-block-breadcrumbs ol {
    flex-wrap: wrap;
    list-style: none;
}
.carmel-header-breadcrumbs .wp-block-breadcrumbs ol,
.carmel-header-breadcrumbs .wp-block-breadcrumbs li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.carmel-header-breadcrumbs .wp-block-breadcrumbs li:not(:last-child)::after {
    content: var(--separator, "/") / "";
    margin: 0 .5em;
    opacity: .7;
}

/* Hogere specificiteit dan de breadcrumb-opmaak in de thema's
   (.wp-block-breadcrumbs.wp-block-breadcrumbs li …), die daar bedoeld is
   voor het blok in de hero. */
.carmel-header-breadcrumbs .wp-block-breadcrumbs.wp-block-breadcrumbs {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: var(--carmel-breadcrumbs-font-size, 14px);
    line-height: 1.4;

    /* color: inherit ook op de lijst zelf — thema's zetten de tekstkleur
       vaak met !important op p/ul/ol/li (o.a. BCE), dan erven li en a
       anders die kleur i.p.v. de licht/donker-kleur van het kruimelpad. */
    ol {
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
    }

    span {
        color: inherit !important;
    }

    li {
        margin: 0 !important;
        font-size: var(--carmel-breadcrumbs-font-size, 14px) !important;
        color: inherit !important;

        &::after {
            color: inherit !important;
        }
    }

    a {
        color: inherit !important;
    }
}

/* Breadcrumbs-blokken die nog in de pagina-inhoud staan verbergen
   (instelling "Verberg Breadcrumbs-blokken die nog in de pagina-inhoud staan"). */
.carmel-hide-content-breadcrumbs .entry-content .wp-block-breadcrumbs,
.carmel-hide-content-breadcrumbs #inner-wrap .wp-block-breadcrumbs {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .carmel-header-breadcrumbs__inner {
        transition: none;
    }
}