/**
 * Global supplementary styles.
 *
 * theme.json owns tokens and most element/block styles. This file only covers
 * what theme.json can't express: focus rings, form controls, motion
 * preferences and a few layout guards. Always use tokens (CSS custom
 * properties) rather than raw values.
 */

:root {
	--ttf-focus-color: var(--wp--preset--color--contrast);
	--ttf-focus-width: var(--wp--custom--focus--width);
	--ttf-focus-offset: var(--wp--custom--focus--offset);
}

/* On dark (Ink) sections, switch the focus ring to a contrasting colour. */
.has-contrast-background-color {
	--ttf-focus-color: var(--wp--preset--color--accent);
}

body {
	overflow-wrap: break-word;
	text-rendering: optimizelegibility;
}

/*
 * Metric-matched fallbacks (layout shift). Until the web fonts arrive
 * (font-display: swap), text is set in Arial/Georgia scaled to the same
 * width and line box as TTF Sans / TTF Serif (subsets of Source Sans 3 /
 * Source Serif 4, same metrics), so the swap barely moves anything.
 */
@font-face {
	font-family: "TTF Sans Fallback";
	font-weight: 400 500;
	src: local("Arial"), local("ArialMT");
	size-adjust: 92.75%;
	ascent-override: 107.8%;
	descent-override: 35.6%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "TTF Sans Fallback";
	font-weight: 600 700;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 89.34%;
	ascent-override: 111.9%;
	descent-override: 36.9%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "TTF Serif Fallback";
	font-weight: 400 500;
	src: local("Georgia");
	size-adjust: 99.28%;
	ascent-override: 104.8%;
	descent-override: 34.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "TTF Serif Fallback";
	font-weight: 600 700;
	src: local("Georgia Bold"), local("Georgia-Bold");
	size-adjust: 87.08%;
	ascent-override: 119.4%;
	descent-override: 39%;
	line-gap-override: 0%;
}

/* Every weight and style in use has a real font file: never synthesise. */
:root {
	font-synthesis: none;
}

/* ---------- Icons (inc/icons.php) ---------- */

/* Lucide line icons: 24px grid, 2px stroke, round caps, currentColor. */
.ttf-icon {
	flex: none;
	vertical-align: middle;
}

