/*
 * Brick ’n Mortar SEO: what theme.json can’t express (budget ≤ 12 KB).
 * Tokens live in theme.json; this file only references them.
 */

:root {
	--bnm-header-h: 64px;
	--bnm-header-bg: var(--wp--preset--color--mortar);
	--bnm-header-ink: var(--wp--preset--color--ink);
	--bnm-focus: var(--wp--preset--color--brick);
	--bnm-ease: var(--wp--custom--motion--ease-out);
	--bnm-chapter: var(--wp--custom--motion--chapter) ease;
	--bnm-wide: var(--wp--style--global--wide-size);
	--bnm-gutter: var(--wp--preset--spacing--gutter);
}

@media (min-width: 960px) {
	:root { --bnm-header-h: 76px; }
}

html { scroll-padding-top: calc(var(--bnm-header-h) + 16px); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--mortar); }

/* Chapters butt edge to edge: no gaps between template parts. */
.wp-site-blocks > * { margin-block: 0; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }

:focus-visible { outline: 2px solid var(--bnm-focus); outline-offset: 2px; }
.is-style-dark-band, .bnm-header.is-dark { --bnm-focus: var(--wp--custom--dark--link); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px; /* taste-skill-ignore: visually hidden text, not a rule */
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bnm-skip-link {
	position: absolute;
	top: 8px;
	left: var(--bnm-gutter);
	z-index: 100;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--mortar);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
}
.bnm-skip-link:focus { transform: none; }

mark.bnm-placeholder {
	padding: 0 0.2em;
	background: #ffe14d;
	color: #1c1b1a;
	font: inherit;
	font-size: max(15px, 0.6em);
}

/* Buttons */
.wp-element-button {
	transition: background-color var(--wp--custom--motion--hover) ease, color var(--wp--custom--motion--hover) ease, transform var(--wp--custom--motion--press) var(--bnm-ease);
}
.wp-element-button:active { transform: scale(0.97); }

@media (hover: hover) {
	.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--mortar); }
	.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--kiln); text-decoration: underline; }
	.is-style-dark-band .is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--mortar); color: var(--wp--preset--color--ink); }
}
.is-style-dark-band .is-style-secondary .wp-block-button__link { border-color: var(--wp--preset--color--mortar); color: var(--wp--preset--color--mortar); }
.is-style-dark-band .is-style-ghost .wp-block-button__link { color: var(--wp--custom--dark--link); }

/* Lockup: one inline SVG, recoloured per ground (Brand Book §3.4). */
.bnm-lockup {
	--bnm-l-brick: var(--wp--preset--color--brick);
	--bnm-l-lit: var(--wp--preset--color--signal);
	--bnm-l-lit-o: 1;
	--bnm-l-word: var(--wp--preset--color--ink);
	--bnm-l-seo: var(--wp--preset--color--brick);

	display: block;
	overflow: visible;
}
.is-dark .bnm-lockup, .is-style-dark-band .bnm-lockup {
	--bnm-l-brick: var(--wp--preset--color--mortar);
	--bnm-l-lit: var(--wp--preset--color--mortar);
	--bnm-l-lit-o: 0.55;
	--bnm-l-word: var(--wp--preset--color--mortar);
	--bnm-l-seo: var(--wp--preset--color--mortar);
}
.bnm-lockup > * { transition: fill var(--bnm-chapter), fill-opacity var(--bnm-chapter); }
.bnm-lockup__brick { fill: var(--bnm-l-brick); }
.bnm-lockup__lit { fill: var(--bnm-l-lit); fill-opacity: var(--bnm-l-lit-o); }
.bnm-lockup__word { fill: var(--bnm-l-word); }
.bnm-lockup__seo { fill: var(--bnm-l-seo); }

