/**
 * HBA – homepage/section pattern styles.
 * One block per pattern (see /patterns). Global tokens live in theme.json.
 */

/* ==========================================================================
   Shared section rhythm
   ========================================================================== */
.hba-sections h2.wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.15em;
}
.hba-sections .wp-block-separator.is-style-hba-accent {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}
.hba-sections p.is-style-hba-eyebrow,
.hba-label {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}
.hba-label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Trust bar (hba/trust-bar)
   ========================================================================== */
.hba-trust {
	padding-top: var(--wp--preset--spacing--50);
}
.hba-trust__inner {
	/* Border colour (#ABABAB) at reduced opacity for a softer line */
	border-top: 1px solid rgba(171, 171, 171, 0.55);
	border-bottom: 1px solid rgba(171, 171, 171, 0.55);
	padding: var(--wp--preset--spacing--40) 0;
}
.hba-trust__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.05rem, 1.5vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.hba-trust .hba-trust__logos {
	gap: 0;
	align-items: center;
}
.hba-trust__logos > .hba-trust__logo {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
}
.hba-trust__logos > .hba-trust__logo + .hba-trust__logo {
	border-left: 1px solid var(--wp--preset--color--border-light);
}
.hba-trust__logo img {
	width: auto;
	max-width: 100%;
	height: clamp(48px, 5.4vw, 100px);
	object-fit: contain;
	border-radius: 0;
}
@media (max-width: 781px) {
	.hba-trust .hba-trust__logos > .hba-trust__logo {
		flex: 0 0 50%;
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--20);
	}
	.hba-trust__logos > .hba-trust__logo:nth-child(odd) {
		border-left: 0;
	}
	.hba-trust__logos > .hba-trust__logo:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--border-light);
	}
}

/* ==========================================================================
   Where I Can Help (hba/where-i-can-help)
   ========================================================================== */
.hba-help {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}
.hba-help .hba-help__intro {
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}
.hba-help__lead {
	max-width: 560px;
}
.hba-help__image {
	margin: 0;
}
.hba-help__image img {
	width: 100%;
	aspect-ratio: 740 / 430;
	object-fit: cover;
}

