/*
Theme Name: Tequegusta
Theme URI: https://mayoristas.tequegusta.com
Author: TequeGusta
Author URI: https://mayoristas.tequegusta.com
Description: Block theme (FSE) for the TequeGusta B2B wholesale landing page.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tequegusta
Tags: block-theme, full-site-editing, landing-page, one-column, accessibility-ready
*/

/* ==========================================================================
   Every value below resolves to a token declared in theme.json.
   No literal colors, sizes or spacings live in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

/*
 * The source design relies on border-box everywhere. WordPress only applies it
 * to its own block markup, so any element authored inside a wp:html block stays
 * content-box — and anything with `width: 100%` plus padding then overflows its
 * container by exactly the padding and border. That is what pushed the form
 * inputs 36px past their grid cells while the selects, which the UA already
 * renders as border-box, sat at the correct width.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	/* `clip` — not `hidden`. `overflow-x: hidden` turns the body into a scroll
	   container, which silently disables position:sticky on the header. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* Top-level regions butt against each other; every section carries its own
   vertical padding, so the root block gap would only leak the page background
   as a stripe between the header and the hero. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Template parts must not generate a box: a wrapper only as tall as the header
   would end the sticky header's containing block immediately. With
   `display: contents` the <header> becomes a direct child of .wp-site-blocks
   and stays stuck for the whole page. */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

h1, h2, h3, p {
	text-wrap: pretty;
}

:target,
[id] {
	scroll-margin-top: var(--wp--preset--spacing--24);
}

/* Wider gutters from tablet up. */
@media (min-width: 48rem) {
	:root {
		--wp--style--root--padding-left: var(--wp--custom--gutter--desktop);
		--wp--style--root--padding-right: var(--wp--custom--gutter--desktop);
	}
}

/* Visible focus on every interactive element, including block-generated markup. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--wp--custom--border--chunky) solid var(--wp--preset--color--red-600);
	outline-offset: var(--wp--custom--border--regular);
	border-radius: var(--wp--custom--radius--xs);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   2. Shared primitives
   -------------------------------------------------------------------------- */

/* Eyebrow — small uppercase label above a heading. */
.tg-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--red-600);
}

.tg-eyebrow--on-navy {
	color: var(--wp--preset--color--mustard);
}

/* Pill badge. */
.tg-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	background: var(--wp--preset--color--mustard);
	color: var(--wp--preset--color--navy);
}

.tg-badge--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tg-badge--red {
	background: var(--wp--preset--color--red-600);
	color: var(--wp--preset--color--white);
}

.tg-badge--outline {
	background: transparent;
	color: var(--wp--preset--color--mustard);
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--mustard);
}

/* Section shells. */
.tg-section {
	padding-block: var(--wp--custom--section--base);
}

.tg-section--tight {
	padding-block: var(--wp--custom--section--tight);
}

.tg-section--loose {
	padding-block: var(--wp--custom--section--loose);
}

/* Section heading group: eyebrow + title + note. */
.tg-heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--10);
}

.tg-heading > * {
	margin-block: 0;
}

.tg-heading__note {
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--body);
}

/* --------------------------------------------------------------------------
   3. Buttons — core button block, sized per the design system
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	min-height: var(--wp--custom--control--md);
	transition:
		background var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(var(--wp--custom--motion--hover-lift));
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-button .wp-block-button__link:active {
	transform: scale(var(--wp--custom--motion--press-scale));
	box-shadow: var(--wp--custom--shadow--press);
}

.wp-block-button.is-size-lg .wp-block-button__link {
	min-height: var(--wp--custom--control--lg);
	padding-inline: var(--wp--preset--spacing--8);
	font-size: var(--wp--preset--font-size--body);
}

.wp-block-button.is-size-sm .wp-block-button__link {
	min-height: var(--wp--custom--control--sm);
	padding-inline: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
}

/* Secondary — navy fill. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-color: transparent;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy-500);
}

/* Outline — navy on light surfaces. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy-050);
	color: var(--wp--preset--color--navy);
}

/* Ghost — outline variant that sits on the navy hero. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--mustard);
	border-color: var(--wp--preset--color--mustard);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--mustard);
	color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.tg-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--md);
	padding-block: var(--wp--preset--spacing--4);
}

.tg-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	text-decoration: none;
}

.tg-header__brand:hover {
	text-decoration: none;
}

.tg-header__brand img {
	height: 2.375rem;
	width: auto;
}

.tg-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.tg-hero {
	background: var(--wp--preset--gradient--night-fry);
	color: var(--wp--preset--color--white);
	overflow: hidden;
}

.tg-hero :is(h1, h2) {
	color: var(--wp--preset--color--mustard);
}

.tg-hero__lead {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--lg);
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
}

.tg-hero__art img {
	filter: drop-shadow(0 1.875rem 2.75rem var(--wp--custom--scrim--overlay));
}

@media (prefers-reduced-motion: no-preference) {
	.tg-hero__art img {
		animation: tg-float 7s var(--wp--custom--motion--ease-in-out) infinite;
	}
}

@keyframes tg-float {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-0.875rem) rotate(-1deg); }
}

/* Hero stat row. */
.tg-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-stats > li {
	display: flex;
	flex-direction: column;
}

