/* Winsiders Custom Elements — auto-split from monolithic assets/frontend.css.
 * This file is generated by the asset-split script. Do not edit manually;
 * edit assets/frontend.css then re-run scripts/split-assets.py. */

/* =====================================================================
 * Post List Winsiders (av_wce_post_list) — 0.7.0
 * Two presentations: native <ul>/<ol> lists (bullet/number/icon) and a
 * responsive grid of borderless "boxes" (icon + title + excerpt + meta).
 * Content source: posts/pages/CPT or taxonomy terms.
 * ===================================================================== */

.wce-post-list {
    --wce-pl-icon-size: 1em;
    --wce-pl-icon-color: currentColor;
    --wce-pl-icon-bg: transparent;
    --wce-pl-hover-color: currentColor;
    --wce-pl-text-color: inherit;
    --wce-pl-gap: 0.6em;
    --wce-pl-row-gap: 0.5em;
    --wce-pl-box-columns: 4;
    --wce-pl-box-gap: 30px;
    --wce-pl-box-bg: transparent;
    color: var(--wce-pl-text-color);
    margin: 0 0 1.2em;
    /* Enfold's [av_hr] element floats left (float:left in hr.css). Without an
     * explicit clear, the post-list container that follows an hr inherits the
     * float context and collapses to the narrow strip left of the floated hr,
     * which makes the flex grid of boxes stack into a single 54px-wide column
     * on the right edge. clear:both forces the container below any preceding
     * floated element (hr, columns, etc.) so the boxes grid gets full width. */
    clear: both;
}

/* ───────── Color zone defaults (Enfold pattern) ─────────
 * Icon color, icon background, and hover color follow the Enfold color zone
 * of the containing section (.main_color, .alternate_color, .footer_color,
 * .socket_color, .header_color). A manual icon_color set in the popup
 * overrides the resting icon color via an inline custom property (inline
 * styles have higher precedence than these stylesheet rules).
 *
 * --wce-pl-zone-bg / --wce-pl-zone-bg2 carry the zone's two background tones
 * so the "boxed" mode can swap them (box = bg2, icon = bg) without redefining
 * every zone rule. */
.main_color .wce-post-list {
    --wce-pl-icon-color: var(--enfold-main-color-primary);
    --wce-pl-zone-bg: var(--enfold-main-color-bg);
    --wce-pl-zone-bg2: var(--enfold-main-color-bg2);
    --wce-pl-icon-bg: var(--wce-pl-zone-bg2);
    --wce-pl-hover-color: var(--enfold-main-color-secondary);
}
.alternate_color .wce-post-list {
    --wce-pl-icon-color: var(--enfold-alternate-color-primary);
    --wce-pl-zone-bg: var(--enfold-alternate-color-bg);
    --wce-pl-zone-bg2: var(--enfold-alternate-color-bg2);
    --wce-pl-icon-bg: var(--wce-pl-zone-bg2);
    --wce-pl-hover-color: var(--enfold-alternate-color-secondary);
}
.footer_color .wce-post-list {
    --wce-pl-icon-color: var(--enfold-footer-color-primary);
    --wce-pl-zone-bg: var(--enfold-footer-color-bg);
    --wce-pl-zone-bg2: var(--enfold-footer-color-bg2);
    --wce-pl-icon-bg: var(--wce-pl-zone-bg2);
    --wce-pl-hover-color: var(--enfold-footer-color-secondary);
}
.socket_color .wce-post-list {
    --wce-pl-icon-color: var(--enfold-socket-color-primary);
    --wce-pl-zone-bg: var(--enfold-socket-color-bg);
    --wce-pl-zone-bg2: var(--enfold-socket-color-bg2);
    --wce-pl-icon-bg: var(--wce-pl-zone-bg2);
    --wce-pl-hover-color: var(--enfold-socket-color-secondary);
}
.header_color .wce-post-list {
    --wce-pl-icon-color: var(--enfold-header-color-primary);
    --wce-pl-zone-bg: var(--enfold-header-color-bg);
    --wce-pl-zone-bg2: var(--enfold-header-color-bg2);
    --wce-pl-icon-bg: var(--wce-pl-zone-bg2);
    --wce-pl-hover-color: var(--enfold-header-color-secondary);
}

