/**
 * c00d Base — layout and components
 * Design tokens come from theme.json; these rules wire structure and accessibility.
 */

:root {
	--c00d-base-content-width: 42rem;
	--c00d-base-wide-width: 72rem;
	--c00d-base-gutter: clamp(1rem, 4vw, 2rem);
	--c00d-base-header-height: 4rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

.c00d-base-container {
	width: min(100% - var(--c00d-base-gutter) * 2, var(--c00d-base-wide-width));
	margin-inline: auto;
	padding-inline: var(--c00d-base-gutter);
}

.c00d-base-main {
	padding-block: var(--wp--preset--spacing--xl, 2rem);
}

.c00d-base-layout {
	display: grid;
	gap: var(--wp--preset--spacing--xl, 2rem);
}

@media (min-width: 48rem) {
	.c00d-base-layout:has(.c00d-base-sidebar) {
		grid-template-columns: minmax(0, 1fr) 16rem;
		align-items: start;
	}
}

.c00d-base-content {
	max-width: var(--c00d-base-content-width);
}

.c00d-base-content--full {
	max-width: var(--c00d-base-wide-width);
}

/* Header */
.c00d-base-header {
	border-bottom: 1px solid var(--wp--preset--color--border, #e4e4e7);
}

.c00d-base-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--c00d-base-header-height);
}

.c00d-base-site-title {
	font-size: var(--wp--preset--font-size--xl, 1.25rem);
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.c00d-base-site-description {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--muted, #71717a);
}

.c00d-base-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.c00d-base-nav-toggle span::before {
	content: "☰";
}

.c00d-base-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c00d-base-menu a {
	text-decoration: none;
	color: inherit;
}

.c00d-base-menu a:hover,
.c00d-base-menu a:focus {
	color: var(--wp--preset--color--accent, #dc2626);
}

@media (max-width: 47.99rem) {
	.c00d-base-nav-toggle {
		display: block;
	}

	.c00d-base-nav {
		display: none;
		width: 100%;
	}

	.c00d-base-nav.is-open {
		display: block;
	}

	.c00d-base-menu--primary {
		flex-direction: column;
	}
}

/* Entries */
.c00d-base-entry {
	margin-bottom: var(--wp--preset--spacing--2xl, 3rem);
}

.c00d-base-entry__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.25rem;
}

.c00d-base-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--muted, #71717a);
}

.c00d-base-entry__footer {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.c00d-base-post-list .c00d-base-entry--card + .c00d-base-entry--card {
	padding-top: var(--wp--preset--spacing--xl, 2rem);
	border-top: 1px solid var(--wp--preset--color--border, #e4e4e7);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

/* Footer */
.c00d-base-footer {
	margin-top: var(--wp--preset--spacing--3xl, 4rem);
	padding-block: var(--wp--preset--spacing--xl, 2rem);
	border-top: 1px solid var(--wp--preset--color--border, #e4e4e7);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.c00d-base-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.c00d-base-copyright {
	margin: 0;
}

/* Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--foreground, #18181b);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--background, #fff);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 0.5rem;
	line-height: normal;
	padding: 0.75rem 1rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

.c00d-base-skip-link:focus {
	outline: 2px solid var(--wp--preset--color--accent, #dc2626);
}