/**
 * Components.
 *
 * Buttons: core's button styles are unlayered, so layered classes can't beat
 * them directly. Instead, theme.json builds the button from --btn-* custom
 * properties, and these classes only change those properties. Add the class
 * to a Button block (Advanced > Additional CSS class).
 */
@layer components {
	.btn--primary {
		--btn-color: var(--primary);
		--btn-color-hover: var(--primary-hover);
	}

	.btn--secondary {
		--btn-color: var(--secondary);
		--btn-color-hover: var(--secondary-hover);
	}

	.btn--tertiary {
		--btn-color: var(--tertiary);
		--btn-color-hover: var(--tertiary-hover);
	}

	.btn--accent {
		--btn-color: var(--accent);
		--btn-color-hover: var(--accent-l-1);
		/* Dark text: white on the starter accent is 3.2:1, under WCAG AA. The
		   hover lightens rather than darkens for the same reason. */
		--btn-text: var(--base);
		--btn-text-hover: var(--base);
	}

	.btn--base {
		--btn-color: var(--base);
		--btn-color-hover: var(--base-hover);
	}

	.btn--neutral {
		--btn-color: var(--neutral);
		--btn-color-hover: var(--neutral-hover);
	}

	/* Outline: uses the button colour if one is set (.btn--accent), otherwise
	   primary in the light scheme and white in the dark scheme. */
	.btn--outline {
		--btn-outline-color: var(--btn-color, light-dark(var(--primary), var(--white)));
		--btn-bg: transparent;
		--btn-text: var(--btn-outline-color);
		--btn-border-color: var(--btn-outline-color);
		--btn-bg-hover: var(--btn-outline-color);
		--btn-border-color-hover: var(--btn-outline-color);
		--btn-text-hover: light-dark(var(--white), var(--base-d-4));
	}

	.btn--s {
		--btn-padding-block: var(--space-xs);
		--btn-padding-inline: var(--space-m);
		--btn-font-size: var(--text-s);
	}

	.btn--m {
		--btn-padding-block: var(--space-s);
		--btn-padding-inline: var(--space-l);
		--btn-font-size: var(--text-m);
	}

	.btn--l {
		--btn-padding-block: var(--space-m);
		--btn-padding-inline: var(--space-xl);
		--btn-font-size: var(--text-l);
	}

	/* ---------- Icons (inc/icons.php, pd/icon) ---------- */

	.icon {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.icon-fill {
		fill: var(--icon-fill, var(--secondary));
		opacity: var(--icon-fill-opacity, 0.55);
	}

	.icon-ink,
	.icon-line {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.icon-ink {
		stroke-width: 2;
	}

	.icon-line {
		stroke-width: 1.7;
	}

	.icon-dot,
	.icon-solid {
		fill: currentColor;
		stroke: none;
	}

	.icon-block {
		display: inline-block;
		width: var(--icon-size, 3.5rem);
		height: var(--icon-size, 3.5rem);
		color: var(--heading-color);
		line-height: 0;
	}

	.icon-block--s {
		--icon-size: 1rem;
	}

	.icon-block--m {
		--icon-size: 1.5rem;
	}

	.icon-block--xl {
		--icon-size: 5rem;
	}

	/* ---------- Cards ----------
	   One card system for the whole site. Put .card on a Group, and put the
	   cards in a Group with a grid utility (grid--auto-3, grid--auto-4).
	   Modifiers: card--image (the image runs edge to edge across the top),
	   card--post (a post in a Query Loop). Elements, each on its own block:
	   card__media   the image or featured image, first in the card
	   card__icon    a Theme icon, first in the card, in a soft circle
	   card__terms   category or sector pills
	   card__meta    a small label: a date, a sector
	   card__title   the heading; a link in it makes the whole card clickable
	   card__text    the excerpt (a card's paragraphs get this look too)
	   card__action  a last line, such as Read more, held at the bottom

	   Each card sits in its own Group with .card-wrap, so the card lays out
	   by its own width, not the screen's (see Card wrapper below). A card
	   without the wrapper still works; it just keeps the narrow layout. */

	/* ---------- Card wrapper ----------
	   The named container the card's @container rules measure. It goes on
	   a plain Group around each .card, never on .card itself: an element
	   can't query its own size. In a grid or a row the wrapper is the grid
	   or flex item, so it gets an explicit width; a size container ignores
	   its content when it's measured, and without a width a flex row would
	   shrink it to nothing. Display grid stretches the card to the
	   wrapper's full height, so a row of cards still lines up. */
	.card-wrap {
		container: card / inline-size;
		display: grid;
		width: 100%;
	}

	.card {
		--card-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);
		position: relative;
		display: flex;
		flex-direction: column;
		padding: var(--card-pad);
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-s);
		transition: box-shadow 0.25s, transform 0.25s var(--ease);
	}

	.card > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.card > * + * {
		margin-top: 0.7rem !important; /* owns spacing */
	}

	.card__title {
		font-size: var(--h5);
		line-height: 1.25;
	}

	.card > :where(p),
	.card__text {
		color: var(--text-muted);
		font-size: 1rem;
	}

	.card__meta,
	.card__terms {
		color: var(--link-color);
		font-size: 0.85rem;
		font-weight: 500;
	}

	.card__meta + .card__title,
	.card__terms + .card__title {
		margin-top: 0.8rem !important; /* owns spacing */
	}

	.card__meta a,
	.card__terms a {
		position: relative;
		z-index: 1;
		color: inherit;
		text-decoration: none;
	}

	/* Pills. The comma core puts between two terms is hidden; the gap
	   separates them instead. */
	.card__terms {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		font-size: 0;
	}

	.card__terms a {
		padding: 0.3rem 0.8rem;
		border-radius: var(--radius-pill);
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
		color: var(--link-color);
		font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.3;
		transition: background-color 0.2s, color 0.2s;
	}

	.card__terms a:hover {
		background: var(--primary);
		color: var(--white);
	}

	/* Clickable card: the title's link stretches over the whole card. */
	.card__title a {
		color: var(--heading-color);
		text-decoration: none;
	}

	.card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	/* A card lifts on hover only when its title holds a link to follow. */
	.card:has(.card__title a):hover {
		box-shadow: var(--shadow-m);
		transform: translateY(-2px);
	}

	.card:has(.card__title a):hover .card__title a {
		color: var(--link-color);
	}

	.card:has(a:focus-visible) {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	.card a:focus-visible {
		outline: none;
	}

	.card__action {
		margin-top: auto !important; /* owns spacing */
		padding-top: 1.2rem;
	}

	.card__icon {
		--icon-size: 1.75rem;
		box-sizing: content-box;
		padding: 0.85rem;
		border-radius: var(--radius-circle);
		background: light-dark(var(--secondary-l-5), rgb(255 255 255 / 0.08));
	}

	.card__icon + * {
		margin-top: 1.4rem !important; /* owns spacing */
	}

	.card--image {
		overflow: hidden;
	}

	.card--image .card__media {
		margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0 !important; /* owns spacing */
		overflow: hidden;
		aspect-ratio: 3 / 2;
		background: var(--bg-surface-alt);
	}

	.card--image .card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.7s var(--ease);
	}

	.card--image:hover .card__media img {
		transform: scale(1.035);
	}

	.card--image .card__media + * {
		margin-top: var(--card-pad) !important; /* owns spacing */
	}

	/* Inside a .card-wrap the padding follows the card's own width. The vw
	   value above is the fallback: a custom property holding cqi can't fall
	   back by itself (an unsupported unit only fails where the property is
	   used, and the padding would then drop to zero), so the cqi value is
	   set only where the browser supports it. A card without the wrapper
	   keeps the vw padding exactly as before 1.4.0: without a container,
	   cqi would measure the screen and come out a little different (found
	   on Empire Revival, 9 November 2026). */
	@supports (width: 1cqi) {
		.card-wrap > .card {
			--card-pad: clamp(1.25rem, 0.75rem + 4cqi, 2rem);
		}
	}

	/* A wide card puts its icon or image beside the text. The card becomes
	   a two-column grid: the icon or image in the first column across every
	   row, everything else in the second. Twelve rows cover any card (they
	   hold six blocks at most), and the last row takes the spare height, so
	   a card stretched to match its neighbours keeps its spacing. A card
	   with neither an icon nor an image has an empty first column of zero
	   width, so it looks the same. */
	@container card (min-width: 30rem) {
		.card {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-rows: repeat(11, auto) 1fr;
		}

		.card > * {
			grid-column: 2;
		}

		.card__icon {
			grid-column: 1;
			grid-row: 1 / -1;
			align-self: start;
			margin-right: var(--card-pad) !important; /* owns spacing */
		}

		.card__icon + * {
			margin-top: 0 !important; /* owns spacing */
		}
	}

	/* An image card needs more room before its picture moves to the side. */
	@container card (min-width: 40rem) {
		.card--image {
			grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		}

		.card--image .card__media {
			grid-column: 1;
			grid-row: 1 / -1;
			margin: calc(-1 * var(--card-pad)) var(--card-pad) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) !important; /* owns spacing */
			position: relative;
			min-height: 12rem;
			aspect-ratio: auto;
		}

		/* The picture fills the column at the text's height, instead of
		   setting the card's height from its own shape. */
		.card--image .card__media img {
			position: absolute;
			inset: 0;
			height: 100% !important; /* core override: the Image and Featured Image blocks set height: auto unlayered, and the featured image writes its aspect ratio inline */
		}

		.card--image .card__media + * {
			margin-top: 0 !important; /* owns spacing */
		}
	}

	/* ---------- Link card ----------
	   A card whose last line is its one link, with an arrow. The whole card
	   is clickable. Elements: link-card__title, link-card__text,
	   link-card__link (the last paragraph, holding the link). */
	.link-card {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 2rem 1.8rem 1.7rem;
		border-radius: var(--radius);
		background: var(--bg-surface);
		box-shadow: var(--shadow-s);
		transition: box-shadow 0.25s, transform 0.25s var(--ease);
	}

	.link-card:hover {
		box-shadow: var(--shadow-m);
		transform: translateY(-2px);
	}

	.link-card > * {
		margin-block: 0 !important; /* owns spacing */
	}

	.link-card__title {
		margin-top: 1.4rem !important; /* owns spacing */
		font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem);
		line-height: 1.12;
	}

	.link-card__text {
		margin-top: 0.8rem !important; /* owns spacing */
		color: var(--text-muted);
		font-size: 1rem;
	}

	.link-card__link {
		flex: 1;
		display: flex;
		align-items: flex-end;
		gap: 0.5rem;
		margin-top: 1.4rem !important; /* owns spacing */
		color: var(--link-color);
		font-size: 0.95rem;
		font-weight: 500;
	}

	.link-card__link a {
		color: inherit;
		text-decoration: none;
	}

	.link-card__link a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.link-card__link::after {
		content: "";
		width: 0.85rem;
		height: 1.3em;
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform 0.3s var(--ease);
	}

	.link-card:hover .link-card__link::after {
		transform: translateX(3px);
	}

	.link-card:has(a:focus-visible) {
		outline: var(--focus-width) solid var(--focus-color);
		outline-offset: var(--focus-offset);
	}

	.link-card a:focus-visible {
		outline: none;
	}

	.link-card:hover .icon-fill {
		--icon-fill-opacity: 0.85;
	}

	@media (prefers-reduced-motion: reduce) {
		.card,
		.link-card,
		.card--image .card__media img {
			transition: none;
		}
	}

	/* Site header. The sticky position goes on the template part wrapper
	   (<header class="wp-block-template-part">), because sticky only works
	   when the parent is taller than the element. Add .site-header--static
	   to the header group to turn sticky off. */
	.wp-block-template-part:has(> .site-header) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	.wp-block-template-part:has(> .site-header--static) {
		position: static;
	}

	/* The admin bar scrolls away on small screens */
	@media (max-width: 600px) {
		.wp-block-template-part:has(> .site-header) {
			top: 0;
		}
	}

	/* Notice bar, above the header. Presstwood Content shows it only while its
	   notice is active; the content comes from Settings > Business details. */
	.notice-bar {
		padding-block: var(--space-xs);
		font-size: var(--text-s);
		text-align: center;
	}

	.notice-bar__actions > .wp-block-button {
		--btn-padding-block: 0.25em;
		--btn-padding-inline: var(--space-s);
		--btn-font-size: var(--text-xs);
	}

	.site-header {
		background-color: var(--bg-body);
		border-block-end: var(--border);
		padding-block: var(--space-s);
	}

	.site-header__title {
		font-size: var(--text-l);
		font-weight: 700;
		line-height: 1.2;
	}

	.site-header__title a,
	.site-footer__title a {
		color: var(--heading-color);
		text-decoration: none;
	}

	/* Overlay header: sits over a dark first section, in white. Add
	   .site-header--overlay to the header Template Part block in a template.
	   The template part stays in the page flow, so a notice bar inside it
	   pushes the page down; only the header row is pinned, just below it.
	   With no notice bar the part has no height and the header sits at the
	   very top, over the first section. The logo turns white with a filter,
	   so one logo file works on light and dark headers. */
	.wp-block-template-part.site-header--overlay {
		position: relative;
		z-index: 20;
	}

	.site-header--overlay > .site-header {
		position: absolute !important; /* core override: core sets every constrained Group to relative */
		top: 100%;
		right: 0;
		left: 0;
	}

	.site-header--overlay .site-header {
		border-block-end: 0;
		background: transparent;
		color: var(--white);
		color-scheme: dark;
	}

	/* The logo never shrinks in a header or footer row. Without this, an SVG
	   logo (no fixed pixel size of its own) is squeezed by the flex row and
	   its 100% max-width, and shows at a fraction of its set width (found
	   on presstwood.design, 23 October 2026). */
	.wp-block-site-logo {
		flex: none;
	}

	.site-header--overlay .wp-block-site-logo img,
	.scheme--dark .wp-block-site-logo img,
	[data-scheme="dark"] .wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}

	/* ---------- Navigation ----------
	   Core Navigation sets most of its values in CSS outside any layer, with
	   no variable to change them, so several rules here are marked
	   "core override". */

	.site-header__nav .wp-block-navigation-item__content {
		padding: var(--space-xs) var(--space-s) !important; /* core override: core sets item padding */
		border-radius: var(--radius);
		color: inherit;
		text-decoration: none;
	}

	/* Dropdown panel */
	.site-header__nav .wp-block-navigation__submenu-container {
		min-width: 16rem !important; /* core override */
		padding: var(--space-xs) !important; /* core override */
		border: 0 !important; /* core override */
		border-radius: var(--radius);
		background: var(--bg-surface) !important; /* core override */
		box-shadow: var(--shadow-m);
		color: var(--text-color) !important; /* core override */
	}

	/* Open each dropdown under its own item, not core's right-aligned position. */
	.site-header__nav:not(.is-menu-open) .wp-block-navigation__submenu-container {
		top: calc(100% + var(--space-xs)) !important; /* core override */
		right: auto !important; /* core override */
		left: 0 !important; /* core override */
	}

	/* Dropdowns open on hover (core's default; leave the Navigation block's
	   "Open on click" off). This invisible strip fills the gap between the
	   item and its panel, so the pointer doesn't drop the hover on its way
	   down. */
	.site-header__nav:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc(var(--space-xs) + 0.2rem);
	}

	/* Items with a dropdown: the chevron sits right after the label, inside
	   the same spacing as any other item. */
	.site-header__nav:not(.is-menu-open) .has-child > .wp-block-navigation-item__content {
		padding-right: 0.15rem !important; /* core override: core sets item padding outside any layer */
	}

	.site-header__nav:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-icon {
		margin: 0 var(--space-s) 0 0;
	}

	/* Label with its description underneath. */
	.site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block !important; /* core override: core lays the label and description side by side */
		white-space: nowrap;
	}

	.site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--bg-surface-alt);
	}

	.site-header__nav .wp-block-navigation-item__description {
		display: block !important; /* core override: core hides descriptions */
		margin-top: 0.15rem;
		color: var(--text-muted);
		font-size: var(--text-xs);
	}

	/* The open mobile menu: left-aligned, with submenus indented. Core reads
	   the --navigation-layout-* variables, so those need no override. */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-align: flex-start;
		padding: var(--space-l) var(--gutter) !important; /* core override */
	}

	.site-header__nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container, .wp-block-navigation-item) {
		align-items: flex-start !important; /* core override: right-justified items set flex-end directly */
		min-width: 0 !important; /* core override */
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item__content {
		padding-inline: 0 !important; /* core override */
		text-align: start;
	}

	.site-header__nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-weight: 600;
	}

	.site-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 var(--space-xs) var(--space-s) !important; /* core override */
		background: transparent !important; /* core override */
		box-shadow: none;
	}

	/* Site footer */
	/* Always draw the footer. FlyingPress's "lazy render" sets
	   content-visibility: auto on it, and accessibility checkers then can't
	   see its dark background and fail its light text. */
	.wp-block-template-part:has(> .site-footer),
	.site-footer {
		content-visibility: visible !important; /* overrides an inline style a cache plugin adds */
	}

	.site-footer__main {
		--grid-min: 12rem;
	}

	.site-footer__title {
		font-size: var(--text-l);
		font-weight: 700;
	}

	.site-footer__bottom {
		border-block-start: var(--border);
		padding-block-start: var(--space-m);
	}

	/* ---------- Notices ----------
	   A soft status panel for a message in the content: add notice and one of
	   notice--success, --warning, --error or --info to a Group. The text
	   stays the page's text colour; the soft background shows the status,
	   and any strong text takes the status colour. */
	.notice {
		padding: var(--space-s) var(--space-m) !important; /* core override: a nested Group's global padding sets 0 outside any layer */
		border-radius: var(--radius);
		background: var(--notice-bg, var(--info-bg));
		color: var(--text-color);
	}

	.notice strong {
		color: var(--notice-color, var(--info));
	}

	.notice--success {
		--notice-color: var(--success);
		--notice-bg: var(--success-bg);
	}

	.notice--warning {
		--notice-color: var(--warning);
		--notice-bg: var(--warning-bg);
	}

	.notice--error {
		--notice-color: var(--error);
		--notice-bg: var(--error-bg);
	}

	.notice--info {
		--notice-color: var(--info);
		--notice-bg: var(--info-bg);
	}
}