/* Boxed mode: the box card gets the zone's secondary background (bg2) and the
 * icon background swaps to the zone's primary background (bg) so the circular
 * icon keeps contrast against the card. Specificity ties with the zone rules
 * (0,2,0); source order (this file) makes this win. */
.wce-post-list.wce-post-list--boxes-boxed {
    --wce-pl-icon-bg: var(--wce-pl-zone-bg);
    --wce-pl-box-bg: var(--wce-pl-zone-bg2);
}

/* ───────── List presentation ─────────
 * Enfold resets ul/ol to list-style:none globally, so we must explicitly
 * re-enable native markers with high specificity + padding-left room. */

#top .wce-post-list--list .wce-post-list__list {
    margin: 0;
    padding-left: 1.6em;
    list-style-position: outside;
}

#top .wce-post-list--list .wce-post-list__item {
    line-height: 1.4;
}

/* Native bullet (<ul>) — force disc + room for the marker. */
#top .wce-post-list--bullet .wce-post-list__list {
    list-style: disc outside;
}

/* Native number (<ol>) — force decimal. */
#top .wce-post-list--number .wce-post-list__list {
    list-style: decimal outside;
}

/* No marker (<ul>) — plain list, no bullets, no padding. */
#top .wce-post-list--none .wce-post-list__list {
    list-style: none;
    padding-left: 0;
}

#top .wce-post-list--none .wce-post-list__item {
    padding-left: 0;
}

#top .wce-post-list--none .wce-post-list__item::marker {
    content: '';
}

/* Color the native marker (::marker) with icon_color. */
#top .wce-post-list--bullet .wce-post-list__item::marker,
#top .wce-post-list--number .wce-post-list__item::marker {
    color: var(--wce-pl-icon-color);
}

/* Icon mode: no native marker, the icon span is the marker. We use float
 * (not flex) so that nested hierarchical sub-lists can indent naturally with
 * padding-left and native markers stay visible. The icon floats left with a
 * 1em right margin so the title flows beside it. */
#top .wce-post-list--icon .wce-post-list__list {
    list-style: none;
    padding-left: 0;
}

#top .wce-post-list--icon .wce-post-list__item {
    /* No flex: float-based layout so sub-lists indent naturally. */
    padding-left: 0;
}

#top .wce-post-list--icon .wce-post-list__item::marker {
    content: '';
}

.wce-post-list--list .wce-post-list__marker--icon {
    float: left;
    margin-right: 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1em;
    font-size: var(--wce-pl-icon-size);
    line-height: 1;
    color: var(--wce-pl-icon-color);
    transition: color 0.2s ease;
}

/* The link becomes a BFC (overflow:hidden) so it sits BESIDE the floated
 * icon instead of overlapping it. This is the classic "media object" pattern. */
.wce-post-list--list .wce-post-list__link {
    display: block;
    overflow: hidden;
    color: var(--wce-pl-text-color);
    text-decoration: none;
    text-underline-offset: 0.2em;
}

/* Both classes live on the SAME span, so use a compound selector (no
 * descendant combinator between marker--icon and av-icon-char). */
.wce-post-list--list .wce-post-list__marker--icon.av-icon-char svg {
    width: var(--wce-pl-icon-size);
    height: var(--wce-pl-icon-size);
    display: block;
    fill: var(--wce-pl-icon-color);
    transition: fill 0.2s ease;
}

.wce-post-list--list .wce-post-list__link:hover {
    text-decoration: underline;
}

/* The current-page link is a non-clickable <span>: never underline it. */
.wce-post-list--list .wce-post-list__link--current:hover,
.wce-post-list--list .wce-post-list__item--current > .wce-post-list__link:hover {
    text-decoration: none;
}

