/* =========================================================================
   Azalea Care — block enhancements (front-end + editor)
   These styles enrich what theme.json already provides.
   ========================================================================= */

/* Italic accent on em/i — used by the "individual's life journey" style */
em, i, .has-italic-serif {
	font-family: Lora, Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
}

/* Section eyebrow label (• Discover The Power Of Premium) */
.azalea-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: Lora, Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1rem;
	color: var(--wp--preset--color--accent);
	margin: 0 0 1rem;
}
.azalea-eyebrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
}
.azalea-eyebrow.is-on-dark { color: var(--wp--preset--color--accent); }

/* Pill-shaped "free" tag in the CTA bar */
.azalea-pill {
	display: inline-block;
	padding: 0.35rem 0.95rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

/* Rounded card surface used for service tiles, info boxes, etc. */
.azalea-card {
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: 2rem;
	box-shadow: 0 12px 40px rgba(40, 57, 41, 0.06);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.azalea-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(40, 57, 41, 0.10);
}
.azalea-card.is-dark {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.azalea-card.is-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Round icon medallion in front of feature text */
.azalea-icon-circle {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.azalea-icon-circle svg { width: 24px; height: 24px; }
.azalea-icon-circle.is-dark { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.azalea-icon-circle.is-accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.azalea-icon-circle.is-tiny { width: 24px; height: 24px; }
.azalea-icon-circle.is-tiny svg { width: 14px; height: 14px; stroke-width: 3; }

/* Extra breathing room between the icon and heading inside service cards */
.azalea-card > .azalea-icon-circle { margin-bottom: 0.75rem; }

/* Curved/rotating "Book Appointment * Book Appointment *" badge */
.azalea-badge-circular {
	position: relative;
	width: 140px;
	height: 140px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.azalea-badge-circular__text {
	position: absolute;
	inset: 0;
	animation: azalea-spin 14s linear infinite;
}
.azalea-badge-circular__text svg {
	width: 100%;
	height: 100%;
}
.azalea-badge-circular__text text {
	font-family: Lora, Georgia, serif;
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0.18em;
	fill: currentColor;
}
.azalea-badge-circular__arrow {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
}
.azalea-badge-circular__arrow svg { width: 22px; height: 22px; }
@keyframes azalea-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.azalea-badge-circular__text { animation: none; }
}

/* Rounded image treatment used across the site */
.azalea-rounded-image img,
.azalea-rounded-image .wp-block-image img {
	border-radius: 28px;
	width: 100%;
	height: auto;
	display: block;
}

/* Sticky utility column on the right side of the layout (cart/doc icons) */
.azalea-side-rail {
	position: fixed;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 40;
}
.azalea-side-rail a {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--primary);
}
.azalea-side-rail a:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
@media (max-width: 781px) { .azalea-side-rail { display: none; } }

/* Top utility bar above the main header */
.azalea-top-bar {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
}
.azalea-top-bar a { color: inherit; text-decoration: none; }
.azalea-top-bar a:hover { color: var(--wp--preset--color--accent); }

/* =========================================================================
   Sticky main navigation
   The top bar scrolls away naturally; the main nav pins to the top of the
   viewport with `position: sticky`. A `.is-stuck` class (added by JS once
   the user has scrolled past ~10px) brings in a subtle shadow so the nav
   reads as floating above the content.
   ========================================================================= */
.azalea-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	transition: box-shadow 220ms ease, border-color 220ms ease, padding 220ms ease;
}
.azalea-header.is-stuck {
	box-shadow: 0 8px 24px rgba(40, 57, 41, 0.06);
	border-bottom-color: transparent !important;
}
/* Slightly tighten the header padding when stuck so the page below has
   more breathing room. */
@media (min-width: 782px) {
	.azalea-header.is-stuck {
		padding-top: 0.6rem !important;
		padding-bottom: 0.6rem !important;
	}
}

/* Header navigation: keep links on a single line, no underline */
.wp-block-navigation a {
	font-weight: 500;
}
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	color: var(--wp--preset--color--accent);
}

/* =========================================================================
   Overlay (hamburger) menu — turn the plain link list into interactive
   card-buttons. Applied only when the responsive container is open
   (`.has-modal-open` body, or the container has `is-menu-open`).
   ========================================================================= */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base);
	padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 520px;
	margin: 4rem auto 0;
	width: 100%;
}
/* Hamburger open button */
.wp-block-navigation__responsive-container-open {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 0.6rem 0.75rem;
	color: var(--wp--preset--color--primary);
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}
/* Hamburger close button (top-right of overlay) */
.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: clamp(1rem, 3vw, 1.5rem);
	right: clamp(1rem, 4vw, 2rem);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--base) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms ease, transform 180ms ease;
}
.wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	transform: rotate(90deg);
}

