/* Winsiders Custom Elements — Sitemap
 * Grouped, multi-column sitemap of posts / CPT / taxonomy terms.
 * Reuses the native Enfold responsive columns classes (av-{size}-columns-*)
 * and the CSS-variable column-count pattern from the post-list boxes grid.
 */

.wce-sitemap {
    --wce-sitemap-columns: 4;
    --wce-sitemap-heading-color: inherit;
    --wce-sitemap-gap: 1.5em;
    --wce-sitemap-section-gap: 2em;
    display: block;
    width: 100%;
    clear: both;
    margin: 0;
}

/* Empty-state message */
.wce-sitemap__empty {
    margin: 0;
    padding: 1em 0;
    opacity: 0.6;
    font-style: italic;
}

/* ───────── Section layout ─────────
 * Sections stack vertically. Inside a section, the list is rendered as a
 * responsive grid whose column count is driven by --wce-sitemap-columns. */
.wce-sitemap__section {
    margin-bottom: var(--wce-sitemap-section-gap);
}

.wce-sitemap__section:last-child {
    margin-bottom: 0;
}

/* Optional separator between sections (a top border on every section except
 * the first). */
.wce-sitemap--separators .wce-sitemap__section + .wce-sitemap__section {
    padding-top: var(--wce-sitemap-section-gap);
    border-top: 1px solid currentColor;
    border-top-color: var(--wce-sitemap-heading-color);
    opacity: 1;
}

.wce-sitemap--separators .wce-sitemap__section + .wce-sitemap__section {
    border-top-color: rgba(125, 125, 125, 0.25);
}

/* Section heading. High specificity to beat Enfold's global heading reset. */
#top .wce-sitemap__heading {
    margin: 0 0 0.6em 0;
    padding: 0;
    color: var(--wce-sitemap-heading-color);
    font-weight: 600;
    line-height: 1.3;
}

.wce-sitemap__count {
    font-weight: 400;
    opacity: 0.65;
    font-size: 0.85em;
}

/* Flat mode: hide the heading, keep the list */
.wce-sitemap--flat .wce-sitemap__heading {
    display: none;
}

/* ───────── Item list ─────────
 * The list is a responsive CSS grid. The column count is driven by the
 * --wce-sitemap-columns variable, which the responsive classes override at
 * each breakpoint (same pattern as the post-list boxes grid). */
.wce-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--wce-sitemap-columns), minmax(0, 1fr));
    gap: var(--wce-sitemap-gap);
}

/* Each item is a single link. We keep the <li> as a normal block so it
 * wraps naturally inside its grid cell. */
.wce-sitemap__item {
    margin: 0;
    padding: 0;
    break-inside: avoid;
}

#top .wce-sitemap__link {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em;
    color: inherit;
    text-decoration: none;
    line-height: 1.4;
}

#top .wce-sitemap__link:hover,
#top .wce-sitemap__link:focus-visible {
    text-decoration: underline;
}

.wce-sitemap__link-text {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

.wce-sitemap__date {
    font-size: 0.78em;
    opacity: 0.6;
    white-space: nowrap;
}

/* ───────── Hierarchical (nested pages) ─────────
 * When hierarchical='yes', pages render as a tree: children are a nested <ul>
 * inside the parent <li>. We switch the root list from CSS grid to CSS
 * multi-column layout (`columns`) — grid breaks when <ul> children become
 * grid items (each child would take one cell, destroying the tree). With
 * `columns`, the nested <ul> flows naturally inside its parent <li> and the
 * column break happens between top-level items. */
.wce-sitemap--hierarchical .wce-sitemap__list {
    display: block;
    grid-template-columns: none;
    /* CSS multi-column layout: the shorthand `columns` doesn't reliably
     * accept a CSS variable, so we set column-count + column-gap explicitly. */
    column-count: var(--wce-sitemap-columns, 4);
    column-gap: var(--wce-sitemap-gap, 1.5em);
}

/* A root branch is the atomic unit of the hierarchical layout. Column starts
 * are calculated server-side so every tree stays intact while all requested
 * columns can still be used with intentionally uneven (flag) heights. */
.wce-sitemap--hierarchical .wce-sitemap__list > .wce-sitemap__item {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--wce-sitemap-gap, 0.4em);
}

.wce-sitemap--hierarchical .wce-sitemap__list--nested {
    /* Nested lists flow inside their parent <li>; NOT multi-column. */
    display: block;
    columns: auto;
    grid-template-columns: none;
    gap: 0;
    margin: 0;
    padding-left: 1.2em;
    border-left: 1px solid rgba(125, 125, 125, 0.2);
}

/* Each nested item gets a touch of left padding so the link text aligns
 * cleanly under its parent, not flush against the border. */
.wce-sitemap--hierarchical .wce-sitemap__list--nested .wce-sitemap__item {
    padding-left: 0.4em;
    break-inside: avoid;
}

/* Items carry a depth class so advanced themes can style each level
 * differently if needed (color, weight, size). We keep it subtle. */