.hba-help .hba-services {
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hba-service {
	padding: var(--wp--preset--spacing--40);
	border-color: var(--wp--preset--color--border-light);
	border-style: solid;
	border-width: 0;
	transition: background-color 0.25s ease;
}
.hba-service:not(:nth-child(3n)) {
	border-right-width: 1px;
}
.hba-service:nth-child(-n + 3) {
	border-bottom-width: 1px;
}
.hba-service:hover {
	background-color: var(--wp--preset--color--cream);
}
.hba-service > * {
	margin-top: 0;
}
.hba-service .hba-service__icon {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.hba-service__icon img {
	border-radius: 0;
	height: auto;
}
.hba-service .hba-service__title {
	margin: 0 0 0.45em;
	font-weight: 600;
}
.hba-service__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}
.hba-service .hba-service__points {
	margin: 0.15em 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.hba-service .hba-service__link {
	margin: 1.1em 0 0;
	font-size: clamp(14px, calc(3.4px + 0.708vw), 17px);
	font-weight: 600;
}
.hba-service__link a {
	display: inline-block;
	padding: 0 0.4em 0.25em;
	border-bottom: 2px solid currentColor;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.25s ease;
}
.hba-service__link a:hover,
.hba-service__link a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Whole card is clickable: the "See Details" link is stretched over the card */
.hba-service {
	position: relative;
	cursor: pointer;
}
.hba-service__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hba-service:hover .hba-service__link a {
	color: var(--wp--preset--color--primary);
}
.hba-service:has(.hba-service__link a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}
.hba-service__link a:focus-visible {
	outline: none;
}

/*
 * Desktop hover (design): card turns cream, icon collapses so the title moves up,
 * bullet points and "See Details" slide in. Touch/small screens show everything.
 */
@media (min-width: 1100px) {
	.hba-service .hba-service__icon {
		max-height: 90px;
		overflow: hidden;
		transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.hba-service .hba-service__points,
	.hba-service .hba-service__link {
		max-height: 0;
		margin-top: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.hba-service:is(:hover, :focus-within) .hba-service__icon {
		max-height: 0;
		margin-bottom: 0;
		opacity: 0;
	}
	.hba-service .hba-service__points {
		transform: translate3d(0, 8px, 0);
	}
	.hba-service:is(:hover, :focus-within) .hba-service__points {
		max-height: 8em;
		margin-top: 0.15em;
		opacity: 1;
		transform: none;
		transition-delay: 0.08s;
	}
	.hba-service:is(:hover, :focus-within) .hba-service__link {
		max-height: 3em;
		margin-top: 1.1em;
		opacity: 1;
		transform: none;
		transition-delay: 0.14s;
	}
	.hba-service:is(:hover, :focus-within) {
		background-color: var(--wp--preset--color--cream);
	}
}
@media (max-width: 1099px) {
	.hba-help .hba-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hba-help .hba-service {
		border-width: 0 0 1px;
	}
	.hba-help .hba-service:nth-child(odd) {
		border-right-width: 1px;
	}
}
@media (max-width: 599px) {
	.hba-help .hba-services {
		grid-template-columns: minmax(0, 1fr);
	}
	.hba-help .hba-service {
		padding-left: 0;
		padding-right: 0;
	}
	.hba-help .hba-service:nth-child(odd) {
		border-right-width: 0;
	}
}

/* ==========================================================================
   Connections + curved carousel (hba/connections-carousel)
   ========================================================================== */
.hba-connect {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
	overflow: hidden;
}
.hba-connect .hba-connect__rule {
	width: min(560px, 60%);
	height: 1px;
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--primary), transparent);
	opacity: 1;
}
.hba-connect .hba-connect__title {
	max-width: 900px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hba-connect .hba-connect__text {
	max-width: 1000px;
	margin: 0.6em auto 0 !important;
	font-size: var(--wp--preset--font-size--lead);
}

.hba-connect .hba-carousel {
	gap: clamp(12px, 1.1vw, 20px);
	margin-top: var(--wp--preset--spacing--40);
	padding: clamp(16px, 2.5vw, 40px) 0;
	overflow-x: auto;
	scrollbar-width: none;
}
/* Marquee mode (JS running): scrolled by script, dragged by pointer, page still scrolls vertically */
.hba-connect .hba-carousel.is-marquee {
	overflow-x: hidden;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}
.hba-carousel.is-dragging {
	cursor: grabbing;
}
/* Pause/play control: hidden until focused with the keyboard */
.hba-connect .hba-carousel__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.hba-connect .hba-carousel__toggle:focus-visible {
	position: relative;
	z-index: 3;
	display: block;
	width: auto;
	height: auto;
	margin: var(--wp--preset--spacing--30) auto 0 !important;
	padding: 0.6em 1.2em;
	overflow: visible;
	clip: auto;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: 600 15px/1.2 var(--wp--preset--font-family--inter);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.hba-carousel::-webkit-scrollbar {
	display: none;
}
.hba-carousel .hba-carousel__slide {
	--t: 0;
	--a: 0;
	flex: 0 0 clamp(250px, 24.2vw, 465px);
	margin: 0 !important;
	transform: perspective(1400px) rotateY(calc(var(--t) * -22deg)) scale(calc(1 + var(--a) * 0.1));
	backface-visibility: hidden;
}
.hba-carousel__rail {
	display: flex;
	flex-wrap: nowrap;
	gap: inherit;
	width: max-content;
	will-change: transform;
}
.hba-carousel__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 465 / 410;
	object-fit: cover;
	border-radius: 0;
	-webkit-user-drag: none;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.hba-carousel .hba-carousel__slide {
		transform: none;
	}
}

/* ==========================================================================
   Your First Visit (hba/first-visit-steps)
   ========================================================================== */
.hba-visit {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}
.hba-visit .hba-visit__intro {
	margin-bottom: var(--wp--preset--spacing--40);
}
.hba-visit__intro > p:last-child {
	margin: 0;
}
.hba-visit .hba-step {
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0;
}
.hba-visit .hba-step + .hba-step {
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.hba-step .hba-step__body {
	gap: clamp(1.75rem, 4.5vw, 5.5rem);
}
.hba-step .hba-step__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 5.2vw, 98px);
	height: clamp(64px, 5.2vw, 98px);
	margin: 0;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.35rem, 2.1vw, 2.5rem);
	font-weight: 700;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.hba-step .hba-step__text {
	position: relative;
	margin: 0;
	padding: 0.5rem 0 0.5rem clamp(1.75rem, 4.5vw, 5.5rem);
}
.hba-step__text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2px;
	height: max(100%, clamp(140px, 11vw, 210px));
	transform: translateY(-50%);
	background: var(--wp--preset--color--primary);
}
.hba-step__text::after {
	content: "";
	position: absolute;
	left: -4px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.hba-step__text h3 {
	margin: 0 0 0.35em;
}
.hba-step__text p {
	margin: 0;
	max-width: 400px;
	font-size: var(--wp--preset--font-size--medium);
}
.hba-step__image {
	margin: 0;
}
.hba-step__image img {
	width: 100%;
	aspect-ratio: 612 / 352;
	object-fit: cover;
}
@media (max-width: 781px) {
	.hba-visit .hba-step {
		gap: var(--wp--preset--spacing--40);
	}
	.hba-step--reverse > .wp-block-column:first-child {
		order: 2;
	}
}

/* ==========================================================================
   Not Sure Which Treatment box (hba/not-sure-cta)
   ========================================================================== */
.hba-choose-section {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--60);
}
.hba-choose {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.hba-choose::before,
.hba-choose::after {
	content: "";
	position: absolute;
	top: 18%;
	bottom: 18%;
	width: clamp(80px, 9.5vw, 180px);
	background: url("../images/watermark.webp") center / contain no-repeat;
	pointer-events: none;
}
.hba-choose::before {
	left: 2.5%;
}
.hba-choose::after {
	right: 2.5%;
}
.hba-choose > * {
	position: relative;
	z-index: 1;
}
.hba-choose h2.wp-block-heading {
	margin-bottom: 0.2em;
}
.hba-choose p {
	margin-top: 0;
}
.hba-choose .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}
.hba-choose .wp-block-separator.is-style-hba-dot {
	width: 100%;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}
.hba-button-caps .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.hba-choose p.hba-choose__tagline {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(0.95rem, 1.05vw, 1.25rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	white-space: pre-wrap;
}
@media (max-width: 781px) {
	.hba-choose::before,
	.hba-choose::after {
		display: none;
	}
}

/* ==========================================================================
   Meet Pinky (hba/meet-pinky)
   ========================================================================== */
.hba-meet-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}
.hba-meet-section .hba-meet {
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) 0;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}
.hba-meet__body {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
}
.hba-meet__body > p:not(.is-style-hba-eyebrow) {
	max-width: 620px;
}
.hba-meet__body .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}
.hba-meet .hba-meet__portrait {
	margin: 0 0 0 auto;
	max-width: 530px;
}
.hba-meet__portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 528 / 600;
	object-fit: cover;
	object-position: center top;
	border-radius: 999px 999px 0 0;
}
@media (max-width: 781px) {
	.hba-meet-section .hba-meet {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
	}
	.hba-meet__body {
		padding-top: 0;
		padding-bottom: 0;
	}
	.hba-meet .hba-meet__portrait {
		margin: 0 auto;
		max-width: 360px;
	}
}

