/**
 * Calles Base – minimal base styles.
 *
 * Design tokens live in :root and are meant to be overridden by the
 * project or by Control Center.
 */

:root {
	--font-primary: system-ui, sans-serif;
	--font-secondary: system-ui, sans-serif;

	--color-text: #111;
	--color-background: #fff;

	--container-width: 1200px;

	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
}

body {
	font-family: var(--font-primary);
	color: var(--color-text);
	background-color: var(--color-background);
}

a {
	color: inherit;
	text-underline-offset: 0.15em;
}

/* Layout ----------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.admin-bar .site {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

.site-main {
	flex: 1 0 auto;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--spacing-sm);
}

.site-content {
	padding-block: var(--spacing-md);
}

/* Header & footer -------------------------------------------------------- */

.site-header,
.site-footer {
	padding-block: var(--spacing-sm);
}

.site-header .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
}

.site-title {
	margin: 0;
	font-weight: 700;
}

.site-title a {
	text-decoration: none;
}

.site-info {
	margin: 0;
}

.primary-navigation .menu,
.footer-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs) var(--spacing-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation {
	margin-block-end: var(--spacing-sm);
}

/* Content ---------------------------------------------------------------- */

.entry + .entry {
	margin-block-start: var(--spacing-lg);
}

.page-header {
	margin-block-end: var(--spacing-md);
}

.alignleft {
	float: left;
	margin-inline-end: var(--spacing-sm);
}

.alignright {
	float: right;
	margin-inline-start: var(--spacing-sm);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/* Accessibility ---------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: var(--spacing-xs);
	left: var(--spacing-xs);
	z-index: 100000; /* Above the admin bar. */
	width: auto;
	height: auto;
	padding: var(--spacing-xs) var(--spacing-sm);
	clip-path: none;
	color: var(--color-text);
	background-color: var(--color-background);
}