/* =====================================================================
 * Esselith — base layer (S2 backfill)
 *
 * The element-level defaults Astra used to provide for free, now owned by the
 * standalone theme: reset, content typography, the .es-container content column,
 * form controls, and the screen-reader / skip-link utilities.
 *
 * DESIGN RULE — this is a DEFAULTS layer, not a chrome layer:
 *   • Element rules are wrapped in :where() (ZERO specificity), so ANY plugin,
 *     chrome (companion.css), or theme.json rule always wins with no !important
 *     and no cascade fights. This matters because the homepage bands render
 *     INSIDE .entry-content — their classed elements (e.g. .es-home-promo-title)
 *     keep their own styling; only UNCLASSED prose picks up these defaults.
 *   • Loaded BEFORE companion.css (which depends on this handle). theme.json's
 *     global styles own the body background / text colour / font-family /
 *     line-height; this layer never re-declares those (it adds the metrics,
 *     spacing, and reset theme.json doesn't cover).
 *   • Colours read Core's --es-* tokens with reference-palette fallbacks, exactly
 *     like companion.css; this file never DEFINES --es-* (Core owns them).
 *
 * Breakpoint standard: 600 phone / 782 tablet / 1024 desktop.
 * ===================================================================== */

/* ---- 1. Reset --------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(body) {
	margin: 0;
	/* Full-bleed bands (heroes, alignfull blocks, the suite's plugin sections,
	   the next-steps band) are sized with 100vw, which includes a classic
	   scrollbar's width — on Windows every page scrolled ~8px sideways.
	   `clip` (not `hidden`) trims that sliver without making the body a scroll
	   container, so sticky elements keep working (0.20.2). */
	overflow-x: clip;
}
:where(img, svg, video, canvas, iframe, embed, object) {
	max-width: 100%;
}
:where(img, svg, video) {
	height: auto;
}
:where(figure) {
	margin: 0;
}
:where(mark) {
	/* Inline text COLOUR (the Highlight tool → text color) must not carry the UA
	   yellow background. An intentional highlight sets its own via a
	   .has-*-background-color class, which wins over this zero-specificity reset. */
	background-color: transparent;
}

/* ---- 2. Content column ----------------------------------------------- *
 * The single content max-width + side gutters for normal flowing content.
 * The full-bleed homepage bands and full-width plugin sections break out of
 * this with 100vw on their own, so this only governs in-flow content. */
.es-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 44px);
}

/* Vertical rhythm around the main content. Collapsed on views that lead with
 * their own full-bleed section (front page + the suite's auto pages, via
 * es-suppress-title) so the first section meets the header flush and the footer
 * meets the last section flush. */
