/*
Theme Name: The Cake Shop
Theme URI: https://thecakeshopbakery.com/
Author: The Cake Shop
Description: Block theme for The Cake Shop, a family owned scratch bakery in San Mateo, California. Built to the supplied mock design; colours, type and layout metrics are measured in docs/mock-spec.md.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thecakeshop
Tags: block-theme, bakery, full-site-editing, one-column, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Everything expressible as a design token lives in theme.json. This file is
   only for what theme.json cannot say: sticky behaviour, grids, hover states,
   the drawer, and the two decorative shapes from the mock.
   Custom properties come from theme.json presets, so there is one palette.
   ---------------------------------------------------------------------- */

:root {
	--tcs-radius: 10px;
	--tcs-radius-sm: 6px;
	--tcs-header-h: 80px;
	--tcs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tcs-t: 180ms;
}

/* Every img rule below that sets aspect-ratio also sets height:auto, and must.
   WordPress emits width and height attributes on attachment images, and a
   presentational height attribute counts as a used height, so aspect-ratio is
   ignored and the image keeps its natural shape. On the live site that made the
   story photograph 452x700 instead of 452x317. It did not show up in the local
   preview because the preview's img tags carry no dimension attributes. */

/* Grid and flex children default to min-width:auto, which lets a wide child push
   its track open rather than shrink or scroll. Every horizontal overflow found
   during QA traced back to it, so the layout containers opt out once, here. */
.tcs-tiles > *,
.tcs-products > *,
.tcs-assurances > *,
.tcs-about > *,
.tcs-hero__grid > *,
.tcs-custom__grid > *,
.tcs-footer__cols > *,
.tcs-header__inner > * {
	min-width: 0;
}

/* Focus: visible on every interactive element, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--wine);
	outline-offset: 3px;
	border-radius: var(--tcs-radius-sm);
}

.tcs-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--wine);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
}
.tcs-skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */

.tcs-announce {
	background: var(--wp--preset--color--blush-deep);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	text-align: center;
	padding: 0.5rem var(--wp--preset--spacing--30);
}
.tcs-announce p { margin: 0; }
.tcs-announce .tcs-heart { color: var(--wp--preset--color--wine); margin-inline-start: 0.4em; }

.tcs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 248, 246, 0.94);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--tcs-t) var(--tcs-ease), box-shadow var(--tcs-t) var(--tcs-ease);
}
.tcs-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 1px 14px rgba(69, 37, 40, 0.06);
}
/* The header row is a flex group, and a flex layout gets no max-width from
   WordPress, so without this the logo sits against the left edge of the window
   instead of on the container edge where the mock has it. */
.tcs-header__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	min-height: var(--tcs-header-h);
	align-items: center;
}
.tcs-logo img {
	display: block;
	width: auto;
	height: 44px;
}

.tcs-nav .wp-block-navigation__container { gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.tcs-nav .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	position: relative;
}
/* Underline grows from the centre on hover and on the current page. */
.tcs-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 1.5px;
	background: var(--wp--preset--color--wine);
	transition: left var(--tcs-t) var(--tcs-ease), right var(--tcs-t) var(--tcs-ease);
}
.tcs-nav .wp-block-navigation-item__content:hover::after,
.tcs-nav .current-menu-item > .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
}
.tcs-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--tcs-radius);
	box-shadow: 0 10px 26px rgba(69, 37, 40, 0.1);
	background: var(--wp--preset--color--white);
	padding: 0.4rem 0;
	min-width: 14rem;
}
.tcs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
}
.tcs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
.tcs-nav .wp-block-navigation__submenu-container li:hover > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--blush);
}

.tcs-header__actions { gap: 1.1rem; align-items: center; }
.tcs-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background var(--tcs-t) var(--tcs-ease), color var(--tcs-t) var(--tcs-ease);
}
.tcs-iconbtn:hover { background: var(--wp--preset--color--blush); color: var(--wp--preset--color--wine); }
.tcs-iconbtn svg { width: 19px; height: 19px; }

/* Header search: hidden until the icon is pressed, so the mock's header stays clean. */
.tcs-search {
	display: none;
	padding: 0 var(--wp--preset--spacing--30) 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.tcs-search.is-open { display: block; }
.tcs-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.7rem 1.1rem;
	background: var(--wp--preset--color--white);
}

/* Small screen menu. This is the core navigation overlay, not a shrunk down copy
   of the desktop bar: it opens full screen, and WordPress owns the focus trap and
   the aria wiring, so there is no bespoke drawer to keep correct. */