.wce-sitemap__item--depth-1 .wce-sitemap__link-text { font-size: 0.96em; }
.wce-sitemap__item--depth-2 .wce-sitemap__link-text { font-size: 0.92em; }
.wce-sitemap__item--depth-3 .wce-sitemap__link-text { font-size: 0.88em; }

/* ───────── Link vertical spacing presets ───────── */
.wce-sitemap--spacing-compact {
    --wce-sitemap-gap: 0.25em;
}
.wce-sitemap--spacing-normal {
    --wce-sitemap-gap: 0.5em;
}
.wce-sitemap--spacing-airy {
    --wce-sitemap-gap: 0.9em;
}

/* ───────── Responsive columns (native Enfold classes) ─────────
 * The columns_count_icon_switcher template emits the
 * av-{size}-columns-overwrite + av-{size}-columns-N classes on the container
 * ALL AT ONCE. To prevent the cascade from applying every breakpoint's
 * override simultaneously (last one wins → always mini=1), each block MUST be
 * wrapped in its own media query — same pattern as Enfold Masonry and the
 * post-list boxes grid. !important ensures the override beats the inline
 * default set by element_styling. */

/* Desktop: >990px */
@media only screen and (min-width: 990px) {
    .wce-sitemap.av-desktop-columns-overwrite { --wce-sitemap-columns: var(--wce-sitemap-desktop-cols, 4) !important; }
    .wce-sitemap.av-desktop-columns-1 { --wce-sitemap-desktop-cols: 1; }
    .wce-sitemap.av-desktop-columns-2 { --wce-sitemap-desktop-cols: 2; }
    .wce-sitemap.av-desktop-columns-3 { --wce-sitemap-desktop-cols: 3; }
    .wce-sitemap.av-desktop-columns-4 { --wce-sitemap-desktop-cols: 4; }
    .wce-sitemap.av-desktop-columns-5 { --wce-sitemap-desktop-cols: 5; }
    .wce-sitemap.av-desktop-columns-6 { --wce-sitemap-desktop-cols: 6; }
    .wce-sitemap--hierarchical .wce-sitemap__section > .wce-sitemap__list > .wce-sitemap__item--column-start-desktop {
        break-before: column;
        -webkit-column-break-before: always;
    }
}

/* Medium (tablet landscape): 768-989px */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    .wce-sitemap.av-medium-columns-overwrite { --wce-sitemap-columns: var(--wce-sitemap-medium-cols, 3) !important; }
    .wce-sitemap.av-medium-columns-1 { --wce-sitemap-medium-cols: 1; }
    .wce-sitemap.av-medium-columns-2 { --wce-sitemap-medium-cols: 2; }
    .wce-sitemap.av-medium-columns-3 { --wce-sitemap-medium-cols: 3; }
    .wce-sitemap.av-medium-columns-4 { --wce-sitemap-medium-cols: 4; }
    .wce-sitemap.av-medium-columns-5 { --wce-sitemap-medium-cols: 5; }
    .wce-sitemap.av-medium-columns-6 { --wce-sitemap-medium-cols: 6; }
    .wce-sitemap--hierarchical .wce-sitemap__section > .wce-sitemap__list > .wce-sitemap__item--column-start-medium {
        break-before: column;
        -webkit-column-break-before: always;
    }
}

/* Small (tablet portrait): 480-767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .wce-sitemap.av-small-columns-overwrite { --wce-sitemap-columns: var(--wce-sitemap-small-cols, 1) !important; }
    .wce-sitemap.av-small-columns-1 { --wce-sitemap-small-cols: 1; }
    .wce-sitemap.av-small-columns-2 { --wce-sitemap-small-cols: 2; }
    .wce-sitemap.av-small-columns-3 { --wce-sitemap-small-cols: 3; }
    .wce-sitemap.av-small-columns-4 { --wce-sitemap-small-cols: 4; }
    .wce-sitemap--hierarchical .wce-sitemap__section > .wce-sitemap__list > .wce-sitemap__item--column-start-small {
        break-before: column;
        -webkit-column-break-before: always;
    }
}

/* Mini (mobile): <479px */
@media only screen and (max-width: 479px) {
    .wce-sitemap.av-mini-columns-overwrite { --wce-sitemap-columns: var(--wce-sitemap-mini-cols, 1) !important; }
    .wce-sitemap.av-mini-columns-1 { --wce-sitemap-mini-cols: 1; }
    .wce-sitemap.av-mini-columns-2 { --wce-sitemap-mini-cols: 2; }
    .wce-sitemap.av-mini-columns-3 { --wce-sitemap-mini-cols: 3; }
    .wce-sitemap.av-mini-columns-4 { --wce-sitemap-mini-cols: 4; }
    .wce-sitemap--hierarchical .wce-sitemap__section > .wce-sitemap__list > .wce-sitemap__item--column-start-mini {
        break-before: column;
        -webkit-column-break-before: always;
    }
}