/* Hover: title + icon take the zone secondary color. */
.wce-post-list--list .wce-post-list__link:hover .wce-post-list__title {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--list .wce-post-list__link:hover .wce-post-list__marker--icon {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--list .wce-post-list__link:hover .wce-post-list__marker--icon.av-icon-char svg {
    fill: var(--wce-pl-hover-color);
}

/* Reset Enfold high-specificity heading color inside the list. */
.wce-post-list--list .wce-post-list__title {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ───────── Boxes presentation ───────── */

.wce-post-list--boxes .wce-post-list__boxes {
    display: flex;
    flex-wrap: wrap;
    /* Default centered; overridden by --boxes-justify-* modifiers below. */
    justify-content: center;
    /* Gap is driven by --wce-pl-box-gap so the spacing option can retune it
     * (large responsive / 1px / none) in one place. */
    gap: var(--wce-pl-box-gap);
    list-style: none;
    /* Shorthand must carry the 30px top margin — a later `margin: 0` would
     * reset it. Top | right | bottom | left. */
    margin: 30px 0 0 0;
    padding: 0;
}

/* Grid alignment (justify-content) — center / left / right. */
.wce-post-list--boxes-justify-left .wce-post-list__boxes {
    justify-content: flex-start;
}
.wce-post-list--boxes-justify-right .wce-post-list__boxes {
    justify-content: flex-end;
}
.wce-post-list--boxes-justify-center .wce-post-list__boxes {
    justify-content: center;
}

/* Spacing between boxes — the gap variable + the flex basis math both read it.
 * "large" is responsive (30/15/10px), "1px" is a hairline, "none" removes the
 * gap entirely (boxes touch). The basis calc below compensates accordingly. */
.wce-post-list--boxes-spacing-large {
    --wce-pl-box-gap: 30px;
}
.wce-post-list--boxes-spacing-1px {
    --wce-pl-box-gap: 1px;
}
.wce-post-list--boxes-spacing-none {
    --wce-pl-box-gap: 0;
}

@media only screen and (max-width: 989px) {
    .wce-post-list--boxes-spacing-large {
        --wce-pl-box-gap: 15px;
    }
}
@media only screen and (max-width: 479px) {
    .wce-post-list--boxes-spacing-large {
        --wce-pl-box-gap: 10px;
    }
}

/* Each box takes a fraction of the row based on the column count. The
 * gap is compensated so the boxes align evenly across full rows.
 * The box itself is now a transparent wrapper; the visual card (background,
 * padding, radius) lives on the inner link so the link fills the full height
 * and every box on a row matches the tallest one. */
.wce-post-list--boxes .wce-post-list__box {
    flex: 0 1 calc((100% - (var(--wce-pl-box-columns, 4) - 1) * var(--wce-pl-box-gap, 30px)) / var(--wce-pl-box-columns, 4));
    max-width: calc((100% - (var(--wce-pl-box-columns, 4) - 1) * var(--wce-pl-box-gap, 30px)) / var(--wce-pl-box-columns, 4));
    box-sizing: border-box;
    display: flex; /* stretch the link to the full box height */
    align-items: stretch; /* explicit: equal-height links within a row */
}

/* Ensure rows of boxes stretch to the tallest box (flex default, explicit for safety). */
.wce-post-list--boxes .wce-post-list__boxes {
    align-items: stretch;
}

/* The link is the visual card: background, padding and radius live here so it
 * covers the whole box area and rows have equal-height boxes. */
.wce-post-list--boxes .wce-post-list__box-link {
    flex: 1 1 auto;
    width: 100%;
    border-radius: var(--wce-pl-box-radius, 5px);
}

/* Boxed: give the card (link) a background + internal padding + smooth hover.
 * Non-boxed stays borderless/transparent as before. */
.wce-post-list--boxes-boxed .wce-post-list__box-link {
    background: var(--wce-pl-box-bg);
    padding: 1.5em;
    transition: background 0.2s ease;
}
.wce-post-list--boxes-boxed .wce-post-list__box-link:hover {
    background: var(--wce-pl-zone-bg);
}

/* Non-boxed still gets the radius (subtle rounding) but no background/padding. */
.wce-post-list--boxes:not(.wce-post-list--boxes-boxed) .wce-post-list__box-link {
    padding: 0.5em;
}

/* Responsive column overrides (Enfold Masonry pattern).
 * --wce-pl-box-columns is set inline to the default value; these
 * media queries override it when av-{size}-columns-N is present. */

/* Desktop: >990px */
@media only screen and (min-width: 990px) {
    .wce-post-list--boxes.av-desktop-columns-overwrite { --wce-pl-box-columns: var(--wce-pl-desktop-cols, 4) !important; }
    .wce-post-list--boxes.av-desktop-columns-1 { --wce-pl-desktop-cols: 1; }
    .wce-post-list--boxes.av-desktop-columns-2 { --wce-pl-desktop-cols: 2; }
    .wce-post-list--boxes.av-desktop-columns-3 { --wce-pl-desktop-cols: 3; }
    .wce-post-list--boxes.av-desktop-columns-4 { --wce-pl-desktop-cols: 4; }
    .wce-post-list--boxes.av-desktop-columns-5 { --wce-pl-desktop-cols: 5; }
    .wce-post-list--boxes.av-desktop-columns-6 { --wce-pl-desktop-cols: 6; }
}

/* Medium (tablet landscape): 768-989px */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    .wce-post-list--boxes.av-medium-columns-overwrite { --wce-pl-box-columns: var(--wce-pl-medium-cols, 4) !important; }
    .wce-post-list--boxes.av-medium-columns-1 { --wce-pl-medium-cols: 1; }
    .wce-post-list--boxes.av-medium-columns-2 { --wce-pl-medium-cols: 2; }
    .wce-post-list--boxes.av-medium-columns-3 { --wce-pl-medium-cols: 3; }
    .wce-post-list--boxes.av-medium-columns-4 { --wce-pl-medium-cols: 4; }
}

/* Small (tablet portrait): 480-767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .wce-post-list--boxes.av-small-columns-overwrite { --wce-pl-box-columns: var(--wce-pl-small-cols, 2) !important; }
    .wce-post-list--boxes.av-small-columns-1 { --wce-pl-small-cols: 1; }
    .wce-post-list--boxes.av-small-columns-2 { --wce-pl-small-cols: 2; }
    .wce-post-list--boxes.av-small-columns-3 { --wce-pl-small-cols: 3; }
    .wce-post-list--boxes.av-small-columns-4 { --wce-pl-small-cols: 4; }
}

/* Mini (mobile): <479px */
@media only screen and (max-width: 479px) {
    .wce-post-list--boxes.av-mini-columns-overwrite { --wce-pl-box-columns: var(--wce-pl-mini-cols, 2) !important; }
    .wce-post-list--boxes.av-mini-columns-1 { --wce-pl-mini-cols: 1; }
    .wce-post-list--boxes.av-mini-columns-2 { --wce-pl-mini-cols: 2; }
    .wce-post-list--boxes.av-mini-columns-3 { --wce-pl-mini-cols: 3; }
    .wce-post-list--boxes.av-mini-columns-4 { --wce-pl-mini-cols: 4; }
}

.wce-post-list--boxes .wce-post-list__box-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    text-align: left;
    gap: 1em;
}

.wce-post-list--boxes-icon-top .wce-post-list__box-link {
    flex-direction: column;
    align-items: flex-start;
}

.wce-post-list--boxes-icon-left .wce-post-list__box-link {
    flex-direction: row;
    align-items: flex-start;
}

.wce-post-list--boxes .wce-post-list__box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--wce-pl-icon-bg);
    border-radius: 100px;
    /* Padding equals the icon size so the circular background "breathes"
     * with a full icon-size gap around the glyph, and scales automatically
     * with the chosen icon_size. Using the custom property (not em) keeps
     * it tied to the icon size, not the surrounding text size. */
    padding: var(--wce-pl-icon-size);
    transition: background 0.2s ease, color 0.2s ease;
}