/* The link list inside the open overlay */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-page-list {
	gap: 0.5rem !important;
	width: 100%;
}

/* Each menu item — turn into a tappable card */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	margin: 0 !important;
	opacity: 0;
	transform: translateY(12px);
	animation: azalea-menu-item-in 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(1) { animation-delay: 60ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(2) { animation-delay: 120ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(3) { animation-delay: 180ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(4) { animation-delay: 240ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(5) { animation-delay: 300ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(6) { animation-delay: 360ms; }
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:nth-child(n+7) { animation-delay: 420ms; }

@keyframes azalea-menu-item-in {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.wp-block-navigation__responsive-container-close:hover {
		transform: none;
	}
}

/* The link itself becomes a full-width card-button */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem !important;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base) !important;
	font-family: Lora, Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.5rem, 5vw, 2rem) !important;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition:
		background 200ms ease,
		border-color 200ms ease,
		transform 200ms ease,
		padding-left 200ms ease,
		color 200ms ease;
	position: relative;
	overflow: hidden;
}

/* Counter showing the link order on the left, like a numbered menu */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	counter-increment: azalea-menu;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	counter-reset: azalea-menu;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::before {
	content: "0" counter(azalea-menu);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
	min-width: 28px;
	flex: 0 0 auto;
}

/* Chevron arrow on the right */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	content: "";
	margin-left: auto;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 L17 7'/><path d='M8 7 L17 7 L17 16'/></svg>");
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 auto;
	transition: transform 220ms ease, background-color 220ms ease;
}

/* Hover / active state */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus-visible {
	background: rgba(226, 167, 111, 0.12);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent) !important;
	padding-left: 1.75rem !important;
	outline: none;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus-visible::after {
	transform: translate(3px, -3px) scale(1.05);
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:active {
	transform: scale(0.98);
}

/* Current page is highlighted */
.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.current_page_item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #FFFFFF !important;
}
.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content::before,
.wp-block-navigation__responsive-container.is-menu-open
	.current_page_item > .wp-block-navigation-item__content::before {
	color: #FFFFFF;
}
.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation__responsive-container.is-menu-open
	.current_page_item > .wp-block-navigation-item__content::after {
	background-color: rgba(255, 255, 255, 0.25);
}

/* Footer area inside the overlay — tap-to-call + tap-to-email tiles
   appended via JS (see scroll-reveal.js).  */
.azalea-menu-footer {
	margin-top: 2rem;
	display: grid;
	gap: 0.75rem;
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	transform: translateY(12px);
	animation: azalea-menu-item-in 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: 480ms;
}
.azalea-menu-footer__tile {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.25rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 0.9375rem;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.azalea-menu-footer__tile:hover,
.azalea-menu-footer__tile:focus-visible {
	background: rgba(226, 167, 111, 0.12);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	outline: none;
}
.azalea-menu-footer__tile-icon {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	flex: 0 0 auto;
}
.azalea-menu-footer__tile-icon svg { width: 18px; height: 18px; }
.azalea-menu-footer__tile-label {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	display: block;
	font-weight: 600;
}
.azalea-menu-footer__tile-value {
	font-size: 1.0625rem;
	font-weight: 600;
	color: inherit;
	display: block;
}
.azalea-menu-footer__cta {
	margin-top: 0.5rem;
	background: var(--wp--preset--color--accent);
	border: 0;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 1rem;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background 180ms ease, transform 180ms ease;
}
.azalea-menu-footer__cta:hover {
	background: #FFFFFF;
	color: var(--wp--preset--color--primary);
}
.azalea-menu-footer__cta-arrow {
	transition: transform 180ms ease;
}
.azalea-menu-footer__cta:hover .azalea-menu-footer__cta-arrow {
	transform: translate(2px, -2px);
}

/* Buttons: secondary outline style (dark text on light) */
.is-style-outline > .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	border: 1px solid var(--wp--preset--color--primary);
}
.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Buttons: outline (light) — for use on dark backgrounds */
.is-style-outline-light > .wp-block-button__link {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255,255,255,0.7);
}
.is-style-outline-light > .wp-block-button__link:hover {
	background: #FFFFFF !important;
	color: var(--wp--preset--color--primary) !important;
	border-color: #FFFFFF;
}