.tcs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
}
.tcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2.5rem;
}
.tcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding-block: 0.7rem;
}
.tcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none; }
.tcs-nav .wp-block-navigation__responsive-container-open,
.tcs-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	padding: 0.35rem;
}

@media (max-width: 991px) {
	.tcs-header__actions .tcs-iconbtn--search { display: none; }
}
/* At 320px the wordmark, the menu button and the call to action together are
   wider than the viewport. Both shrink rather than the CTA being dropped: it is
   the one thing in the header that converts. */
@media (max-width: 479px) {
	.tcs-logo img { height: 34px; }
	.tcs-order { padding: 0.55rem 0.95rem; font-size: 0.75rem; }
	.tcs-header__inner { gap: 0.5rem; }
}

/* ------------------------------------------------------------------ hero */

.tcs-hero {
	background: var(--wp--preset--gradient--hero-wash);
	overflow: hidden;
}
/* Column one is the page gutter, so the copy lands exactly on the 1200px
   container edge while the photograph bleeds to the right of the viewport. */
.tcs-hero__grid {
	display: grid;
	grid-template-columns:
		max(var(--wp--preset--spacing--30), calc((100% - 1200px) / 2))
		minmax(0, 26rem)
		minmax(0, 1fr);
	align-items: center;
}
.tcs-hero__copy {
	grid-column: 2;
	padding-block: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--40);
}
.tcs-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8c6f6f;
	margin: 0 0 0.9rem;
}
.tcs-hero__title { margin: 0 0 1.1rem; }
.tcs-hero__lede { margin: 0 0 1.9rem; max-width: 24rem; }
.tcs-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tcs-btn--ghost {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
}
.tcs-btn--ghost:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--wine);
	border-color: var(--wp--preset--color--wine);
}
.tcs-hero__media { grid-column: 3; position: relative; }
.tcs-hero__media img {
	border-radius: 0;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 5 / 4;
	display: block;
}

@media (max-width: 900px) {
	.tcs-hero__grid { grid-template-columns: 1fr; }
	.tcs-hero__copy {
		grid-column: 1;
		padding-inline: var(--wp--preset--spacing--30);
		padding-block: var(--wp--preset--spacing--50);
		max-width: 40rem;
		margin-inline: auto;
	}
	.tcs-hero__media { grid-column: 1; }
}
@media (max-width: 479px) {
	.tcs-ctas { flex-direction: column; align-items: stretch; }
	.tcs-ctas .wp-block-button__link { text-align: center; }
}
/* The handwritten note and its arrow, as in the mock. */
.tcs-note {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	transform: rotate(-7deg);
}
.tcs-note--hero {
	position: absolute;
	right: 4.5%;
	top: 8%;
	width: 10.5rem;
	margin: 0;
	text-align: center;
	z-index: 2;
	/* The note sits over photography, which varies. A soft halo keeps it legible
	   without putting a panel behind it, which the mock does not have. */
	text-shadow: 0 1px 6px rgba(251, 248, 246, 0.85), 0 0 18px rgba(251, 248, 246, 0.7);
}
.tcs-note__arrow { display: block; width: 46px; margin: 0.35rem auto 0; opacity: 0.8; }

@media (max-width: 781px) {
	.tcs-note--hero { position: static; width: auto; margin: 0 auto 1rem; transform: none; }
	.tcs-hero__media img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------- category tile grid (6) */

.tcs-tiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tcs-tile { text-align: center; }
.tcs-tile a { display: block; text-decoration: none; color: inherit; }
.tcs-tile__frame {
	display: block;
	border-radius: var(--tcs-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--blush);
}
.tcs-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 320ms var(--tcs-ease);
}
.tcs-tile a:hover img { transform: scale(1.05); }
.tcs-tile__name {
	display: block;
	margin: 0.75rem 0 0.15rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}
.tcs-tile__note {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

/* The index pages use the same tile at a larger size, four across. */
.tcs-tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }

