/*
Theme Name:   Broadsheet
Theme URI:    https://example.com/broadsheet
Description:  A light editorial theme for writing-led sites. Serif for reading, sans for interface, one accent colour. Ships eight templates, five patterns and three palettes. Retheme the whole site by changing two hex values in theme.json.
Author:       You
Version:      1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  broadsheet
Tags:         blog, news, editorial, one-column, block-patterns, full-site-editing, custom-colors, custom-logo, accessibility-ready
*/

/* ============================================================
   Shorthands over the theme.json presets
   ============================================================ */
:root {
	--primary:      var(--wp--preset--color--primary);
	--primary-dark: var(--wp--preset--color--primary-dark);
	--primary-light: var(--wp--preset--color--primary-light);
	--accent:      var(--wp--preset--color--accent);
	--accent-hi:   var(--wp--preset--color--accent-light);
	--paper:     var(--wp--preset--color--paper);
	--wash:      var(--wp--preset--color--wash);
	--wash-alt:  var(--wp--preset--color--wash-alt);
	--rule:      var(--wp--preset--color--rule);
	--ink:       var(--wp--preset--color--ink);
	--body:      var(--wp--preset--color--body);
	--muted:     var(--wp--preset--color--muted);
	--sans:      var(--wp--preset--font-family--sans);
	--serif:     var(--wp--preset--font-family--serif);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   HEADER — hairline treatment
   The logo sits at 44px inline with the nav. The single 1px
   rule is the entire separation device: no band, no shadow.
   ============================================================ */
.site-header {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	padding-block: 1.15rem;
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header .wp-block-site-logo img { width: 44px; height: auto; }
.site-header .wp-block-site-title a {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: none;
}
.site-header .wp-block-navigation { gap: 1.75rem; }
.site-header .wp-block-navigation a {
	color: var(--body);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.site-header .wp-block-navigation a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent);
}
.site-header .wp-block-navigation .current-menu-item a { border-bottom-color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--wash);
	border-top: 1px solid var(--rule);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	margin-top: clamp(4rem, 8vw, 7rem);
}
.site-footer .wp-block-site-title a {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ink);
	text-decoration: none;
}
.site-footer h4,
.footer-head {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-block: 0 1.15rem;
}
.site-footer .wp-block-navigation { display: block; }
.site-footer .wp-block-navigation ul { display: grid; gap: 0.6rem; }
.site-footer .wp-block-navigation a { color: var(--body); text-decoration: none; }
.site-footer .wp-block-navigation a:hover { color: var(--primary); }
.site-footer .legal {
	border-top: 1px solid var(--rule);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--muted);
	margin-bottom: 0;
}

/* ============================================================
   TYPE UTILITIES
   .kicker — the accent eyebrow above section headings. Its job is
   to tell you what kind of thing follows, so keep it to 1-3 words.
   ============================================================ */
.kicker {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-block: 0 0.85rem;
}
.kicker-primary { color: var(--primary-light); }

.lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--body);
	max-width: 46ch;
}
/* WordPress stamps `margin-left/right: auto !important` on every direct child
   of a constrained group. Anything given a narrower max-width therefore gets
   centered, which is why the lede floats away from the heading's left edge.
   These elements are meant to sit flush left, so the !important is matched. */
.hero h1,
.lede {
	margin-inline: 0 auto !important;
}
.meta {
	font-family: var(--sans);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin-block: 0 0.65rem;
}

/* ============================================================
   BANDS — vertical rhythm
   ============================================================ */