/* Icon block: registry SVGs carry no stroke attributes, so style them here. */
.wp-block-icon svg.ttf-icon,
.ttf-icon {
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The ministry's reference icons: 48-unit grid with a 1.8 stroke. */
.wp-block-icon svg.ttf-icon--fine,
.ttf-icon--fine {
	stroke-width: 1.8;
}

/* Icon placed before text in a link or button (core may make the link a
   block or inline-block, so space it with a margin rather than gap). */
:where(a, button, .wp-element-button) > .ttf-icon {
	width: var(--wp--custom--icon--button);
	height: var(--wp--custom--icon--button);
}

:where(a, button, .wp-element-button) > .ttf-icon:not(:only-child) {
	margin-inline-end: var(--wp--custom--space--2);
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Links: underline stays visible so links aren't identified by colour alone. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Focus: one visible, high-contrast ring for every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--ttf-focus-width) solid var(--ttf-focus-color);
	outline-offset: var(--ttf-focus-offset);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Skip link (output by core for block themes). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	outline: var(--ttf-focus-width) solid var(--wp--preset--color--contrast);
	font-weight: 600;
}

/*
 * Buttons. Primary (theme.json): gold, ink text. Secondary: the core
 * "Outline" style. Both are 44px tall with the same radius and padding.
 */
:where(.wp-element-button, .wp-block-button__link) {
	min-width: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Outline: the 2px border replaces part of the padding, so heights match. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(var(--wp--custom--space--3) - 2px) calc(var(--wp--custom--space--6) - 2px);
	border: 2px solid currentcolor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	border-color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * Text link with a directional arrow ("View all articles", card links).
 * The arrow is a decorative mask icon (inc/icons.php), not a text glyph.
 */
.ttf-more-link,
.ttf-more-link a {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
	text-decoration: none;
}

/* Inline, so a wrapped label keeps the arrow beside its last word; the
   block padding makes the target at least 44px tall. */
.ttf-more-link a,
a.ttf-more-link {
	display: inline-block;
	padding-block: var(--wp--custom--space--3);
}

.ttf-more-link a:hover,
a.ttf-more-link:hover {
	text-decoration: underline;
}

.ttf-more-link:is(a)::after,
.ttf-more-link a::after {
	content: "";
	display: inline-block;
	width: var(--wp--custom--icon--utility);
	height: var(--wp--custom--icon--utility);
	margin-inline-start: var(--wp--custom--space--1);
	background-color: currentcolor;
	vertical-align: -0.2em;
	mask: var(--ttf-icon-arrow-right) center / contain no-repeat;
}

/* Form controls. Borders use Slate so they meet 3:1 non-text contrast. */
:where(
	input:not(
		[type="checkbox"],
		[type="radio"],
		[type="submit"],
		[type="button"],
		[type="reset"],
		[type="hidden"]
	),
	select,
	textarea,
	.wp-block-search__input
) {
	box-sizing: border-box;
	max-width: 100%;
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--custom--space--2) var(--wp--custom--space--4);
	border: 1px solid var(--wp--preset--color--contrast-secondary);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 1.25em;
	height: 1.25em;
	accent-color: var(--wp--preset--color--contrast);
}

::placeholder {
	color: var(--wp--preset--color--contrast-secondary);
	opacity: 1;
}

label {
	font-weight: 600;
}

/* ---------- Header ---------- */

.ttf-site-header {
	border-bottom: 1px solid var(--wp--custom--color--border-subtle);
}

.ttf-utility-bar {
	padding-block: var(--wp--custom--space--1);
	font-size: var(--wp--preset--font-size--small);
}

.ttf-utility-bar .wp-block-navigation {
	font-weight: 500;
}

/* Utility links: icon + label, full 44px target. */
.ttf-utility-bar .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
}

.ttf-utility-bar .wp-block-navigation-item__content > .ttf-icon {
	width: var(--wp--custom--icon--utility);
	height: var(--wp--custom--icon--utility);
	color: var(--wp--preset--color--accent);
}

/* Utility search: a white pill on the dark bar (desktop only). */
.ttf-utility-search {
	flex: 0 1 18rem;
}

.ttf-utility-search .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
}

.ttf-utility-search .wp-block-search__input {
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--custom--space--4);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
}

/* Core removes the input's outline inside the pill; restore a visible ring. */
.ttf-utility-search .wp-block-search__inside-wrapper .wp-block-search__input:focus-visible {
	outline: var(--ttf-focus-width) solid var(--ttf-focus-color);
	outline-offset: var(--ttf-focus-offset);
}

.ttf-utility-search .wp-block-search__button {
	min-width: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	margin: 0;
	padding: 0 var(--wp--custom--space--3);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

/* Brand: large logo, serif title, tagline (proportions from the design). */
.ttf-brand .wp-block-site-logo img {
	width: clamp(48px, 8vw, 116px);
	height: auto;
}

/* Site title: fits one line beside the menu buttons on 360px screens. */
.ttf-brand__title {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

@media (min-width: 782px) {

	.wp-block-group.ttf-brand {
		gap: var(--wp--custom--space--8);
	}

	/* 30px at 782px up to 44px (the design's title) from about 1400px. */
	.ttf-brand__title {
		font-size: clamp(1.875rem, 0.95rem + 2.1vw, 2.75rem);
	}
}

/* Desktop menu: larger items and wider spacing, as in the design. */
@media (min-width: 1100px) {

	.ttf-site-header .ttf-nav-primary {
		font-size: clamp(1rem, 0.25rem + 1.15vw, 1.25rem);
	}

	.ttf-site-header .ttf-nav-primary .wp-block-navigation__container {
		column-gap: clamp(1.5rem, -3rem + 6.2vw, 2.5rem);
	}
}

.ttf-brand__tagline {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 782px) {

	.ttf-brand__tagline {
		font-size: var(--wp--preset--font-size--large);
	}
}

.ttf-site-header .ttf-nav-primary {
	column-gap: var(--wp--preset--spacing--40);
}

/* Search: utility-bar field on wide screens, header icon on small ones. */
@media (max-width: 781px) {

	.ttf-utility-search,
	.ttf-brand__tagline {
		display: none;
	}

	/* Without utility links the bar would be empty on small screens. */
	.ttf-utility-bar:not(:has(.wp-block-navigation-item)) {
		display: none;
	}
}

@media (min-width: 782px) {

	.ttf-header-search {
		display: none;
	}
}

/* ---------- Footer ---------- */

.ttf-footer-columns {
	gap: var(--wp--preset--spacing--40);
}

.ttf-footer-brand {
	flex: 0 1 15rem;
}

.ttf-footer-brand .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large);
}

