.zerodigital-footer-columns {
	max-width: var(--wp--style--global--wide-size, 1600px);
	margin-inline: auto;
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2-xl, 3.5rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
	color: var(--wp--preset--color--background, #fff);
	/* Footer copy sits a step down from body size — a footer is reference text,
	 * not reading text, and the smaller scale reads cleaner and more compact. */
	font-size: 0.9375rem;
	line-height: 1.6;

	/*
	 * Logo bounding box. Capping height alone — which is what this block did —
	 * makes the rendered AREA scale with the logo's aspect ratio: at 2.5rem a 3:1
	 * wordmark comes out 120px wide while a 1:3 stacked mark comes out 13px, so
	 * long logos looked oversized and tall ones looked like stamps. Each shape
	 * instead gets a box proportioned for it, and PHP picks the shape from the
	 * file's own dimensions (zerodigital_image_shape()).
	 *
	 * Heights follow h ∝ r^-0.32 — two thirds of the way from equal-height (the
	 * old bug) to equal-area. Perceived size tracks √(w·h), which lands within
	 * ~5% across all three buckets. Full equal-area was rejected: it makes
	 * wordmarks unreadably short, and a wordmark fairly needs more area than a
	 * compact mark.
	 *
	 * These defaults are the SQUARE box, so an image whose dimensions can't be
	 * read (SVGs often report none) still gets a sane fixed box.
	 */
	--zd-fc-logo-h: 3rem;
	--zd-fc-logo-w: 6rem;
	--zd-fc-logo-scale: 1;
}

/* Shape and scale modifiers. These MUST stay after the base rule: both are
 * specificity (0,1,0), so source order alone decides which wins. */
.zerodigital-footer-columns--logo-ratio-wide {
	--zd-fc-logo-h: 2rem;
	--zd-fc-logo-w: 10rem;
}

.zerodigital-footer-columns--logo-ratio-tall {
	--zd-fc-logo-h: 4rem;
	--zd-fc-logo-w: 4.5rem;
}

.zerodigital-footer-columns--logo-size-xs { --zd-fc-logo-scale: 0.7; }
.zerodigital-footer-columns--logo-size-sm { --zd-fc-logo-scale: 0.85; }
.zerodigital-footer-columns--logo-size-lg { --zd-fc-logo-scale: 1.2; }
.zerodigital-footer-columns--logo-size-xl { --zd-fc-logo-scale: 1.45; }

.zerodigital-footer-columns__brand img {
	/* width/height/display are stated rather than inherited from the theme's
	 * `img { max-width: 100%; height: auto }` reset — relying on that
	 * cross-package interaction is half of what produced the original bug, and
	 * display:block also removes the inline baseline gap under the logo. */
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--zd-fc-logo-h) * var(--zd-fc-logo-scale));
	/* The min() catches lg/xl on a narrow phone, where the brand column is only
	 * ~272-327px wide. It self-disables above ~783px, where 60vw always exceeds
	 * every cap — so one stored value still means one rule, with CSS deciding
	 * what it means per viewport. */
	max-width: min(calc(var(--zd-fc-logo-w) * var(--zd-fc-logo-scale)), 60vw);
	margin-bottom: var(--wp--preset--spacing--xs, 0.75rem);
}

.zerodigital-footer-columns__tagline {
	max-width: 32rem;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.85;
}

/*
 * Action row. The Review Us button and the social marks are the same kind of
 * thing — ways to reach this business somewhere other than here — so they share
 * a line. Stacked, the icons read as loose decoration under a button.
 *
 * The row owns the margin below it rather than its children, because either
 * child can be absent and a margin on either would leave with it.
 */
.zerodigital-footer-columns__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Two gaps, not one: the marks keep the list's own tight 0.5rem between them
	 * and sit a clear 1.5rem off the button, so they read as one set rather than
	 * as four more buttons trailing the first. The row gap applies once the brand
	 * column is too narrow to hold both, which on desktop is ~15rem. */
	gap: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);

	/* One height for everything on the row. 2.75rem clears the 44px minimum touch
	 * target, and declaring it once is what keeps the button and the icon boxes
	 * level — the button's own padding lands it at 42px, and a 2px stagger between
	 * a filled button and the circles beside it is visible. */
	--zd-fc-action-size: 2.75rem;
}

