/*
Theme Name: Gridwerk
Theme URI: https://gridwerkthemes.com/themes/gridwerk/
Author: Gridwerk Themes
Author URI: https://gridwerkthemes.com/
Description: The Gridwerk Themes showroom: every theme, its live demos and its guide.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gridwerk
Tags: full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, translation-ready
*/

/* Base layer shared by every theme (from starter/). Theme-specific CSS goes below it. Rules on html, body and
   .wp-site-blocks sit in :where(), so a theme's own rule on the same element always wins and is no duplicate. */

/* Visible keyboard focus (WordPress.org requirement). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* Buttons draw the ring inside, in their text color: outside, it would sit on a section background of the
   same color as the button (a gilded button on a gilded band). */
.wp-element-button:focus-visible {
	outline-offset: -5px;
}

/* Form fields follow the palette, so a dark theme never shows white boxes. */
:where(
	input:not(
		[type="checkbox"],
		[type="radio"],
		[type="submit"],
		[type="button"]
	),
	textarea,
	select
) {
	border: 1px solid currentcolor;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Content made with core's default palette (another theme's posts, the test data) sets a background but no text
   colour, so it would inherit this theme's text colour. Each default background takes black or white, whichever
   contrasts more, and its headings and links follow. */
:is(
	.has-cyan-bluish-gray-background-color,
	.has-white-background-color,
	.has-pale-pink-background-color,
	.has-luminous-vivid-orange-background-color,
	.has-luminous-vivid-amber-background-color,
	.has-light-green-cyan-background-color,
	.has-vivid-green-cyan-background-color,
	.has-pale-cyan-blue-background-color,
	.has-vivid-cyan-blue-background-color,
	.has-vivid-purple-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--black);
}

:is(.has-black-background-color, .has-vivid-red-background-color):not(
	.has-text-color
) {
	color: var(--wp--preset--color--white);
}

:is(
		.has-black-background-color,
		.has-cyan-bluish-gray-background-color,
		.has-white-background-color,
		.has-pale-pink-background-color,
		.has-vivid-red-background-color,
		.has-luminous-vivid-orange-background-color,
		.has-luminous-vivid-amber-background-color,
		.has-light-green-cyan-background-color,
		.has-vivid-green-cyan-background-color,
		.has-pale-cyan-blue-background-color,
		.has-vivid-cyan-blue-background-color,
		.has-vivid-purple-background-color
	):not(.has-text-color)
	:is(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: inherit;
}

/* The byline reads "By Name" on one line, not as a tiny label above the name. */
.wp-block-post-author__content {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.3em;
	align-items: baseline;
}

.wp-block-post-author__byline {
	width: auto;
	font-size: inherit;
}

/* The comment beside its avatar may shrink below its longest word, so a long word wraps instead of widening the page. */
:where(.wp-block-comment-template li > .is-layout-flex) > .wp-block-group {
	flex: 1;
	min-width: 0;
}

/* The post author's own replies are marked, so readers can tell them from a guest's. */
:where(.wp-block-comment-template .bypostauthor) > .wp-block-group {
	border-inline-start: 2px solid var(--wp--preset--color--accent-1);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* One long word in a large heading (a name, a URL) wraps instead of widening the page. */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* Links inside running text stay recognizable without color. */
.wp-block-post-content
	:where(p, li:not(.wp-block-post))
	a:where(:not(.wp-element-button)) {
	text-decoration: underline;
}

/* Classic and comment content (captions, sized images, preformatted text) must not widen the page;
   :is() outranks the layout's content-size cap. */
:is(.wp-block-post-content, .wp-block-comment-content)
	:is(img, .wp-caption, embed, iframe, video) {
	max-width: 100%;
}

:where(.wp-block-post-content, .wp-block-comment-content) :where(img, video) {
	height: auto;
}

:where(.wp-block-post-content, .wp-block-comment-content) pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Logo-only social icons take the text color, not each brand's; the block's icon color (inline) still wins. */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentcolor;
}