/* Buttons: arrow indicator on accent buttons */
.is-style-arrow > .wp-block-button__link::after {
	content: "↗";
	margin-left: 0.6rem;
	display: inline-block;
	transition: transform 200ms ease;
}
.is-style-arrow > .wp-block-button__link:hover::after { transform: translate(2px, -2px); }

/* Style variations registered via PHP */
.wp-block-heading.is-style-serif-italic {
	font-family: Lora, Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
}
.wp-block-group.is-style-soft-card {
	background: var(--wp--preset--color--surface);
	border-radius: 24px;
	padding: 2rem;
}
.wp-block-group.is-style-dark-card {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: 2rem;
}
.wp-block-image.is-style-rounded img,
.wp-block-image.is-style-rounded {
	border-radius: 28px;
	overflow: hidden;
}

/* "Learn More" inline link with arrow */
.azalea-learn-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.azalea-learn-more::after {
	content: "↗";
	transition: transform 200ms ease;
}
.azalea-learn-more:hover::after { transform: translate(2px, -2px); }
.azalea-learn-more.is-on-dark { color: var(--wp--preset--color--base); }

/* Service card with image background (the dark hero-style tile) */
.azalea-service-tile {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--wp--preset--color--base);
	padding: 2rem;
}
.azalea-service-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40,57,41,0.0) 0%, rgba(40,57,41,0.85) 100%);
	z-index: 1;
}
.azalea-service-tile > * { position: relative; z-index: 2; }

/* Floating badge wrapper (e.g. CTA circular badge sitting on hero image) */
.azalea-floating { position: relative; }
.azalea-floating > .azalea-floating__item {
	position: absolute;
	bottom: -2rem;
	right: -2rem;
}

/* Hero right column — stretch the carer image to match the left panel's
   full height. The column already uses verticalAlignment: stretch, so it
   grows; we just have to make the image fill that available height. */
@media (min-width: 782px) {
	.azalea-hero .wp-block-columns > .wp-block-column:nth-child(2) {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}
	.azalea-hero .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group {
		flex: 1;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.azalea-hero .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-image {
		flex: 1;
		margin: 0;
		display: flex;
		min-height: 100%;
	}
	.azalea-hero .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: 28px;
	}
}

/* Footer */
.azalea-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.azalea-footer a { color: inherit; }
.azalea-footer a:hover { color: var(--wp--preset--color--accent); }
.azalea-footer hr { border-color: rgba(255,255,255,0.12); }

/* List-style overrides (CSS list) used inside services */
.azalea-check-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.75rem;
}
.azalea-check-list li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding-left: 0;
}
.azalea-check-list li::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 0.2rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Form input styling — scoped to the contact form only */
.azalea-form {
	background: var(--wp--preset--color--surface-alt);
	padding: 2rem;
	border-radius: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}
