/*
Theme Name: Steven Metze
Theme URI: https://stevenmetze.com
Author: The Duumvirati
Author URI: https://duum.io
Description: Bespoke theme for Col. Steven Metze's site. Keeps the clean single-column look the site had under Twenty Twenty-Five: Manrope, a 645px reading column, site title left and navigation right.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stevenmetze
Tags: blog, one-column, custom-menu, custom-logo, threaded-comments, translation-ready
*/

:root {
	--base: #ffffff;
	--contrast: #111111;
	--muted: #686868;
	--link: #111111;
	--link-hover: #503aa8;
	--rule: #e6e6e6;
	--wrap: 1340px;
	--column: 645px;
	--gap: 16px;
	--gap-lg: 32px;
	--nav-gap: 20px;
	--btn-bg: #111;
	--btn-color: #fff;
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; text-wrap: pretty; }
img, video, iframe { max-width: 100%; height: auto; }
img { display: inline-block; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: anywhere; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.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 !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; left: 8px; top: 8px; width: auto; z-index: 1000; background: #fff; color: #000; padding: 8px 12px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.alignleft { float: left; margin: 4px 16px 8px 0; }
.alignright { float: right; margin: 4px 0 8px 16px; }
.aligncenter { display: block; margin: 8px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: .875em; opacity: .8; }
.entry-content::after, .site-main::after { content: ""; display: table; clear: both; }
.sticky { }
.bypostauthor { }
.gallery-caption { }

/* ---- navigation toggle (mobile) ----------------------------------------- */
.menu-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid currentColor; border-radius: 4px; color: inherit; font: inherit; padding: 6px 10px; cursor: pointer; }
.menu-toggle-bars { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menu-panel { display: none; }
body.is-open-menu .menu-panel { display: block; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; display: block; }
.menu .sub-menu { padding-left: 16px; }
@media (min-width: 768px) {
	.menu-toggle { display: none; }
	.menu-panel { display: block !important; }
	.menu { display: flex; flex-wrap: wrap; gap: var(--nav-gap, 20px); }
	.menu > li { position: relative; }
	.menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; padding: 6px 0; background: var(--submenu-bg, #fff); color: var(--submenu-color, #111); box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 20; }
	.menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu { display: block; }
	.menu .sub-menu a { padding: 6px 14px; color: inherit; }
}

/* ---- entries --------------------------------------------------------------- */
.site-main > article + article { margin-top: var(--gap-lg); }
.entry-header { margin-bottom: var(--gap); }
.entry-title { margin: 0 0 6px; }
.entry-meta { font-size: .875em; opacity: .8; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.entry-meta a { text-decoration: none; }
.post-thumbnail img { display: block; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-footer { margin-top: var(--gap); font-size: .875em; opacity: .8; }
.page-header { margin-bottom: var(--gap); }
.page-title { margin: 0; }
.pagination, .post-navigation { margin-top: var(--gap-lg); }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.nav-label { display: block; font-size: .8em; opacity: .7; }
.pagination .nav-links { justify-content: center; }
.page-numbers { padding: 4px 8px; text-decoration: none; }
.page-numbers.current { font-weight: 700; }

/* ---- forms --------------------------------------------------------------- */
.search-form { display: flex; gap: 6px; max-width: 100%; }
.search-field { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--field-border, #ccc); border-radius: 3px; font: inherit; }
.search-submit { border: 0; background: var(--btn-bg, #333); color: var(--btn-color, #fff); border-radius: 3px; padding: 6px 10px; cursor: pointer; display: inline-flex; }
.comment-form label { display: block; margin-bottom: 4px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; max-width: 100%; padding: 6px 8px; border: 1px solid var(--field-border, #ccc); border-radius: 3px; font: inherit; }
.comment-form .submit { border: 0; background: var(--btn-bg, #333); color: var(--btn-color, #fff); border-radius: 3px; padding: 8px 16px; cursor: pointer; font: inherit; }
.comment-list { list-style: none; margin: 0 0 var(--gap-lg); padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 12px 0; border-bottom: 1px solid var(--rule, #e5e5e5); }
.comment-meta { font-size: .875em; margin-bottom: 6px; }
.comment .avatar { float: left; margin-right: 10px; border-radius: 50%; }

/* ---- widgets --------------------------------------------------------------- */
.widget { margin-bottom: var(--gap-lg); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 4px 0; }
.widget-title { margin: 0 0 8px; }

/* ---- type ---------------------------------------------------------------- */
body { background: var(--base); color: var(--contrast); font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 1.125rem; line-height: 1.45; letter-spacing: -0.1px; }
@media (min-width: 600px) { body { font-size: 1.38rem; line-height: 1.4; } }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.125; letter-spacing: -0.1px; margin: 1.2em 0 .5em; }
h1 { font-size: 2.15rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.38rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { text-decoration: underline; text-underline-offset: 2px; }
blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 2px solid var(--contrast); }
code, pre { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
pre { overflow-x: auto; padding: 12px; background: #f5f5f5; }

/* ---- header ---------------------------------------------------------------- */
.site-header { padding: 24px 0 8px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.1px; }
.site-title a { text-decoration: none; color: var(--contrast); }
.site-logo img { max-height: 48px; width: auto; }
.main-navigation { font-size: .95rem; font-weight: 400; }
.main-navigation .menu a { color: var(--contrast); padding: 6px 0; }
.main-navigation .menu a:hover { color: var(--link-hover); }
.main-navigation .menu .current-menu-item > a { font-weight: 600; }
body.is-open-menu .menu-panel { flex-basis: 100%; padding: 8px 0 4px; border-top: 1px solid var(--rule); }
@media (max-width: 767px) { .menu-toggle { font-size: .9rem; } }

/* ---- content column ----------------------------------------------------------- */
.site-content { padding: 40px 0 48px; }
.site-main { max-width: var(--column); margin-inline: auto; }
.site-main > article + article { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--rule); }
.entry-title { font-size: 2.15rem; font-weight: 400; margin-bottom: 12px; }
h2.entry-title { font-size: 1.75rem; }
.entry-title a { text-decoration: none; color: var(--contrast); }
.entry-title a:hover { color: var(--link-hover); }
.entry-meta { color: var(--muted); font-size: .875rem; }
.entry-meta a { color: inherit; }
.page-title { font-size: 2.15rem; font-weight: 400; }
.entry-content img.alignleft { margin-right: 20px; }
.entry-content .wp-block-image, .entry-content figure { margin: 0 0 1em; }
.entry-content .wp-block-embed { margin: 0 0 1em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.alignwide { max-width: var(--wrap); }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.post-thumbnail { margin-bottom: var(--gap); }

/* ---- footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); padding: 24px 0 32px; font-size: .875rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.footer-inner p { margin: 0; }
.site-title-small a { color: var(--contrast); font-weight: 700; text-decoration: none; }
.footer-navigation .menu { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-navigation a { color: inherit; }