/* The mobile menu's open and close buttons are touch targets, however short their label (WCAG 2.5.8). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	justify-content: center;
	align-items: center;
}

/* Core's Sticky position on a header Group sticks only inside the template part's <header>, which is just as tall,
   so the header scrolled away. The <header> sticks instead, below the admin bar the way core offsets sticky blocks
   (core sets the offset only on .is-position-sticky, and to 0 where the admin bar scrolls away on phones). */
.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var(
		--wp-admin--admin-bar--height,
		0px
	);
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset);
	z-index: 10;
}

@media screen and (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
		--wp-admin--admin-bar--position-offset: 0px;
	}
}

/* Keyboard focus and anchor links scroll to just below a sticky header, never under it (WCAG 2.4.11). All of it
   inside :where(), since :has() weighs as much as its argument and a theme's own scroll-padding-top must win. */
:where(
	html:has(.wp-site-blocks > .wp-block-template-part > .is-position-sticky)
) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 8rem);
}

/* On a very short screen (a phone held sideways) a sticky header would take most of it; it scrolls away there. */
@media (max-height: 30rem) {
	.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
		position: static;
	}
}

/* A page built from full-width sections shows the template's title on the sections' wide edge, not on the text
   column centred above them (the page patterns' own title bands sit there too). */
.page:has(.wp-block-post-content > .alignfull:first-child)
	.wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

/* A page whose content opens with its own title band (a page pattern's full-width group with an h1) shows that
   title; the template's smaller one steps aside, so the page never says its name twice. */
.wp-site-blocks:has(.wp-block-post-content > .alignfull:first-child h1)
	.wp-block-post-title {
	display: none;
}

/* Short pages end with the footer, not with a strip of page background below it. */
:where(.wp-site-blocks) {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

:where(.wp-site-blocks > main) {
	flex-grow: 1;
}

/* A page that ends in a full-width band (a call to action, a photo) runs it into the footer, without a strip of
   page background between them. The template's padding on <main> is inline, so only !important outranks it. */
:where(.wp-site-blocks) > footer {
	margin-block-start: 0;
}

.wp-site-blocks
	> main:is(
		:has(> .alignfull:last-child),
		:has(> .wp-block-post-content:last-child > .alignfull:last-child)
	) {
	padding-bottom: 0 !important;
}

/* The menu marks the page you are on; a theme restyles it to match its own hover. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.08em);
	text-underline-offset: 0.3em;
}

/* Details (the FAQ component) open with a chevron drawn in the text colour instead of the browser's triangle.
   A block style of Details (a booking card, say) keeps its own summary. */
.wp-block-details:not([class*="is-style-"]) > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	list-style: none;
}

.wp-block-details:not([class*="is-style-"]) > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details:not([class*="is-style-"]) > summary::after {
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	content: "";
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease-out;
}

