/*
Theme Name: OSM Blog
Theme URI: https://github.com/openstreetmap/osmblog-wp-theme
Author: Harry Wood
Author URI: https://wordpress.org/
Description: The theme for blog.openstreetmap.org — redesigned with a fast, lightweight, card-based layout inspired by modern open-source documentation sites (opensource.guide), while keeping full classic-WordPress template compatibility. Built on a modified Twenty Twelve base.
Version: 2.0
Tested up to: 6.7
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, translation-ready, block-patterns, dark-mode
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

This stylesheet is intentionally framework-free: no build step, no
preprocessor required to read or edit it. It uses native CSS custom
properties, clamp() for fluid type, and CSS Grid for layout, which keeps
the whole front end to a single ~30kb stylesheet and zero extra HTTP
requests for a UI framework.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Design tokens (custom properties + dark mode)
2.0 Reset & base elements
3.0 Typography
4.0 Layout & wrapper
5.0 Site header & navigation
6.0 Content cards (home / archive / search)
7.0 Single post / page
8.0 Post meta, post formats, pagination
9.0 Comments
10.0 Sidebar & widgets
11.0 Front page template
12.0 Forms
13.0 Footer
14.0 Utility & accessibility
15.0 Responsive media
16.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Design tokens
--------------------------------------------------------------*/
:root {
	/* Brand: the real OpenStreetMap blue + map green, not a generic SaaS palette */
	--osm-blue: #0073d4;
	--osm-blue-dark: #005ba8;
	--osm-blue-tint: #e8f2fd;
	--osm-green: #7ebc6f;
	--osm-green-dark: #5a9a4c;

	/* Surfaces */
	--bg: #fbfbf9;
	--bg-raised: #ffffff;
	--bg-sunken: #f3f3f0;
	--border: #e4e3dd;
	--border-strong: #d3d2ca;

	/* Ink */
	--ink: #1a1d1f;
	--ink-soft: #4b4f54;
	--ink-faint: #757a80;

	/* Accent roles */
	--link: var(--osm-blue);
	--link-visited: #6b4fa3;
	--focus-ring: #0073d4;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.06);
	--shadow-md: 0 4px 16px rgba(20, 20, 18, 0.08);
	--shadow-lg: 0 12px 32px rgba(20, 20, 18, 0.12);

	/* Shape & rhythm */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4.5rem;

	/* Type */
	--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-display: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--measure: 42rem;
	--measure-wide: 72rem;

	--header-height: 4.25rem;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not(.force-light) {
		--bg: #11171c;
		--bg-raised: #161d23;
		--bg-sunken: #0d1216;
		--border: #232b32;
		--border-strong: #2e3841;

		--ink: #eef1f3;
		--ink-soft: #b7bfc6;
		--ink-faint: #828c94;

		--osm-blue-tint: #112536;
		--link: #5db0ff;
		--link-visited: #c0a8f0;
		--focus-ring: #5db0ff;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
		--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}
}

/*--------------------------------------------------------------
2.0 Reset & base elements
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--link);
	text-decoration: none;
}

a:visited {
	color: var(--link-visited);
}

a:hover {
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--space-5) 0;
}

ul,
ol {
	margin: 0 0 var(--space-3) 0;
	padding-left: 1.25em;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-4) 0;
}

th,
td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--border);
	text-align: left;
}

blockquote {
	margin: var(--space-4) 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-4);
	border-left: 3px solid var(--osm-blue);
	color: var(--ink-soft);
	font-style: italic;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	overflow-x: auto;
}

code {
	background: var(--bg-sunken);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

pre code {
	background: none;
	padding: 0;
}

/*--------------------------------------------------------------
3.0 Typography
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 var(--space-3) 0;
}

h1 {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

h2 {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
}

h3 {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
}

h4 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 var(--space-3) 0;
}

.entry-content > p:first-of-type {
	font-size: 1.0625rem;
}

strong,
b {
	font-weight: 700;
}

small,
.small {
	font-size: 0.875rem;
}

/*--------------------------------------------------------------
4.0 Layout & wrapper
--------------------------------------------------------------*/
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wrapper {
	width: 100%;
	max-width: var(--measure-wide);
	margin: 0 auto;
	padding: var(--space-5) var(--space-4) var(--space-7);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	gap: var(--space-6);
	flex: 1;
}

