/*
 * Header and footer (Mode B, D25, D26). Core blocks only; values from theme.json tokens.
 * Targets measured on live 2026-11-05 (chrome-probe.py); differences from live come from the
 * font-size budget (presets only) and are listed in INTAKE section 9c.
 */

/* The chrome's groups lay out with flex below; core's flow-layout gap between children does not apply. */
.bpb-mast-in > *,
.bpb-brand > *,
.bpb-foot > *,
.bpb-foot-cols > *,
.bpb-foot-col > *,
.bpb-foot-bottom > *,
.wp-site-blocks > * {
	margin-block: 0;
}

/* ---------- Brand (logo mark + site title + tagline), header and footer ---------- */

.bpb-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	padding-left: calc(44px + var(--wp--preset--spacing--30));
}

.bpb-brand::before,
.bpb-brand::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	transform: translateY(-50%);
}

.bpb-brand::before {
	background-color: var(--wp--preset--color--heading);
}

.bpb-brand::after {
	background-color: var(--wp--preset--color--base);
	-webkit-mask: url(../icons/paw.svg) center / 22px no-repeat;
	mask: url(../icons/paw.svg) center / 22px no-repeat;
}

.bpb-brand .bpb-brand-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--heading);
}

.bpb-brand .bpb-brand-name a {
	color: inherit;
	text-decoration: none;
}

.bpb-brand .bpb-brand-tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--body-text);
}

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

.bpb-mast {
	position: relative;
	z-index: 9999;
	padding: 0 var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
}

/*
 * Sticky header (spec H, D28). Core wraps the part in its own element, so the wrapper sticks (a sticky child only
 * sticks inside its parent). Under the admin bar when logged in.
 */
.wp-block-template-part:has(> .bpb-mast) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9999;
}

.bpb-mast-in {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: 1400px;
	min-height: 72px;
	margin: 0 auto;
}

.bpb-mast .bpb-brand {
	flex: 0 0 auto;
}

.bpb-mast .bpb-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.bpb-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.bpb-mast .bpb-nav .wp-block-navigation-item__content {
	position: relative;
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

/* Green underline on hover and on the current page (spec H). */
.bpb-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 2px;
	background-color: var(--wp--preset--color--action);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.15s ease;
}

.bpb-nav .wp-block-navigation-item__content:hover::after,
.bpb-nav .wp-block-navigation-item__content:focus-visible::after,
.bpb-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Menu and close buttons: 40px, as live's burger. */
.bpb-nav .wp-block-navigation__responsive-container-open,
.bpb-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	color: var(--wp--preset--color--heading);
}

/* Live's stroked menu and close icons (same set as the paw and search), drawn with a mask. */
.bpb-nav .wp-block-navigation__responsive-container-open svg,
.bpb-nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.bpb-nav .wp-block-navigation__responsive-container-open::before,
.bpb-nav .wp-block-navigation__responsive-container-close::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/menu.svg) center / contain no-repeat;
	mask: url(../icons/menu.svg) center / contain no-repeat;
}

.bpb-nav .wp-block-navigation__responsive-container-close::before {
	-webkit-mask-image: url(../icons/close.svg);
	mask-image: url(../icons/close.svg);
}

/*
 * Live collapses the menu below 1351px (its 8 labels do not fit beside the brand earlier); core's own breakpoint is
 * 600px. Same technique as dogs-food chrome.css.
 */
@media (max-width: 1350px) {

	.bpb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.bpb-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.bpb-mast .bpb-nav {
		display: flex;
		justify-content: flex-end;
	}
}

/* Open menu: a white panel under the header, full height, one link per row (live's drawer). */
.bpb-mast .bpb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	top: 73px;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	overflow-y: auto;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	box-shadow: var(--wp--preset--shadow--drawer);
	animation: none;
}

/* Out of sight while the panel is open, but still focusable: on Escape, core moves focus back to this button
   before the panel's classes change, and a visibility:hidden button cannot take it (focus fell to <body>, D117). */
.bpb-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	opacity: 0;
	pointer-events: none;
}

/* The close button sits where the menu button was: right of the panel minus header padding, search and gap. */
.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 16px;
	right: calc(var(--wp--preset--spacing--50) + 40px + var(--wp--preset--spacing--40));
	display: flex;
}

.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close,
.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog {
	max-width: none;
	margin: 0;
}

.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 0;
}

.bpb-mast .bpb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	width: 100%;
}

