/*
Theme Name: Editorial Modules
Author: Editorial Modules
Description: A modular editorial WordPress theme with separate Home, Blog, and Places modules.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: editorial-modules
Tags: blog, news, block-styles, custom-logo, featured-images, threaded-comments, translation-ready
*/

:root {
	--editorial-color-accent: #ff5a36;
	--editorial-color-accent-dark: #d93d1e;
	--editorial-color-ink: #171716;
	--editorial-color-muted: #6c6c68;
	--editorial-color-canvas: #ffffff;
	--editorial-color-surface: #f4f4ef;
	--editorial-color-border: #deded7;
	--editorial-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--editorial-font-serif: Georgia, "Times New Roman", serif;
	--editorial-radius-small: 0.5rem;
	--editorial-radius-medium: 1rem;
	--editorial-shadow-card: 0 0.75rem 2rem rgb(23 23 22 / 8%);
	--editorial-content-width: 47.5rem;
	--editorial-wide-width: 77.5rem;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--editorial-color-canvas);
	color: var(--editorial-color-ink);
	font-family: var(--editorial-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

body.admin-bar .site-header {
	top: 32px;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

a {
	color: var(--editorial-color-ink);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
	color: var(--editorial-color-accent-dark);
}

button,
input,
textarea,
select {
	font: inherit;
}

button,
input[type="button"],
input[type="submit"] {
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--editorial-color-accent) 65%, white);
	outline-offset: 3px;
}

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

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--editorial-color-canvas);
	color: var(--editorial-color-ink);
	font-weight: 700;
}

.site-main {
	min-height: 55vh;
}

.container {
	width: min(calc(100% - 2rem), var(--editorial-wide-width));
	margin-inline: auto;
}

.content-container {
	width: min(calc(100% - 2rem), var(--editorial-content-width));
	margin-inline: auto;
}

.section {
	padding-block: clamp(2.5rem, 5vw, 5rem);
}

.section--surface {
	background: var(--editorial-color-surface);
}

.section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.section-heading__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.eyebrow {
	margin: 0 0 0.65rem;
	color: var(--editorial-color-accent-dark);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
	border: 1px solid var(--editorial-color-ink);
	border-radius: 999px;
	background: var(--editorial-color-ink);
	color: white;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
}

.button:hover,
.button:focus-visible {
	border-color: var(--editorial-color-accent-dark);
	background: var(--editorial-color-accent-dark);
	color: white;
}

.button--ghost {
	background: transparent;
	color: var(--editorial-color-ink);
}

.pagination,
.post-navigation {
	margin-top: 2.5rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--editorial-color-border);
	border-radius: 999px;
	text-decoration: none;
}

.page-numbers.current {
	border-color: var(--editorial-color-ink);
	background: var(--editorial-color-ink);
	color: white;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}

	.container,
	.content-container {
		width: min(calc(100% - 1.25rem), var(--editorial-wide-width));
	}
}