/* ==========================================================================
   Testimonials (hba/testimonials)
   ========================================================================== */
.hba-reviews {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.hba-reviews .hba-reviews__head {
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.hba-reviews__head h2.wp-block-heading {
	margin: 0;
}
.hba-reviews .hba-reviews__list {
	margin-top: var(--wp--preset--spacing--20);
}
.hba-reviews .hba-review {
	padding: var(--wp--preset--spacing--40) 0;
}
.hba-reviews .hba-review + .hba-review {
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.hba-review .hba-review__quote {
	position: relative;
	margin: 0 0 0.7em;
	padding-top: 0.95em;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--quote);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}
.hba-review__quote::before {
	content: "\201C";
	position: absolute;
	top: -0.12em;
	left: -0.02em;
	font-size: 2.1em;
	line-height: 1;
	color: var(--wp--preset--color--primary-soft);
}
.hba-review__more {
	margin-left: 0.3em;
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(14px, calc(3.2px + 0.667vw), 16px);
	font-weight: 600;
	white-space: nowrap;
	text-underline-offset: 4px;
}
.hba-review .hba-review__meta {
	gap: var(--wp--preset--spacing--30);
}
.hba-review__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
}
.hba-review__name::before {
	content: "\2014  ";
}
.hba-review .hba-review__stars {
	margin: 0.15em 0 0 1.2em;
	font-size: clamp(16px, calc(4.0px + 0.833vw), 20px);
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--wp--preset--color--star);
}
.hba-review .hba-review__source {
	margin: 0;
	flex-shrink: 0;
}
.hba-review__source img {
        width: 140px !important;
    
	border-radius: 0;
}

