/*
 * HTML sitemap (templates/sitemap.php).
 *
 * Everything is scoped under .oc-sitemap. Mobile-first: one column, then a
 * balanced multi-column flow from 768px.
 *
 * CSS `columns` rather than a grid because the sections have very unequal
 * heights -- About has a dozen children, Camp Meetings has one -- and only
 * column flow packs them without a ragged final row next to one enormous cell.
 * `break-inside: avoid` is what makes that safe: without it a section's <h2>
 * lands at the bottom of one column and half its links at the top of the next.
 * DOM order is column-major here, so reading order and tab order agree.
 *
 * Colours come from the theme's :root custom properties. --neutral--500 is
 * deliberately unused -- at #7f8da3 it is 2.9:1 on white and fails WCAG 1.4.3
 * for body copy.
 *
 * Loaded only on this template (enqueued from the template itself), after
 * oc-custom.css.
 */

.oc-sitemap {
	--sm-ink: var(--neutral--800);
	--sm-ink-muted: var(--neutral--600);
	--sm-line: var(--neutral--400);
	--sm-link: var(--sda-blue);
	--sm-gap: 32px;
	color: var(--sm-ink);
	font-size: 16px;
}

.oc-sitemap__sections {
	margin: 0;
	padding: 0;
	column-gap: var(--sm-gap);
}

.oc-sitemap__section {
	break-inside: avoid;
	margin: 0 0 var(--sm-gap);
	padding: 0 0 16px;
	border-bottom: 1px solid var(--sm-line);
}

.oc-sitemap__section:last-child {
	border-bottom: 0;
}

.oc-sitemap__section-title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

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

/* Nested levels get an indent and a hairline rail, so depth reads without
   bullets. 14px x 4 levels is 56px, which still fits a 320px viewport. */
.oc-sitemap ul ul {
	margin: 4px 0 8px;
	padding-left: 14px;
	border-left: 1px solid var(--sm-line);
}

.oc-sitemap li {
	margin: 0 0 4px;
	line-height: 1.5;
}

.oc-sitemap a {
	color: var(--sm-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;

	/* Long slugs must wrap inside a narrow column, not overflow the column box. */
	overflow-wrap: anywhere;
}

.oc-sitemap a:hover,
.oc-sitemap a:focus {
	text-decoration-thickness: 2px;
}

.oc-sitemap a:focus-visible {
	outline: 2px solid var(--sm-link);
	outline-offset: 2px;
}

/* Department canonical name, printed only when it says something the page
   title does not. */
.oc-sitemap__meta {
	margin-left: 6px;
	color: var(--sm-ink-muted);
	font-size: 0.85em;
}

/* External-link marker. Decorative -- the accessible name comes from the
   visually hidden text beside it. */
.oc-sitemap__ext {
	margin-left: 3px;
	color: var(--sm-ink-muted);
	font-size: 0.8em;
}

.oc-sitemap__note {
	margin: 24px 0 0;
	color: var(--sm-ink-muted);
	font-size: 14px;
	line-height: 1.6;
}

.oc-sitemap__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Two columns at the Webflow tablet breakpoint, three on desktop. It stays a
 * SINGLE column below 768px on purpose: two columns at phone width leave each
 * section about 150px, and a four-level indent does not survive that.
 */
@media screen and (min-width: 768px) {

	.oc-sitemap__sections {
		columns: 2;
	}
}

@media screen and (min-width: 992px) {

	.oc-sitemap__sections {
		columns: 3;
	}
}