.zerodigital-footer-columns__review-cta {
	/* inline-flex rather than inline-block so the label centres against the
	 * min-height above, which is taller than the text needs. */
	display: inline-flex;
	align-items: center;
	min-block-size: var(--zd-fc-action-size, 2.75rem);
	padding: var(--wp--preset--spacing--2-xs, 0.6rem) var(--wp--preset--spacing--md, 1.25rem);
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

/*
 * Social links. Icon-only, so two things decide whether they work: the target
 * size, and whether they look pressable at all. The first version had the size
 * and neither a fill nor an edge, and a row of bare glyphs beside a solid button
 * reads as decoration — a 44px box is no use if nobody can see it is a box.
 *
 * The tile is a DARKENED SHADE OF WHATEVER IS BEHIND IT rather than a white haze
 * over it: a plain black tint at low alpha, which comes out as a deeper orange on
 * this footer and a deeper whatever on the next one. That reads as a recess cut
 * into the panel, where a white wash reads as a sticker placed on top of it. It
 * also needs no border — the shade alone separates the tile from the panel, and
 * dropping the outline is most of what keeps the row quiet next to the button.
 *
 * Deliberately plain rgba() and not color-mix(): a black tint needs no reference
 * to currentColor, so there is nothing to gain from the newer syntax and one
 * fewer thing to degrade where it is unsupported.
 */
.zerodigital-footer-columns__socials {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-xs, 0.5rem);
	margin: 0;
	padding: 0;
}

.zerodigital-footer-columns__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--zd-fc-action-size, 2.75rem);
	block-size: var(--zd-fc-action-size, 2.75rem);
	/* The same corner as Review Us beside it. These are secondary actions, not a
	 * different species of control, and the shared radius is what says so. */
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	border: 0;
	background: rgba(0, 0, 0, 0.14);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--zd-ease, 180ms ease);
}

/* Hover roughly doubles the tint. The previous step was 12% to 22% of the text
 * colour, which on a saturated background is a change in haze rather than in
 * shade and was hard to see at all; going deeper moves the hue as well as the
 * level, so the tile visibly presses in.
 *
 * `color` is restated here and is NOT redundant with the base rule — deleting it
 * makes the marks vanish on hover, which is what 0.9.1 shipped. theme.json sets a
 * global hover colour on every link (accent), and 30% black over this footer
 * composites to #B25600, the accent exactly: the mark ends up painting in its own
 * background. The base rule cannot prevent that. WordPress emits the global rule
 * as `:root :where(a...:hover)`, so the :hover sits INSIDE :where() and the whole
 * thing weighs (0,1,0) — a tie with the base rule, settled by load order, which
 * the theme wins. This selector is (0,2,0) and wins outright.
 *
 * The trap is not specific to this colour. Any icon-only link whose fill comes
 * from currentColor is one accent-coloured hover away from being invisible, so
 * the colour is held explicitly rather than left to the cascade. */
.zerodigital-footer-columns__social:hover,
.zerodigital-footer-columns__social:focus-visible {
	color: inherit;
	background: rgba(0, 0, 0, 0.3);
}

/* A light footer colour (zerodigital_footer_group_tone): dark text, and the
 * social tiles' black tint softened so they read as tiles, not holes. */
.zd-bg-light .zerodigital-footer-columns {
	color: var(--wp--preset--color--foreground, #16181b);
}

.zd-bg-light .zerodigital-footer-columns__social {
	background: rgba(0, 0, 0, 0.06);
}

.zd-bg-light .zerodigital-footer-columns__social:hover,
.zd-bg-light .zerodigital-footer-columns__social:focus-visible {
	background: rgba(0, 0, 0, 0.12);
}

/* An icon-only link must show its focus ring on the box, not on the glyph. */
.zerodigital-footer-columns__social:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zerodigital-footer-columns__social-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.zerodigital-footer-columns__accordion {
	display: grid;
	gap: var(--wp--preset--spacing--xs, 0.75rem);
	margin-bottom: var(--wp--preset--spacing--lg, 2rem);
}

.zerodigital-footer-columns__column {
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	padding-bottom: var(--wp--preset--spacing--xs, 0.75rem);
}

/* Column heading: a compact uppercase label, so it reads as a heading without
 * competing in size with the links beneath it. */
.zerodigital-footer-columns__column summary {
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--wp--preset--spacing--2-xs, 0.5rem) 0;
	list-style: none;
}

.zerodigital-footer-columns__column summary::-webkit-details-marker {
	display: none;
}

.zerodigital-footer-columns__column summary::after {
	content: "+";
	float: right;
}

.zerodigital-footer-columns__column[open] summary::after {
	content: "\2212";
}

.zerodigital-footer-columns__nav {
	list-style: none;
	margin: var(--wp--preset--spacing--2-xs, 0.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs, 0.5rem);
}

.zerodigital-footer-columns__nav a,
.zerodigital-footer-columns__business-info a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.zerodigital-footer-columns__business-info p {
	margin: 0 0 var(--wp--preset--spacing--2-xs, 0.5rem);
}

/* Body copy sits a touch below the heading and slightly softened, so the
 * uppercase headings lead the eye. */
.zerodigital-footer-columns__rich-text {
	margin-top: var(--wp--preset--spacing--2-xs, 0.5rem);
	opacity: 0.85;
}