.wce-post-list--boxes-icon-top .wce-post-list__box-icon {
    margin-bottom: 0.4em;
}

.wce-post-list--boxes .wce-post-list__box-icon .av-icon-char {
    font-size: var(--wce-pl-icon-size);
    line-height: 1;
    color: var(--wce-pl-icon-color);
    transition: color 0.2s ease;
}

.wce-post-list--boxes .wce-post-list__box-icon .av-icon-char svg {
    width: var(--wce-pl-icon-size);
    height: var(--wce-pl-icon-size);
    display: block;
    fill: var(--wce-pl-icon-color);
    transition: fill 0.2s ease;
}

.wce-post-list--boxes .wce-post-list__box-title {
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
    transition: color 0.2s ease;
}

/* Hover: title + icon take the zone secondary color. */
.wce-post-list--boxes .wce-post-list__box-link:hover .wce-post-list__box-title {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--boxes .wce-post-list__box-link:hover .wce-post-list__box-icon .av-icon-char {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--boxes .wce-post-list__box-link:hover .wce-post-list__box-icon .av-icon-char svg {
    fill: var(--wce-pl-hover-color);
}

.wce-post-list--boxes .wce-post-list__box-excerpt,
.wce-post-list--boxes .wce-post-list__box-meta {
    display: block;
    margin-top: 0.5em;
    font-size: 0.9em;
    opacity: 0.85;
    line-height: 1.5;
}

.wce-post-list--boxes .wce-post-list__box-meta {
    font-style: italic;
}

/* ───────── Fade-up animation ───────── */

.wce-post-list--boxes-anim-fade-up .wce-post-list__box {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--wce-pl-box-delay, 0s);
}

.wce-post-list--boxes-anim-fade-up .wce-post-list__box.is-wce-seen {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wce-post-list--boxes-anim-fade-up .wce-post-list__box {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* === Post List — hierarchical list indentation ======================== */

#top .wce-post-list--hierarchical .wce-post-list__list .wce-post-list__list--level {
    margin-top: 0.3em;
    padding-left: 0;
}

#top .wce-post-list--hierarchical .wce-post-list__item--has-children {
    margin-bottom: 0.2em;
}

/* ───────── Toggle (collapsible root parents) ─────────
 * The toggle button sits at the END of the item line (right side) inside a
 * circular badge showing "+" (collapsed) or "−" (expanded). The item icon and
 * title stay on the same line. The button uses two spans (+/−) so we can
 * crossfade them without an icon font. Collapsed hides the child <ul>;
 * expanded (or when the current page lives inside) shows it. */

/* The toggle <li> is a normal block container. The [icon + link + button]
 * row is a separate flex child (.wce-post-list__toggle-row) so the child
 * sub-list (which sits OUTSIDE the row, after it) stacks below naturally. */
.wce-post-list--toggle .wce-post-list__item--toggle {
    position: relative;
}

/* Flex row grouping [icon] [title link] ... [toggle button right].
 * flex-wrap: nowrap keeps these three on a single line. The child sub-list
 * is OUTSIDE this row so it is unaffected by nowrap. */
.wce-post-list--toggle .wce-post-list__toggle-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4em;
}

