/*
Theme Name: Tandre
Theme URI: https://tandrefruit.co.za
Author: Mark Norman
Author URI: https://marknorman.co.za
Description: Block theme for Tandre Fruit Supply — a Southern African fruit supplier. Self-hosted fonts, no page builder, brand palette in theme.json.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.5.12
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tandre
Tags: block-theme, one-column, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing
*/

/* -------------------------------------------------------------------------
   Shared
   ---------------------------------------------------------------------- */

.tandre-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.24em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
}

.tandre-icon {
	width: 34px;
	height: 34px;
	flex: none;
	background-color: var(--wp--preset--color--green);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.tandre-icon--sprout {
	-webkit-mask-image: url('assets/images/icon-sprout.svg');
	mask-image: url('assets/images/icon-sprout.svg');
}
.tandre-icon--box {
	-webkit-mask-image: url('assets/images/icon-box.svg');
	mask-image: url('assets/images/icon-box.svg');
}
.tandre-icon--cold {
	-webkit-mask-image: url('assets/images/icon-cold.svg');
	mask-image: url('assets/images/icon-cold.svg');
}
.tandre-icon--doc {
	-webkit-mask-image: url('assets/images/icon-doc.svg');
	mask-image: url('assets/images/icon-doc.svg');
}
.tandre-icon--shield {
	-webkit-mask-image: url('assets/images/icon-shield.svg');
	mask-image: url('assets/images/icon-shield.svg');
}
.tandre-icon--volume {
	-webkit-mask-image: url('assets/images/icon-volume.svg');
	mask-image: url('assets/images/icon-volume.svg');
}
.tandre-icon--phone {
	-webkit-mask-image: url('assets/images/icon-phone.svg');
	mask-image: url('assets/images/icon-phone.svg');
}
.tandre-icon--mail {
	-webkit-mask-image: url('assets/images/icon-mail.svg');
	mask-image: url('assets/images/icon-mail.svg');
}
.tandre-icon--pin {
	-webkit-mask-image: url('assets/images/icon-pin.svg');
	mask-image: url('assets/images/icon-pin.svg');
}

.tandre-icon--small {
	width: 24px;
	height: 24px;
}

/* Sections carry their own padding, so no block gap between them, between
   header, main and footer, or after a section heading row. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull,
.tandre-section-head + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull {
	margin-block-end: 0;
}

/* Photos that crop to a fixed height rather than following their own ratio. */
.tandre-photo img {
	width: 100%;
	height: 480px;
	object-fit: cover;
}

/* Tablets: the 36px root padding from theme.json leaves content tight against
   the edges once the layout stops stacking. */
@media (min-width: 600px) and (max-width: 1319px) {
	body {
		--wp--style--root--padding-left: 3.5rem;
		--wp--style--root--padding-right: 3.5rem;
	}
}

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

.tandre-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tandre-header .wp-block-site-logo img {
	height: 58px;
	width: auto;
}

.tandre-header .wp-block-navigation {
	gap: 2.6rem;
}

.tandre-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.tandre-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--red);
}

.tandre-header .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.4rem;
}

/* A menu link given the class tandre-nav-call only appears in the mobile
   menu overlay, so the number is one tap away once the button is hidden.
   The footer shares the menu, so hide it there too. */
.wp-block-navigation .tandre-nav-call {
	display: none;
}

.tandre-header .wp-block-navigation__responsive-container.is-menu-open .tandre-nav-call {
	display: flex;
}

.tandre-header .tandre-nav-call .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
	font-weight: 600;
}

/* The logo, full menu and call button only fit on one row from 1000px.
   Below that, collapse the menu behind the hamburger (core only does this
   under 600px) and drop the button; the number is in the menu overlay, the
   footer and the Contact page. */