#primary.site-content {
	min-width: 0;
}

body.page-template-front-page .wrapper,
.full-width .wrapper {
	grid-template-columns: 1fr;
}

body.page-template-front-page #primary,
.full-width #primary {
	max-width: var(--measure-wide);
}

/*--------------------------------------------------------------
5.0 Site header & navigation
--------------------------------------------------------------*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--border);
}

.site-header-inner {
	max-width: var(--measure-wide);
	margin: 0 auto;
	height: var(--header-height);
	padding: 0 var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
	min-width: 0;
}

.site-branding:hover {
	text-decoration: none;
}

.site-branding-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.site-branding-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.site-title {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-description {
	font-size: 0.75rem;
	color: var(--ink-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-navigation {
	display: flex;
	align-items: center;
}

.main-navigation ul.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: 0.5rem 0.8rem;
	border-radius: var(--radius-sm);
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--ink);
	background: var(--bg-sunken);
	text-decoration: none;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--osm-blue);
	background: var(--osm-blue-tint);
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-1);
	min-width: 12rem;
	z-index: 10;
	list-style: none;
}

.main-navigation li:hover > ul,
.main-navigation li.focus > ul {
	display: block;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ink);
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle-bars::before {
	position: absolute;
	transform: translateY(-6px);
}

.menu-toggle-bars::after {
	position: absolute;
	transform: translateY(6px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before {
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after {
	transform: rotate(-45deg);
}

.custom-header-image {
	max-height: 220px;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
}

.custom-header-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
6.0 Content cards (home / archive / search)
--------------------------------------------------------------*/
.site-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.site-content > #content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Each post in a loop becomes a card. Single posts (handled in 7.0) opt out. */
.home article.post,
.archive article.post,
.search article.post,
.blog article.post,
.tag article.post,
.category article.post,
.author article.post {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	position: relative;
}

.home article.post:hover,
.archive article.post:hover,
.search article.post:hover,
.blog article.post:hover,
.tag article.post:hover,
.category article.post:hover,
.author article.post:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
}

.entry-thumbnail {
	margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
	background: var(--bg-sunken);
}

.entry-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.entry-header .entry-title {
	margin-bottom: var(--space-1);
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
}

.entry-title a {
	color: var(--ink);
}

.entry-title a:hover {
	color: var(--osm-blue);
	text-decoration: none;
}

.featured-post {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--osm-blue-dark);
	background: var(--osm-blue-tint);
	padding: 0.25em 0.65em;
	border-radius: 999px;
	margin-bottom: var(--space-2);
}

.entry-summary {
	color: var(--ink-soft);
}

/*--------------------------------------------------------------
7.0 Single post / page
--------------------------------------------------------------*/
.single article.post,
.page article.page,
.single-format-standard article.post {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
	max-width: var(--measure);
}

.single .entry-thumbnail,
.page .entry-thumbnail {
	margin: 0 0 var(--space-4) 0;
	border-radius: var(--radius-lg);
}

.single .entry-thumbnail img,
.page .entry-thumbnail img {
	aspect-ratio: auto;
}

.single .entry-title,
.page .entry-title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.entry-content {
	color: var(--ink);
}

.entry-content a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
	text-decoration-thickness: 1px;
}

.entry-content a:hover {
	text-decoration-color: var(--link);
}

.entry-content img,
.entry-content .wp-block-image,
.entry-content figure {
	border-radius: var(--radius-md);
}

.page-links {
	margin-top: var(--space-4);
	font-size: 0.875rem;
	color: var(--ink-faint);
}

.page-header,
.archive-header {
	margin-bottom: var(--space-2);
}

.page-title,
.archive-title {
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
}

.page-title span,
.archive-title span {
	color: var(--osm-blue);
}

.page-description,
.archive-meta {
	color: var(--ink-soft);
	max-width: var(--measure);
}

.error404 .entry-content .search-form {
	margin: var(--space-3) 0;
	max-width: 28rem;
}