.tg-stats b {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--display);
	color: var(--wp--preset--color--mustard);
}

.tg-stats span {
	font-size: var(--wp--preset--font-size--sm);
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
}

/* --------------------------------------------------------------------------
   6. Marquee
   -------------------------------------------------------------------------- */

.tg-marquee {
	background: var(--wp--preset--color--mustard);
	border-block: var(--wp--custom--border--chunky) solid var(--wp--preset--color--navy);
	overflow: hidden;
}

.tg-marquee__track {
	display: flex;
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
	.tg-marquee__track {
		animation: tg-marquee 28s linear infinite;
	}
}

.tg-marquee__group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

@keyframes tg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   7. Product cards
   -------------------------------------------------------------------------- */

.tg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
}

@media (min-width: 40rem) {
	.tg-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
	.tg-cards { grid-template-columns: repeat(3, 1fr); }
}

.tg-product {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--navy-100);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--sm);
	transition:
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.tg-product:hover,
.tg-product:focus-within {
	box-shadow: var(--wp--preset--shadow--lg);
	border-color: var(--wp--preset--color--mustard);
	transform: translateY(var(--wp--custom--motion--hover-lift));
}

.tg-product__media {
	position: relative;
	display: grid;
	place-items: center;
	/* Fixed, not min-height: with only a lower bound the row grew to the photo's
	   natural height, so cards with a photo pushed their copy out of line with
	   the rest of the grid and object-fit never got to crop anything. */
	height: 11.875rem;
	padding: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--mustard-100);
	overflow: hidden;
}

.tg-product__media img {
	width: auto;
	max-width: 72%;
	max-height: 9.5rem;
	object-fit: contain;
}

/*
 * A photo uploaded from the media library fills the frame. The bundled brand
 * illustration keeps floating on the mustard field instead, which is how that
 * artwork is drawn to sit.
 */
.tg-product__media--photo {
	padding: 0;
}

/*
 * Pinned to the box rather than sized with height: 100%. As a stretched grid
 * item the percentage kept resolving against an indefinite area and fell back
 * to the image's own aspect ratio, so the photo grew past the frame and covered
 * the copy underneath. inset: 0 gives object-fit a definite box to crop into.
 */
.tg-product__media--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.tg-product__badge {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
}

.tg-product__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6);
	flex: 1;
}

.tg-product__body > * {
	margin-block: 0;
}

.tg-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.tg-product__desc {
	flex: 1;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grey-600);
}

.tg-product__specs {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding-block: var(--wp--preset--spacing--4);
	border-block: var(--wp--custom--border--hairline) solid var(--wp--preset--color--navy-100);
}

.tg-product__specs > div {
	display: flex;
	flex-direction: column;
}

.tg-product__specs dt {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-300);
}

.tg-product__specs dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */

.tg-about {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tg-about :is(h1, h2, h3) {
	color: var(--wp--preset--color--mustard);
}

.tg-about p {
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
}

.tg-about p + p {
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
	font-size: var(--wp--preset--font-size--body);
}

.tg-about__frame {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--10);
	background: var(--wp--preset--gradient--mustard);
	border-radius: var(--wp--custom--radius--xl);
}

.tg-about__frame img {
	width: 88%;
	height: auto;
	filter: drop-shadow(0 1.5rem 1.875rem var(--wp--custom--scrim--overlay));
}