/* Header: sticky; takes the colours of the chapter beneath it (main.js). */
.bnm-header {
	position: relative;
	z-index: 50;
	padding-inline: var(--bnm-gutter);
	border-bottom: 1px solid transparent; /* taste-skill-ignore: CLAUDE.md §3.3 sticky border (ADR-014) */
	background: var(--bnm-header-bg);
	color: var(--bnm-header-ink);
	transition: background-color var(--bnm-chapter), color var(--bnm-chapter), border-color var(--bnm-chapter);
}
.bnm-js .bnm-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
.bnm-header.is-scrolled { border-bottom-color: var(--wp--preset--color--plaster); }
.bnm-header.is-scrolled.is-dark { border-bottom-color: var(--wp--custom--dark--surface); }

.bnm-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	max-width: var(--bnm-wide);
	min-height: var(--bnm-header-h);
	margin-inline: auto;
}
.bnm-header__bar > *, .bnm-menu > * { margin: 0; }
.bnm-logo { margin-right: auto; color: inherit; }
.bnm-logo .bnm-lockup { width: auto; height: 36px; }

.bnm-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.bnm-menu .wp-block-navigation__container { gap: 8px 28px; }
.bnm-header .wp-block-navigation-item__content { padding-block: 10px; color: inherit; text-decoration: none; }
.bnm-header .wp-block-navigation-item__content:hover { text-decoration: underline; }
.bnm-header.is-dark .wp-element-button { background: var(--wp--custom--dark--button); color: var(--wp--preset--color--ink); }
@media (hover: hover) {
	.bnm-header.is-dark .wp-element-button:hover { background: var(--wp--preset--color--mortar); }
}

.bnm-menu-toggle { display: none; }

@media (min-width: 960px) {
	.bnm-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
	.bnm-header__bar { flex-wrap: nowrap; }
	.bnm-logo .bnm-lockup { height: 40px; }
}

/* Phone: "Menu" opens a full sheet under the bar. Without JS the menu wraps inline. */
@media (max-width: 959px) {
	.bnm-header__bar { padding-block: 12px; }
	.bnm-js .bnm-header__bar { padding-block: 0; }
	.bnm-js .bnm-menu-toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
		border: 0;
		background: none;
		color: inherit;
		font: 600 16px/1 var(--wp--preset--font-family--inter);
		text-decoration: underline;
		text-underline-offset: 0.25em;
		cursor: pointer;
	}
	.bnm-menu-toggle__close, .is-menu-open .bnm-menu-toggle__open { display: none; }
	.is-menu-open .bnm-menu-toggle__close { display: inline; }

	.bnm-js .bnm-menu {
		position: fixed;
		inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bnm-header-h)) 0 0;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
		padding: 24px var(--bnm-gutter) 32px;
		overflow-y: auto;
		background: var(--bnm-header-bg);
		color: var(--bnm-header-ink);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity var(--wp--custom--motion--ui) var(--bnm-ease), transform var(--wp--custom--motion--ui) var(--bnm-ease), visibility 0s var(--wp--custom--motion--ui);
	}
	.bnm-js .is-menu-open .bnm-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.bnm-js .bnm-menu .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 4px; }
	.bnm-js .bnm-menu .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--bricolage);
		font-size: var(--wp--preset--font-size--heading-2);
		font-weight: 700;
		letter-spacing: -0.015em;
		line-height: 1.1;
	}
	.bnm-js .bnm-menu .wp-block-button, .bnm-js .bnm-menu .wp-block-button__link { width: 100%; }
	.bnm-js .bnm-menu .wp-block-button__link { padding-block: 18px; }
	html.bnm-menu-open { overflow: hidden; }
}

