/*
Theme Name: WWH Block
Theme URI: https://wishingwellhealth.co.uk/
Author: Wishing Well Health
Author URI: https://wishingwellhealth.co.uk/
Description: Wishing Well Health block theme (full-site editing). Clean, page-builder-free replacement for the Hello Elementor + Elementor header/footer build. Header, footer and the home page reproduce the live design; the remaining templates follow in later releases.
Version: 0.2.1
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wwh-block
*/

/*
 * Design tokens, fonts, sizes and spacing live in theme.json. This file only holds
 * what theme.json cannot express: layout of the header/footer regions, responsive
 * rules, and third-party widget skins. Breakpoints match the live Elementor kit:
 *   mobile <= 767px, tablet 768-1024px, desktop >= 1025px.
 * Pixel values below are measured from the live site (computed styles) so the
 * regions match the current design; each block says what it reproduces.
 */

:root {
	--wwh-container: 1140px;
	--wwh-teal: var(--wp--preset--color--primary);
	--wwh-sand: var(--wp--preset--color--secondary);
	--wwh-white: var(--wp--preset--color--base);
	--wwh-font-rc: var(--wp--preset--font-family--roboto-condensed);
	--wwh-font-ws: var(--wp--preset--font-family--work-sans);
	--wwh-link-hover: var(--wp--preset--color--link-hover);
	--wwh-badge: #d9534f; /* cart counter red: Elementor's default "danger" colour, as on the live site */
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased; /* same text rendering as the live (Hello) site */
	-moz-osx-font-smoothing: grayscale;
}

/* Keyboard focus: visible on every interactive element; white on the teal regions for contrast. */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wwh-teal);
	outline-offset: 2px;
}

.wwh-header__bar :focus-visible,
.wwh-footer__brand :focus-visible,
.wwh-footer__legal :focus-visible {
	outline-color: var(--wwh-white);
}

.wwh-icon {
	display: block;
	flex: none;
}

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

.wwh-header {
	border-top: 10px solid var(--wwh-teal); /* thin teal strip above the logo row */
}

/* Row 1: logo | Trustpilot slot | e-mail. Desktop columns copy the live 494/205/rest split. */
.wwh-header__brand {
	display: grid;
	grid-template-columns: 494px 205px 1fr;
	grid-template-areas: "logo trust contact"; /* explicit so the e-mail stays on the right when the trust slot is hidden */
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 15px 0;
	box-sizing: border-box;
}

.wwh-header__logo {
	grid-area: logo;
	justify-self: start; /* the link is only as wide as the picture (live: 66.8px), not the whole 494px column */
	margin: 0;
}

.wwh-header__logo a {
	display: block; /* inline-block would add a descender gap under the image */
	line-height: 0;
	text-decoration: none;
}

.wwh-header .wwh-header__logo img {
	display: block;
	width: auto;
	height: 61.203125px; /* = live 61.203 (1/64px LayoutUnit steps): keeps the whole page on the same sub-pixel row as live so footer thumbnails snap identically */
}

/* Reserved space for the Trustpilot TrustBox (injected by the Trustpilot plugin, 52px high). The live site only shows it on the front page. */
.wwh-header__trust {
	grid-area: trust;
	width: 205px;
	height: 52px;
}

.wwh-header__trust .trustpilot-widget {
	width: 100%;
	min-height: 52px;
}

body:not(.home) .wwh-header__trust {
	display: none;
}

.wwh-header__contact {
	grid-area: contact;
	align-self: center;
	justify-self: end;
}

.wwh-header__email {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-left: 2px;
	font-family: var(--wwh-font-rc);
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}

.wwh-header__email,
.wwh-header__email:hover,
.wwh-header__email:focus {
	color: var(--wwh-teal); /* live: plain text in the icon list, no hover effect */
	text-decoration: none;
}

.wwh-header__email-icon {
	width: 16px;
	height: 16px;
}

/* Row 2: teal menu bar. */
.wwh-header__bar {
	height: 40px;
}

.wwh-header__bar-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: var(--wwh-container);
	height: 40px;
	padding-right: 1px; /* live icons end 1px short of the container edge */
	margin: 0 auto;
	box-sizing: border-box;
}

.wwh-header nav.wwh-nav {
	margin-top: 6px; /* two classes: beats WordPress' flow-layout margin reset */
}

@media (min-width: 1025px) {
	.wwh-header nav.wwh-nav {
		height: 28px; /* the nav block would otherwise stretch to 34px and centre the links 3px low */
	}
}