@media (max-width: 999px) {
	.tandre-header .wp-block-buttons {
		display: none;
	}

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

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

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.tandre-hero {
	min-height: 700px;
}

.tandre-hero .tandre-eyebrow {
	color: var(--wp--preset--color--orange-light);
}

.tandre-hero h1 {
	color: var(--wp--preset--color--base);
	max-width: 640px;
}

.tandre-hero p:not(.tandre-eyebrow) {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.1875rem;
	max-width: 560px;
}

/* -------------------------------------------------------------------------
   Trust strip
   ---------------------------------------------------------------------- */

.tandre-trust {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tandre-trust__item {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}

.tandre-trust__item h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.35rem;
}

.tandre-trust__item p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Section heading row
   ---------------------------------------------------------------------- */

.tandre-section-head {
	align-items: flex-end;
	margin-bottom: var(--wp--preset--spacing--50);
}

.tandre-section-head p:not(.tandre-eyebrow) {
	max-width: 27rem;
}

/* -------------------------------------------------------------------------
   Fruit cards
   ---------------------------------------------------------------------- */

.tandre-cards .wp-block-post-template {
	gap: 2rem;
}

/* With four fruit lines, three columns would leave one card alone on a
   second row: show four across on wide screens and two by two below that.
   Blog listings keep three columns. */
@media (min-width: 1200px) {
	.tandre-cards .wp-block-post-template.is-layout-grid:has(> .type-tandre_fruit:nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tandre-cards .wp-block-post-template:has(> .type-tandre_fruit:nth-child(4)) .tandre-card__body {
		padding: 1.6rem 1.5rem 1.8rem;
	}
}

@media (min-width: 1025px) and (max-width: 1199px) {
	.tandre-cards .wp-block-post-template.is-layout-grid:has(> .type-tandre_fruit:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Stretch each card to the height of its row, so the season lines up
   across cards whose text runs to different lengths. */
.tandre-cards .wp-block-post-template > .wp-block-post {
	display: flex;
	flex-direction: column;
}

.tandre-cards .wp-block-post > .tandre-card {
	flex: 1 1 auto;
}

.tandre-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* The figure sizes to its image by default, so a portrait photo would sit
   narrow inside the card. */
.tandre-card .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
}

.tandre-card .wp-block-post-featured-image img {
	height: 250px;
	width: 100%;
	object-fit: cover;
}

.tandre-card__body {
	padding: 1.9rem 2rem 2.1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tandre-card__body > * + * {
	margin-block-start: 0;
}

.tandre-card__body h3,
.tandre-card__body .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 0.7rem;
}

.tandre-card__body p,
.tandre-card__body .wp-block-post-excerpt__excerpt {
	font-size: 0.97rem;
	line-height: 1.65;
	margin-bottom: 0;
}

.tandre-season {
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 0.55rem;
}

.tandre-card__body .tandre-season p,
.tandre-season p {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

.tandre-season__value {
	color: var(--wp--preset--color--ink);
}

/* The word "Season" takes the colour set on the fruit entry, which is the
   same colour as its row in the calendar. */
.tandre-season__word {
	color: var(--wp--preset--color--green);
}

.tandre-fruit-color-orange .tandre-season__word {
	color: var(--wp--preset--color--orange);
}

.tandre-fruit-color-red .tandre-season__word {
	color: var(--wp--preset--color--red);
}

.tandre-fruit-color-green .tandre-season__word {
	color: var(--wp--preset--color--green);
}

.tandre-fruit-color-ink .tandre-season__word {
	color: var(--wp--preset--color--ink);
}

.tandre-fruit-color-plum .tandre-season__word {
	color: var(--wp--preset--color--plum);
}

/* -------------------------------------------------------------------------
   Season calendar block
   ---------------------------------------------------------------------- */

/* The table keeps its 12 columns on a phone and scrolls sideways inside
   this container rather than squashing. */
.tandre-calendar-scroll {
	overflow-x: auto;
}

.tandre-calendar {
	width: 100%;
	border-collapse: collapse;
}

.tandre-calendar__note {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 1.4rem;
	color: var(--wp--preset--color--body);
}

.tandre-calendar th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: center;
}

.tandre-calendar th[scope='col']:first-child {
	text-align: left;
	width: 230px;
}

.tandre-calendar th[scope='row'] {
	text-align: left;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	white-space: nowrap;
}

.tandre-calendar td {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
	height: 4rem;
}

.tandre-calendar__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 0.7rem;
	vertical-align: middle;
}

.tandre-calendar__bar {
	display: block;
	height: 14px;
	background: currentColor;
}

.tandre-calendar__bar--start {
	border-radius: 99px 0 0 99px;
	margin-left: 10%;
}

.tandre-calendar__bar--end {
	border-radius: 0 99px 99px 0;
	margin-right: 10%;
}

.tandre-calendar__bar--start.tandre-calendar__bar--end {
	border-radius: 99px;
}

.tandre-calendar__empty {
	padding: 1.5rem 0;
	color: var(--wp--preset--color--body);
}

/* -------------------------------------------------------------------------
   Why buyers (dark section)
   ---------------------------------------------------------------------- */

.tandre-why {
	color: rgba(255, 255, 255, 0.82);
}

.tandre-why .tandre-eyebrow {
	color: var(--wp--preset--color--orange-light);
}

.tandre-why h2,
.tandre-why h3 {
	color: var(--wp--preset--color--base);
}

.tandre-why img {
	border-radius: 3px;
	width: 100%;
	aspect-ratio: 10 / 11;
	object-fit: cover;
	object-position: 80% center;
}

.tandre-why .tandre-icon {
	background-color: var(--wp--preset--color--orange-light);
}

.tandre-why__item {
	display: flex;
	gap: 1.4rem;
	padding: 1.6rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tandre-why__item:last-of-type {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tandre-why__item h3 {
	font-size: 1.45rem;
	margin-bottom: 0.35rem;
}

.tandre-why__item p {
	font-size: 0.97rem;
	line-height: 1.65;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

.tandre-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tandre-contact-list li {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	padding: 1.1rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.tandre-contact-list li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tandre-contact-list a {
	color: inherit;
	text-decoration: none;
}

.tandre-contact-list a:hover {
	text-decoration: underline;
}

.tandre-form-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 2.8rem 3rem;
}

.tandre-form-card label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.6rem;
}

.tandre-form-card input[type='text'],
.tandre-form-card input[type='email'],
.tandre-form-card input[type='tel'],
.tandre-form-card input[type='url'],
.tandre-form-card select,
.tandre-form-card textarea {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: #fdfcf8;
	border: 1px solid #d8d0bd;
	border-radius: 2px;
	padding: 0.85rem 1rem;
}

.tandre-form-card textarea {
	min-height: 130px;
}

.tandre-form-card h2,
.tandre-form-card h3 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 1.8rem;
}

.tandre-form-card button,
.tandre-form-card input[type='submit'] {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	padding: 1.1rem 1.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.tandre-form-card button:hover,
.tandre-form-card input[type='submit']:hover {
	background: #960a10;
}

/* Fluent Forms, inside the card only. The plugin's own markup gets the same
   field, label and button treatment as the rest of the site, and the short
   fields sit two across the way the design has them. */
.tandre-form-card .frm-fluent-form {
	/* Fluent Forms styles itself from these variables, set on :root. Setting
	   them here is what turns its button red and its fields square. */
	--fluentform-primary: var(--wp--preset--color--red);
	--fluentform-secondary: var(--wp--preset--color--ink);
	--fluentform-border-color: #d8d0bd;
	--fluentform-border-radius: 2px;
}

/* Fluent's own field rule outranks the element selectors above for
   textareas and selects, so restate the essentials at higher specificity. */
.tandre-form-card .frm-fluent-form .ff-el-form-control {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: #fdfcf8;
	padding: 0.85rem 1rem;
}

.tandre-form-card .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--body);
	opacity: 0.7;
}

.tandre-form-card .frm-fluent-form > fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.2rem;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.tandre-form-card .ff-el-group {
	margin-bottom: 1.3rem;
}

/* First and last name share one grid row; match the grid's gap so their
   edges line up with the fields below. */
.tandre-form-card .frm-fluent-form .ff-name-field-wrapper .ff-t-container {
	gap: 1.2rem;
}

/* Where the form comes from a shortcode, WordPress can wrap the hidden
   fields in a <p> or add <br>s. Keep those out of the two-column grid. */
.tandre-form-card .frm-fluent-form > fieldset > p {
	display: contents;
}

.tandre-form-card .frm-fluent-form > fieldset > br {
	display: none;
}

.tandre-form-card .frm-fluent-form > fieldset > .ff-name-field-wrapper,
.tandre-form-card .frm-fluent-form > fieldset > .ff-el-group:has(textarea),
.tandre-form-card .frm-fluent-form > fieldset > .ff_submit_btn_wrapper,
.tandre-form-card .frm-fluent-form > fieldset > .ff-el-group:has(.ff-btn-submit) {
	grid-column: 1 / -1;
}

.tandre-form-card .ff-el-input--label label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.tandre-form-card .ff-el-input--label.ff-el-is-required label::after {
	color: var(--wp--preset--color--red);
}

.tandre-form-card .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--green);
	outline: none;
	box-shadow: none;
}