.azalea-form *,
.azalea-form *::before,
.azalea-form *::after {
	box-sizing: border-box;
}
.azalea-form > * {
	min-width: 0;
}
.azalea-form input[type="hidden"],
.azalea-form__honeypot {
	display: none !important;
}
.azalea-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	width: 100%;
	min-width: 0;
}
.azalea-form__row > * {
	min-width: 0;
}
/* Mobile + tablet: stack the name row and tighten padding to match
   WordPress' standard 782px column-stacking breakpoint. */
@media (max-width: 781px) {
	.azalea-form {
		padding: 1.25rem;
		gap: 1rem;
		border-radius: 18px;
	}
	.azalea-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}
}

/* Phones: shave a touch more padding so inputs aren't squashed */
@media (max-width: 480px) {
	.azalea-form {
		padding: 1rem;
		gap: 0.875rem;
		border-radius: 16px;
	}
	.azalea-form input[type="text"],
	.azalea-form input[type="email"],
	.azalea-form input[type="tel"],
	.azalea-form input[type="url"],
	.azalea-form textarea {
		padding: 0.75rem 0.875rem;
		font-size: 16px; /* iOS won't auto-zoom on focus when input ≥ 16px */
	}
	.azalea-form__submit {
		width: 100%;
		justify-self: stretch;
		justify-content: center;
		padding: 0.95rem 1.25rem;
	}
	/* Tighten the contact section's vertical padding on phones so the form
	   isn't surrounded by a sea of empty space. */
	.azalea-contact {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
	.azalea-contact .wp-block-columns {
		gap: 2rem !important;
	}
}
.azalea-form__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
	margin: 0;
}
.azalea-form__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.01em;
}
.azalea-form__required {
	color: var(--wp--preset--color--accent);
	margin-left: 2px;
}
.azalea-form input[type="text"],
.azalea-form input[type="email"],
.azalea-form input[type="tel"],
.azalea-form input[type="url"],
.azalea-form textarea {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
	max-width: 100%;
	display: block;
	margin: 0;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 1px 0 rgba(40,57,41,0.02);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.azalea-form input::placeholder,
.azalea-form textarea::placeholder {
	color: rgba(40,57,41,0.4);
}
.azalea-form input:hover,
.azalea-form textarea:hover {
	border-color: rgba(40,57,41,0.2);
}
.azalea-form input:focus,
.azalea-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(226,167,111,0.18);
}
.azalea-form textarea {
	min-height: 140px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.55;
}
.azalea-form__consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.azalea-form__consent input[type="checkbox"] {
	margin-top: 0.2rem;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--accent);
	cursor: pointer;
}
.azalea-form__submit {
	justify-self: start;
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	padding: 0.95rem 1.6rem;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	transition: background 180ms ease, transform 180ms ease;
}
.azalea-form__submit:hover {
	background: var(--wp--preset--color--primary);
}
.azalea-form__submit:focus-visible {
	outline: 3px solid rgba(226,167,111,0.5);
	outline-offset: 2px;
}
.azalea-form__submit-arrow {
	transition: transform 180ms ease;
}
.azalea-form__submit:hover .azalea-form__submit-arrow {
	transform: translate(2px, -2px);
}

/* =========================================================================
   Scroll reveal — sections fade and rise into view as the user scrolls.
   Initial state hides; the JS in scroll-reveal.js adds .is-revealed once
   each section enters the viewport. Honors prefers-reduced-motion.
   ========================================================================= */
.azalea-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.azalea-reveal.is-revealed {
	opacity: 1;
	transform: none;
}
/* Stagger when several reveal targets sit next to each other */
.azalea-reveal.is-revealed + .azalea-reveal {
	transition-delay: 80ms;
}
/* If JS doesn't load, content must still be visible */
html.no-js .azalea-reveal,
.no-js .azalea-reveal {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.azalea-reveal,
	.azalea-reveal.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Hero working hours card */
.azalea-hours-card {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: 1.75rem 2rem;
}
.azalea-hours-card hr { border-color: rgba(255,255,255,0.3); margin: 1rem 0; }
.azalea-hours-card .azalea-hours-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 500;
}