.wp-block-details:not([class*="is-style-"])[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

/* A face without an italic stays upright rather than slanted by the browser; themes bundle the italics they use. */
:where(body) {
	font-synthesis-style: none;
}

/* A full-height Cover means the visible screen: on phones 100vh runs under the browser's toolbar. */
@supports (min-height: 100svh) {
	.wp-block-cover[style*="min-height:100vh"] {
		min-height: 100svh !important;
	}
}

/* Pause button on Cover background videos (inc/cover-video.php), above the overlay and the content. */
.gridwerk-video-toggle {
	position: absolute;
	z-index: 2;
	inset-inline-end: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid currentcolor;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.gridwerk-video-toggle svg {
	width: 1rem;
	height: 1rem;
	fill: currentcolor;
}

/* The slug once per selector, so a long slug still fits Prettier's line. */
[aria-pressed="true"] > .gridwerk-video-toggle__pause,
[aria-pressed="false"] > .gridwerk-video-toggle__play {
	display: none;
}

/* Complianz's cookie banner on the theme's tokens, so it follows the palette, the style variations and the type.
   Complianz sets these properties on :root; set on the banner itself, they win without !important. Deny looks
   exactly like Accept: rejecting must be as easy as accepting. A hairline frame keeps it apart from a page of
   the same colour. A theme's own section sets position and shape. */
.cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--wp--preset--color--base);
	--cmplz_banner_border_color: var(--wp--preset--color--contrast);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 0;
	--cmplz_text_color: var(--wp--preset--color--contrast);
	--cmplz_hyperlink_color: var(--wp--preset--color--contrast);
	--cmplz_title_font_size: var(--wp--preset--font-size--medium);
	--cmplz_text_font_size: var(--wp--preset--font-size--small);
	--cmplz_link_font_size: var(--wp--preset--font-size--small);
	--cmplz_category_body_font_size: var(--wp--preset--font-size--small);
	--cmplz_category_header_title_font_size: var(
		--wp--preset--font-size--small
	);
	--cmplz_category_header_active_font_size: var(
		--wp--preset--font-size--small
	);
	--cmplz_category_header_always_active_color: var(
		--wp--preset--color--contrast
	);
	--cmplz_button_font_size: var(--wp--preset--font-size--small);
	--cmplz_button_border_radius: 0;
	--cmplz_button_accept_background_color: var(--wp--preset--color--accent-1);
	--cmplz_button_accept_border_color: var(--wp--preset--color--accent-1);
	--cmplz_button_accept_text_color: var(--wp--preset--color--base);
	--cmplz_button_deny_background_color: var(--wp--preset--color--accent-1);
	--cmplz_button_deny_border_color: var(--wp--preset--color--accent-1);
	--cmplz_button_deny_text_color: var(--wp--preset--color--base);
	--cmplz_button_settings_background_color: var(--wp--preset--color--base);
	--cmplz_button_settings_border_color: var(--wp--preset--color--contrast);
	--cmplz_button_settings_text_color: var(--wp--preset--color--contrast);
	--cmplz_slider_active_color: var(--wp--preset--color--accent-1);
	--cmplz_slider_inactive_color: var(--wp--preset--color--contrast);
	--cmplz_slider_bullet_color: var(--wp--preset--color--base);

	font-family: var(--wp--preset--font-family--body);
}

/* Complianz's stylesheet loads after this one, so these start from its container's id. The focus ring sits
   inside the buttons: outside, Accept's base-colored ring would vanish on the base-colored banner. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: -5px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
	background-color: var(--wp--preset--color--accent-2);
}

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

/* Opening hours (inc/hours.php): one ruled row per day, and today's row (assets/js/hours.js) set stronger. */
.wp-block-table.is-style-hours :is(th, td) {
	padding: 0.5em 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
}

.wp-block-table.is-style-hours td:last-child {
	text-align: end;
}

.wp-block-table.is-style-hours tr.is-today td {
	font-weight: 700;
}

/* ===== Gridwerk showroom (DESIGN.md) ===== */

