/*
Theme Name: Stauffer
Theme URI: https://github.com/erichstauffer/stauffer-theme
Author: Erich Stauffer
Author URI: https://www.erichstauffer.com
Description: A block theme implementing the Erich Stauffer Brand System v1.0 — Figtree and Nunito Sans, a faded-tee palette of ink, paper, coral and lake teal, and five content pillars each carrying its own accent. Built for essays and tools on systems, business, and intentional living.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stauffer
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/*
 * Nearly all styling lives in theme.json. This file carries only what
 * theme.json cannot express: the wordmark period, pill button variations,
 * pillar accent mapping, and a handful of layout details.
 */

/* ---------- Wordmark ---------- */
/* The brand's finishing mark: a coral period after the site title.
   Section 01 of the brand system — "ends on a point". */
.wp-block-site-title a::after {
	content: ".";
	color: var(--wp--preset--color--coral);
}

/* ---------- Eyebrow ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 0.25rem;
}

/* ---------- Buttons ---------- */
/* Primary is the default (coral, set in theme.json). Secondary is an
   outlined pill that inherits its colour from the surrounding text. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-pill-secondary > .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	padding: 0.6875rem 1.4375rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-pill-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-pill-secondary > .wp-block-button__link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* On ink backgrounds the outlined button flips. */
.has-ink-background-color .wp-block-button.is-style-pill-secondary > .wp-block-button__link,
.stauffer-on-ink .wp-block-button.is-style-pill-secondary > .wp-block-button__link {
	color: var(--wp--preset--color--paper);
}

.has-ink-background-color .wp-block-button.is-style-pill-secondary > .wp-block-button__link:hover,
.stauffer-on-ink .wp-block-button.is-style-pill-secondary > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---------- Cards ---------- */
.stauffer-card {
	background: var(--wp--preset--color--paper);
	border-radius: 16px;
	overflow: hidden;
}

/* Images bleed to the card edge; the card's own radius does the rounding. */
.stauffer-card .wp-block-image,
.stauffer-card .wp-block-image img {
	border-radius: 0;
	margin: 0;
}

.stauffer-card .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

/* Pillar cards carry a 6px accent rule on top (section 04). */
.stauffer-pillar {
	border-top: 6px solid var(--wp--preset--color--heather);
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stauffer-pillar:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(38, 51, 59, 0.14);
}

.stauffer-pillar--business { border-top-color: var(--wp--preset--color--pillar-business); }
.stauffer-pillar--software { border-top-color: var(--wp--preset--color--pillar-software); }
.stauffer-pillar--life     { border-top-color: var(--wp--preset--color--pillar-life); }
.stauffer-pillar--writing  { border-top-color: var(--wp--preset--color--pillar-writing); }
.stauffer-pillar--faith    { border-top-color: var(--wp--preset--color--pillar-faith); }

.stauffer-pillar .wp-block-heading a {
	text-decoration: none;
	color: inherit;
}

/* ---------- Post cards in a query loop ---------- */
.stauffer-postcard {
	background: var(--wp--preset--color--paper);
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stauffer-postcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(38, 51, 59, 0.14);
}

.stauffer-postcard .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}

.stauffer-postcard .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.stauffer-postcard .wp-block-post-title a:hover {
	color: var(--wp--preset--color--coral);
}

/* Category chips take the pillar colour of their category. */
.wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--teal);
}

.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--coral);
}

/* ---------- Hero ---------- */
/* The portrait is a 4:5 card, but capped in height so it never outgrows the
   headline column and leaves a band of dead space beside it on desktop. */
.stauffer-hero-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 35%;
	width: 100%;
	max-height: 460px;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(38, 51, 59, 0.14);
}

@media (max-width: 781px) {
	.stauffer-hero-portrait img {
		max-height: 440px;
	}
}

/* ---------- Search ---------- */
/* The button-inside search renders as a pill field with a coral action on the
   right. Without this the button inherits paper-on-paper and disappears. */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	padding: 5px 5px 5px 8px;
}

.wp-block-search__input {
	background: transparent;
	border: none;
	padding: 0.5rem 0.75rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-size: 1rem;
}

.wp-block-search__input:focus {
	outline: none;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--coral);
}

.wp-block-search__button {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--paper);
	border: none;
	border-radius: 999px;
	padding: 0.625rem 1.375rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background: var(--wp--preset--color--ink);
}

/* ---------- Monogram ---------- */
.stauffer-monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
}

/* ---------- Content rhythm ---------- */
.wp-block-post-content p {
	max-width: 68ch;
}

.wp-block-post-content > * + * {
	margin-block-start: 1.25em;
}

/* ---------- Navigation ---------- */
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--coral);
}

/* The Newsletter item in the nav renders as a coral pill. */
.wp-block-navigation .stauffer-nav-cta a {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--paper);
	padding: 0.5625rem 1.125rem;
	border-radius: 999px;
	font-weight: 700;
}

.wp-block-navigation .stauffer-nav-cta a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ---------- Footer ---------- */
.stauffer-footer a {
	color: var(--wp--preset--color--heather);
	text-decoration: none;
}

.stauffer-footer a:hover {
	color: var(--wp--preset--color--coral);
}

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--coral);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 12px 0;
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.stauffer-pillar,
	.stauffer-postcard,
	.wp-block-button__link {
		transition: none;
	}

	.stauffer-pillar:hover,
	.stauffer-postcard:hover {
		transform: none;
	}
}