.tg-about__frame img.tg-about__emblem {
	position: absolute;
	right: calc(var(--wp--preset--spacing--4) * -1);
	bottom: calc(var(--wp--preset--spacing--6) * -1);
	width: 7.5rem;
	filter: drop-shadow(0 var(--wp--preset--spacing--2) var(--wp--preset--spacing--4) var(--wp--custom--scrim--overlay));
}

/* --------------------------------------------------------------------------
   9. Process steps
   -------------------------------------------------------------------------- */

.tg-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tg-step;
}

@media (min-width: 48rem) {
	.tg-steps { grid-template-columns: repeat(3, 1fr); }
}

.tg-step {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	border-top: var(--wp--preset--spacing--1) solid var(--wp--preset--color--mustard);
	box-shadow: var(--wp--preset--shadow--sm);
}

.tg-step > * {
	margin-block: 0;
}

.tg-step__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	line-height: var(--wp--custom--line-height--display);
	/* Decorative: the <ol> carries the order and the number is aria-hidden,
	   so the design's pale mustard is kept rather than darkened for contrast. */
	color: var(--wp--preset--color--mustard-300);
}

.tg-step__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.tg-step p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grey-600);
}

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */

.tg-contact {
	background: var(--wp--preset--color--navy-050);
	border-top: var(--wp--custom--border--chunky) solid var(--wp--preset--color--navy);
}

.tg-contact__panel {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--8);
	box-shadow: var(--wp--preset--shadow--md);
}

@media (min-width: 48rem) {
	.tg-contact__panel { padding: var(--wp--preset--spacing--12); }
}

.tg-contact__intro {
	max-width: 56ch;
	color: var(--wp--preset--color--grey-600);
}

/* Form */
.tg-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--5);
}

@media (min-width: 48rem) {
	.tg-form { grid-template-columns: 1fr 1fr; }
}

.tg-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.tg-field--wide {
	grid-column: 1 / -1;
}

.tg-field > span,
.tg-field > label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--navy);
}

.tg-field input,
.tg-field select,
.tg-field textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--navy-100);
	transition:
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-out);
}

.tg-field input,
.tg-field select {
	height: var(--wp--custom--control--md);
	padding-inline: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--pill);
}

.tg-field select {
	appearance: none;
	cursor: pointer;
	/* Caret drawn with the navy token, no external asset. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--navy) 50%),
		linear-gradient(135deg, var(--wp--preset--color--navy) 50%, transparent 50%);
	background-position:
		right var(--wp--preset--spacing--5) center,
		right var(--wp--preset--spacing--4) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: var(--wp--preset--spacing--10);
}

.tg-field textarea {
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--md);
	resize: vertical;
	line-height: var(--wp--custom--line-height--body);
}

.tg-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--navy);
	box-shadow: var(--wp--custom--shadow--focus-ring);
}

.tg-field :is(input, select, textarea):focus-visible {
	outline: none;
}

.tg-field__error {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--red-700);
}

.tg-form__footer {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--2);
}

.tg-form__legal {
	max-width: 44ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--grey-600);
}

/* Honeypot — off-screen, never shown to sighted or assistive users. */
.tg-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Submitted state */
.tg-sent {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--mustard-100);
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--mustard);
	border-radius: var(--wp--custom--radius--lg);
}

.tg-sent > * {
	margin-block: 0;
}

.tg-sent__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.tg-sent p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grey-800);
}

.tg-error {
	border-color: var(--wp--preset--color--red-600);
	background: var(--wp--preset--color--white);
}

/* Aside */
.tg-aside {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

.tg-card {
	padding: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

.tg-card > * {
	margin-block: 0;
}

.tg-card--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.tg-card--cream {
	background: var(--wp--preset--color--cream);
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--navy-100);
}

.tg-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--5);
}

.tg-card--navy .tg-card__title {
	color: var(--wp--preset--color--mustard);
}

.tg-card--cream .tg-card__title {
	color: var(--wp--preset--color--navy);
}

.tg-card__desc {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grey-600);
}

/* Contact detail list */
.tg-contacts {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.tg-contacts li {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	align-items: flex-start;
}

.tg-card--navy .tg-contacts {
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
}

.tg-card--navy .tg-contacts a {
	color: var(--wp--preset--color--mustard);
}

/* Inline SVG icons inherit the surrounding color. */
.tg-icon {
	flex: 0 0 auto;
	width: var(--wp--preset--spacing--5);
	height: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--mustard);
}