.band       { padding-block: var(--wp--preset--spacing--70); }
.band-tight { padding-block: var(--wp--preset--spacing--60); }
.band-flush { padding-top: 0; }
.band-rule  { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------
   FULL-BLEED BANDS

   Any band carrying a background is always meant to reach the
   viewport edges, so this is unconditional rather than something
   you set per-block in the editor.

   WordPress's own `alignfull` escape only fires when the block is
   a direct child of the element holding the root padding. On the
   front page these sit two levels deep, inside both `main` and
   `post-content`, so that selector never matches and the band
   collapses back to content width. The viewport-margin technique
   below works from any nesting depth.
   ------------------------------------------------------------ */
.band-wash,
.band-primary {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* 100vw counts the scrollbar, which introduces a few pixels of
   horizontal overflow. `clip` rather than `hidden`: hidden would
   create a scroll container and break the sticky header. */
html { overflow-x: clip; }

.band-wash  { background: var(--wash); }
.band-primary  { background: var(--primary); color: #fff; }
.band-primary :is(h1,h2,h3,h4) { color: #fff; }
.band-primary p { color: rgba(255,255,255,.82); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
	letter-spacing: -0.028em;
	margin-block: 0 1.5rem;
	max-width: 16ch;
}
.hero .lede { margin-block: 0 2.25rem; }

/* Trust strip under the hero */
.trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	border-top: 1px solid var(--rule);
	padding-top: 1.5rem;
	margin-top: 3rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ============================================================
   PROCESS STEPS
   Numbered because the content genuinely is a sequence — the
   rules run in this order. Do not reuse for unordered lists.
   ============================================================ */
.process { display: grid; gap: 0; counter-reset: step; }
.process > * {
	counter-increment: step;
	border-top: 1px solid var(--rule);
	padding-block: 2rem;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0 1.5rem;
	align-items: start;
	margin: 0;
}
.process > *:last-child { border-bottom: 1px solid var(--rule); }
.process > *::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--accent);
	padding-top: 0.4rem;
}
/* Every real child belongs in column two.
   Without this the ::before counter takes cell 1/1 and the h3 takes 1/2,
   which leaves the paragraph to wrap into 2/1 — a 3.5rem column. That is
   what produces one word per line. */
.process > * > * { grid-column: 2; }
.process h3 { margin-block: 0 0.5rem; }
.process p { margin: 0; color: var(--body); }

/* ============================================================
   STAT ROW
   ============================================================ */
.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.stat-row > * { background: var(--paper); padding: 1.75rem 1.5rem; margin: 0; }
.stat-value {
	font-family: var(--sans);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
	margin-block: 0 0.4rem;
}
.stat-label {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

/* ============================================================
   ARTICLE GRID — used by home, archive, search and the
   featured-articles pattern
   ============================================================ */
.article-grid.wp-block-post-template,
ul.article-grid {
	list-style: none;
	padding-left: 0;
	margin-block: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2.5rem 2rem;
}
.article-grid > li { margin: 0; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.article-grid > li > *:first-child { margin-top: 0; }
.article-grid .wp-block-post-title {
	font-size: 1.3125rem;
	line-height: 1.25;
	margin-block: 0 0.6rem;
}
.article-grid .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.article-grid .wp-block-post-title a:hover { color: var(--primary); }
.article-grid .wp-block-post-date {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-block: 0 0.7rem;
}
.article-grid .wp-block-post-excerpt__excerpt { font-size: 1rem; line-height: 1.6; color: var(--body); }
.article-grid .wp-block-post-excerpt__more-text a { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; }

/* ============================================================
   PROSE — long-form reading column
   ============================================================ */
.prose > * { margin-block: 1.6rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 3rem; }
.prose h3 { margin-top: 2.25rem; }
.prose a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--primary); }
.prose blockquote {
	border-left: 3px solid var(--accent);
	padding-left: 1.5rem;
	margin-inline: 0;
	font-style: italic;
	color: var(--ink);
}
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-block: 0.5rem; }
.prose img { border: 1px solid var(--rule); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 3rem; }

/* ============================================================
   BUTTONS — outline variant
   ============================================================ */
.is-style-outline .wp-block-button__link,
.btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
}
.is-style-outline .wp-block-button__link:hover,
.btn-outline .wp-block-button__link:hover { background: var(--primary); color: #fff; }

/* ============================================================
   PAGINATION / SEARCH / 404
   ============================================================ */
.wp-block-query-pagination {
	font-family: var(--sans);
	font-size: 0.875rem;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}
.wp-block-query-pagination a { text-decoration: none; color: var(--primary); }
.wp-block-query-pagination .current { font-weight: 700; color: var(--ink); }

.wp-block-search__input {
	border: 1px solid var(--rule);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	font-family: var(--sans);
	font-size: 1rem;
	background: var(--paper);
	color: var(--ink);
}
.wp-block-search__input:focus { border-color: var(--primary); outline: none; }
.wp-block-search__button { border-radius: 2px; }

.error-code {
	font-family: var(--sans);
	font-size: clamp(4rem, 12vw, 8rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wash-alt);
	letter-spacing: -0.04em;
	margin-block: 0 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
	.site-header { position: static; }
	.process > * { grid-template-columns: 1fr; gap: 0.5rem; }
	.process > *::before { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ============================================================
   POST FOOTER — conversion surfaces after the article
   Search traffic lands on posts, so this is where subscribing
   has to be possible. Order is deliberate: offer, then identity,
   then somewhere else to go.
   ============================================================ */
.post-cta {
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	background: var(--wash);
	padding: 2rem 2rem 2.25rem;
	margin-top: 3.5rem;
}
.post-cta h2 { font-size: 1.5rem; margin-block: 0 0.5rem; }
.post-cta p  { margin-block: 0 1.5rem; font-size: 1.0625rem; }

.post-author {
	border-top: 1px solid var(--rule);
	margin-top: 3rem;
	padding-top: 2rem;
}
.post-author .wp-block-post-author__avatar img { border-radius: 50%; }
.post-author .wp-block-post-author__name {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink);
}
.post-author .wp-block-post-author__bio {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--body);
	margin-top: 0.35rem;
}

.related-wrap { border-top: 1px solid var(--rule); margin-top: 3.5rem; padding-top: 2.5rem; }
.related-wrap h2 { font-size: 1.75rem; margin-block: 0 2rem; }
.related.article-grid { gap: 2rem; }
.related h3 { font-size: 1.125rem; line-height: 1.3; margin-block: 0 0.5rem; }
.related h3 a { color: var(--ink); text-decoration: none; }
.related h3 a:hover { color: var(--primary); }
.related p:last-child { font-size: 0.9375rem; color: var(--body); margin: 0; }

/* Reading time sits in the meta row and needs separating from the terms */
.meta .wp-block-shortcode { margin: 0; }