/**
 * Page title block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * The reference is StartP's .page-title-area, minus its two dead table wrappers
 * and plus the breadcrumb trail, which the template never had.
 */

/*
 * The theme ships no global box-sizing, so a rail written as max-width plus
 * padding would hang that padding outside the rail. Scope border-box to the
 * block instead — the same thing css/header.css and the hero do, which is what
 * keeps all three rails flush with each other.
 */
.sws-page-title,
.sws-page-title *,
.sws-page-title *::before,
.sws-page-title *::after {
	box-sizing: border-box;
}

.sws-page-title {
	container: sws-page-title / inline-size;
	position: relative;
	z-index: 1;
	/*
	 * The same backdrop the hero uses — one file for both, the way the reference
	 * shares it across three of its sections.
	 */
	background: transparent url(../../assets/img/banner-bg1.jpg) center top no-repeat;
	/*
	 * The drifting symbols below travel up to 141px on sws-drift. This section
	 * is a band a few hundred pixels tall, so without this one of them
	 * eventually leaves through the right edge and the page picks up a
	 * horizontal scrollbar.
	 */
	overflow: hidden;
	/*
	 * Full-bleed root. Keep responsive rules off it: an element cannot be styled
	 * by its own container query.
	 *
	 * The explicit z-index is load-bearing. The shapes sit at z-index -1 so they
	 * pass behind the heading but stay in front of the backdrop, and that only
	 * holds while this element is a stacking context.
	 */
}

/*
 * The one place this block measures the window instead of itself. Anchoring the
 * backdrop is a property of the root, and the root is the single element a
 * container query cannot reach. Decoration, not layout — the worst case is a
 * differently-cropped blob in a narrow editor canvas. The hero does the same.
 */
@media (min-width: 768px) {

	.sws-page-title {
		background-position: right top;
	}
}

.sws-page-title__inner {
	/* Mobile-first base. Same rail formula as the header, so both stay flush. */
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
	/*
	 * The reference opens at 190px, but its header is fixed and that figure
	 * includes clearing it. Ours is sticky on inner pages and takes its own
	 * space in the flow, so only the visible part of the gap is reproduced here.
	 */
	padding-block: 3rem 2.5rem;
	text-align: center;
}

/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/

.sws-page-title__heading {
	margin: 0;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

.sws-page-title__nav {
	margin-top: 0.9375rem;
}

.sws-page-title__trail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.6;
}

.sws-page-title__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--text, #4a6f8a);
}

/*
 * The separator belongs to the presentation, not to the trail, so it is drawn
 * rather than printed. The `/ ""` alt text keeps it out of the accessibility
 * tree where that syntax is supported; where it is not, the glyph is read out,
 * which is what an inline character would have done anyway.
 */