/* Topographic-line signature motif: a quiet nod to OSM's contour-map
   identity, used once as a hero backdrop rather than scattered everywhere. */
.single .entry-header,
.page-template-front-page .entry-header {
	position: relative;
}

/*--------------------------------------------------------------
8.0 Post meta, post formats, pagination
--------------------------------------------------------------*/
.entry-meta {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
	font-size: 0.8125rem;
	color: var(--ink-faint);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	align-items: center;
}

.entry-meta a {
	color: var(--ink-soft);
}

.entry-meta a:hover {
	color: var(--osm-blue);
}

.entry-meta .edit-link a {
	color: var(--osm-blue);
}

.author-info {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--bg-sunken);
	border-radius: var(--radius-md);
	display: flex;
	gap: var(--space-3);
}

.author-avatar img {
	border-radius: 50%;
	width: 56px;
	height: 56px;
}

.author-description h2 {
	font-size: 0.95rem;
	margin-bottom: 0.25em;
}

.author-description p {
	color: var(--ink-soft);
	font-size: 0.9rem;
	margin-bottom: 0.5em;
}

.author-link a {
	font-size: 0.85rem;
	font-weight: 600;
}

/* Post formats: aside / quote / status get a distinct, lighter card treatment */
.format-aside article.post,
.format-status article.post {
	background: var(--bg-sunken);
}

.format-quote .entry-content blockquote,
article.format-quote .entry-content {
	font-size: 1.1rem;
}

.format-link .entry-title a::after {
	content: ' →';
}

/* content-image.php and content-status.php wrap title/date in bare h1/h2 tags
   rather than .entry-title — style them consistently with the rest. */
.format-image .entry-content + footer h1,
article.format-image footer h1 {
	font-size: 1.2rem;
	margin-bottom: 0.2em;
}

.format-image footer h2,
.format-status .entry-header h2 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink-faint);
	margin-bottom: 0;
}

.format-status .entry-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.format-status .entry-header img.avatar {
	border-radius: 50%;
}

.aside .entry-title {
	font-size: 1.15rem;
}

.nav-single,
.nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	font-size: 0.9rem;
}

.nav-single span,
.nav-links .nav-previous,
.nav-links .nav-next {
	max-width: 48%;
}

.nav-single a,
.nav-links a {
	font-weight: 600;
}

.paging-navigation {
	display: flex;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border-radius: var(--radius-sm);
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 600;
}

.paging-navigation .page-numbers.current {
	background: var(--osm-blue);
	color: #fff;
}

.paging-navigation a.page-numbers:hover {
	background: var(--bg-sunken);
	text-decoration: none;
}

/*--------------------------------------------------------------
9.0 Comments
--------------------------------------------------------------*/
#comments,
.comments-area {
	margin-top: var(--space-6);
	max-width: var(--measure);
}

#comments-title,
.comments-title {
	font-size: 1.2rem;
}

.commentlist,
.comment-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.commentlist > li,
.comment-list > li {
	margin-bottom: var(--space-3);
	list-style: none;
}

article.comment {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-3) var(--space-3) calc(44px + var(--space-3) + var(--space-2));
	position: relative;
	min-height: 44px;
}

.comment-meta.comment-author {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
	font-size: 0.875rem;
	margin-bottom: var(--space-1);
}

.comment-meta.comment-author .avatar {
	position: absolute;
	left: var(--space-3);
	top: var(--space-3);
	border-radius: 50%;
}

.comment-meta.comment-author cite {
	font-style: normal;
}

.comment-meta.comment-author cite span {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--osm-green-dark);
	background: color-mix(in srgb, var(--osm-green) 18%, transparent);
	padding: 0.1em 0.5em;
	border-radius: 999px;
	margin-left: 0.4em;
}

.comment-meta.comment-author a time {
	color: var(--ink-faint);
	font-size: 0.8rem;
}

.comment-content {
	color: var(--ink-soft);
}

.comment-awaiting-moderation {
	font-size: 0.85rem;
	color: var(--osm-blue-dark);
	background: var(--osm-blue-tint);
	padding: 0.4em 0.7em;
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-bottom: var(--space-2);
}

.reply {
	margin-top: var(--space-2);
}