/* Decorative dotted/striped left rail used on some sections */
.azalea-section-mark {
	position: relative;
}
.azalea-section-mark::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.5rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
}

/* =========================================================================
   Image collage shortcode (used in About-Split and Why-Choose-Us)
   ========================================================================= */
.azalea-image-collage {
	position: relative;
	min-height: var(--azalea-collage-min, 520px);
}
.azalea-image-collage__figure {
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
}
.azalea-image-collage__figure img {
	display: block;
	width: 100%;
	height: auto;
}
.azalea-image-collage__figure--a {
	position: absolute;
	top: 0;
	left: 0;
	width: 62%;
	box-shadow: 0 12px 40px rgba(40, 57, 41, 0.12);
}
.azalea-image-collage__figure--b {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 62%;
	box-shadow: 0 16px 50px rgba(40, 57, 41, 0.15);
	transform: rotate(var(--azalea-collage-rotate, 0deg));
}

/* Desktop: cap the collage so wide columns don't blow the images up */
@media (min-width: 782px) {
	.azalea-image-collage {
		max-width: 460px;
		margin-inline: auto;
		min-height: 420px;
	}
	/* Why-Choose-Us specifically: it had a larger min-height in the
	   shortcode call — keep it slightly taller than About-Split. */
	.azalea-why .azalea-image-collage {
		min-height: 460px;
	}
}

/* =========================================================================
   GLOBAL MOBILE RESPONSIVE BEHAVIOUR
   At 781px and below, WordPress core stacks every wp:columns block to a
   single column. We mirror that for our flex/grid layouts and trim the
   overall vertical rhythm so each section has comfortable spacing on
   phones and small tablets without acres of empty space.
   ========================================================================= */
