/* ============================================
   Subpage two-column layout
   Shared by templates/page-section-landing.html
   and templates/page-section-subpage.html
   ============================================ */

.subpage-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	align-items: start;
	gap: 0;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 2rem;
}

.subpage-sidebar-col {
	position: sticky;
	top: calc(var(--ugamainnav-height-sticky, 60px) + 3rem);
	padding-right: 2.5rem;
	min-width: 0;
}

.subpage-content-col {
	position: relative;
	padding-left: 3rem;
	min-width: 0;
}

.subpage-content-col::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background-color: color-mix(in srgb, var(--wp--preset--color--stegeman, #9EA2A2) 55%, transparent);
}

/* ============================================
   Section Sidebar navigation

   Floating (no container box), right-aligned, three levels:
     1  .section-sidebar__link--parent   parent / landing page (eyebrow label)
     2  .section-sidebar__link--subpage  sibling pages
     3  .section-sidebar__link--section  anchors within a page

   Every subpage's sections are always visible: the type hierarchy carries the
   structure, so there is no disclosure control and nothing collapses. The one
   exception is the mobile summary, which folds the whole tree away.

   Alignment system — three vertical axes, divider side:
     text axis       every label's right edge, all levels
     indicator rail  a fixed --ss-rail gutter holding the active-section bar
     divider         the content column's 1px rule

   State classes:
     .is-current-page  server-rendered, levels 1-2
     .is-active        client-rendered scroll-spy, level 3
     .is-expanded      mobile summary open, on .section-sidebar
   ============================================ */

.section-sidebar {
	--ss-rail: 1.75rem;
	--ss-rule: color-mix(in srgb, var(--wp--preset--color--stegeman, #9EA2A2) 40%, transparent);
	--ss-ease: cubic-bezier(0.33, 0, 0.2, 1);
	--ss-open: 280ms;
	--ss-close: 200ms;
	--ss-color: 150ms;

	font-family: var(--wp--preset--font-family--oswald, sans-serif);
	text-align: right;
	font-feature-settings: 'kern';
	-webkit-font-smoothing: antialiased;
}

.section-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.section-sidebar__item {
	margin: 0;
	padding: 0;
}

/* --- Links, shared ------------------------- */

/* No hidden weight-reservation ghost here. Nothing in this component changes
   font-weight at runtime: level 3 keeps one weight through the scroll-spy, and
   level 2's current-page weight is server-rendered, so it is fixed for the life
   of the page. A ghost would only add height, since it wraps at the heavier
   weight when the visible label does not. */
.section-sidebar__link {
	display: block;
	text-decoration: none;
	transition:
		color var(--ss-color) ease,
		box-shadow var(--ss-color) ease;
}

.section-sidebar__link:hover {
	text-decoration: none;
}

.section-sidebar__link:focus-visible,
.section-sidebar__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--stegeman, #9EA2A2);
	outline-offset: 2px;
	border-radius: 1px;
}

/* --- Level 1: parent / landing page --------
   An eyebrow label: small, tracked caps that name the section without
   competing with the page list below it. */

.section-sidebar__item--parent {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ss-rule);
}

.section-sidebar__link--parent {
	padding: 0.125rem var(--ss-rail) 0.125rem 0;
	color: var(--wp--preset--color--arch-black);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.section-sidebar__link--parent:hover,
.section-sidebar__link--parent.is-current-page {
	color: var(--wp--preset--color--bulldog-red, #BA0C2F);
}

/* --- Level 2: subpages ---------------------
   The workhorse level: largest, darkest, medium weight. */

.section-sidebar__item--subpage + .section-sidebar__item--subpage {
	border-top: 1px solid var(--ss-rule);
}

.section-sidebar__link--subpage {
	/* Carries the rail inset itself, so all three levels land on one text
	   axis without needing a wrapper grid. */
	padding: 0.65rem var(--ss-rail) 0.65rem 0;
	color: var(--wp--preset--color--arch-black, #000);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.section-sidebar__link--subpage:hover {
	color: var(--wp--preset--color--bulldog-red, #BA0C2F);
}

.is-current-page > .section-sidebar__link--subpage {
	color: var(--wp--preset--color--bulldog-red, #BA0C2F);
}

/* --- Level 3: sections ---------------------
   Smallest and lightest, one clear step down in size, weight, and color.
   The active bar renders in the rail, on the same axis as the chevrons. */

/* The list is the panel's grid item, and padding on a grid item survives the
   0fr collapse -- min-height only zeroes the content box, so padding here
   leaves a dead gap under every collapsed subpage. Spacing goes on the items
   instead, where it collapses away with the rest of the content. */
.section-sidebar__list--sections {
	padding: 0;
}

.section-sidebar__item--section:first-child {
	padding-top: 0.125rem;
}

/* A top-level page with no children has no level 2, so its sections hang
   straight off the rule. Match the top padding a subpage label would have had,
   so the gap under the rule is the same on every page. */
.section-sidebar__item--sections-only {
	padding-top: 0.525rem;
}

/* Trailing room after a section group, matched to the level-2 row padding so
   the rhythm above and below a separator stays even. */
.section-sidebar__item--section:last-child {
	padding-bottom: 0.65rem;
}

.section-sidebar__link--section {
	padding: 0.1rem var(--ss-rail) 0.1rem 0;
	color: var(--wp--preset--color--sanford, #554F47);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.section-sidebar__link--section:hover {
	color: var(--wp--preset--color--bulldog-red, #BA0C2F);
}

.section-sidebar__link--section.is-active {
	color: var(--wp--preset--color--bulldog-red, #BA0C2F);
	box-shadow: inset -3px 0 0 var(--wp--preset--color--bulldog-red, #BA0C2F);
}

/* --- Mobile summary (hidden on desktop) ---- */

.section-sidebar__summary {
	display: none;
}

.section-sidebar__tree {
	display: block;
}

/* ============================================
   Mobile: sidebar stacks above the content as a
   collapsed "In this section" accordion.
   ============================================ */

@media (max-width: 768px) {
	.subpage-layout {
		grid-template-columns: 1fr;
		padding-inline: 1rem;
	}

	.subpage-sidebar-col {
		/* TEMPORARY: the sidebar is hidden on mobile while the mobile treatment
		   is still being worked out. Everything below it -- the red card, the
		   summary accordion, the inverted color scheme -- is left intact and
		   dormant; delete this one declaration to bring it all back. */


		position: static;
		top: auto;
		order: -1;
		padding-right: 0;
		margin-bottom: var(--wp--preset--spacing--50) !important;
	}

	.subpage-content-col {
		padding-left: 0;
	}

	.subpage-content-col::before {
		display: none;
	}

	/* The sidebar becomes a solid grey card here, so the hairlines that
	   bracketed it on desktop are redundant -- the fill defines its edges now.
	   Text stays on the same default colors used on desktop (arch-black /
	   sanford / bulldog-red), so no color overrides are needed below. */
	.section-sidebar {
		text-align: left;
		padding: 0.25rem 1rem;
		border: 2px solid color-mix(in srgb, var(--wp--preset--color--stegeman, #9EA2A2) 50%, var(--wp--preset--color--chapel-bell-white, #FFF));
		background-color: color-mix(in srgb, var(--wp--preset--color--stegeman, #9EA2A2) 25%, var(--wp--preset--color--chapel-bell-white, #FFF));
	}

	.section-sidebar__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
		padding: 0.5rem 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--arch-black, #000);
		font-family: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}

	/* The only chevron left in the component: it marks the one thing that
	   still collapses. */
	.section-sidebar__summary .section-sidebar__chevron {
		width: 0.75rem;
		height: 0.75rem;
		flex: 0 0 auto;
		transform: rotate(0deg);
		color: var(--wp--preset--color--arch-black, #000);
		transition: transform var(--ss-open) var(--ss-ease);
	}

	.section-sidebar.is-expanded .section-sidebar__summary .section-sidebar__chevron {
		transform: rotate(180deg);
	}

	.section-sidebar__tree {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		visibility: hidden;
		transition:
			grid-template-rows var(--ss-close) var(--ss-ease),
			visibility 0s linear var(--ss-close);
	}

	.section-sidebar__tree > * {
		min-height: 0;
	}

	.section-sidebar.is-expanded .section-sidebar__tree {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows var(--ss-open) var(--ss-ease),
			visibility 0s;
	}

	/* Same rule as the section list: the pages list is the collapsing tree's
	   grid item, so padding here would survive the 0fr collapse and leave a
	   gap under the closed summary. Put it on the last item instead. */
	.section-sidebar__list--pages > .section-sidebar__item:last-child {
		padding-bottom: 0.875rem;
	}

	/* Left-aligned: the ragged edge is now the right one, so no level needs
	   the rail inset to hold a text axis. */
	.section-sidebar__link--parent,
	.section-sidebar__link--subpage,
	.section-sidebar__link--section {
		padding-right: 0;
	}

	.section-sidebar__link--section {
		padding-left: 1.5rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.section-sidebar__tree,
	.section-sidebar__chevron,
	.section-sidebar__link {
		transition: none;
	}
}