.children {
	list-style: none;
	padding-left: var(--space-4);
}

.comments-link a,
.comment-reply-link {
	font-weight: 600;
	font-size: 0.875rem;
}

#respond {
	margin-top: var(--space-5);
}

#respond label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.comment-form-comment textarea,
#respond textarea {
	width: 100%;
}

.comment-notes,
.logged-in-as {
	font-size: 0.875rem;
	color: var(--ink-faint);
	margin-bottom: var(--space-3);
}

.form-allowed-tags {
	font-size: 0.8rem;
	color: var(--ink-faint);
}

/*--------------------------------------------------------------
10.0 Sidebar & widgets
--------------------------------------------------------------*/
.widget-area {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.widget {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
}

.widget-title {
	font-size: 0.95rem;
	margin-bottom: var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border);
}

.widget ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.widget li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.9rem;
}

.widget li:last-child {
	border-bottom: none;
}

#rss-widget {
	padding: var(--space-3) var(--space-4);
}

.rss-link {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--osm-blue);
}

.rss-icon {
	width: 16px;
	height: 16px;
}

/*--------------------------------------------------------------
11.0 Front page template
--------------------------------------------------------------*/
.front-widgets {
	display: inline;
}

#secondary {
	display: flex;
	flex-direction: column;
}

.page-template-front-page #secondary.widget-area {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.page-template-front-page #secondary .first.front-widgets,
.page-template-front-page #secondary .second.front-widgets {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
}

.entry-page-image {
	margin-bottom: var(--space-4);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/*--------------------------------------------------------------
12.0 Forms
--------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--bg-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 0.55rem 0.75rem;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

button,
input[type="submit"],
.search-submit,
#submit {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
	background: var(--osm-blue);
	border: 1px solid var(--osm-blue-dark);
	border-radius: var(--radius-sm);
	padding: 0.55rem 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
.search-submit:hover,
#submit:hover {
	background: var(--osm-blue-dark);
}

/*--------------------------------------------------------------
13.0 Footer
--------------------------------------------------------------*/
#colophon {
	border-top: 1px solid var(--border);
	margin-top: var(--space-6);
	padding: var(--space-4);
}

.site-info {
	max-width: var(--measure-wide);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	font-size: 0.8125rem;
	color: var(--ink-faint);
}

.site-info a {
	color: var(--ink-faint);
}

.site-info [role="separator"]::before {
	content: '·';
	margin: 0 0.4em;
}

/*--------------------------------------------------------------
14.0 Utility & accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -3rem;
	left: var(--space-3);
	z-index: 100;
	background: var(--osm-blue);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: var(--radius-sm);
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: var(--space-3);
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin: 0 auto 1em;
}

/*--------------------------------------------------------------
15.0 Responsive media
--------------------------------------------------------------*/
@media (max-width: 800px) {
	.wrapper,
	.page-template-front-page .wrapper,
	.full-width .wrapper {
		grid-template-columns: 1fr;
		padding: var(--space-4) var(--space-3) var(--space-6);
		gap: var(--space-4);
	}

	#secondary {
		order: 2;
	}

	.page-template-front-page #secondary.widget-area {
		grid-template-columns: 1fr;
	}

	.menu-toggle {
		display: flex;
	}

	.main-navigation ul.nav-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--bg-raised);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-md);
		padding: var(--space-2);
		gap: 0;
	}

	.main-navigation ul.nav-menu.toggled-on {
		display: flex;
	}

	.main-navigation a {
		padding: 0.75rem var(--space-2);
		border-radius: var(--radius-sm);
	}

	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: var(--space-3);
	}

	.site-description {
		display: none;
	}

	.author-info {
		flex-direction: column;
	}

	.nav-single,
	.nav-links {
		flex-direction: column;
	}

	.nav-single span,
	.nav-links .nav-previous,
	.nav-links .nav-next {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	:root {
		--header-height: 3.75rem;
	}

	.site-title {
		font-size: 0.95rem;
	}
}

/*--------------------------------------------------------------
16.0 Print
--------------------------------------------------------------*/
@media print {
	.site-header,
	#secondary,
	.entry-meta .edit-link,
	.comments-link,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}