.wwh-nav .wp-block-navigation__container {
	gap: 0;
}

.wwh-nav .wp-block-navigation-item__content {
	padding: 7px;
	font-family: var(--wwh-font-ws);
	font-size: 14px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: -1px;
	text-decoration: none;
}

.wwh-nav .wp-block-navigation-item__content:hover,
.wwh-nav .wp-block-navigation-item__content:focus,
.wwh-nav .wp-block-navigation-item__content:active {
	text-decoration: none; /* live (UAE menu, pointer: none): no hover or focus effect on the top-level links */
}

/* Account + mini-cart (WooCommerce blocks). */
.wwh-header__tools {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-right: 0;
}

.wwh-header__tools .wp-block-woocommerce-customer-account {
	margin-top: 14px;
}

.wwh-header__tools .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
	display: block;
	width: 14px;
	height: 18px;
	padding: 0;
	color: var(--wwh-white);
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s; /* live icon fades white -> sand in 0.3s */
}

.wwh-header__tools .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover {
	color: var(--wwh-sand);
}

/* The design uses Font Awesome's "user" and Elementor's "cart" glyphs, so the blocks' own SVGs are hidden and the same glyphs are drawn as masks (they inherit the text colour). */
.wwh-header__tools .wc-block-customer-account__visual svg,
.wwh-header__tools .wc-block-mini-cart__icon {
	display: none;
}

.wwh-header__tools .wc-block-customer-account__visual::before {
	display: block;
	width: 14px;
	height: 18px;
	background-color: currentcolor;
	-webkit-mask: url("assets/icons/user.svg") center / contain no-repeat;
	mask: url("assets/icons/user.svg") center / contain no-repeat;
	content: "";
}

.wwh-header__tools .wc-block-mini-cart__quantity-badge::before {
	display: block;
	width: 23px;
	height: 23px;
	background-color: currentcolor;
	-webkit-mask: url("assets/icons/cart.svg") center / contain no-repeat;
	mask: url("assets/icons/cart.svg") center / contain no-repeat;
	content: "";
}

.wwh-header__tools .wp-block-woocommerce-mini-cart {
	margin-top: 11.5px; /* live cart glyph top = 112.7px */
}

.wwh-header__tools .wc-block-mini-cart__button {
	display: flex;
	align-items: flex-start;
	height: 27px; /* live hit area is 23 x 27 */
	padding: 0;
	color: var(--wwh-white);
	line-height: 0;
	cursor: pointer;
}

.wwh-header__tools .wc-block-mini-cart__button:hover {
	background: transparent;
	color: var(--wwh-sand); /* live: the cart glyph turns sand on hover (instant) */
	opacity: 1;
}

/* Item counter: a red circle with a white number sitting on the icon's top-right corner (live: Elementor menu-cart
   ".elementor-button-icon-qty[data-counter]" = 1.6em circle, 10px Work Sans, #d9534f, top/right -0.7em). Hidden while the cart is empty. */
.wwh-header__tools .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: block;
	width: 23px;
	height: 23px;
}

.wwh-header__tools .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	position: absolute;
	top: -7px;
	right: -7px;
	left: auto;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border-radius: 100%;
	background: var(--wwh-badge) !important; /* the block writes inline colours from its own settings */
	color: var(--wwh-white) !important;
	font-family: var(--wwh-font-ws);
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
	text-align: center;
	transform: none;
}

.wwh-header__tools .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge[hidden] {
	display: none;
}

/* Row 3: sand USP strip. */
.wwh-usp {
	height: 30px;
	padding: 5px 0 4px;
	box-sizing: border-box;
}

.wwh-usp__list {
	display: flex;
	margin: 0;
	padding: 0;
	max-width: var(--wwh-container);
	margin-inline: auto;
	list-style: none;
}

.wwh-usp__item {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	font-family: var(--wwh-font-rc);
	font-size: 14px;
	line-height: 21px;
}

.wwh-usp__icon {
	width: 15px;
	height: 15px;
	margin-right: 8.8px;
}

/* Responsive menu (core navigation overlay) is used up to 1024px, not core's default 600px. */
.wwh-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wwh-nav .wp-block-navigation__responsive-container-open::before {
	display: block;
	width: 25px;
	height: 25px;
	background-color: var(--wwh-sand);
	-webkit-mask: url("assets/icons/menu.svg") center / contain no-repeat;
	mask: url("assets/icons/menu.svg") center / contain no-repeat;
	content: "";
}

