/* ─── Sitemap ──────────────────────────────────────────────────────────────
   Self-maintaining HTML sitemap ([hzo_sitemap]). Semantic nested lists:
     <nav class="hzo-sitemap" aria-label="Sitemap">
       <ul class="hzo-sitemap__list hzo-sitemap__list--top hzo-sitemap__list--auto">
         <li class="hzo-sitemap__item">
           <a class="hzo-sitemap__link" href="…">Services</a>
           <ul class="hzo-sitemap__list hzo-sitemap__sublist">
             <li class="hzo-sitemap__item"><a class="hzo-sitemap__link" …>Child</a></li>
           </ul>
         </li>
       </ul>
       <section class="hzo-sitemap__group">            (extra post-type groups)
         <h2 class="hzo-sitemap__heading">Posts</h2>
         <ul class="hzo-sitemap__list hzo-sitemap__list--top …">…</ul>
       </section>
     </nav>

   Top-level lists flow into CSS columns:
     --auto  → responsive column-width (packs 1–N by available space)
     --cols  → fixed column-count from the inline --hzo-sitemap-cols var (1–4)
   A top-level item + its whole subtree never splits across a column break.
   Token-driven throughout; collapses to a single column on small screens.
   Static component — any motion comes only from composing .hzo-reveal. */

.hzo-sitemap {
	color: var(--text-body);
	font-family: var(--font-body);
}

/* ── Group heading (only when >1 post type / a non-hierarchical group) ───── */
.hzo-sitemap__group + .hzo-sitemap__group,
.hzo-sitemap__list--top + .hzo-sitemap__group {
	margin-top: var(--space-xl);
}
.hzo-sitemap__heading {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: var(--font-weight-heading, var(--h4-weight, 600));
	color: var(--text-heading);
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: var(--border-1) solid var(--border);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
.hzo-sitemap__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top-level lists flow into columns. break-inside:avoid keeps a section and its
   nested children together in one column. */
.hzo-sitemap__list--top {
	column-gap: var(--space-2xl);
}
.hzo-sitemap__list--auto {
	column-width: 15rem;
}
.hzo-sitemap__list--cols {
	column-count: var(--hzo-sitemap-cols, 1);
}
.hzo-sitemap__list--top > .hzo-sitemap__item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Top-level items get breathing room; the first sits flush to the top of its
   column so column tops align. */
.hzo-sitemap__list--top > .hzo-sitemap__item {
	margin-bottom: var(--space-lg);
}
.hzo-sitemap__list--top > .hzo-sitemap__item:first-child {
	margin-top: 0;
}

/* Top-level link reads as the section label: heavier + heading colour, at the
   existing h4 step so it sits above its nested children (which inherit body). */
.hzo-sitemap__list--top > .hzo-sitemap__item > .hzo-sitemap__link {
	font-family: var(--font-heading);
	font-weight: var(--fw-600);
	font-size: var(--fs-h4);
	color: var(--text-heading);
}

/* ── Nested sublists ────────────────────────────────────────────────────── */
.hzo-sitemap__sublist {
	margin-top: var(--space-sm);
	padding-left: var(--space-md);
	border-left: var(--border-1) solid var(--border);
}
.hzo-sitemap__sublist .hzo-sitemap__item {
	margin-top: var(--space-xs);
}

/* ── Links ──────────────────────────────────────────────────────────────── */
.hzo-sitemap__link {
	display: inline-block;
	color: var(--text-body);
	text-decoration: none;
	line-height: var(--lh-snug);
	padding: var(--space-2xs) 0;
	border-radius: var(--radius-1);
	transition: color var(--transition-base);
}
.hzo-sitemap__link:hover,
.hzo-sitemap__link:focus-visible {
	color: var(--brand-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hzo-sitemap__link:focus-visible {
	outline: var(--border-2) solid var(--focus-ring);
	outline-offset: 2px;
}
/* A parent with no permalink renders as a plain label, not a link. */
.hzo-sitemap span.hzo-sitemap__link {
	color: var(--text-muted);
	cursor: default;
}

.hzo-sitemap__item--home > .hzo-sitemap__link {
	font-weight: var(--fw-600);
}

/* ── Small screens: one column, tighter columns gutter ──────────────────── */
@media (max-width: 640px) {
	.hzo-sitemap__list--auto,
	.hzo-sitemap__list--cols {
		column-count: 1;
		column-width: auto;
	}
}

/* Static component — no transitions under reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.hzo-sitemap__link {
		transition: none;
	}
}