@charset "UTF-8";
/* https://nlsc.de/wp-content/themes/nlsc/blocks/flow-chart/flow-chart.css?ver=7.1 */
.nlsc-flow-chart{--nlsc-flow-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M5.5 14.5 12 21l6.5-6.5'/></svg>");
}

/* --- Layout container --------------------------------------------------- */

.nlsc-flow-chart,
.nlsc-flow-chart .block-editor-block-list__layout {
    display: flex;
}

.nlsc-flow-chart--vertical,
.nlsc-flow-chart--vertical .block-editor-block-list__layout {
    flex-direction: column;
    align-items: center;
}

/* Boxes hug their content here, so a shorter one is centred against its taller
 * neighbours — which also lines every connector arrow up on the same axis. The
 * full-width modifier switches this back to `stretch` (see below), where the
 * boxes form equal columns and should be equally tall too. */
.nlsc-flow-chart--horizontal,
.nlsc-flow-chart--horizontal .block-editor-block-list__layout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Let the editor's per-item wrappers shrink to their content so items sit
 * side by side (horizontal) or hug their box (vertical) like on the frontend. */
.nlsc-flow-chart .block-editor-block-list__layout > .wp-block {
    width: auto;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Item ---------------------------------------------------------------- */

.nlsc-flow-chart-item {
    display: flex;
    align-items: center;
    color: var(--wp--preset--color--foreground);
}

.nlsc-flow-chart--vertical .nlsc-flow-chart-item {
    flex-direction: column;
}

.nlsc-flow-chart--horizontal .nlsc-flow-chart-item {
    flex-direction: row;
    height: 100%;
}

.nlsc-flow-chart-item__box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    /* The theme only sets border-box on .wp-block elements, so this plain div
     * would default to content-box — a no-op while the box hugs its content,
     * but it keeps the padding inside the width in the full-width modifier. */
    box-sizing: border-box;
}

.nlsc-flow-chart--horizontal .nlsc-flow-chart-item__box {
    justify-content: center;
    height: 100%;
}

.nlsc-flow-chart-item__title {
    margin: 0;
}

.nlsc-flow-chart-item__description {
    margin: 0;
}

/* --- Connector arrow ----------------------------------------------------- */

.nlsc-flow-chart-item__connector {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--wp--preset--color--accent);
    -webkit-mask: var(--nlsc-flow-arrow) no-repeat center / contain;
    mask: var(--nlsc-flow-arrow) no-repeat center / contain;
}

.nlsc-flow-chart--vertical .nlsc-flow-chart-item__connector {
    margin: 6px 0;
}

.nlsc-flow-chart--horizontal .nlsc-flow-chart-item__connector {
    margin: 0 6px;
    transform: rotate(-90deg);
}

/* Hide the trailing connector on the last item.
 * Frontend: the item is a direct child of the chart. */
.nlsc-flow-chart > .nlsc-flow-chart-item:last-child .nlsc-flow-chart-item__connector {
    display: none;
}
/* Editor: each item is wrapped in a .wp-block-nlsc-flow-chart-item element.
 * Match the wrapper that has no following item wrapper (rather than :last-child)
 * so Gutenberg's trailing block appender — which also carries .wp-block — does
 * not keep the last item's connector visible while the chart is selected. */
.nlsc-flow-chart .block-editor-block-list__layout > .wp-block-nlsc-flow-chart-item:not(:has(~ .wp-block-nlsc-flow-chart-item)) .nlsc-flow-chart-item__connector {
    display: none;
}

/* --- Modifier: full width (desktop) -------------------------------------- */

/*
 * Opt-in via the block's "Full width" field. From the desktop breakpoint up the * boxes stop hugging their content:vertically each box fills the block width,* horizontally the items share the row as equal columns. Below the breakpoint * the default layout is kept,where the boxes are narrow enough anyway. * * The container's own `align-items: center` (vertical) can't be overridden per * item wrapper alone,so the flex items get `align-self:stretch`;the editor's
 * extra .wp-block wrappers need the same treatment plus a `width` override of
 * the `width: auto` rule further up.
 */