@media (max-width: 1199px) {
	.tcs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tcs-tiles--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.tcs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tcs-tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ------------------------------------------------------- assurance strip */

.tcs-assurances {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tcs-assurance { display: flex; align-items: center; gap: 0.9rem; }
.tcs-assurance__icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--wp--preset--color--pink-soft);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--wine);
}
.tcs-assurance__icon svg { width: 21px; height: 21px; }
.tcs-assurance__title {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.tcs-assurance__note {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 991px) { .tcs-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 479px) { .tcs-assurances { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ our story */

/* Photo, copy, painted note. The note column is narrow and drops out on tablet. */
.tcs-about {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.55fr);
	gap: 2.5rem;
	align-items: center;
}
.tcs-about__media img {
	border-radius: var(--tcs-radius);
	width: 100%;
	height: auto;
	aspect-ratio: 10 / 7;
	object-fit: cover;
	display: block;
}
.tcs-about__copy h2 { margin: 0 0 1rem; }
.tcs-about__copy p { margin: 0 0 1.25rem; }
.tcs-about__cta { margin-bottom: 0 !important; }

@media (max-width: 991px) {
	.tcs-about { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* The painted blob behind the handwritten note. Drawn, not an image file. */
.tcs-blob {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 11rem;
	padding: 1.5rem;
}
.tcs-blob::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--pink-soft);
	opacity: 0.85;
	border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
	transform: rotate(-4deg);
}
.tcs-blob .tcs-note { position: relative; z-index: 1; text-align: center; }

@media (max-width: 991px) { .tcs-blob { display: none; } }

/* ------------------------------------------------------- product cards */

.tcs-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tcs-product {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--tcs-radius);
	overflow: hidden;
	text-align: center;
	padding-bottom: 1.25rem;
	transition: transform var(--tcs-t) var(--tcs-ease), box-shadow var(--tcs-t) var(--tcs-ease);
}
.tcs-product:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lift);
}
.tcs-product__frame {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--blush);
}
.tcs-product img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.tcs-product__name {
	display: block;
	margin: 1rem 1rem 0.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.tcs-product__note {
	display: block;
	margin: 0 1rem 1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}
.tcs-product .wp-block-button__link { padding: 0.6rem 1.5rem; font-size: 0.8125rem; }

@media (max-width: 991px) { .tcs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .tcs-products { grid-template-columns: 1fr; } }

/* --------------------------------------------------- custom cakes band */

/* Mirror of the hero grid: the photograph bleeds to the left edge of the
   viewport and the copy starts on the container's inner edge. */
.tcs-custom { background: var(--wp--preset--color--blush); overflow: hidden; }
.tcs-custom__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 33rem)
		max(var(--wp--preset--spacing--30), calc((100% - 1200px) / 2));
	align-items: center;
}
.tcs-custom__media { grid-column: 1; }
.tcs-custom__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0;
	aspect-ratio: 16 / 10;
	display: block;
}
.tcs-custom__copy {
	grid-column: 2;
	max-width: 30rem;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}
.tcs-custom__copy h2 { margin: 0 0 0.9rem; }
.tcs-custom__copy p { margin: 0 0 1.4rem; }
.tcs-custom__copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.tcs-custom__grid { grid-template-columns: 1fr; }
	.tcs-custom__copy {
		grid-column: 1;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
		max-width: 40rem;
		margin-inline: auto;
	}
}

/* ------------------------------------------- gallery strip and reviews */

.tcs-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3rem;
	align-items: start;
}
/* A grid item defaults to min-width:auto, so a horizontally scrolling child
   stretches its column instead of scrolling inside it. That one default was
   enough to make the whole document 1002px wide at a 485px viewport and push
   every centred section off screen. */
.tcs-split > * { min-width: 0; }
.tcs-split__title { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--x-large); }
.tcs-split__sub { margin: 0 0 1.1rem; color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.tcs-split__cta { margin: 1.1rem 0 0; }

@media (max-width: 781px) { .tcs-split { grid-template-columns: 1fr; gap: 2.25rem; } }

.tcs-gallery-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}
.tcs-gallery-strip a { display: block; border-radius: var(--tcs-radius-sm); overflow: hidden; }
.tcs-gallery-strip img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform 320ms var(--tcs-ease);
}
.tcs-gallery-strip a:hover img { transform: scale(1.06); }

@media (max-width: 599px) {
	.tcs-gallery-strip {
		grid-auto-flow: column;
		grid-auto-columns: 38vw;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}
	.tcs-gallery-strip a { scroll-snap-align: start; }
}