/* Signal brick: lights up once on scroll-in (Brand Book §7). Lit without JS. */
.bnm-brick {
	display: inline-block;
	width: 0.48em;
	height: 0.22em;
	border-radius: 0.037em;
	background: var(--wp--preset--color--signal);
	transition: background-color var(--wp--custom--motion--signal) ease-out;
}
.bnm-js .is-style-dark-band .bnm-brick:not(.is-lit) { background: #928f89; }
.bnm-js .bnm-brick:not(.is-lit) { background: var(--wp--preset--color--plaster); }

/* CTA band: one word is the button; the whole band is the link. */
.bnm-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	min-height: 60svh;
	padding: var(--wp--preset--spacing--section) var(--bnm-gutter) 24px;
	container-type: inline-size;
}
.bnm-cta > * { width: 100%; max-width: var(--bnm-wide); margin: 0 auto !important; }
.bnm-cta__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.bnm-cta__text { max-width: 34rem; }
.bnm-cta__text > * { margin: 0; }
.bnm-cta__text > * + * { margin-top: 16px; }
.bnm-cta__arrow { flex: none; width: 48px; height: 48px; }
.bnm-cta__link {
	display: flex;
	align-items: baseline;
	gap: 0.05em;
	color: inherit;
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: calc(min(100cqi - 2 * var(--bnm-gutter), var(--bnm-wide)) / var(--bnm-cta-ratio, 3.1));
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.78;
	text-decoration: none;
}
.bnm-cta__link::after { content: ""; position: absolute; inset: 0; }
.bnm-cta:has(.bnm-cta__link:hover), .bnm-cta:has(.bnm-cta__link:focus-visible) {
	--bnm-focus: var(--wp--preset--color--brick);

	background: var(--wp--preset--color--mortar);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 599px) {
	.bnm-cta { min-height: 46svh; }
	.bnm-cta__arrow { width: 32px; height: 32px; }
}

/* Footer: the name first, then the ways to reach us (SITE_SPEC §3). */
.bnm-footer__inner { padding: var(--wp--preset--spacing--section) var(--bnm-gutter) 48px; }
.bnm-footer__inner > * { max-width: var(--bnm-wide); margin-inline: auto !important; }
.bnm-footer__name { display: block; }
.bnm-footer__name .bnm-lockup { width: 100%; height: auto; }
.bnm-footer__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 48px 24px;
	margin-top: 72px !important;
}
.bnm-footer__row > * { margin: 0; }
.bnm-nap { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-style: normal; }
.bnm-nap__name { font-weight: 600; }
.bnm-nap__big {
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}
.bnm-footer__nav { grid-column: 9 / span 2; }
.bnm-footer__social { grid-column: 11 / span 2; }
.bnm-footer__nav .wp-block-navigation-item__content, .bnm-footer__base a { color: var(--wp--preset--color--mortar); text-decoration: none; }
.bnm-footer__nav .wp-block-navigation-item__content:hover, .bnm-footer__base a:hover { text-decoration: underline; }
.bnm-footer__nav .wp-block-navigation__container { gap: 10px; }
.bnm-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 96px !important;
	color: var(--wp--custom--dark--muted);
	font-size: var(--wp--preset--font-size--small);
}
.bnm-footer__base > * { margin: 0; }
.bnm-footer__legal { display: flex; gap: 24px; }

@media (max-width: 781px) {
	.bnm-nap, .bnm-footer__nav, .bnm-footer__social { grid-column: 1 / -1; }
}

/* Reading pages */
.bnm-main { padding-block: var(--wp--preset--spacing--section); }
.bnm-main .wp-block-post-title { margin-bottom: 48px; }
.bnm-prose :is(h2, h3) { margin-top: 1.6em; }
.bnm-meta { color: var(--wp--preset--color--steel); font-size: var(--wp--preset--font-size--small); }

.bnm-post-list .wp-block-post-template { display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
.bnm-post-list .wp-block-post > * { margin: 0; }
.bnm-post-list .wp-block-post > * + * { margin-top: 8px; }
.bnm-post-list .wp-block-post-title { font-size: var(--wp--preset--font-size--heading-3); }
.bnm-post-list .wp-block-post-title a { color: inherit; text-decoration: none; }
.bnm-post-list .wp-block-post-title a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}