/*
Theme Name: Avon Valley Baby Bank
Theme URI: https://avonvalleybabybank.org.uk
Author: Brindleford
Description: Block theme for Avon Valley Baby Bank. Direction B — "Plain Speaking": Archivo, hard edges, high contrast, signal red and marker mustard. Built for clarity to two audiences — professionals making referrals, and people donating items or time.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avbb
Tags: block-theme, full-site-editing, charity, accessibility-ready
*/

/*
 * WHAT THIS FILE DOES
 * -------------------
 * Theme header (above) plus the handful of styles that theme.json cannot express.
 * Nearly all design tokens — colour, type scale, spacing, layout widths — live in
 * theme.json instead, so trustees can adjust them in the site editor without
 * touching code.
 *
 * ROLE IN THE SYSTEM
 * ------------------
 * Loaded on every front-end request. Companion files:
 *   theme.json            design tokens, block defaults, self-hosted font faces
 *   functions.php         theme supports, editor styles, pattern categories
 *   parts/header.html     site header, used by every template
 *   parts/footer.html     site footer, carries the charity-status line
 *   templates/*.html      front-page, page, single, index, archive, search, 404
 *   patterns/*.php        the front page is assembled from these
 *   assets/fonts/         Archivo variable, self-hosted (no Google CDN: loading
 *                         fonts from Google leaks visitor IPs to a third party,
 *                         which is not appropriate for a site serving families
 *                         referred through safeguarding routes)
 *
 * Block templates carry no inline comments on purpose — HTML comments in a block
 * template are emitted into the page source and risk confusing the block parser.
 * The template set is documented above instead.
 */

/* Skip link — visible only on keyboard focus. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 999;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--signal);
	color: #ffffff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

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

/* A visible, high-contrast focus ring everywhere. The default outline
   disappears against the black header, which fails keyboard users. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--marker);
	outline-offset: 2px;
}

/* Underline body links so they are distinguishable without relying on colour. */
.wp-block-post-content a:where(:not(.wp-element-button)),
.entry-content a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

/* Header navigation: uppercase micro-type, per Direction B. */
.avbb-nav a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
}

/* The big uppercase display voice, used for page and post titles. */
.avbb-display {
	text-transform: uppercase;
	letter-spacing: -0.035em;
	line-height: 0.92;
	font-weight: 900;
}

/* Numbered step markers on the front page. */
.avbb-step-number {
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--signal);
}

/* Hard rules between the three steps; stacked on narrow screens, so the
   dividing line has to move from the side to the top. */
@media (min-width: 782px) {
	.avbb-steps > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--rule);
		padding-left: 2rem;
	}

	.avbb-steps > .wp-block-column:not(:last-child) {
		padding-right: 2rem;
	}
}

@media (max-width: 781px) {
	.avbb-steps > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--rule);
		padding-top: 1.5rem;
	}
}

/* Cover blocks used as photo bands should not swallow their own alt text. */
.avbb-band img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Print: drop the black furniture, keep the words. */
@media print {
	.avbb-nav,
	.wp-block-template-part.avbb-header,
	.skip-link {
		display: none !important;
	}

	body {
		background: #ffffff;
		color: #000000;
	}
}