.bpb-mast .bpb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content:hover,
.bpb-mast .bpb-nav.wp-block-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--action);
}

/* Search: a 40px icon button that opens a field to its left (core search, button only). */
.bpb-search {
	flex: 0 0 auto;
	margin: 0;
}

.bpb-search .wp-block-search__inside-wrapper {
	position: relative;
}

.bpb-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: var(--wp--preset--color--heading);
}

.bpb-search .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--border);
}

/* Live's stroked magnifier (same icon set as the paw), drawn with a mask; core's filled glyph is hidden. */
.bpb-search .wp-block-search__button svg {
	display: none;
}

.bpb-search .wp-block-search__button::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/search.svg) center / contain no-repeat;
	mask: url(../icons/search.svg) center / contain no-repeat;
}

.bpb-search .wp-block-search__input {
	position: absolute;
	top: 1px;
	right: 44px;
	box-sizing: border-box;
	width: 220px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	/* 16px: below it phones zoom into the field. */
	font-size: var(--wp--custom--font-size-step--body-mobile);
}

.bpb-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	width: 0;
	padding: 0;
	border-width: 0;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 480px) {

	.bpb-search .wp-block-search__input {
		width: 150px;
	}
}

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

.bpb-foot {
	padding: 0 var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--surface-cream);
}

.bpb-foot-in {
	max-width: 1200px;
	margin: 0 auto;
}

.bpb-foot-cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--80) 48px;
	padding: 48px 0 var(--wp--preset--spacing--80);
}

.bpb-foot-col {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 160px;
}

.bpb-foot-col.bpb-foot-about {
	flex: 1.6 1 0%;
	gap: var(--wp--preset--spacing--40);
	min-width: 240px;
}

/* Live's footer mark is 48px (the header's is 44px). */
.bpb-brand.bpb-brand-light {
	min-height: 48px;
	padding-left: calc(48px + var(--wp--preset--spacing--20));
}

.bpb-brand.bpb-brand-light::before,
.bpb-brand.bpb-brand-light::after {
	width: 48px;
	height: 48px;
}

.bpb-brand.bpb-brand-light::before {
	background-color: var(--wp--preset--color--base);
}

.bpb-brand.bpb-brand-light::after {
	background-color: var(--wp--preset--color--heading);
}

.bpb-brand.bpb-brand-light .bpb-brand-name {
	color: var(--wp--preset--color--base);
}

.bpb-brand.bpb-brand-light .bpb-brand-tagline {
	color: var(--wp--preset--color--surface-cream);
}

.bpb-foot-note,
.bpb-foot-copy {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--surface-cream) 75%, transparent);
}

.bpb-foot .bpb-foot-h {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
}

.bpb-foot-list .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
}

.bpb-foot .bpb-foot-list .wp-block-navigation-item__content {
	padding: 0;
	color: color-mix(in srgb, var(--wp--preset--color--surface-cream) 75%, transparent);
	text-decoration: none;
}

.bpb-foot .bpb-foot-list .wp-block-navigation-item__content:hover,
.bpb-foot .bpb-foot-list .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--surface-cream);
	text-decoration: underline;
}

.bpb-foot-bottom {
	padding: 0 0 var(--wp--preset--spacing--80);
}

.bpb-foot-copy {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 900px) {

	.bpb-foot-col,
	.bpb-foot-col.bpb-foot-about {
		flex: 0 0 100%;
	}
}

@media (min-width: 641px) and (max-width: 900px) {

	.bpb-foot-col:not(.bpb-foot-about) {
		flex: 0 0 calc(33.333% - 32px);
	}
}

/* Phones: everything centred, the mark above the name (as live). */
@media (max-width: 640px) {

	.bpb-foot {
		text-align: center;
	}

	.bpb-foot .bpb-foot-col {
		align-items: center;
	}

	.bpb-brand.bpb-brand-light {
		align-items: center;
		padding-top: calc(48px + var(--wp--preset--spacing--40));
		padding-left: 0;
	}

	.bpb-brand.bpb-brand-light::before,
	.bpb-brand.bpb-brand-light::after {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.bpb-foot .bpb-foot-list .wp-block-navigation__container {
		align-items: center;
	}
}

/* Body text steps down on phones (spec F: never below 16px). */
@media (max-width: 767px) {

	body {
		font-size: var(--wp--custom--font-size-step--body-mobile);
	}
}