/**
 * WP HTML Sitemap — Theme-first structural layout.
 *
 * The active theme controls typography, colors, and spacing.
 * This stylesheet provides only structural layout (grid, flex, list resets)
 * and accessibility (focus rings). Scoped entirely to #wphs-main.
 */

/* ── Wrapper ── */

#wphs-main {
	--_border: var(--wp--preset--color--contrast-3, var(--wp--preset--color--base-3, #e2e2e2));
	--_indent: var(--wp--preset--spacing--20, 16px);
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
}

/* ── Links ── */

#wphs-main a {
	color: inherit;
	text-decoration: none;
}

#wphs-main a:hover {
	text-decoration: underline;
}

#wphs-main a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── H4 (subtitle / breadcrumb trail) ── */

#wphs-main > h4 {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.67rem);
	flex-wrap: wrap;
}

/* ── SVG chevron ── */

#wphs-main > h4 svg {
	flex-shrink: 0;
	width: 0.4em;
	height: 0.7em;
}

#wphs-main > h4 svg path {
	stroke: currentColor;
	opacity: 0.5;
}

/* ── Meta (post count) ── */

#wphs-main > p {
	font-size: var(--wp--preset--font-size--small, 14px);
}

/* ── Grids ── */

#wphs-main ol[data-grid] {
	list-style: none;
	padding: 0;
	padding-left: var(--_indent);
	display: grid;
}

#wphs-main ol[data-grid="years"] {
	grid-template-columns: repeat(auto-fill, 60px);
	row-gap: var(--wp--preset--spacing--30, 1rem);
	padding-left: 0;
}

#wphs-main ol[data-grid="months"] {
	grid-template-columns: repeat(2, 1fr);
}

#wphs-main ol[data-grid="days"] {
	grid-template-columns: repeat(auto-fill, 60px);
	row-gap: var(--wp--preset--spacing--30, 1rem);
}

/* ── Grid items ── */

#wphs-main ol[data-grid] > li {
	padding: var(--wp--preset--spacing--20, 0.44rem) 0 var(--wp--preset--spacing--40, 1rem);
}

#wphs-main ol[data-grid="months"] > li,
#wphs-main ol[data-grid="days"] > li {
	border-bottom: 1px solid var(--_border);
}

/* ── Article list ── */

#wphs-main > ul#wphs-content {
	list-style: none;
	padding: 0;
}

#wphs-main > ul#wphs-content > li {
	padding: var(--wp--preset--spacing--30, 1rem) 0;
	border-bottom: 1px solid var(--_border);
}

#wphs-main > ul#wphs-content > li:last-child {
	border-bottom: none;
}

/* ── Footer link ── */

#wphs-sitemap-footer {
	text-align: center;
	padding: var(--wp--preset--spacing--30, 1rem) 0;
	font-size: var(--wp--preset--font-size--small, 14px);
}

/* ── Responsive ── */

@media (max-width: 768px) {
	#wphs-main ol[data-grid="months"] {
		grid-template-columns: 1fr;
	}
}