.tandre-form-card .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--red);
}

.tandre-form-card .text-danger,
.tandre-form-card .error {
	color: var(--wp--preset--color--red);
	font-size: 0.8rem;
	letter-spacing: 0;
	text-transform: none;
}

.tandre-form-card .ff-btn-submit {
	background: var(--wp--preset--color--red);
	border: 0;
	border-radius: 2px;
	padding: 1.28rem 1.875rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.tandre-form-card .ff-btn-submit:hover {
	--fluentform-primary: #960a10;
	background: #960a10;
}

.tandre-form-card .ff-message-success {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--green);
	border-radius: 2px;
	padding: 1.2rem 1.4rem;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {
	.tandre-form-card .frm-fluent-form > fieldset {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.tandre-footer {
	color: rgba(255, 255, 255, 0.7);
}

.tandre-footer h2,
.tandre-footer h3,
.tandre-footer h4 {
	color: var(--wp--preset--color--base);
}

.tandre-footer h4 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 1.4rem;
}

.tandre-footer p,
.tandre-footer li {
	font-size: 0.94rem;
	line-height: 1.7;
}

.tandre-footer .wp-block-navigation {
	gap: 0.6rem;
}

.tandre-footer .wp-block-navigation .wp-block-navigation-item__content,
.tandre-footer a {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.94rem;
}

.tandre-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.tandre-footer a:hover {
	color: var(--wp--preset--color--base);
}

.tandre-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}

/* The site logo is a dark-on-transparent PNG; invert it for the dark footer. */
.tandre-logo-invert img {
	filter: brightness(0) invert(1);
	height: 50px;
	width: auto;
}

/* -------------------------------------------------------------------------
   Posts
   ---------------------------------------------------------------------- */

.tandre-post-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* -------------------------------------------------------------------------
   Tablets
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Core only stacks columns below 782px, which leaves these sections
	   cramped on a tablet. */
	.wp-block-post-content .wp-block-columns:not(.tandre-section-head):not(.tandre-trust__columns):not(.tandre-steps) {
		flex-direction: column;
	}

	.wp-block-post-content .wp-block-columns:not(.tandre-section-head):not(.tandre-trust__columns):not(.tandre-steps) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.tandre-trust .wp-block-columns,
	.tandre-steps {
		flex-wrap: wrap;
	}

	.tandre-service {
		padding: 1.9rem;
	}

	.tandre-trust .wp-block-column,
	.tandre-steps > .wp-block-column {
		flex-basis: calc(50% - 1.2rem) !important;
	}

	.tandre-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tandre-photo img {
		height: 380px;
	}
}