.wwh-nav .wp-block-navigation__responsive-container-open {
	padding: 0;
	color: var(--wwh-sand);
}

.wwh-nav .wp-block-navigation__responsive-container-open:hover::before,
.wwh-nav .wp-block-navigation__responsive-container-close:hover::before {
	background-color: var(--wwh-white); /* live: the menu icon turns white on hover, no transition */
}

.wwh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 15px;
	letter-spacing: -1px;
}

.wwh-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wwh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wwh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wwh-sand); /* live: current page and hovered / focused item turn sand on the white panel */
	text-decoration: none;
}

/* Keyboard focus ring on the white panel must not be white (the bar rule above is for the teal bar). */
.wwh-header__bar .wp-block-navigation__responsive-container.is-menu-open :focus-visible {
	outline-color: var(--wwh-teal);
}

@media (max-width: 1024px) {
	.wwh-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* Menu panel up to 1024px. Live (UAE dropdown): a white panel that drops straight under the 40px teal bar, full viewport width, items 44px high,
   left aligned; the hamburger turns into a "window-close" icon in the same place. Built on the core overlay (keeps focus trap, Escape, aria-modal),
   re-positioned from full-screen to a drop-down. --wwh-toggle-* is where the open button sits in the bar, so the close button can be laid over it. */
@media (max-width: 1024px) {
	.wwh-header__bar {
		position: relative;
	}

	.wwh-header nav.wwh-nav {
		position: static; /* core makes the nav the containing block; the panel hangs from the bar instead */
		--wwh-toggle-x: 9.6875px;
		--wwh-toggle-y: 7.6875px;
		--wwh-panel-left: 0px;
	}

	.wwh-header .wwh-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 100% auto auto var(--wwh-panel-left);
		z-index: 9999;
		display: block;
		width: 100%;
		height: auto;
		padding: 0;
		overflow: visible;
		box-sizing: border-box;
	}

	html.has-modal-open {
		overflow: visible; /* the panel is not full-screen, so the page keeps scrolling like on the live site */
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation__responsive-close {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 0;
		overflow: visible;
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation__container {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		gap: 0;
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation-item {
		display: block;
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
		border-top: 1px solid var(--wp--preset--color--border); /* live: 1px #c4c4c4 line between the items (44px items, 45px stride) */
	}

	.wwh-header .wwh-nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		line-height: 14px;
		text-align: left;
	}

	/* While the panel is open the close icon takes the hamburger's place. */
	.wwh-header .wwh-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	/* Close button: lies over the open button (same box, same sand icon). */
	.wwh-header .wwh-nav .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: calc(var(--wwh-toggle-y) - 40px);
		right: auto;
		left: calc(var(--wwh-toggle-x) - var(--wwh-panel-left) + 0.3125px); /* pixel-snapped like the live SVG */
		display: flex;
		width: 25px;
		height: 25px;
		padding: 0;
		color: var(--wwh-sand);
		background: transparent;
		cursor: pointer;
	}

	.wwh-header .wwh-nav .wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	.wwh-header .wwh-nav .wp-block-navigation__responsive-container-close::before {
		display: block;
		width: 25px;
		height: 25px;
		background-color: var(--wwh-sand);
		-webkit-mask: url("assets/icons/close.svg") center / contain no-repeat;
		mask: url("assets/icons/close.svg") center / contain no-repeat;
		content: "";
	}
}

/* Tablet 768-1024: logo above, Trustpilot slot + e-mail below; USP strip stays, 5 equal columns. */
@media (max-width: 1024px) {
	.wwh-header__brand {
		grid-template-columns: auto 1fr;
		grid-template-areas: "logo logo" "trust contact";
	}

	.wwh-header__logo {
		grid-area: logo;
		margin-left: 30px;
	}

	.wwh-header .wwh-header__logo img {
		height: 148.4px;
	}

	.wwh-header__trust {
		grid-area: trust;
		width: 215.7px;
	}

	.wwh-header__contact {
		grid-area: contact;
	}

	.wwh-header__bar-inner {
		padding: 0 10px 0 9.6875px; /* live icon sits at x = 9.69 */
	}

	.wwh-header nav.wwh-nav {
		margin-top: 7.6875px;
	}

	.wwh-header__tools {
		gap: 52px;
	}

	.wwh-header__tools .wp-block-woocommerce-customer-account {
		margin-top: 8px;
	}

	.wwh-header__tools .wp-block-woocommerce-mini-cart {
		margin-top: 6px;
	}
}

/* Mobile <= 767: compact logo row, USP strip hidden. */
@media (max-width: 767px) {
	.wwh-header__brand {
		grid-template-columns: 174px 160px;
		grid-template-areas: "logo trust" "logo contact";
		grid-template-rows: 69px auto;
		padding-bottom: 15px;
		justify-content: start;
		align-items: start;
	}

	.wwh-header__logo {
		margin-left: 22px;
		margin-bottom: 5px;
	}

	.wwh-header .wwh-header__logo img {
		height: 102.6px;
	}

	.wwh-header__trust {
		margin-top: 17px;
		width: 160px;
	}

	.wwh-header__contact {
		align-self: start;
		justify-self: start;
		margin: 6px 0 0 10px;
		font-size: 10px;
	}

	/* No trust widget (every page but the front page): the e-mail is centred beside the logo. */
	body:not(.home) .wwh-header__brand {
		grid-template-areas: "logo contact";
		grid-template-rows: auto;
	}

	body:not(.home) .wwh-header__contact {
		align-self: center;
		margin-top: 0;
	}

	.wwh-header__email {
		gap: 7.2px;
		padding-left: 0;
		font-size: 10px;
		line-height: 15px;
	}

	.wwh-header__bar-inner {
		padding: 0 24px 0 33.6875px;
	}

	.wwh-header__tools {
		gap: 9px;
	}

	.wwh-header nav.wwh-nav {
		margin-top: 7.6875px;
		--wwh-toggle-x: 33.6875px;
		--wwh-toggle-y: 7.6875px;
		--wwh-panel-left: 0px;
	}

	.wwh-header__tools .wp-block-woocommerce-customer-account {
		margin-top: 11px;
	}

	.wwh-header__tools .wp-block-woocommerce-mini-cart {
		margin-top: 10px;
	}

	.wwh-usp {
		display: none;
	}
}

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

.wwh-footer {
	margin: 0;
}

/* Latest articles. Desktop: flex-wrap, 4 per row, a short last row grows to fill the width (as the live grid does).
   Tablet: 3 equal columns. Mobile: 1 column. */
.wwh-latest {
	box-sizing: content-box;
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 60px 10px 0; /* padding (not margin) so the 60px white gap stays inside the footer region */
}

.wwh-latest__title {
	margin: 0;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 32px;
	font-weight: 400;
	line-height: 32px;
	color: var(--wwh-teal);
}

.wwh-latest .wwh-latest__list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.wwh-latest .wwh-latest__list > li {
	flex: 1 1 calc((100% - 90px) / 4);
	min-width: 0;
	margin: 0 0 35px; /* specificity beats core's ":last-child { margin-block-end: 0 }" flow rule */
	text-align: center;
}

.wwh-latest__image {
	position: relative;
	container-type: inline-size;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

/* Same box construction as the live "fit image" grid, so the browser resamples the picture the same way: the picture is positioned
   at the frame centre + 1px, sized to cover the 4:3 frame, then scaled 1.01 about its own centre after a -50% shift. --wwh-r is the
   picture's width/height rounded to 2 places (set per image in functions.php); the frame is 100cqw wide and 75cqw high, so the
   covering box is max(100cqw, 75cqw * r) by max(75cqw, 100cqw / r). */
.wwh-latest .wwh-latest__image img {
	position: absolute;
	top: calc(50% + 1px);
	left: calc(50% + 1px);
	display: block;
	width: var(--wwh-w, 100cqw);
	height: var(--wwh-h, auto);
	max-width: none;
	max-height: none; /* blog's ".post .wp-post-image { max-height: 500px }" must not clip footer pictures inside an <article class="post"> (live's footer img has no wp-post-image class) */
	object-fit: fill !important; /* live: computed fill; the box already has the picture's proportions (core adds an inline object-fit:cover) */
	transform: scale(1.01) translate(-50%, -50%);
}

.wwh-latest .wwh-latest__title-wrap {
	margin: 10px 0 0; /* live: div.dce-item_title, a 24px/16px system-font line box that holds the inline-block h3 (one-line titles sit 1px lower than the strut top) */
	font-family: var(--wp--preset--font-family--system, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	font-size: 16px;
	line-height: 24px;
}

.wwh-latest__post-title {
	display: inline-block; /* as the live h3: it sits in the wrapper's 24px line box, which adds the same few px of height */
	margin: 0;
	font-family: var(--wp--preset--font-family--bebas-neue); /* the live h3 is Bebas Neue 18px/700; only its line box matters because the link overrides the glyphs */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.wwh-latest__post-title a:hover,
.wwh-latest__post-title a:focus-visible {
	color: var(--wwh-link-hover);
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wwh-latest .wwh-latest__list > li {
		transition: transform 0.3s; /* live "grow" hover: the whole card (picture + title) scales to 1.1 */
	}

	.wwh-latest .wwh-latest__list > li:hover {
		transform: scale(1.1);
	}
}

.wwh-latest__image a:hover,
.wwh-latest__image a:focus-visible {
	text-decoration: none;
}

.wwh-latest__post-title a {
	color: var(--wwh-teal);
	transition: color 0.4s;
	font-family: var(--wwh-font-rc); /* the visible title text is Roboto Condensed bold */
	line-height: 22.6px; /* with the h3's 21.6px strut this gives the live 22.6px per wrapped line */
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 1024px) {
	.wwh-latest .wwh-latest__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.wwh-latest .wwh-latest__list {
		grid-template-columns: 1fr;
	}

	.wwh-latest .wwh-latest__list > li {
		margin-bottom: 35px; /* live single-column stride: 10px + 24px line box + 35px */
	}
}

/* Teal band 1: logos + the two footer menus (3 equal columns, bottom aligned). */
.wwh-footer__brand {
	padding: 50px 0;
}

.wwh-footer__brand-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: end;
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 10px 0;
	box-sizing: border-box;
}

.wwh-footer__logos {
	display: flex;
	align-items: flex-end;
	gap: 1.7%;
	padding: 0 10px;
}

/* The three logos keep the live proportions (48.6% / 17.75% / 30.25% of the row) so they scale with the column. */
.wwh-footer__logos .wp-block-image {
	margin: 0;
}

.wwh-footer .wwh-footer__logo {
	width: 48.6%;
}

.wwh-footer .wwh-footer__badge {
	width: 17.75%;
}

.wwh-footer .wwh-footer__partner {
	width: 30.25%;
}

.wwh-footer .wwh-footer__logos img {
	display: block;
	width: 100%;
	height: auto;
}

.wwh-footer .wwh-footer__partner img {
	background: var(--wwh-white);
}

.wwh-footer-nav {
	justify-self: center;
}

.wwh-footer-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.wwh-footer-nav .wp-block-navigation-item {
	display: block;
}

.wwh-footer-nav .wp-block-navigation-item__content {
	display: block;
	padding: 7px 15px;
	font-family: var(--wwh-font-rc);
	font-size: 16px;
	line-height: 16px;
	text-align: center;
	text-decoration: none;
}

.wwh-footer .wwh-footer-nav .wp-block-navigation-item__content:hover,
.wwh-footer .wwh-footer-nav .wp-block-navigation-item__content:focus {
	color: var(--wwh-sand); /* live: links turn sand on hover and focus, no underline */
	text-decoration: none;
}

.wwh-footer-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wwh-sand);
}

/* Teal band 2: social, share, payments, legal lines, back-to-top. */
.wwh-footer__legal {
	padding-bottom: 50px;
}

.wwh-footer__legal-inner {
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 10px 10px 0;
	box-sizing: content-box;
	text-align: center;
}

.wwh-footer__label {
	margin: 0;
	font-family: var(--wwh-font-ws);
	font-size: 13px;
	font-weight: 400;
	line-height: 13px;
}

.wwh-follow,
.wwh-share {
	margin-top: 5px;
	margin-bottom: 0;
	gap: 10px;
}

.wwh-footer__label + .wwh-follow + .wwh-footer__label {
	margin-top: 30px;
}

.wwh-follow .wp-social-link,
.wwh-share .wp-social-link {
	margin: 0;
}

.wwh-follow .wp-social-link a,
.wwh-share .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.wwh-follow .wp-social-link {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	transition: opacity 0.3s; /* live: Elementor social icon fades to 90% in 0.3s */
}

.wwh-follow .wp-social-link:hover,
.wwh-follow .wp-social-link:focus-within {
	opacity: 0.9;
	transform: none; /* core scales social icons to 1.1 on hover; the live design does not */
}

.wwh-follow .wp-social-link svg {
	width: 25px;
	height: 25px;
}

/* The live "follow" button uses Font Awesome's round Facebook mark (the core icon is a smaller circle): same glyph, drawn as a mask in the text colour. */
.wwh-follow .wp-social-link-facebook svg {
	display: none;
}

.wwh-follow .wp-social-link-facebook a::before {
	display: block;
	width: 25px;
	height: 25px;
	background-color: currentcolor;
	-webkit-mask: url("assets/icons/facebook.svg") center / contain no-repeat;
	mask: url("assets/icons/facebook.svg") center / contain no-repeat;
	content: "";
}

.wwh-share .wp-social-link {
	width: 42px;
	height: 42px;
	border-radius: 0;
	cursor: pointer;
	transition: filter 0.2s, background-color 0.2s, border-color 0.2s; /* live Element Pack share buttons */
}

.wwh-share .wp-social-link:hover,
.wwh-share .wp-social-link:focus-within {
	filter: saturate(1.2) brightness(1.1);
	transform: none;
}

.wwh-share .wp-social-link svg {
	width: 16px;
	height: 16px;
}

/* Brand colours of the social networks (third-party marks, so not theme tokens). */
.wwh-footer .wp-block-social-links .wp-social-link-facebook { background-color: #3b5998; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-linkedin { background-color: #0077b5; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-x { background-color: #1da1f2; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-pinterest { background-color: #bd081c; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-reddit { background-color: #ff4500; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-telegram { background-color: #2ca5e0; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-whatsapp { background-color: #25d366; color: #fff; }
.wwh-footer .wp-block-social-links .wp-social-link-chain { background-color: #1b1b1b; color: #fff; }

.wwh-payments {
	margin-top: 30px;
}

.wwh-payments__list {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wwh-payments__item {
	width: 45px;
	height: 32px;
}

.wwh-payments__icon {
	width: 32px;
	height: 32px;
	color: var(--wwh-white);
}

.wwh-footer__links,
.wwh-footer__small {
	margin: 0 0 14.4px;
	font-family: var(--wwh-font-ws);
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
}

.wwh-footer__links {
	margin-top: 15px;
}

.wwh-footer__links a {
	color: var(--wwh-white);
	font-family: var(--wwh-font-rc);
	text-decoration: none;
}

.wwh-footer__links a:hover,
.wwh-footer__links a:focus-visible {
	text-decoration: underline;
}

.wwh-totop {
	height: 66px;
}

.wwh-totop__link {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: var(--wwh-sand);
	line-height: 0;
	text-decoration: none;
	transition: color 0.3s; /* live: sand -> near-black in 0.3s */
}

.wwh-totop__link:hover,
.wwh-totop__link:focus {
	color: var(--wp--preset--color--contrast);
}

.wwh-totop__icon {
	width: 50px;
	height: 50px;
}

/* Credit line (was injected by Essential Addons Pro on the live site). */
.wwh-footer__credit {
	margin: 20px 0 0;
	font-family: var(--wwh-font-rc);
	font-size: 10px;
	line-height: 15px;
	text-transform: uppercase;
}

.wwh-footer__credit a {
	text-decoration: none;
}

@media (max-width: 767px) {
	.wwh-footer__brand-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 20px;
	}

	.wwh-footer__logos {
		box-sizing: border-box;
		width: 100%;
		padding: 0 12px;
		gap: 1.16%;
		align-items: center; /* live: on phones the badge and partner logo are centred against the big logo (bottom-aligned on tablet and desktop) */
	}

	.wwh-footer .wwh-footer__logo {
		width: 49.13%;
	}

	.wwh-footer .wwh-footer__badge {
		width: 17.95%;
	}

	.wwh-footer .wwh-footer__partner {
		width: 30.6%;
	}
}

/* Placeholder templates (index/page): minimal readable content width until the real templates arrive. */
.wwh-main {
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 20px 10px;
	box-sizing: border-box;
}

/* ==========================================================================
   Home page (templates/front-page.html + patterns/home-*.php)
   Measured from the live Elementor page: boxed sections 1140px wide, columns carry
   10px padding, the kit's widget gap is 0. Breakpoints as above (phone <= 767px).
   ========================================================================== */

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

.wwh-main.wwh-home {
	max-width: none;
	margin: 0;
	padding: 0;
}

.wwh-home > * {
	margin-block: 0;
}

/* --- Slider: 600px tall, two slides, scroll-snap (assets/js/slider.js adds buttons, autoplay and the pause control). --- */
.wwh-slider {
	position: relative;
	height: 600px;
	overflow: hidden;
	background: var(--wwh-teal);
}

.wwh-slider__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wwh-slider__track::-webkit-scrollbar {
	display: none;
}

.wwh-slider__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
}

.wwh-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wwh-slider__caption {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: max-content;
	justify-content: center;
	align-content: center;
	max-width: 100%;
	text-align: center;
}

.wwh-slider__title {
	margin: 0 0 10px;
	padding: 8px 20px 0;
	background: var(--wwh-sand);
	color: var(--wwh-teal);
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 66px;
	font-weight: 400;
	line-height: 79.2px;
	-webkit-text-stroke: 1px var(--wwh-sand);
}

.wwh-slider__title a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.wwh-slider__text {
	margin: 0;
	padding: 0 10px;
	background: var(--wwh-teal);
	color: var(--wwh-white);
	line-height: 24px;
}

.wwh-slider__button {
	justify-self: center;
	margin-top: 25px;
	padding: 7px 15px;
	background: var(--wwh-teal);
	color: var(--wwh-white);
	font-family: var(--wwh-font-rc);
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	text-decoration: none;
	text-transform: uppercase;
}

.wwh-slider__button:hover,
.wwh-slider__button:focus-visible {
	background: var(--wp--preset--color--primary-hover);
	color: var(--wwh-white);
}

.wwh-slider__nav,
.wwh-slider__toggle {
	display: none;
	position: absolute;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wwh-teal);
	cursor: pointer;
}

.wwh-slider.is-ready .wwh-slider__nav,
.wwh-slider.is-ready .wwh-slider__toggle {
	display: flex;
}

.wwh-slider__nav {
	top: 50%;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 46px;
	padding: 5px 10px;
	transform: translateY(-50%);
}

.wwh-slider__nav--prev {
	left: 35px;
}

.wwh-slider__nav--next {
	right: 35px;
}

.wwh-slider__toggle {
	right: 14px;
	bottom: 14px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wwh-white);
}

