/*
 * Water Concepts
 * Breadcrumbs
 *
 * Markup (breadcrumbs.inc.php), gelijk voor WooCommerce en Yoast:
 *
 *   nav.wce-breadcrumb[.wce-breadcrumb--trail]
 *     ol.wce-breadcrumb__list
 *       li.wce-breadcrumb__item > a | span
 *
 * Twee plekken:
 *   - .site-breadcrumbs   baan onder de header (zonder hero)
 *   - .site-hero__breadcrumb   in de hero (kleuren in hero.css)
 *
 * Kleuren lopen via custom properties, zodat de hero ze kan
 * overschrijven zonder !important.
 */


/* ==========================================
   COMPONENT
========================================== */

.wce-breadcrumb {

    --bc-color: var(--neutral-600);
    --bc-link: var(--neutral-600);
    --bc-link-hover: var(--blue-500);
    --bc-sep: var(--neutral-300);

    color: var(--bc-color);

    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;

}

.wce-breadcrumb__list {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;

}

.wce-breadcrumb__item {

    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

}


/* ------------------------------------------
   SCHEIDINGSTEKEN
   Vóór elk item behalve het eerste. Bij
   --trail (PDP, productnaam weggelaten)
   ook ná het laatste item.
------------------------------------------ */

.wce-breadcrumb__item + .wce-breadcrumb__item::before,
.wce-breadcrumb--trail .wce-breadcrumb__item:last-child::after {

    content: "/";

    margin: 0 0.5em;

    color: var(--bc-sep);

}


/* ------------------------------------------
   LINKS
------------------------------------------ */

.wce-breadcrumb a {

    color: var(--bc-link);

    text-decoration: none;

    transition: color 0.2s ease;

}

.wce-breadcrumb a:hover,
.wce-breadcrumb a:focus-visible {

    color: var(--bc-link-hover);

    text-decoration: none;

}

.wce-breadcrumb a:focus-visible {

    outline: 2px solid var(--blue-400);
    outline-offset: 2px;

    border-radius: 2px;

}


/* ==========================================
   BAAN (ZONDER HERO)
   PDP, gewone pagina's, account, zoeken, 404.
========================================== */

.site-breadcrumbs-wrap {

    border-top: 1px solid var(--neutral-200);
    border-bottom: 1px solid var(--neutral-200);

}

.site-breadcrumbs {

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 0 30px;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .site-breadcrumbs {

        padding: 0 10px;

    }

}