.sws-page-title__crumb + .sws-page-title__crumb::before {
	content: "\203A" / "";
	/*
	 * The text colour dimmed, not the hairline token: --line is mixed for
	 * borders against white and a glyph drawn in it all but disappears. Half
	 * strength keeps the mark clearly subordinate to the labels it separates.
	 */
	color: var(--wp--preset--color--text, #4a6f8a);
	opacity: 0.5;
	font-size: 1.25em;
	line-height: 1;
}

.sws-page-title__link {
	color: var(--wp--preset--color--heading, #0e314c);
	text-decoration: none;
	transition: color var(--sws-transition, 0.3s ease);
}

.sws-page-title__link:hover,
.sws-page-title__link:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-page-title__crumb--current {
	color: var(--wp--preset--color--text, #4a6f8a);
}

/*--------------------------------------------------------------
# Decorative shapes
--------------------------------------------------------------*/

/*
 * The wrapper stays out of the flow and unpositioned, so each shape resolves
 * against the block root — the same geometry the reference gets from placing
 * them as direct children of the banner.
 */
/*
 * The glyph size lives on the wrapper, not on the root: a container query
 * cannot reach the element that declares the container, and this is the nearest
 * ancestor of every shape that it can reach.
 */
.sws-page-title__shapes {
	--sws-page-title-icon-size: 2rem;
}

.sws-page-title__shape {
	display: none;
	position: absolute;
	z-index: -1;
	/* Decoration, not content: it sits behind the heading and must stay quiet. */
	opacity: 0.8;
}

/*
 * Every symbol in assets/icons/ draws itself with stroke="currentColor", so the
 * colour is set once here on the wrapper and the whole glyph follows. This is
 * the entire reason the shapes are inlined instead of printed as <img>: inside
 * an <img> the icon is a separate document and `color` never reaches it.
 */
.sws-page-title__shape--accent {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-page-title__shape--secondary {
	color: var(--wp--preset--color--secondary, #c679e3);
}

.sws-page-title__shape--tertiary {
	color: var(--wp--preset--color--tertiary, #27eac8);
}

.sws-page-title__icon {
	/*
	 * Explicit size, not optional: the icons ship with a viewBox and no width or
	 * height, and an unsized SVG in HTML falls back to 300x150.
	 *
	 * stroke-width is trimmed from the 4 the files carry, matching the hero: the
	 * set is drawn as rounded line art and thinning it further turns a resistor
	 * into a scratch on the background.
	 */
	display: block;
	width: var(--sws-page-title-icon-size, 2.5rem);
	height: var(--sws-page-title-icon-size, 2.5rem);
	stroke-width: 3.5;
}

.sws-page-title__shape:nth-child(1) {
	top: 18%;
	left: 5%;
	animation: sws-spin 20s linear infinite;
}

.sws-page-title__shape:nth-child(2) {
	top: 24%;
	right: 9%;
	animation: sws-drift 15s linear infinite;
}

.sws-page-title__shape:nth-child(3) {
	bottom: 20%;
	left: 22%;
	animation: sws-drift 20s linear infinite;
}

.sws-page-title__shape:nth-child(4) {
	bottom: 16%;
	right: 6%;
	animation: sws-spin 25s linear infinite;
}

/*
 * Two symbols on a phone, in opposite corners: the band is barely taller than
 * its heading there, and four glyphs would sit on the text rather than behind
 * it.
 */
.sws-page-title__shape:nth-child(1),
.sws-page-title__shape:nth-child(4) {
	display: block;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

/*
 * A step below the desktop one, because 782px is WordPress's own breakpoint and
 * the common tablet is 768 — without this the whole class of them would get the
 * phone treatment. The reference has the same middle step for the same reason.
 */
@container sws-page-title (min-width: 600px) {

	.sws-page-title__inner {
		padding-block: 4.5rem 3.75rem;
	}

	.sws-page-title__heading {
		font-size: 1.625rem;
	}

	.sws-page-title__shapes {
		--sws-page-title-icon-size: 2.25rem;
	}

	.sws-page-title__shape:nth-child(2),
	.sws-page-title__shape:nth-child(3) {
		display: block;
	}
}

/*--------------------------------------------------------------
# Desktop
--------------------------------------------------------------*/

@container sws-page-title (min-width: 782px) {

	.sws-page-title__inner {
		padding-block: 7rem 6.25rem;
	}

	.sws-page-title__heading {
		font-size: 1.75rem;
	}

	.sws-page-title__shapes {
		--sws-page-title-icon-size: 2.5rem;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

/*
 * A preference query, not a width one — the block's breakpoints stay container
 * queries. base.css collapses --sws-duration, which reaches transitions only; a
 * keyframe animation has no such handle, so the component that starts one also
 * stops it.
 *
 * `:nth-child(n)` matches every shape and costs the same specificity as the
 * per-shape placement rules above, so this reset wins on source order alone —
 * no !important needed.
 */
@media (prefers-reduced-motion: reduce) {

	.sws-page-title__shape:nth-child(n) {
		animation: none;
	}
}