/* The icon (if any) and the link stay grouped at the left; the toggle button
 * is pushed to the far right with margin-left:auto. */
.wce-post-list--toggle .wce-post-list__toggle-row > .wce-post-list__marker--icon,
.wce-post-list--toggle .wce-post-list__toggle-row > .wce-post-list__link {
    flex: 0 1 auto;
}
.wce-post-list--toggle .wce-post-list__toggle-row > .wce-post-list__link {
    /* Let the link take available space so the toggle goes to the right edge. */
    flex: 1 1 auto;
    min-width: 0;
}
.wce-post-list--toggle .wce-post-list__toggle {
    margin-left: auto;
}

/* The child sub-list sits below the toggle row (normal block flow). */
.wce-post-list--toggle .wce-post-list__item--toggle > .wce-post-list__list--level {
    width: 100%;
}

.wce-post-list__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border: 1px solid var(--wce-pl-icon-color, currentColor);
    border-radius: 50%;
    background: transparent;
    color: var(--wce-pl-icon-color, currentColor);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wce-post-list__toggle:hover,
.wce-post-list__toggle:focus-visible {
    color: var(--wce-pl-hover-color);
    border-color: var(--wce-pl-hover-color);
    outline: none;
}
.wce-post-list__toggle:focus-visible {
    outline: 2px solid var(--wce-pl-hover-color);
    outline-offset: 2px;
}

