/**
 * Advanced HTML Sitemap — front-end styles.
 *
 * Written to sit inside any theme: no font families, no colours, and no
 * backgrounds are declared. Everything derives from inherited type and
 * `currentColor`, so the sitemap picks up the surrounding design (including
 * dark themes) instead of imposing its own. Sizes are relative, so they scale
 * with whatever base font size the theme sets.
 *
 * The wrapper class is repeated (.advanced-html-sitemap.advanced-html-sitemap)
 * on rules that target plain elements. Themes routinely style content lists
 * with selectors like `.page-content article ul`, which outranks a single
 * class plus an element. Repeating the class raises specificity enough to win
 * without resorting to !important, which would leave nothing to override with.
 *
 * Override any of the custom properties below to adjust spacing or rules.
 */

.advanced-html-sitemap {
    /* Neutral grey reads acceptably on both light and dark backgrounds. */
    --ahs-rule: rgba(128, 128, 128, 0.25);
    --ahs-column-gap: 2.5rem;
    --ahs-row-gap: 2.5rem;
    --ahs-item-gap: 0.35em;
    --ahs-heading-size: 1.125em;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--ahs-column-gap);
    row-gap: var(--ahs-row-gap);
}

/* Tint the rule with the inherited text colour where supported, so it stays
   legible on dark themes without hardcoding a palette. */
@supports (border-color: color-mix(in srgb, currentColor 20%, transparent)) {
    .advanced-html-sitemap {
        --ahs-rule: color-mix(in srgb, currentColor 20%, transparent);
    }
}

.advanced-html-sitemap.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advanced-html-sitemap.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Index ---------- */

.advanced-html-sitemap.advanced-html-sitemap .sitemap-index {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.advanced-html-sitemap.advanced-html-sitemap .sitemap-index li {
    margin: 0;
    padding: 0;
}

.advanced-html-sitemap.advanced-html-sitemap .sitemap-index a {
    display: inline-block;
    padding: 0.35em 0.75em;
    border: 1px solid var(--ahs-rule);
    border-radius: 0.25em;
    font-size: 0.9em;
    line-height: 1.4;
    text-decoration: none;
}

/* ---------- Sections ---------- */

.advanced-html-sitemap .sitemap-section {
    /* Without this, a long title can force a grid column wider than its track. */
    min-width: 0;
}

.advanced-html-sitemap.advanced-html-sitemap .sitemap-heading {
    margin: 0 0 0.75em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--ahs-rule);

    /* Themes often size h2 for page titles, which is far too heavy when a
       sitemap repeats it once per section. Normalise relative to inherited
       type rather than to a fixed pixel value. */
    font-size: var(--ahs-heading-size);
    line-height: 1.3;
}

/* ---------- Lists ---------- */

.advanced-html-sitemap.advanced-html-sitemap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.advanced-html-sitemap.advanced-html-sitemap li {
    margin: 0;
    padding: var(--ahs-item-gap) 0;
    line-height: 1.4;

    /* Long slugs and untitled entries should wrap rather than overflow. */
    overflow-wrap: break-word;
}

/* Nested lists carry a rule so hierarchy stays readable without bullets,
   which many themes strip anyway. */
.advanced-html-sitemap.advanced-html-sitemap .sitemap-section ul ul {
    margin: var(--ahs-item-gap) 0 0 0.35em;
    padding-left: 0.9em;
    border-left: 1px solid var(--ahs-rule);
}

.advanced-html-sitemap.advanced-html-sitemap .sitemap-section a {
    text-decoration: none;
}

.advanced-html-sitemap.advanced-html-sitemap .sitemap-section a:hover,
.advanced-html-sitemap.advanced-html-sitemap .sitemap-section a:focus,
.advanced-html-sitemap.advanced-html-sitemap .sitemap-index a:hover,
.advanced-html-sitemap.advanced-html-sitemap .sitemap-index a:focus {
    text-decoration: underline;
}

/* Dates and term counts: de-emphasised via opacity so no colour is assumed. */
.advanced-html-sitemap.advanced-html-sitemap small {
    margin-left: 0.35em;
    font-size: 0.85em;
    opacity: 0.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

    .advanced-html-sitemap.columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {

    .advanced-html-sitemap.columns-2,
    .advanced-html-sitemap.columns-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Print ---------- */

@media print {

    .advanced-html-sitemap {
        display: block;
    }

    .advanced-html-sitemap.advanced-html-sitemap .sitemap-index {
        display: none;
    }

    .advanced-html-sitemap .sitemap-section {
        margin-bottom: 1.5em;
        break-inside: avoid;
    }
}