/*
 * Global resets and behaviour that theme.json cannot express - ported from
 * design/_ds/.../tokens/base.css and tokens/motion.css. See NOTES.md.
 * Loaded before assets/css/site.css.
 */

:root {
	--wp--custom--duration-fast: 320ms;
	--wp--custom--duration-base: 480ms;
	--wp--custom--duration-normal: 480ms;
	--wp--custom--duration-slow: 700ms;
	--wp--custom--duration-reveal: 850ms;
	--dur-fast: 320ms;
	--dur-base: 480ms;
	--dur-normal: 480ms;
	--dur-slow: 700ms;
	--dur-reveal: 850ms;
	--wp--custom--ease-out: cubic-bezier(.22, 1, .36, 1);
	--wp--custom--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--wp--custom--ease-entrance: cubic-bezier(.16, 1, .3, 1);
	--ease-standard: cubic-bezier(.22, 1, .36, 1);
	--ease-entrance: cubic-bezier(.16, 1, .3, 1);
	--wp--custom--transition-control: background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
	--wp--custom--transition-media: transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
	--wp--custom--shadow-xs: 0 1px 3px rgba(11, 21, 40, 0.04), 0 1px 2px rgba(11, 21, 40, 0.02);
	--wp--custom--shadow-sm: 0 2px 6px -1px rgba(11, 21, 40, 0.04), 0 6px 14px -2px rgba(11, 21, 40, 0.05);
	--wp--custom--shadow-md: 0 4px 8px -2px rgba(11, 21, 40, 0.05), 0 16px 32px -6px rgba(11, 21, 40, 0.09);
	--wp--custom--shadow-lg: 0 8px 16px -4px rgba(11, 21, 40, 0.06), 0 28px 56px -12px rgba(11, 21, 40, 0.14);
}

/* Staggered entrance cascade */
.phc-stagger > *:nth-child(1), .phc-stagger-grid > *:nth-child(1) { transition-delay: 0ms; }
.phc-stagger > *:nth-child(2), .phc-stagger-grid > *:nth-child(2) { transition-delay: 80ms; }
.phc-stagger > *:nth-child(3), .phc-stagger-grid > *:nth-child(3) { transition-delay: 160ms; }
.phc-stagger > *:nth-child(4), .phc-stagger-grid > *:nth-child(4) { transition-delay: 240ms; }
.phc-stagger > *:nth-child(5), .phc-stagger-grid > *:nth-child(5) { transition-delay: 320ms; }
.phc-stagger > *:nth-child(6), .phc-stagger-grid > *:nth-child(6) { transition-delay: 400ms; }
.phc-stagger > *:nth-child(7), .phc-stagger-grid > *:nth-child(7) { transition-delay: 480ms; }
.phc-stagger > *:nth-child(8), .phc-stagger-grid > *:nth-child(8) { transition-delay: 560ms; }

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	display: block;
}

/* Literal fallbacks are required, not tidiness: theme.json's custom properties
   are only emitted by wp_enqueue_global_styles(), which runs on the front end.
   Anywhere this file loads without them -- an admin screen, a builder panel --
   both vars resolve to nothing, the whole declaration becomes invalid, and the
   selection highlight silently renders transparent. */
::selection {
	background: var(--wp--custom--phc-sky-200, #C9E5F7);
	color: var(--wp--custom--phc-navy-900, #0E1136);
}

::-moz-selection {
	background: var(--wp--custom--phc-sky-200, #C9E5F7);
	color: var(--wp--custom--phc-navy-900, #0E1136);
}

/* 1. Buttons: 320ms, background darkens + 1px lift; trailing arrow slides 2–3px */
a.phc-btn,
button.phc-btn,
.phc-btn,
.wp-block-button > a,
.wp-element-button,
input[type="button"],
input[type="submit"] {
	transition: background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.phc-btn .phc-btn-icon,
.wp-block-button > a::after,
.phc-link-arrow::after,
.phc-service-card-cta span {
	transition: transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

/* 2. Cards (service, location, regimen, partner): 480ms, 3px lift + shadow-md + border darkens */
.phc-card,
.phc-card-interactive,
.phc-service-card,
.phc-partner-card,
.phc-event-card,
.phc-spec-card,
.phc-booking-card,
.phc-pillar,
.phc-location-card,
.phc-partner-block .phc-card {
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out), background-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

/* 3. Nav links / text links / accordion rows: 320ms color, accordion + rotation 480ms */
a,
.phc-nav-links a,
.phc-nav-submenu a,
.phc-link-arrow,
.phc-footer-col a {
	transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out), opacity var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

a:hover {
	color: var(--wp--preset--color--sky-deep);
}

.phc-accordion-icon {
	transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.phc-accordion-panel-outer {
	transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-out), opacity var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

/* 4. Media / images inside MediaFrame: 700ms, scale(1.03) */
.phc-media-frame-inner img,
.phc-media-frame img,
.phc-hero-media img,
.phc-closing-cta-media img,
.phc-partner-media img,
.phc-care-row-media img,
.wp-block-image img {
	transition: transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
}

.phc-media-frame:hover .phc-media-frame-inner img,
.phc-service-card:hover .phc-media-frame-inner img,
.phc-card:hover .phc-media-frame-inner img {
	transform: scale(1.03);
}

:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

/* Standard screen-reader-only utility -- for headings/labels that must exist
   in the accessibility tree (correct heading order, form labels) without
   changing the approved visual design (CLAUDE.md §13). */
.phc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

html {
	scroll-behavior: smooth;
}

section[id],
div[id],
h2[id] {
	scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ==========================================================================
   Elementor Container & Widget Gap Resets
   Ensures seamless section-to-section flow with 0% gap or margin drift.
   ========================================================================== */
.elementor .elementor-element,
.elementor .elementor-widget,
.elementor-widget:not(:last-child) {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-widget-wrap {
	padding: 0 !important;
}

/* Event Details Link Styling Override (Prevents Gutenberg button clash) */
.phc-event-card-cta .phc-link-arrow,
.phc-event-card-cta a {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--wp--preset--spacing--2) !important;
	color: var(--wp--custom--text-primary) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 0 2px 0 !important;
	box-shadow: none !important;
	transform: none !important;
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: var(--wp--custom--weight-medium) !important;
}

.phc-event-card-cta .phc-link-arrow::after,
.phc-event-card-cta a::after {
	content: "\2192" !important;
}