.tg-links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.tg-aside__art {
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--6);
	background: var(--wp--preset--gradient--appetite);
	border-radius: var(--wp--custom--radius--lg);
}

.tg-aside__art img {
	height: 11.25rem;
	width: auto;
	filter: drop-shadow(0 var(--wp--preset--spacing--4) var(--wp--preset--spacing--6) var(--wp--custom--scrim--overlay));
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.tg-footer {
	background: var(--wp--preset--color--navy-800);
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	padding-block: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
}

.tg-footer img {
	height: 2.125rem;
	width: auto;
}

.tg-footer a {
	color: var(--wp--preset--color--mustard);
}

/* --------------------------------------------------------------------------
   12. Two-column layouts (mobile-first: stacked, side-by-side from lg)
   -------------------------------------------------------------------------- */

.tg-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--12);
	align-items: center;
}

@media (min-width: 64rem) {
	.tg-split--hero    { grid-template-columns: 1.15fr 0.85fr; }
	.tg-split--about   { grid-template-columns: 0.9fr 1.1fr; gap: var(--wp--preset--spacing--16); }
	.tg-split--contact { grid-template-columns: 1.25fr 0.75fr; align-items: start; }
}

.tg-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}

.tg-stack > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   13. Header row and navigation
   -------------------------------------------------------------------------- */

.tg-header__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.tg-header .tg-nav {
	flex: 1;
	min-width: 0;
}

/*
 * Core switches core/navigation from the overlay to the inline menu at 600px.
 * This design only has room for four uppercase labels next to the wordmark and
 * the CTA from 72rem up, so the overlay is kept for the whole band below it.
 *
 * Display is stated for both bands rather than only patching the middle one:
 * core's selectors and ours land on the same specificity in places, and relying
 * on stylesheet order there is how this broke the first time.
 */
@media (max-width: 71.999rem) {
	.tg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

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

	/* While the overlay is the only nav affordance, the trigger sits right. */
	.tg-header .tg-nav {
		justify-content: flex-end;
	}
}

@media (min-width: 72rem) {
	.tg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Hamburger and close trigger: brand colour, full tap target. Deliberately no
   `display` here — the media queries above own that. */
.tg-header .wp-block-navigation__responsive-container-open,
.tg-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--control--md);
	height: var(--wp--custom--control--md);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--circle);
	background: transparent;
	color: var(--wp--preset--color--mustard);
	cursor: pointer;
	transition: background var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-out);
}

.tg-header .wp-block-navigation__responsive-container-open:hover,
.tg-header .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--navy-500);
}

/* Overlay panel. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--6) var(--wp--custom--gutter--mobile);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--8);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--5);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control--md);
	font-size: var(--wp--preset--font-size--subtitle);
}

/*
 * Two CTAs, one visible at a time: the row one on desktop, the overlay one on
 * mobile. Rendering both keeps each in its natural place instead of moving a
 * single node between containers with JavaScript.
 *
 * Both selectors are scoped to .tg-header so they outrank core's
 * `body .is-layout-flex { display: flex }`.
 */
.tg-header .tg-header__cta {
	display: none;
	margin-inline-start: auto;
}

.tg-header .tg-nav__cta {
	display: flex;
}

@media (min-width: 72rem) {
	.tg-header .tg-header__cta {
		display: flex;
	}

	.tg-header .tg-nav__cta {
		display: none;
	}
}

.tg-footer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
}

/* --------------------------------------------------------------------------
   14. Small structural helpers
   -------------------------------------------------------------------------- */

/* Buttons rendered inside wp:html blocks must not depend on core's block
   stylesheet being enqueued for that page. */
.wp-block-button {
	display: inline-block;
}

.tg-hero__art {
	display: grid;
	place-items: center;
}

.tg-hero__art img,
.tg-about__frame > img {
	max-width: 100%;
	height: auto;
}

.tg-contact__panel > .tg-eyebrow + h2 {
	margin-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
}

.tg-contact__panel > .tg-contact__intro {
	margin-block: 0 var(--wp--preset--spacing--8);
}

.tg-contact__panel h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}