/* ==========================================================================
   Ready To Begin banner (hba/ready-cta)
   ========================================================================== */
.hba-ready-section {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--60);
}
.hba-ready {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(300px, 24vw, 430px);
	padding: var(--wp--preset--spacing--50) clamp(1.5rem, 4vw, 4rem);
	border-radius: var(--wp--custom--radius--card);
}
.hba-ready > * {
	max-width: 640px;
	margin-top: 0;
}
.hba-ready > p:not(.is-style-hba-eyebrow) {
	margin-bottom: 0;
}
.hba-ready .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}
@media (max-width: 781px) {
	.hba-ready {
		box-shadow: inset 0 0 0 100vmax rgba(246, 239, 235, 0.6);
	}
}

/* ==========================================================================
   Motion (site-wide, automatic for every section — see assets/js/animations.js)
   - First section of a page (hero): entrance on load (CSS below)
   - Other sections: scroll reveal (.hba-reveal added by JS)
   - Opt out with the block class "hba-no-animate"
   ========================================================================== */
.hba-reveal {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hba-delay, 0ms),
		transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hba-delay, 0ms);
}
.hba-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* Images & carousels: soft zoom-in instead of a slide */
.hba-reveal--zoom {
	transform: scale(0.965);
}
.hba-reveal--zoom.is-visible {
	transform: none;
}
.hba-service.hba-reveal {
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hba-delay, 0ms),
		transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hba-delay, 0ms),
		background-color 0.4s ease;
}

@keyframes hba-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hba-settle {
	from {
		transform: scale(1.06);
	}
	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Hero entrance: text blocks in the first section rise in sequence */
	body:not(.editor-styles-wrapper) .hba-sections > :first-child:not(.hba-no-animate) :is(.wp-block-column, .hba-hero__content) > :is(h1, h2, h3, p, ul, .wp-block-buttons, .wp-block-quote, .wp-block-separator, .wp-block-list) {
		animation: hba-fade-up 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(2) { animation-delay: 0.07s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(3) { animation-delay: 0.14s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(4) { animation-delay: 0.21s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(5) { animation-delay: 0.28s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(6) { animation-delay: 0.35s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(7) { animation-delay: 0.42s; }
	body:not(.editor-styles-wrapper) .hba-sections > :first-child :is(.wp-block-column, .hba-hero__content) > :nth-child(n + 8) { animation-delay: 0.49s; }

	/* Hero photo: no opacity change (keeps LCP fast), just a slow settle */
	body:not(.editor-styles-wrapper) .hba-sections > :first-child:not(.hba-no-animate) .wp-block-image img {
		animation: hba-settle 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	/* Buttons: subtle lift */
	.wp-block-button__link {
		transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}