/* Additions for the hierarchical sitemap. The base visual system is x.uk/css/x.css. */
@font-face {
    font-family: "U8";
    src: url("../fonts/U8-Light-web.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "U8";
    src: url("../fonts/U8-Bold-web.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.sitemap-page { width: 100%; }
.sitemap-header { padding: 2rem 0 1rem; text-align: center; }
.sitemap-header h1 { margin-bottom: 1rem; }
.sitemap-header .subtitle { margin-bottom: 0.75rem; font-size: 1.1rem; }
.sitemap-summary { color: var(--muted); font-size: 0.85rem; text-align: center; hyphens: none; }

.sitemap-tools {
    max-width: var(--narrow-width);
    margin: 1.5rem auto 2.5rem;
    padding: 1.25rem;
    background: var(--surface-muted);
    border-radius: 4px;
}

.sitemap-tools label { display: block; margin-bottom: 0.45rem; font-size: 0.9rem; font-weight: 700; }
.sitemap-search-row { display: flex; gap: 0.5rem; }
.sitemap-search-row input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    font: inherit;
}
.sitemap-search-row input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sitemap-tools button,
.sitemap-actions a {
    padding: 0.55rem 0.8rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid #b8b8b8;
    border-radius: 4px;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}
.sitemap-tools button:hover,
.sitemap-tools button:focus-visible,
.sitemap-actions a:hover,
.sitemap-actions a:focus-visible { color: var(--bg); background: var(--text); border-color: var(--text); text-decoration: none; }
.sitemap-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.sitemap-results { max-width: none; margin: 0.65rem 0 0; color: var(--muted); font-size: 0.8rem; text-align: left; hyphens: none; }

.sitemap-index { max-width: var(--narrow-width); margin: 0 auto 4rem; }
.sitemap-index h2 { margin-top: 0; }
.sitemap-home-row,
.sitemap-row { display: flex; align-items: center; min-height: 2.6rem; border-bottom: 1px solid #e2e2e2; }
.sitemap-home-row { padding: 0.35rem 0.5rem; background: var(--surface-muted); }
.sitemap-home-row span { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.sitemap-tree { margin: 0; padding: 0; list-style: none; }
.sitemap-tree .sitemap-tree { margin-left: 1.5rem; border-left: 1px solid #d8d8d8; }
.sitemap-tree[hidden] { display: none; }
.sitemap-node[hidden] { display: none; }
.sitemap-row { padding: 0.25rem 0.5rem; }
.sitemap-row:hover { background: #fafafa; }
.sitemap-row a,
.sitemap-group { min-width: 0; color: var(--text); font-size: 0.92rem; text-decoration: none; }
.sitemap-row a:hover,
.sitemap-row a:focus-visible { text-decoration: underline; }
.sitemap-toggle {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.35rem;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.sitemap-toggle:hover,
.sitemap-toggle:focus-visible { background: var(--surface-muted); outline: none; }
.sitemap-toggle[aria-expanded="true"] span { display: inline-block; transform: rotate(45deg); }
.sitemap-leaf { width: 0.35rem; height: 0.35rem; margin: 0 1.08rem 0 0.73rem; background: var(--muted); border-radius: 50%; }
.sitemap-count { margin-left: auto; padding-left: 0.75rem; color: var(--muted); font-size: 0.75rem; }
.sitemap-match > .sitemap-row { background: var(--surface-muted); }

@media (max-width: 768px) {
    .sitemap-header { padding-top: 1.25rem; }
    .sitemap-tools { margin-inline: 0; }
    .sitemap-tree .sitemap-tree { margin-left: 0.75rem; }
    .sitemap-home-row span { display: none; }
    .sitemap-actions { flex-direction: column; }
    .sitemap-actions a,
    .sitemap-actions button { width: 100%; text-align: center; }
}