.wwh-slider__toggle-play,
.wwh-slider__toggle[aria-pressed="true"] .wwh-slider__toggle-pause {
	display: none;
}

.wwh-slider__toggle[aria-pressed="true"] .wwh-slider__toggle-play {
	display: block;
}

.wwh-slider__nav:focus-visible,
.wwh-slider__toggle:focus-visible,
.wwh-slider__button:focus-visible,
.wwh-slider__title a:focus-visible {
	outline: 3px solid var(--wwh-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wwh-teal);
}

.wwh-slider__bar {
	position: absolute;
	right: 14px;
	bottom: 0;
	left: 14px;
	height: 5px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.45);
	pointer-events: none;
}

.wwh-slider__bar-fill {
	display: block;
	width: 50%;
	height: 100%;
	background: var(--wwh-teal);
	transition: transform 0.4s ease;
}

/* --- Two tiles: 310px high, white 1px border, 5px radius; flips to a sand back face with the link on hover / keyboard focus. --- */
.wwh-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: var(--wwh-container);
	margin: 30px auto 0;
}

.wwh-tiles__col {
	padding: 10px;
}

.wwh-tile {
	height: 310px;
	perspective: 1200px;
}

.wwh-tile__inner {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
}

.wwh-tile__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 30px;
	border: 1px solid var(--wwh-white);
	border-radius: 5px;
	color: var(--wwh-white);
	text-align: center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wwh-tile__front {
	background: var(--wwh-teal);
}