/* A long word with nowhere to break takes the column with it. An email address
 * is one unbreakable word to a browser, and Business Details supplies them:
 * hello@beckidrewettnutritionandexercise.co.uk measured 311px in a 196px column
 * and simply ran over the text beside it. On a phone it was worse than untidy —
 * the contact block's copy of the same address made the whole PAGE 396px wide in
 * a 375px viewport, so every page on the site scrolled sideways.
 *
 * `anywhere` rather than `break-word`: both wrap the visible line, but only
 * `anywhere` also shrinks the element's min-content width, which is what keeps a
 * grid track from being sized to the unbreakable word in the first place.
 *
 * It breaks a word ONLY when it would otherwise overflow, so ordinary copy is
 * untouched. Deliberately not <wbr> seams at the @ and the dots: they were tried
 * against this address and cost a third line, because the domain segment between
 * the seams does not fit either. */
.zerodigital-footer-columns {
	overflow-wrap: anywhere;
}

.zerodigital-footer-columns__certifications {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
	padding: var(--wp--preset--spacing--md, 1.5rem) 0 0;
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md, 1.5rem);
	align-items: center;
}

.zerodigital-footer-columns__certifications img {
	max-height: 2rem;
	width: auto;
	filter: grayscale(1);
	opacity: 0.8;
}

.zerodigital-footer-columns__credit {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.7;
}

.zerodigital-footer-columns__credit a {
	color: inherit;
}

/*
 * On desktop the footer becomes a proper multi-column layout: the brand
 * block sits to the left, the nav/info columns fill the rest, and the
 * certifications + credit form a divided bottom bar. The mobile accordion
 * expands fully (no disclosure toggle) since there's room to show it all.
 */
@media (min-width: 783px) {
	.zerodigital-footer-columns {
		display: grid;
		grid-template-columns: minmax(15rem, 1fr) 2fr;
		/* No "cert" row in the template: an explicit row stays in the grid when
		 * there are no certifications, and its row gap added 32px of empty space
		 * under the columns. The certifications span both columns instead, so
		 * their row exists only when they do. */
		grid-template-areas: "brand accordion";
		column-gap: clamp(2rem, 5vw, 5rem);
		row-gap: var(--wp--preset--spacing--lg, 2rem);
		align-items: start;
	}

	.zerodigital-footer-columns__brand {
		grid-area: brand;
	}

	/* Last thing in the brand column on desktop, so it has nothing left to space
	 * itself away from. */
	.zerodigital-footer-columns__actions {
		margin-bottom: 0;
	}

	.zerodigital-footer-columns__accordion {
		grid-area: accordion;
		margin-bottom: 0;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}

	.zerodigital-footer-columns__certifications {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	/* No accordion toggles on desktop — columns are plain lists. */
	.zerodigital-footer-columns__column {
		border-bottom: none;
		padding-bottom: 0;
	}

	.zerodigital-footer-columns__column summary {
		cursor: default;
		pointer-events: none;
		padding-top: 0;
		margin-bottom: var(--wp--preset--spacing--2-xs, 0.5rem);
	}

	.zerodigital-footer-columns__column summary::after {
		display: none;
	}

	.zerodigital-footer-columns__column > *:not(summary) {
		display: block !important;
	}

	/* A closed <details> keeps a column collapsed on mobile, but on desktop every
	 * column must show in full. Modern browsers wrap the content in a
	 * ::details-content pseudo carrying content-visibility:hidden while closed —
	 * which the display override above can't reach, so the closed-on-mobile
	 * columns were rendering blank here. Force it visible. */
	.zerodigital-footer-columns__column::details-content {
		content-visibility: visible;
	}

	/* Belt-and-braces for the same intent on the older model. */
	.zerodigital-footer-columns__column:not([open]) > *:not(summary) {
		display: block !important;
	}
}

/* --- default skin --- */
/* The Review Us CTA carries the accent — the key footer action (accent system). */
.zerodigital-footer-columns__review-cta {
	background: var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	border-color: transparent;
	color: #fff;
	transition: background-color var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease);
}

.zerodigital-footer-columns__review-cta:hover {
	background: color-mix(in srgb, var(--zd-accent, #c4263c) 86%, #000);
	/* Hold the label white — the global link:hover would tint it accent on this
	 * (still accent-family) background. */
	color: #fff;
	transform: translateY(-1px);
}

.zerodigital-footer-columns__column summary {
	transition: opacity var(--zd-ease, 180ms ease);
}

.zerodigital-footer-columns__column summary:hover {
	opacity: 0.8;
}

.zerodigital-footer-columns__nav a:hover,
.zerodigital-footer-columns__business-info a:hover,
.zerodigital-footer-columns__credit a:hover {
	opacity: 1;
	text-decoration: underline;
}

.zerodigital-footer-columns__certifications img {
	transition: filter var(--zd-ease, 180ms ease), opacity var(--zd-ease, 180ms ease);
}

.zerodigital-footer-columns__certifications img:hover {
	filter: grayscale(0);
	opacity: 1;
}