@media (min-width: 782px) {
    .nlsc-flow-chart--full-width.nlsc-flow-chart--vertical > .nlsc-flow-chart-item,
    .nlsc-flow-chart--full-width.nlsc-flow-chart--vertical .block-editor-block-list__layout > .wp-block {
        align-self: stretch;
        width: 100%;
    }

    .nlsc-flow-chart--full-width.nlsc-flow-chart--vertical .nlsc-flow-chart-item__box {
        width: 100%;
    }

    /* Equal columns want equal heights, so the row goes back to stretching its
     * items instead of centring them at their content height. */
    .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal,
    .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal .block-editor-block-list__layout {
        align-items: stretch;
    }

    /* Equal columns: `flex: 1 1 0` sizes the items from the free space rather
     * than their content, so boxes with differing text stay the same width. */
    .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal > .nlsc-flow-chart-item,
    .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal .block-editor-block-list__layout > .wp-block {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        /* The item's `height:100%` (set for the horizontal direction above) * counts as a cross size,which opts it out of the container's
         * `align-items: stretch`. Back to auto so the equal columns also come
         * out equally tall — the box below still fills the stretched item. */
        height: auto;
    }

    /* Inside a horizontal item the box shares the row with the connector, so it
     * grows into the leftover space instead of taking a fixed 100%. */
    .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal .nlsc-flow-chart-item__box {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The editor's wrapper is the flex item there,so the item inside it has to * fill that wrapper for the box to inherit the column width. */ .nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal .block-editor-block-list__layout>.wp-block>.nlsc-flow-chart-item{width:100%}.nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal>.nlsc-flow-chart-item:last-child .nlsc-flow-chart-item__connector,.nlsc-flow-chart--full-width.nlsc-flow-chart--horizontal .block-editor-block-list__layout>.wp-block-nlsc-flow-chart-item:not(:has(~.wp-block-nlsc-flow-chart-item)) .nlsc-flow-chart-item__connector{display:block;visibility:hidden}}.nlsc-flow-chart--default .nlsc-flow-chart-item__box{padding:15px 35px;background-color:var(--wp--preset--color--background);color:var(--wp--preset--color--foreground);border-radius:5px;box-shadow:var(--nlsc-shadow-card-base)}.nlsc-flow-chart--default .nlsc-flow-chart-item__title{font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:var(--nlsc-text-md);line-height:1.2;color:var(--wp--preset--color--primary)}.nlsc-flow-chart--default .nlsc-flow-chart-item__description{font-family:var(--wp--preset--font-family--body);font-weight:400;font-size:var(--nlsc-text-base);line-height:1.5;color:var(--wp--preset--color--foreground)}.nlsc-flow-chart--default .nlsc-flow-chart-item--highlighted .nlsc-flow-chart-item__box{box-shadow:var(--nlsc-shadow-card-base),0 0 0 2px var(--wp--preset--color--accent)}.nlsc-flow-chart--outline .nlsc-flow-chart-item__box{padding:5px 15px;border:1px solid var(--wp--preset--color--secondary)}.nlsc-flow-chart--outline .nlsc-flow-chart-item__title{font-family:var(--wp--preset--font-family--body);font-weight:800;font-size:var(--nlsc-text-sm);line-height:1.5;color:var(--wp--preset--color--foreground)}.nlsc-flow-chart--outline .nlsc-flow-chart-item__description{font-family:var(--wp--preset--font-family--body);font-weight:400;font-size:var(--nlsc-text-sm);line-height:1.5;color:var(--wp--preset--color--foreground)}.nlsc-flow-chart--outline .nlsc-flow-chart-item__connector{width:16px;height:16px}.nlsc-flow-chart--outline .nlsc-flow-chart-item--highlighted .nlsc-flow-chart-item__box{padding:4px 14px;border-width:2px;border-color:var(--wp--preset--color--accent)}