.wwh-tile__back {
	background: var(--wwh-sand);
	transform: rotateX(180deg);
}

.wwh-tile:hover .wwh-tile__inner,
.wwh-tile:focus-within .wwh-tile__inner {
	transform: rotateX(180deg);
}

@media (prefers-reduced-motion: no-preference) {
	.wwh-tile__inner {
		transition: transform 0.6s;
	}
}

.wwh-tile .wwh-tile__img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 0 6px;
	border-radius: 5px;
}

.wwh-tile .wwh-tile__title {
	align-self: stretch;
	margin: 0 0 10px;
	color: var(--wwh-white);
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
}

.wwh-tile .wwh-tile__line {
	align-self: stretch;
	margin: 0;
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 13px;
	line-height: 26px;
}

.wwh-tile__cta {
	display: inline-flex;
	align-items: center;
	margin: 10px;
	padding: 5px 10px;
	border-radius: 5px;
	background: var(--wwh-teal);
	color: var(--wwh-white);
	font-family: var(--wwh-font-rc);
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}

.wwh-tile__cta:hover,
.wwh-tile__cta:focus-visible {
	background: var(--wp--preset--color--primary-hover);
	color: var(--wwh-white);
}

.wwh-tile__cta:focus-visible {
	outline: 3px solid var(--wwh-teal);
	outline-offset: 2px;
}