@media (max-width: 781px) {

	/* Section padding — every section trims top/bottom and pulls
	   horizontal padding in so content reaches closer to the edges. */
	.azalea-hero,
	.azalea-feature-badges,
	.azalea-about,
	.azalea-services,
	.azalea-why,
	.azalea-cta,
	.azalea-page-hero,
	.azalea-services-list,
	.azalea-image-text,
	.azalea-quote,
	.azalea-blog-list,
	.azalea-contact,
	.azalea-service-deepdive {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
		padding-left: 1.375rem !important; /* 0.75rem + 10px */
		padding-right: 1.375rem !important;
	}
	/* Hero gets slightly tighter outer padding — the dark green panel
	   already provides its own visual breathing room. Top is also pulled
	   in so the hero starts close to the header. */
	.azalea-hero {
		padding-top: 1.25rem !important;
		padding-left: 1.125rem !important; /* 0.5rem + 10px */
		padding-right: 1.125rem !important;
	}

	/* About-Split: trim the top margin so it doesn't sit far below the
	   feature-badges strip on mobile. */
	.azalea-about {
		padding-top: 1.5rem !important;
	}

	/* Services container: rounded corners on mobile + a touch more
	   horizontal padding than the rest, since the cards inside need
	   room from the section edges. */
	.azalea-services {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		border-radius: 24px;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	/* The <main> wrapper of every page applies has-global-padding from
	   theme.json (1.5rem each side). On mobile this stacks on top of
	   each section's own padding, leaving content far from the edge.
	   Zero it on mobile so sections control their own padding. */
	main.wp-block-group.has-global-padding,
	body.has-global-padding,
	.wp-site-blocks > .has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Form name row — bulletproof stack on mobile. */
	.azalea-form .azalea-form__row {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Pull column gaps in so stacked content isn't separated by huge gulfs. */
	.azalea-hero .wp-block-columns,
	.azalea-about .wp-block-columns,
	.azalea-services .wp-block-columns,
	.azalea-why .wp-block-columns,
	.azalea-cta .wp-block-columns,
	.azalea-services-list .wp-block-columns,
	.azalea-image-text .wp-block-columns,
	.azalea-contact .wp-block-columns {
		gap: 2rem !important;
	}

	/* HERO ----------------------------------------------------------- */
	.azalea-hero .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Inner dark-green panel: less padding so the headline stays readable. */
	.azalea-hero .has-primary-background-color {
		padding: 1.25rem !important;
		border-radius: 20px !important;
	}
	.azalea-hero .has-primary-background-color h1 {
		font-size: clamp(2rem, 9vw, 2.75rem) !important;
		line-height: 1.1 !important;
	}
	/* Image + working-hours card group below the panel: stack vertically. */
	.azalea-hero .has-primary-background-color + .wp-block-group .wp-block-image,
	.azalea-hero .has-primary-background-color + .wp-block-group .azalea-hours-card {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.azalea-hero .azalea-hours-card {
		padding: 1.25rem 1.5rem;
	}
	/* Floating "Book Appointment" badge: don't let it spill past the
	   viewport edge — pull it inward and slightly shrink it. */
	.azalea-hero .azalea-floating__item {
		bottom: 0.5rem;
		right: 0.5rem;
	}
	.azalea-hero .azalea-badge-circular {
		width: 110px;
		height: 110px;
	}

	/* FEATURE BADGES ------------------------------------------------- */
	.azalea-feature-badges > .wp-block-group {
		padding: 1.25rem !important;
		border-radius: 18px !important;
		gap: 1rem !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.azalea-feature-badges > .wp-block-group > .wp-block-group {
		justify-content: flex-start !important;
	}

	/* ABOUT-SPLIT ---------------------------------------------------- */
	.azalea-about .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Headline tightens up on small screens. */
	.azalea-about h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}
	/* Badge + intro paragraph flex group → stack vertically. */
	.azalea-about .wp-block-column .wp-block-group[style*="block-gap"],
	.azalea-about .wp-block-column > .wp-block-group {
		flex-wrap: wrap;
	}
	.azalea-about .wp-block-columns .wp-block-columns {
		gap: 1rem !important;
	}

	/* SERVICES GRID -------------------------------------------------- */
	/* The native grid block already handles re-flow via minimumColumnWidth,
	   but we also tighten its padding so cards have room to breathe. */
	.azalea-services .azalea-services-grid {
		gap: 1rem !important;
	}
	.azalea-card {
		padding: 1.5rem;
		border-radius: 20px;
	}
	.azalea-services h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}

	/* WHY-CHOOSE-US -------------------------------------------------- */
	.azalea-why .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.azalea-why h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}
	/* The "Contact Us" badge below the collage: re-align so it doesn't
	   overlap the image after stacking. */
	.azalea-why .azalea-image-collage + .wp-block-group {
		margin-top: 1rem !important;
		justify-content: center !important;
	}

	/* IMAGE COLLAGE (used inside About + Why) ----------------------- */
	.azalea-image-collage {
		min-height: 0;
		display: grid;
		gap: 0.5rem;
	}
	.azalea-image-collage__figure {
		position: static !important;
		width: 100% !important;
	}
	.azalea-image-collage__figure--b {
		transform: none !important;
	}

	/* CTA BANNER ----------------------------------------------------- */
	.azalea-cta__inner {
		padding: 2rem 1.5rem !important;
		border-radius: 22px !important;
	}
	.azalea-cta__inner h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}
	.azalea-cta__inner .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.azalea-cta__inner .wp-block-buttons {
		justify-content: flex-start !important;
	}
	.azalea-cta__inner .wp-block-button {
		width: 100%;
	}
	.azalea-cta__inner .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* PAGE HERO ------------------------------------------------------ */
	.azalea-page-hero {
		border-radius: 0;
	}
	.azalea-page-hero h1 {
		font-size: clamp(2rem, 9vw, 2.75rem) !important;
	}

	/* SERVICES LIST -------------------------------------------------- */
	.azalea-services-list .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* IMAGE + TEXT --------------------------------------------------- */
	.azalea-image-text .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* BLOG LIST ------------------------------------------------------ */
	.azalea-blog-list h2 {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}
	.azalea-blog-list .wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	/* CONTACT --------------------------------------------------------
	   Already covered by the .azalea-form mobile rules above; this just
	   makes sure the column stack matches the rest of the site. */
	.azalea-contact .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* HEADER + TOP BAR ----------------------------------------------- */
	.azalea-top-bar {
		font-size: 0.8125rem;
		padding: 0.5rem 1rem !important;
		text-align: center;
	}
	.azalea-top-bar .wp-block-group {
		flex-direction: column;
		gap: 0.25rem !important;
		align-items: center !important;
	}
	.azalea-header {
		padding: 0.75rem 1rem !important;
	}
	/* Hide the "Book Appointment" desktop button — it's already in the
	   mobile menu / available via the hero. */
	.azalea-header > .wp-block-group > .wp-block-buttons {
		display: none;
	}

	/* FOOTER --------------------------------------------------------- */
	.azalea-footer {
		padding: 3rem 1.25rem 2rem !important;
	}
	.azalea-footer .wp-block-columns {
		gap: 2rem !important;
	}
	.azalea-footer .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.azalea-footer .wp-block-group:last-child {
		flex-direction: column;
		text-align: center;
		gap: 0.5rem !important;
		align-items: center !important;
	}
}