.tcs-review {
	background: var(--wp--preset--color--blush);
	border-radius: var(--tcs-radius);
	padding: 1.5rem 1.75rem;
	position: relative;
}
.tcs-review__mark {
	position: absolute;
	left: 1rem;
	top: 1.1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	opacity: 0.55;
}
.tcs-review p { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.tcs-review cite { font-style: normal; font-weight: 700; font-size: 0.8125rem; color: var(--wp--preset--color--contrast); }
/* Placeholder styling. It is meant to be obvious in the editor and never shipped live. */
.tcs-review--placeholder { outline: 2px dashed var(--wp--preset--color--wine); outline-offset: 3px; }

.tcs-review-nav {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	margin-top: 0.9rem;
}
.tcs-dots { display: flex; gap: 0.4rem; justify-content: center; }
.tcs-dot {
	width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
	background: var(--wp--preset--color--border); cursor: pointer;
}
.tcs-dot[aria-selected="true"] { background: var(--wp--preset--color--wine); }

/* ---------------------------------------------------------------- footer */

.tcs-footer { background: var(--wp--preset--color--footer); color: var(--wp--preset--color--on-dark); }
.tcs-footer a { color: var(--wp--preset--color--on-dark); text-decoration: none; }
.tcs-footer a:hover { color: #fff; text-decoration: underline; }
.tcs-footer h2, .tcs-footer h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 0.9rem;
}
.tcs-footer__logo img { width: 190px; height: auto; }
.tcs-footer ul { list-style: none; margin: 0; padding: 0; }
.tcs-footer li { margin-bottom: 0.5rem; font-size: 0.875rem; }

.tcs-social { display: flex; gap: 0.55rem; }
.tcs-social a {
	width: 32px; height: 32px; border-radius: 999px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.1);
	transition: background var(--tcs-t) var(--tcs-ease);
}
.tcs-social a:hover { background: var(--wp--preset--color--wine); }
.tcs-social svg { width: 15px; height: 15px; fill: currentColor; }

/* min() rather than a bare max-width: at 375px a 22rem form plus the page gutter
   is wider than the viewport, and that one element was enough to push the whole
   document sideways and clip every centred section. */
.tcs-newsletter form { display: flex; gap: 0; max-width: min(22rem, 100%); }
.tcs-newsletter input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: var(--tcs-radius-sm) 0 0 var(--tcs-radius-sm);
	padding: 0.65rem 0.9rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
	background: #fff;
}
.tcs-newsletter button {
	border: 0;
	border-radius: 0 var(--tcs-radius-sm) var(--tcs-radius-sm) 0;
	padding: 0.65rem 1.1rem;
	background: var(--wp--preset--color--wine);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background var(--tcs-t) var(--tcs-ease);
}
.tcs-newsletter button:hover { background: var(--wp--preset--color--wine-dark); }
.tcs-newsletter__note { font-size: 0.8125rem; margin: 0 0 0.7rem; opacity: 0.85; }

.tcs-visit li { display: flex; gap: 0.6rem; align-items: flex-start; }
.tcs-visit svg { width: 14px; height: 14px; margin-top: 0.3rem; flex: 0 0 auto; opacity: 0.9; }

.tcs-footer__bar {
	background: var(--wp--preset--color--footer-deep);
	font-size: 0.75rem;
}
.tcs-footer__bar p { margin: 0; }

@media (max-width: 991px) {
	.tcs-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 599px) {
	.tcs-footer__cols { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------- page furniture */

.tcs-section-head { text-align: center; margin-bottom: var(--wp--preset--spacing--40); }
.tcs-section-head h2 { margin: 0 0 0.35rem; }
.tcs-section-head p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }

.tcs-page-head {
	background: var(--wp--preset--color--blush);
	text-align: center;
	padding-block: var(--wp--preset--spacing--60);
}

/* Gallery pages use a masonry-free equal grid so rows never leave ragged gaps. */
.tcs-grid-gallery .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tcs-ctaband {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}
.tcs-ctaband h2 { margin: 0 0 0.3rem; font-size: var(--wp--preset--font-size--x-large); }
.tcs-ctaband p { margin: 0; color: var(--wp--preset--color--body); font-size: 0.9375rem; }

/* ------------------------------------------------------------ utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
}

/* The header call to action is a size down from the page buttons, as in the mock. */
.tcs-order { padding: 0.62rem 1.35rem; font-size: 0.8125rem; }

.tcs-note__heart { display: block; margin-top: 0.15rem; font-size: 1.2em; }

/* --------------------------------------------------------- motion, print */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.tcs-tile a:hover img,
	.tcs-gallery-strip a:hover img,
	.tcs-product:hover { transform: none; }
}

@media print {
	.tcs-header, .tcs-announce, .tcs-footer, .tcs-drawer, .tcs-scrim { display: none !important; }
}