:root {
	--gw-cols: 12;
	--gw-gap: var(--wp--preset--spacing--40);

	text-underline-offset: 0.2em;
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* The master grid, drawn as hairline column guides behind the wall (block style "Grid guides"). */
.is-style-grid-guides {
	position: relative;
	isolation: isolate;
}

.is-style-grid-guides::before {
	--gw-col: calc(
		(100% - (var(--gw-cols) - 1) * var(--gw-gap)) / var(--gw-cols)
	);

	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	z-index: -1;
	width: min(
		var(--wp--style--global--wide-size),
		100% - var(--wp--style--root--padding-left) -
			var(--wp--style--root--padding-right)
	);
	transform: translateX(-50%);
	background: repeating-linear-gradient(
		90deg,
		var(--gw-guide) 0 1px,
		transparent 1px calc(var(--gw-col) - 1px),
		var(--gw-guide) calc(var(--gw-col) - 1px) var(--gw-col),
		transparent var(--gw-col) calc(var(--gw-col) + var(--gw-gap))
	);
	pointer-events: none;

	--gw-guide: color-mix(in srgb, currentcolor 9%, transparent);
}

/* Hero: the promise and the finder in columns 1–5, the lead poster in 6–12. */
.gw-hero {
	column-gap: var(--gw-gap);
	min-height: calc(100svh - 4rem);
	padding-block: var(--wp--preset--spacing--50);
}

.gw-copy {
	padding-top: var(--wp--preset--spacing--40);
}

.gw-copy h1 {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Text, display type and the footer's address stay inside a phone at 200% text: a long word or address
   (hello@gridwerkthemes.com) breaks rather than overflows. */
p,
li,
.gw-copy h1,
.gw-lead-name,
.gw-poster-name,
.gw-family-head h2,
.gw-footer .wp-block-navigation-item__label {
	overflow-wrap: anywhere;
}

.gw-lede {
	max-width: 26em;
}

.gw-finder {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--60);
	width: 100%;
}

.gw-finder .wp-block-search__label {
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.gw-finder .wp-block-search__inside-wrapper,
.gw-mini .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

.gw-finder .wp-block-search__input {
	border: 0;
	border-bottom: 3px solid currentcolor;
	border-radius: 0;
	background: transparent;
	padding: 0.5rem 0 0.4rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.gw-finder .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--ink-2);
}

.wp-block-search__input:focus-visible {
	outline: 0;
	border-bottom-width: 5px;
	padding-bottom: calc(0.4rem - 2px);
}

.wp-block-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.gw-families {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.gw-families button {
	appearance: none;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink-2);
	font: inherit;
	padding: 0.2rem 0;
	cursor: pointer;
}

.gw-families button:hover,
.gw-families button[aria-pressed="true"] {
	color: var(--wp--preset--color--contrast);
}

.gw-families button[aria-pressed="true"] {
	font-weight: 700;
	box-shadow: inset 0 -3px 0 currentcolor;
}

.gw-families span {
	font-variant-numeric: tabular-nums;
}

.gw-status {
	min-height: 1.5em;
}

/* Motifs: each theme's own geometry in its own accent (inc/showroom.php puts the span in front of its image). */
.gw-motif {
	position: absolute;
	background: var(--gw-accent);
}

.gw-motif-circle {
	clip-path: circle(48% at 50% 50%);
}

.gw-motif-bars {
	background: linear-gradient(
		90deg,
		var(--gw-accent) 0 22%,
		transparent 22% 39%,
		var(--gw-accent) 39% 61%,
		transparent 61% 78%,
		var(--gw-accent) 78%
	);
}

.gw-motif-arc {
	clip-path: circle(100% at 100% 100%);
}

.gw-motif-half {
	background: linear-gradient(90deg, transparent 50%, var(--gw-accent) 50%);
}

.gw-motif-tri {
	clip-path: polygon(0 100%, 50% 4%, 100% 100%);
}

.gw-motif-rings {
	background: repeating-radial-gradient(
		circle at 50% 50%,
		var(--gw-accent) 0 7%,
		transparent 7% 13%
	);
	clip-path: circle(48% at 50% 50%);
}

.gw-motif-diag {
	background: repeating-linear-gradient(
		45deg,
		var(--gw-accent) 0 11%,
		transparent 11% 22%
	);
}

.gw-motif-dots {
	background: radial-gradient(var(--gw-accent) 0 34%, transparent 36%) 0 0 /
		25% 25%;
}

.gw-motif-stack {
	background: repeating-linear-gradient(
		180deg,
		var(--gw-accent) 0 14%,
		transparent 14% 25%
	);
}

.gw-motif-quarter {
	background:
		radial-gradient(
				circle at 0 100%,
				var(--gw-accent) 0 50%,
				transparent 50.5%
			)
			0 0 / 50% 100% no-repeat,
		radial-gradient(
				circle at 100% 0,
				var(--gw-accent) 0 50%,
				transparent 50.5%
			)
			100% 0 / 50% 100% no-repeat;
}

/* A definite width, so an aspect-ratio box's min-height raises its height instead of widening it past a phone. */
.gw-art {
	position: relative;
	width: 100%;
}

.gw-shot {
	position: absolute;
	z-index: 1;
	margin: 0;
	box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}

.gw-shot img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: top;
}