.wwh-tile__arrow {
	margin-right: 15px;
}

.wwh-tile .wwh-tile__sub {
	margin: 0;
	color: var(--wwh-teal);
	font-size: 20px;
	font-weight: 300;
	line-height: 24px;
	text-transform: capitalize;
}

/* --- Trust strip: photograph under a 79% teal wash, five reassurance points (20% each; one per row on phones). --- */
.wwh-home-usp {
	margin-top: 30px;
	padding: 90px 0 90px 35px;
	background: linear-gradient(rgba(0, 128, 128, 0.79), rgba(0, 128, 128, 0.79)), url("/wp-content/uploads/2024/02/young-happy-people-stacking-hands-outdoor-focus-on-hands-1536x1054.jpg") center / cover no-repeat;
	color: var(--wwh-white);
}

.wwh-home-usp__list {
	display: flex;
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	list-style: none;
}

.wwh-home-usp__item {
	display: flex;
	flex: 0 0 20%;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
}

.wwh-home-usp__icon {
	flex: none;
	width: 19px;
	height: 19px;
	margin-right: 4.75px;
	fill: currentColor;
	color: var(--wwh-white);
}

.wwh-home-usp__text {
	padding-left: 5px;
	font-family: var(--wp--preset--font-family--work-sans);
	line-height: 24px;
}