/* -------------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.tandre-hero {
		min-height: 520px;
	}

	/* The desktop gradient is an inline style on the overlay, so the flat
	   mobile overlay has to override it. */
	.tandre-hero .wp-block-cover__background {
		background-image: none !important;
		background-color: rgba(22, 26, 10, 0.74) !important;
	}

	.tandre-section-head {
		gap: 1.2rem;
	}

	.tandre-form-card {
		padding: 1.8rem;
	}

	.tandre-photo img {
		height: 300px;
	}

	.tandre-trust .wp-block-column,
	.tandre-steps > .wp-block-column {
		flex-basis: 100% !important;
	}

	.tandre-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tandre-calendar {
		min-width: 620px;
	}

	.tandre-calendar th[scope='col']:first-child {
		width: 140px;
	}

	.tandre-calendar th[scope='row'] {
		font-size: 0.9rem;
	}
}

/* -------------------------------------------------------------------------
   Inner pages
   ---------------------------------------------------------------------- */

.tandre-page-header__intro {
	max-width: 40rem;
	margin-bottom: 0;
}

.tandre-steps .tandre-step__number {
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--wp--preset--color--orange);
	margin-bottom: 1rem;
}

.tandre-steps h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.5rem;
}

.tandre-steps p:not(.tandre-step__number) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin: 0;
}