/* The toggle icon container holds the two +/− spans stacked and crossfaded. */
.wce-post-list__toggle-icon {
    position: relative;
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    line-height: 1;
}
.wce-post-list__toggle-plus,
.wce-post-list__toggle-minus {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    transition: opacity 0.2s ease;
}

/* "+" sign drawn from two spans (horizontal + vertical bars). */
.wce-post-list__toggle-plus::before,
.wce-post-list__toggle-plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
}
.wce-post-list__toggle-plus::before {
    width: 0.7em;
    height: 0.12em;
    transform: translate(-50%, -50%);
}
.wce-post-list__toggle-plus::after {
    width: 0.12em;
    height: 0.7em;
    transform: translate(-50%, -50%);
}
/* "−" sign is a single horizontal bar. */
.wce-post-list__toggle-minus::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7em;
    height: 0.12em;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

/* Collapsed → show "+", hide "−". Expanded → show "−", hide "+".
 * NOTE: the toggle button is wrapped in .wce-post-list__toggle-row (since
 * v0.8.15) so it is no longer a direct child of the <li>. We use a descendant
 * combinator (space) instead of ">" so the +/− crossfade keeps working. */
.wce-post-list__item--collapsed .wce-post-list__toggle .wce-post-list__toggle-plus {
    opacity: 1;
}
.wce-post-list__item--collapsed .wce-post-list__toggle .wce-post-list__toggle-minus {
    opacity: 0;
}
.wce-post-list__item--expanded .wce-post-list__toggle .wce-post-list__toggle-plus {
    opacity: 0;
}
.wce-post-list__item--expanded .wce-post-list__toggle .wce-post-list__toggle-minus {
    opacity: 1;
}

/* Collapsed → the direct child sub-list is hidden by JS (height:0 + overflow).
 * JS animates the slide up/down so we must allow overflow:hidden here and
 * never use display:none (which jQuery cannot animate). */
.wce-post-list__item--collapsed > .wce-post-list__list--level {
    overflow: hidden;
}
.wce-post-list__item--collapsed.av-toggle-animating > .wce-post-list__list--level {
    /* During the slideUp/Down animation jQuery sets height inline; once it
     * finishes it adds display:none. This rule is a safety net only. */
}
/* After jQuery slideUp finishes it sets display:none inline — keep it. */

/* ───────── Current page highlight ─────────
 * The current item gets the hover styling permanently (title + icon take the
 * zone secondary color). We reuse the existing hover selectors by mirroring
 * them under --current. */

.wce-post-list--hierarchical .wce-post-list__item--current > .wce-post-list__link .wce-post-list__title,
.wce-post-list--hierarchical .wce-post-list__item--current > .wce-post-list__link {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--hierarchical .wce-post-list__item--current > .wce-post-list__marker--icon {
    color: var(--wce-pl-hover-color);
}
.wce-post-list--hierarchical .wce-post-list__item--current > .wce-post-list__marker--icon.av-icon-char svg {
    fill: var(--wce-pl-hover-color);
}

/* === Post List — icon size inheritance fix (list icon mode) =========== *
 * When icon_size is empty (default), the icon must match the title font-size,
 * not the container font-size. We scope the 1em resolution to the item so it
 * picks up the title's computed size. */
#top .wce-post-list--list.wce-post-list--icon .wce-post-list__item {
    font-size: inherit;
}