/* The lead poster. */
.gw-lead {
	align-self: end;
}

/* At least as tall as the square motif (58% of the width), as .gw-product .gw-art. */
.gw-lead .gw-art {
	aspect-ratio: 50 / 29;
	min-height: clamp(12rem, 40vh, 19.2rem);
}

.gw-lead .gw-motif {
	view-transition-name: gw-lead-motif;
	top: 0;
	right: 0;
	width: 58%;
	aspect-ratio: 1;
}

.gw-lead .gw-shot {
	view-transition-name: gw-lead-shot;
	top: 1.2rem;
	left: 0;
	width: 72%;
}

.gw-lead .gw-shot img {
	height: clamp(10.4rem, 35vh, 17.6rem);
}

.gw-lead-name {
	margin-top: var(--wp--preset--spacing--30);
	line-height: 0.82;
	letter-spacing: -0.04em;
}

.gw-lead-name a,
.gw-poster-name a {
	text-decoration: none;
}

.gw-lead-name a:hover,
.gw-poster:hover .gw-poster-name a {
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

.gw-lead-meta {
	max-width: 34em;
	margin-top: var(--wp--preset--spacing--30);
	margin-left: calc(2 / 7 * 100%);
	font-size: var(--wp--preset--font-size--small);
}

.gw-lead-meta > * {
	margin-block: 0 0.6rem;
}

.gw-lead-meta .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.gw-lead-meta .wp-block-read-more {
	text-decoration: underline;
}

.gw-lead-line {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: 0.2rem !important;
}

/* A theme's product page opens with its poster: the shot and motif in columns 1–7, its name in 8–12. */
.gw-product {
	column-gap: var(--gw-gap);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* At least as tall as the square motif (62% of the width), however short the window: a min-height in vh alone let
   the motif run into the buttons below on short or zoomed-out windows. */
.gw-product .gw-art {
	aspect-ratio: 50 / 31;
	min-height: clamp(12.8rem, 44vh, 22.4rem);
}

.gw-product .gw-motif {
	top: 0;
	right: 0;
	width: 62%;
	aspect-ratio: 1;
}

.gw-product .gw-shot {
	top: 1.2rem;
	left: 0;
	width: 80%;
}

.gw-product .gw-shot img {
	height: clamp(11.2rem, 40vh, 20rem);
}

.gw-product-title {
	justify-content: flex-end;
}

.gw-product-title h1 {
	line-height: 0.85;
	letter-spacing: -0.04em;
	overflow-wrap: anywhere;
}

/* The wall: one section per trade family, posters four to a row. */
.gw-family {
	padding-top: var(--wp--preset--spacing--70);
}

.gw-family-head {
	border-top: 3px solid currentcolor;
	padding-top: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.gw-family-head h2 {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
}

.gw-count {
	font-variant-numeric: tabular-nums;
}

.wp-block-post-template.gw-wall {
	column-gap: var(--gw-gap);
	row-gap: var(--wp--preset--spacing--60);
}

.gw-poster {
	position: relative;
}

.gw-poster .gw-art {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gw-poster .gw-motif {
	inset: 0 0 0 auto;
	width: 75%;
}

.gw-poster .gw-shot {
	bottom: 0;
	left: 0;
	width: 72%;
	box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
}

.gw-poster-name {
	margin-top: 0.7rem;
	letter-spacing: -0.035em;
}

/* The whole poster opens the theme's page; its Open the live demo button is there and on the lead poster. */
.gw-poster-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.gw-poster-meta {
	margin-top: 0.2rem;
}

.gw-price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gw-empty {
	padding-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--large);
}

/* Sticky header: the compact search shows once the finder scrolls away (assets/js/finder.js), and always on
   pages without a finder. */
.gw-header {
	z-index: 20;
	transition: box-shadow 0.2s;
}

.gw-header.is-stuck {
	box-shadow: 0 1px 0 var(--wp--preset--color--contrast);
}

.gw-mini {
	flex: 0 1 20.8rem;
	transition: opacity 0.2s;
}

.home .gw-header:not(.is-stuck) .gw-mini {
	visibility: hidden;
	opacity: 0;
}

.gw-mini .wp-block-search__input {
	border: 0;
	border-bottom: 2px solid currentcolor;
	border-radius: 0;
	background: transparent;
	padding: 0.3rem 0;
	font-weight: 600;
}

/* Signature: the lead poster re-sets when the visitor's search picks another theme (assets/js/finder.js).
   The new shape is pulled like a screen print, the name re-set, the screenshot slid in. */

/* The re-set's three named parts. */
.gw-lead .gw-lead-name {
	view-transition-name: gw-lead-name;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
}

::view-transition-group(gw-lead-motif),
::view-transition-group(gw-lead-shot),
::view-transition-group(gw-lead-name) {
	animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(gw-lead-motif),
::view-transition-old(gw-lead-shot) {
	animation: gw-lift 0.2s cubic-bezier(0.7, 0, 0.84, 0) both;
}

::view-transition-new(gw-lead-motif) {
	animation: gw-pull 0.8s 0.14s cubic-bezier(0.65, 0, 0.35, 1) both;
}

::view-transition-old(gw-lead-name) {
	animation: gw-name-out 0.2s cubic-bezier(0.7, 0, 0.84, 0) both;
}

::view-transition-new(gw-lead-name) {
	animation: gw-name-in 0.6s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

::view-transition-new(gw-lead-shot) {
	animation: gw-shot-in 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gw-pull {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes gw-lift {
	to {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes gw-name-out {
	to {
		opacity: 0;
		transform: translateY(-0.25em);
	}
}

@keyframes gw-name-in {
	from {
		opacity: 0;
		transform: translateY(0.35em);
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes gw-shot-in {
	from {
		opacity: 0;
		transform: translateX(-4%);
	}
}

@media (max-width: 1100px) {
	.wp-block-post-template.gw-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	:root {
		--gw-cols: 4;
	}

	.gw-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.gw-hero > * {
		grid-column: 1 / -1;
	}

	.gw-lead-meta {
		margin-left: 0;
	}

	.gw-product > * {
		grid-column: 1 / -1;
	}

	.gw-product {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-post-template.gw-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gw-poster-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.gw-mini {
		display: none;
	}
}

/* Family archives and search results: a heading, then the same posters as the wall. */
.gw-listing-head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.gw-listing-head .gw-finder {
	max-width: 25.6rem;
	padding-top: var(--wp--preset--spacing--40);
}

/* The consent banner (Complianz, main site only; scripts/consent.php), on the base layer's tokens: a white sheet
   in the wall's corner, hairline-framed with the footer's heavy top rule. Complianz's stylesheet loads after this
   one, so the layout rules start from its container's id. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	--cmplz_banner_width: 21rem;
	--cmplz_banner_margin: var(--wp--preset--spacing--30);
	--cmplz_banner_border_width: 3px 1px 1px;
}

/* On the wall, the sheet sits in the page gutter (Complianz pins it 10px from the corner). */
@media (min-width: 768px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-left {
		left: var(--wp--style--root--padding-left);
		bottom: var(--wp--preset--spacing--40);
	}
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	display: block;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	justify-self: start;
	font-weight: 700;
}

/* Equal buttons in one row; on a phone Accept and Deny share a row, Preferences below. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	flex: 1 1 0;
	font-weight: 700;
}

#cmplz-cookiebanner-container
	.cmplz-cookiebanner
	.cmplz-buttons
	.cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover {
	background-color: var(--wp--preset--color--ink-2);
	border-color: var(--wp--preset--color--ink-2);
}

@media (max-width: 768px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-flow: row wrap;
	}

	#cmplz-cookiebanner-container
		.cmplz-cookiebanner
		.cmplz-buttons
		.cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences) {
		flex-basis: 100%;
	}
}

/* The footer's Cookie settings: Complianz reopens its banner from any button.cmplz-manage-consent. It reads
   like the footer links beside it. */
.gw-cookie-settings {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

.gw-cookie-settings:hover {
	text-decoration: underline;
}