.site-main {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
body.es-suppress-title .site-main {
	padding-block: 0;
}

/* ---- 3. Headings outside content (template chrome) ------------------- */
:where(.entry-title) {
	margin: 0 0 0.4em;
	font-size: var(--es-h1-hero, clamp(2.5rem, 2.11rem + 1.66vw, 3.875rem));
	line-height: 1.1;
	letter-spacing: 0;
}
:where(.archive-title) {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
}
:where(.archive-header) {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
:where(.entry-meta) {
	margin-top: 0.4em;
	font-size: 0.9rem;
	opacity: 0.75;
}
:where(.entry-thumbnail) {
	display: block;
	margin: clamp(1.2rem, 3vw, 2rem) 0;
}

/* ---- 4. Content prose (.entry-content) ------------------------------- *
 * Scoped + :where()-wrapped: applies only to UNCLASSED content elements, never
 * to the classed band/plugin markup that also lives inside .entry-content. */
:where(.entry-content) {
	overflow-wrap: break-word;
}
:where(.entry-content) :where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.2;
	margin: 1.8em 0 0.5em;
}
:where(.entry-content) :where(h2) { font-size: var(--es-h2, clamp(1.625rem, 1.42rem + 0.88vw, 2.375rem)); }
:where(.entry-content) :where(h3) { font-size: var(--es-h3, 1.75rem); }
:where(.entry-content) :where(h4) { font-size: 1.2rem; }
/* Typographic finesse (progressive enhancement — unsupported browsers ignore
 * it, no fallback needed): balance headings so a centered hero/section title
 * never drops a lone orphan word onto its own line, and let prose avoid single-
 * word last lines. Applies to patterns + prose alike; zero specificity so a
 * block can always override. */
:where(.entry-content) :where(h1, h2, h3) { text-wrap: balance; }
:where(.entry-content) :where(p) { text-wrap: pretty; }
:where(.entry-content) :where(p, ul, ol, dl, blockquote, table, pre, figure) {
	margin: 0 0 1.1em;
}
:where(.entry-content) :where(ul, ol) {
	padding-inline-start: 1.5em;
}
:where(.entry-content) :where(li) {
	margin-block: 0.3em;
}
:where(.entry-content) :where(li) > :where(ul, ol) {
	margin-block-start: 0.3em;
}
:where(.entry-content) :where(a) {
	color: var(--es-brand-secondary, #004F71);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
:where(.entry-content) :where(a):hover,
:where(.entry-content) :where(a):focus {
	color: var(--es-brand-primary-dark, #be6f00);
}
:where(.entry-content) :where(blockquote) {
	padding: 0.2em 0 0.2em 1.2em;
	border-inline-start: 4px solid var(--es-brand-secondary, #004F71);
	font-style: italic;
	color: var(--es-text, #2E3D48);
}
:where(.entry-content) :where(hr) {
	border: 0;
	border-top: 1px solid var(--es-border, #E3E7EB);
	margin: 2em 0;
}
:where(.entry-content) :where(table) {
	width: 100%;
	border-collapse: collapse;
}
:where(.entry-content) :where(th, td) {
	padding: 0.5em 0.75em;
	border: 1px solid var(--es-border, #E3E7EB);
	text-align: start;
}
:where(.entry-content) :where(th) {
	background: var(--es-surface, #E4E1DC);
}
:where(.entry-content) :where(code, kbd, samp) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: var(--es-surface, #E4E1DC);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}
:where(.entry-content) :where(pre) {
	background: var(--es-surface, #E4E1DC);
	padding: 1em 1.2em;
	border-radius: 8px;
	overflow: auto;
}
:where(.entry-content) :where(pre) :where(code) {
	background: none;
	padding: 0;
}

/* Classic-editor alignment helpers (block alignment is handled by core). */
:where(.entry-content) .alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
:where(.entry-content) .alignright { float: right; margin: 0.3em 0 1em 1.5em; }
:where(.entry-content) .aligncenter { display: block; margin-inline: auto; }

/* ---- 5. Forms (base controls) ---------------------------------------- *
 * Submit buttons (search / comment) are branded by companion.css's button-sync
 * block; this only covers the text inputs + textareas + selects Astra styled. */
:where(input, textarea, select, button) {
	font: inherit;
	color: inherit;
}
:where(
	input[type="text"], input[type="email"], input[type="url"],
	input[type="tel"], input[type="search"], input[type="password"],
	input[type="number"], input[type="date"], textarea, select
) {
	padding: 0.55em 0.7em;
	background: #ffffff;
	color: var(--es-text, #2E3D48);
	border: 1px solid var(--es-border, #E3E7EB);
	border-radius: 8px;
}
:where(textarea) {
	min-height: 8em;
}
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--es-brand-secondary, #004F71);
	outline-offset: 1px;
}
:where(button, input[type="submit"], input[type="button"]) {
	cursor: pointer;
}
/* Theme-owned forms (search/comment) get full-width fields. */
.search-form .search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
}
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	max-width: 32rem;
}
.search-form .search-field { flex: 1 1 12rem; }

/* ---- 6. Pagination / post navigation --------------------------------- */
.pagination,
.post-navigation {
	margin-top: clamp(2rem, 5vw, 3rem);
}
.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 2.4em;
	min-height: 2.4em;
	justify-content: center;
	padding: 0 0.6em;
	border: 1px solid var(--es-border, #E3E7EB);
	border-radius: 8px;
	text-decoration: none;
	color: var(--es-text, #2E3D48);
}
.pagination .page-numbers.current {
	background: var(--es-brand-secondary, #004F71);
	border-color: var(--es-brand-secondary, #004F71);
	color: #ffffff;
}
.post-navigation .nav-subtitle {
	display: block;
	font-size: var(--es-eyebrow, 0.8125rem);
	font-weight: var(--es-eyebrow-weight, 700);
	text-transform: uppercase;
	letter-spacing: var(--es-eyebrow-tracking, 0.14em);
	opacity: 0.7;
}
.post-navigation .nav-title {
	font-weight: 600;
}

/* ---- 7. Comments ----------------------------------------------------- */
.comments-area {
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.comments-title {
	font-size: 1.4rem;
	margin-bottom: 1em;
}
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-list ol.children {
	list-style: none;
	padding-inline-start: clamp(1rem, 4vw, 2rem);
}

/* ---- 8. Screen-reader utility + skip link ---------------------------- *
 * Astra/WP provided .screen-reader-text globally; the standalone theme owns it
 * now. The bare skip link (outside the header) needs this too, plus a
 * visible-on-focus treatment for keyboard users. No !important here, so the
 * :focus reveal wins by specificity + source order. */
.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;
	word-wrap: normal;
}
.screen-reader-text:focus,
.skip-link:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
	padding: 12px 18px;
	background: #ffffff;
	color: var(--es-brand-secondary, #004F71);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(7, 17, 32, 0.25);
	font-weight: 700;
	text-decoration: none;
}

/* ---- 9. Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---- 10. Polish (S3 backfill) ---------------------------------------- *
 * Small defaults Astra also provided. Form/content rules stay :where()
 * (zero specificity) so plugin + core-block CSS always wins. */
:where(input, textarea)::placeholder {
	color: var(--es-text, #2E3D48);
	/* 0.62 keeps the placeholder clearly secondary to typed text while lifting its
	   contrast toward AA (fields carry real labels, so the placeholder is a hint,
	   not the label). */
	opacity: 0.62;
}
:where(fieldset) {
	margin: 0 0 1.1em;
	padding: 1em 1.2em;
	border: 1px solid var(--es-border, #E3E7EB);
	border-radius: 8px;
}
:where(legend) {
	padding-inline: 0.4em;
	font-weight: 600;
}
:where(summary) {
	cursor: pointer;
}
/* Classic-editor wide / full alignment inside content (block-layout pages are
   handled by core). Zero-specificity target so any core/plugin rule wins; this
   only catches classic full-width content such as a church's full-bleed image. */
:where(.entry-content .alignwide) {
	max-width: 100%;
}
:where(.entry-content .alignfull) {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
/* Brand text selection (site-wide). */
::selection {
	background: var(--es-brand-secondary, #004F71);
	color: #ffffff;
}