/* --- Sand band: kicker + headline left, story right. --- */
.wwh-why {
	padding: 90px 0 90px 35px;
	background: var(--wwh-sand);
}

.wwh-why__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: var(--wwh-container);
	margin: 0 auto;
}

.wwh-why__head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 0 0;
}

.wwh-why .wwh-kicker,
.wwh-how .wwh-kicker {
	margin: 0;
	color: var(--wwh-teal);
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 24px;
}

.wwh-why .wwh-why__title,
.wwh-how .wwh-how__title {
	margin: 0;
	color: var(--wwh-teal);
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 47px;
	font-weight: 700;
	line-height: 47px;
}

.wwh-why__body {
	padding: 24.4px 10px 10px;
	color: var(--wwh-teal);
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 21px;
	font-weight: 500;
	line-height: 31.5px;
}

.wwh-why .wwh-why__body > p {
	margin: 0 0 14.4px;
}

/* --- How it works --- */
.wwh-home .wwh-how .wwh-how__head {
	box-sizing: border-box;
	max-width: var(--wwh-container);
	margin: 30px auto 0;
	padding: 10px;
	text-align: center;
}

.wwh-how .wwh-kicker--light {
	font-size: 47px;
	font-weight: 100;
	line-height: 47px;
}

.wwh-how__steps {
	display: grid;
	grid-template-columns: repeat(3, 33.333%);
	max-width: var(--wwh-container);
	margin: 0 auto;
}

.wwh-how__step {
	padding: 10px;
}

.wwh-how__img {
	display: block;
	width: 100%;
	height: auto;
}

.wwh-how__cta {
	box-sizing: border-box;
	max-width: var(--wwh-container);
	margin: 0 auto;
	padding: 10px;
}

.wwh-how .wwh-how__line {
	margin: 0 0 14.4px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 16px;
	line-height: 24px;
}

.wwh-how .wwh-how__buttons {
	margin: 0;
}

.wwh-how .wwh-how__button .wp-block-button__link {
	padding: 12px 24px;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 15px;
}

@media (max-width: 767px) {
	.wwh-tiles,
	.wwh-why__inner,
	.wwh-how__steps {
		grid-template-columns: 1fr;
	}

	.wwh-home-usp__item {
		flex-basis: 100%;
	}

	.wwh-home-usp__list {
		flex-wrap: wrap;
	}

	/* Narrow screens: the arrows sit beside the pause button at the bottom so they never cover the caption. */
	.wwh-slider__nav {
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.wwh-slider__nav--prev {
		left: 10px;
	}

	.wwh-slider__nav--next {
		right: 56px;
	}
}

/* spin: live hides the native number spinner everywhere (rule came from an Elementor add-on, gone with Elementor off) */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}