/**
 * The human sitemap.
 *
 * Auto-loaded by inc/enqueue.php because the filename matches the template
 * slug. Three list shapes, chosen by what the list actually is: cards for the
 * handful of pages that deserve a description, columns for the long flat list
 * of bureaus, and grouped lists for the articles.
 */

.sitemapHero {
    padding-block-start: var(--space7);
}

/* --- Jump bar ---------------------------------------------------------------- */

.sitemapJump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space3);
    margin-block-start: var(--space7);
}

.sitemapJumpLink {
    display: inline-flex;
    align-items: center;
    gap: var(--space3);
    padding: var(--space2) var(--space4) var(--space2) var(--space2);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusFull);
    background-color: var(--colorSurface);
    color: inherit;
    text-decoration: none;
    font-size: var(--textSm);
    font-weight: var(--weightMedium);
    transition:
        border-color var(--durationFast) var(--easeOut),
        transform var(--durationFast) var(--easeOut);
}

.sitemapJumpLink:hover {
    border-color: var(--colorBrandBorder);
    transform: translateY(-1px);
}

.sitemapJumpLink:hover .iconTile {
    border-color: var(--colorBrandBorder);
    background-color: var(--colorBrandSoft);
    color: var(--colorBrand);
}

.sitemapJumpCount {
    font-size: var(--textXs);
    color: var(--colorInkSubtle);
}

/* --- Section headers ----------------------------------------------------------- */

/* Anchored sections must clear the sticky header when jumped to. */
.sitemapSection {
    scroll-margin-block-start: 5rem;
}

.sitemapHeader {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space4);
    align-items: center;
    margin-block-end: var(--space6);
    padding-block-end: var(--space4);
    border-block-end: 1px solid var(--colorBorder);
}

.sitemapHeader > div {
    display: flex;
    flex-direction: column;
    gap: var(--space1);
    min-inline-size: 0;
}

/* --- Cards ---------------------------------------------------------------------- */

.sitemapCards {
    display: grid;
    gap: var(--space4);
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.sitemapCard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space2);
    block-size: 100%;
    padding: var(--space5);
    padding-inline-end: var(--space7);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusLg);
    background-color: var(--colorSurface);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition:
        border-color var(--durationBase) var(--easeOut),
        transform var(--durationBase) var(--easeOut);
}

.sitemapCard:hover {
    border-color: var(--colorBrandBorder);
    transform: translateY(-2px);
}

.sitemapCard:hover .iconTile {
    border-color: var(--colorBrandBorder);
    background-color: var(--colorBrandSoft);
    color: var(--colorBrand);
}

.sitemapCardTitle {
    font-weight: var(--weightSemibold);
    letter-spacing: var(--trackingSnug);
    text-wrap: balance;
}

.sitemapCardCount {
    margin-block-start: auto;
    padding-block-start: var(--space2);
    font-size: var(--textXs);
    color: var(--colorInkSubtle);
}

.sitemapCardIcon {
    position: absolute;
    inset-block-start: var(--space5);
    inset-inline-end: var(--space5);
    color: var(--colorInkSubtle);
    transition:
        color var(--durationFast) var(--easeOut),
        transform var(--durationFast) var(--easeOut);
}

.sitemapCard:hover .sitemapCardIcon {
    color: var(--colorBrand);
    transform: translate(2px, -2px);
}

/* --- Columns -------------------------------------------------------------------
   The bureau list is long and flat, so it flows into columns rather than
   becoming forty cards. */

.sitemapColumns {
    columns: 3 16rem;
    column-gap: var(--space7);
    list-style: none;
}

.sitemapColumns li {
    /* Without this a link can be split across a column break. */
    break-inside: avoid;
    margin-block-end: var(--space2);
}

.sitemapColumns a {
    display: block;
    padding: var(--space2) var(--space3);
    margin-inline-start: calc(var(--space3) * -1);
    border-radius: var(--radiusSm);
    color: var(--colorInkMuted);
    text-decoration: none;
    font-size: var(--textSm);
    transition:
        background-color var(--durationFast) var(--easeOut),
        color var(--durationFast) var(--easeOut);
}

.sitemapColumns a:hover {
    background-color: var(--colorSurfaceRaised);
    color: var(--colorInk);
}

/* --- Grouped lists ---------------------------------------------------------------- */

.sitemapGroups {
    display: grid;
    gap: var(--space6);
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    align-items: start;
}

.sitemapGroup {
    padding: var(--space5);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusLg);
    background-color: var(--colorSurface);
}

.sitemapGroupTitle {
    margin-block-end: var(--space4);
    padding-block-end: var(--space3);
    border-block-end: 1px solid var(--colorBorder);
    font-family: var(--fontMono);
    font-size: var(--textXs);
    font-weight: var(--weightMedium);
    letter-spacing: var(--trackingWider);
    text-transform: uppercase;
    color: var(--colorInkSubtle);
}

.sitemapGroupTitle a {
    color: inherit;
    text-decoration: none;
}

.sitemapGroupTitle a:hover {
    color: var(--colorBrand);
}

.sitemapList {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
    list-style: none;
    font-size: var(--textSm);
}

.sitemapList li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space3);
}

.sitemapList a {
    color: var(--colorInkMuted);
    text-decoration: none;
    text-wrap: pretty;
    transition: color var(--durationFast) var(--easeOut);
}

.sitemapList a:hover {
    color: var(--colorBrand);
}

.sitemapList .microText {
    flex-shrink: 0;
}