/* =========================================================================
   PHONES (≤ 480px) — extra-tight rhythm + bigger touch targets
   ========================================================================= */
@media (max-width: 480px) {

	.azalea-hero,
	.azalea-feature-badges,
	.azalea-about,
	.azalea-services,
	.azalea-why,
	.azalea-cta,
	.azalea-page-hero,
	.azalea-services-list,
	.azalea-image-text,
	.azalea-blog-list,
	.azalea-contact,
	.azalea-service-deepdive,
	.azalea-quote {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
		padding-left: 1.125rem !important; /* 0.5rem + 10px */
		padding-right: 1.125rem !important;
	}
	/* Hero on phones — small breathing room. */
	.azalea-hero {
		padding-top: 1rem !important;
		padding-left: 0.875rem !important; /* 0.25rem + 10px */
		padding-right: 0.875rem !important;
	}

	/* About: pull the top further in on phones too. */
	.azalea-about {
		padding-top: 1rem !important;
	}

	/* Services: keep the rounded card visible but tighten margins. */
	.azalea-services {
		padding-left: 0.875rem !important;
		padding-right: 0.875rem !important;
		border-radius: 20px;
		margin-left: 0.25rem;
		margin-right: 0.25rem;
	}

	/* Hero: tighten the dark panel further. */
	.azalea-hero .has-primary-background-color {
		padding: 1rem !important;
		border-radius: 16px !important;
	}
	.azalea-hero .has-primary-background-color h1 {
		font-size: 1.75rem !important;
		line-height: 1.1 !important;
	}
	.azalea-hero .has-primary-background-color p {
		font-size: 0.95rem !important;
	}
	/* Image collage on phones — tighter still */
	.azalea-image-collage {
		gap: 0.375rem;
	}

	/* Eyebrow + dot use a smaller cap. */
	.azalea-eyebrow {
		font-size: 0.875rem;
	}

	/* Cards: slimmer interior on phones. */
	.azalea-card {
		padding: 1.25rem;
	}

	/* Services grid: force single column at the smallest sizes — the
	   minimum-column-width fallback would otherwise still try to fit two. */
	.azalea-services .azalea-services-grid {
		grid-template-columns: 1fr !important;
	}

	/* Big CTA buttons inside the hero/cta — full-width and centred. */
	.azalea-hero .wp-block-buttons,
	.azalea-cta .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.azalea-hero .wp-block-button,
	.azalea-cta .wp-block-button {
		width: 100%;
	}
	.azalea-hero .wp-block-button__link,
	.azalea-cta .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* Hide the rotating circular badge on the hero on phones — it
	   competes with the content on small screens. */
	.azalea-hero .azalea-floating__item {
		display: none;
	}

	/* "Free – book your free assessment" line wraps cleanly. */
	.azalea-services > .wp-block-group:last-child {
		text-align: center;
		flex-direction: column !important;
	}
}