.ttf-footer-columns > .ttf-nav-footer {
	flex: 1 1 36rem;
}

.ttf-footer-heading {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.ttf-footer-contact {
	flex: 0 0 auto;
}

@media (min-width: 1200px) {

	.ttf-footer-contact {
		padding-inline-start: var(--wp--preset--spacing--40);
		border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
	}
}

.ttf-footer-contact .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.ttf-footer-rule {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
	opacity: 1;
}

.ttf-site-footer .ttf-footer-bottom > * {
	margin: 0;
}

.ttf-footer-social a {
	padding: var(--wp--custom--space--1);
}

.ttf-scripture cite {
	white-space: nowrap;
}

/* Motion: smooth scrolling only when reduced motion isn't requested. */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Reading experience (Phase 2) ---------- */

/* Topic label above titles. */
.ttf-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.ttf-eyebrow a {
	color: inherit;
}

/* Searched words in search results (inc/search.php). Not colour alone:
   the tint is paired with the word itself; contrast stays ink on cream. */
.ttf-search-highlight {
	padding-inline: 0.05em;
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	color: inherit;
}

/* Metadata rows (author · date · reading time) with decorative dots. */
.ttf-meta {
	column-gap: var(--wp--custom--space--3);
	row-gap: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--ui);
}

.ttf-meta > * {
	margin: 0;
}

.ttf-meta > * + *::before {
	content: "";
	display: inline-block;
	width: var(--wp--custom--space--1);
	height: var(--wp--custom--space--1);
	margin-inline-end: var(--wp--custom--space--3);
	border-radius: 50%;
	background: currentcolor;
	vertical-align: middle;
}

/* Article header. */
.ttf-article__header .wp-block-post-title {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ttf-standfirst {
	color: var(--wp--preset--color--contrast-secondary);
	font-family: var(--wp--preset--font-family--serif);
	line-height: var(--wp--custom--line-height--snug);
}

/* Article body: one step larger and more open than interface text. */
.ttf-article__content {
	font-size: var(--wp--custom--font-size--article);
	line-height: var(--wp--custom--line-height--article);
}

.ttf-standfirst p {
	margin: 0;
}

.ttf-article__image img {
	border-radius: var(--wp--custom--radius--medium);
}

/* Archive headers and the Read introduction. */
.ttf-archive-header > * + *,
.ttf-posts-page-intro > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ttf-intro {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
}

.ttf-result-count {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Related articles and calls to action. */
.ttf-related {
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--custom--color--border-subtle);
}

.ttf-related > .wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.ttf-ctas {
	gap: var(--wp--preset--spacing--40);
}

.ttf-cta {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
}

.ttf-cta > .wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.ttf-cta-subscribe {
	border: 1px solid var(--wp--custom--color--border-subtle);
}

.ttf-empty-state > .wp-block-heading {
	margin-block-start: 0;
}

/* Homepage: full-bleed sections meet the header and footer without gaps. */
.wp-site-blocks > .ttf-front,
.wp-site-blocks > .ttf-front + * {
	margin-block-start: 0;
}