.tandre-cta {
	color: rgba(255, 255, 255, 0.82);
}

.tandre-cta h2 {
	color: var(--wp--preset--color--base);
}

.tandre-cta p {
	margin-bottom: 0;
}

.tandre-service {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 2.4rem 2.4rem 2.6rem;
	height: 100%;
}

.tandre-service .tandre-icon {
	margin-bottom: 1.4rem;
}

.tandre-service h3 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 0.7rem;
}

.tandre-service p {
	font-size: 0.97rem;
	line-height: 1.65;
	margin: 0;
}

.tandre-services {
	margin-bottom: var(--wp--preset--spacing--40);
}

.tandre-services:last-of-type {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Blog
   ---------------------------------------------------------------------- */

.tandre-card .tandre-post-meta {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin-bottom: 0.6rem;
}

.tandre-card .tandre-read-more {
	margin-top: auto;
	padding-top: 1.1rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	text-decoration: none;
	align-self: flex-start;
}

.tandre-card .tandre-read-more:hover {
	text-decoration: underline;
}

.tandre-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tandre-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--red);
}

.tandre-post-nav {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tandre-pagination {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

.tandre-pagination .page-numbers.current {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Contact details rows
   ---------------------------------------------------------------------- */

.tandre-contact-row {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	padding: 1.1rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.tandre-contact-row:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tandre-contact-row p {
	margin: 0;
}

.tandre-contact-row a {
	color: inherit;
	text-decoration: none;
}

.tandre-contact-row a:hover {
	text-decoration: underline;
}

#what-we-supply-btn a {
	line-height: 25px;
}

.tandre-trust__item {
	align-items: start;
}

.tandre-trust__item .wp-block-group {
	margin-top: 0;
}

#home-about-button {
	line-height: 30px;
}

.tandre-card .wp-block-post-excerpt {
	padding-bottom: 10px;
}

.tandre-why__item {
	padding-bottom: 0;
}

/* Items are spaced by the block gap above each one, so the last item needs
   the same space before its bottom border. */
.tandre-why__item:last-of-type {
	padding-bottom: var(--wp--style--block-gap, 1.5rem);
}

.tandre-why__item .wp-block-group{
	margin-top: 0;
}

p.footer-address {
	font-size: 12px;
}

/* Hero entrance: the photo settles from a slight zoom, the gradient sweeps
   in from the left, then the text rises. Skipped for visitors who have
   reduced motion switched on. */
@media (prefers-reduced-motion: no-preference) {
	.tandre-hero .wp-block-cover__image-background {
		animation: tandre-hero-settle 9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.tandre-hero .wp-block-cover__background {
		animation: tandre-hero-shade 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.tandre-hero__content > * {
		animation: tandre-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.tandre-hero__content > :nth-child(1) { animation-delay: 0.3s; }
	.tandre-hero__content > :nth-child(2) { animation-delay: 0.45s; }
	.tandre-hero__content > :nth-child(3) { animation-delay: 0.6s; }
	.tandre-hero__content > :nth-child(4) { animation-delay: 0.75s; }
}

@keyframes tandre-hero-settle {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

@keyframes tandre-hero-shade {
	from { opacity: 0; transform: translateX(-12%); }
	to   { opacity: 1; transform: none; }
}

@keyframes tandre-hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}