#top .wce-post-list--list.wce-post-list--icon .wce-post-list__title {
    font-size: 1em;
}

#top .wce-post-list--list.wce-post-list--icon .wce-post-list__marker--icon {
    font-size: 1em;
}

#top .wce-post-list--list.wce-post-list--icon .wce-post-list__marker--icon.av-icon-char,
#top .wce-post-list--list.wce-post-list--icon .wce-post-list__marker--icon.av-icon-char svg {
    width: 1em;
    height: 1em;
}

/* When an explicit icon_size is set via the popup, the inline --wce-pl-icon-size
 * variable overrides the 1em above. */
#top .wce-post-list .wce-post-list__marker--icon.av-icon-char[style*="wce-pl-icon-size"],
#top .wce-post-list[style*="--wce-pl-icon-size"] .wce-post-list__marker--icon.av-icon-char,
#top .wce-post-list[style*="--wce-pl-icon-size"] .wce-post-list__marker--icon.av-icon-char svg {
    width: var(--wce-pl-icon-size);
    height: var(--wce-pl-icon-size);
}

/* === Post List — boxes alignment (top icon) ========================== */

#top .wce-post-list--boxes-align-center.wce-post-list--boxes-icon-top .wce-post-list__box-link {
    align-items: center;
    text-align: center;
}

#top .wce-post-list--boxes-align-left.wce-post-list--boxes-icon-top .wce-post-list__box-link {
    align-items: flex-start;
    text-align: left;
}

/* === Post List — boxes icon left: text column (title above excerpt) = *
 * When the icon is on the left, the text (title + excerpt + meta) must be
 * stacked vertically in a column, not inline. We wrap the text elements by
 * making the box-link a row (icon | text-column). The text-column is created
 * by grouping title/excerpt/meta in a flex column via the .wce-post-list__box-text
 * wrapper — but since we don't have that wrapper, we use a flex column on the
 * elements after the icon via CSS sibling grouping. */

#top .wce-post-list--boxes-icon-left .wce-post-list__box-link {
    align-items: flex-start;
}

#top .wce-post-list--boxes-icon-left .wce-post-list__box-title,
#top .wce-post-list--boxes-icon-left .wce-post-list__box-excerpt,
#top .wce-post-list--boxes-icon-left .wce-post-list__box-meta {
    display: block;
}

/* === Post List — icon size: force SVG to match the marker box size ===== *
 * The default icon (right-open-big) renders with its native viewBox size
 * (15x32) which Enfold injects as width/height attributes on the <svg>.
 * CSS properties always win over presentation attributes, so we force the
 * SVG to use the --wce-pl-icon-size variable (always defined: 1em by default
 * or an explicit px value when set in the popup).
 *
 * IMPORTANT: .wce-post-list__marker--icon and .av-icon-char are on the SAME
 * element, so we use a compound selector — NOT a descendant combinator. */

#top .wce-post-list--list .wce-post-list__marker--icon.av-icon-char svg,
#top .wce-post-list--boxes .wce-post-list__box-icon .av-icon-char svg {
    width: var(--wce-pl-icon-size) !important;
    height: var(--wce-pl-icon-size) !important;
}

/* The marker span itself must size to the icon, not the SVG native size. */
#top .wce-post-list--list .wce-post-list__marker--icon {
    width: var(--wce-pl-icon-size);
    height: var(--wce-pl-icon-size);
    min-width: var(--wce-pl-icon-size);
}

#top .wce-post-list--boxes .wce-post-list__box-icon {
    width: var(--wce-pl-icon-size);
    height: var(--wce-pl-icon-size);
    min-width: var(--wce-pl-icon-size);
}

/* === Post List — box text column (title above excerpt) =============== */

#top .wce-post-list--boxes .wce-post-list__box-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}