/*
 * EZ Design — WordPress frontend design primitives.
 * Version: 0.1.0
 *
 * Load order:
 *   1. WordPress core block styles
 *   2. ez-theme-main (EZ Theme base CSS)
 *   3. ez-design-frontend (this file)
 *   4. ez-theme-customizer-vars (wp_head priority 99 — overrides CSS vars below)
 *   5. Page/block inline overrides
 */

/* =============================================================
   CSS CUSTOM PROPERTIES
   All values are overridable via EZ Theme Customizer (wp_head).
   ============================================================= */

:root {
	--ez-section-padding-y: 5.625rem;
	--ez-card-padding: 2rem;
	--ez-card-radius: 0.75rem;
	--ez-card-border-opacity: 0.12;
	--ez-lede-size: 1.25rem;
	--ez-grid-gap: 1.75rem;
	--ez-kicker-spacing: 0.14em;
	--ez-button-padding-x: 1.25rem;
	--ez-button-padding-y: 0.85rem;
	--ez-space-none: 0;
	--ez-space-xs: 0.5rem;
	--ez-space-sm: 0.75rem;
	--ez-space-md: 1rem;
	--ez-space-lg: 1.5rem;
	--ez-space-xl: 2rem;
	--ez-type-xs: 0.75rem;
	--ez-type-sm: 0.875rem;
	--ez-type-base: 1rem;
	--ez-type-md: 1.125rem;
	--ez-type-lg: 1.25rem;
	--ez-type-xl: 1.5rem;
	--ez-type-2xl: 1.875rem;
	--ez-type-3xl: 2.25rem;
	--ez-text-primary: #D3D8DB;
	--ez-text-inverse: #FFFFFF;
	--ez-accent-primary: #219997;
}

/* =============================================================
   LAYOUT UTILITIES
   ============================================================= */

.ez-section {
	padding-block: var(--ez-section-padding-y);
}

.ez-narrow {
	width: min(100% - 2rem, var(--ez-layout-content, 760px));
	margin-inline: auto;
}

.ez-wide {
	width: min(100% - 2rem, var(--ez-layout-wide, 1200px));
	margin-inline: auto;
}

.ez-center {
	text-align: center;
}

/* =============================================================
   TYPOGRAPHY UTILITIES
   ============================================================= */

.ez-kicker {
	text-transform: uppercase;
	letter-spacing: var(--ez-kicker-spacing);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ez-lede {
	font-size: var(--ez-lede-size);
	line-height: 1.55;
}

/* =============================================================
   CARD SYSTEM
   ============================================================= */

.ez-card {
	padding: var(--ez-card-padding);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity));
	border-radius: var(--ez-card-radius);
	background: var(--ez-color-bg, #fff);
}

.ez-card-grid {
	display: grid;
	gap: var(--ez-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* =============================================================
   SURFACE PRESETS
   ============================================================= */

.ez-surface-muted {
	background: var(--ez-color-muted, #f4f0ec);
}

.ez-surface-dark {
	background: #101416;
	color: #fff;
}

/* =============================================================
   BLOCK STYLES — BUTTONS
   ============================================================= */

.wp-block-button__link {
	padding: var(--ez-button-padding-y) var(--ez-button-padding-x);
}

.is-style-pill .wp-block-button__link {
	border-radius: 999px;
}

.is-style-ez-outline .wp-block-button__link {
	background: var(--ez-button-ez-outline-bg, transparent);
	border: var(--ez-button-border-width, 1px) var(--ez-button-border-style, solid) var(--ez-button-ez-outline-border, currentColor);
	color: var(--ez-button-ez-outline-color, inherit);
}

.is-style-ez-outline .wp-block-button__link:hover {
	background: var(--ez-button-ez-outline-hover-bg, currentColor);
	border-color: var(--ez-button-ez-outline-hover-border, currentColor);
	color: var(--ez-button-ez-outline-hover-color, var(--ez-color-bg, #fff));
}

/* =============================================================
   BLOCK STYLES — COVER (hero / CTA band)
   ============================================================= */

.wp-block-cover.is-style-ez-hero {
	min-height: 70vh;
}

.wp-block-cover.is-style-ez-hero .wp-block-cover__inner-container {
	max-width: min(100% - 2rem, var(--ez-layout-content, 760px));
	margin-inline: auto;
}

.wp-block-cover.is-style-ez-cta-band {
	padding-block: clamp(3rem, 6vw, 5rem);
	text-align: center;
}

.wp-block-cover.is-style-ez-cta-band .wp-block-cover__inner-container {
	max-width: min(100% - 2rem, var(--ez-layout-content, 760px));
	margin-inline: auto;
}

/* =============================================================
   BLOCK STYLES — GROUP (surface variants)
   ============================================================= */

.wp-block-group.is-style-ez-muted-surface {
	background: var(--ez-color-muted, #f4f0ec);
}

.wp-block-group.is-style-ez-dark-surface {
	background: #101416;
	color: #fff;
}

.ez-design-bg-surface {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ez-block-bg, var(--ez-color-bg, #101416));
}

.ez-design-bg-surface > :not(.ez-design-bg-layer) {
	position: relative;
	z-index: 2;
}

.ez-design-bg-surface::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
	content: "";
	background: var(--ez-bg-overlay-color, transparent);
	opacity: var(--ez-bg-overlay-opacity, 1);
}

.ez-design-bg-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
	background: var(--ez-block-bg, var(--ez-color-bg, #101416));
}

.ez-design-bg-layer iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	border: 0;
	filter: saturate(0.9) contrast(0.95);
}

.ez-design-bg-surface[data-ez-bg-state="fallback"] .ez-design-bg-layer {
	display: none;
}

/* =============================================================
   BLOCK STYLES — COLUMNS (card/service grids)
   ============================================================= */

.wp-block-columns.is-style-ez-card-grid,
.wp-block-columns.is-style-ez-service-grid {
	gap: var(--ez-grid-gap, 1.75rem);
}

.wp-block-columns.is-style-ez-card-grid .wp-block-column,
.wp-block-columns.is-style-ez-service-grid .wp-block-column {
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

/* =============================================================
   BLOCK STYLES — PARAGRAPH (kicker / lede)
   ============================================================= */

p.is-style-ez-kicker {
	text-transform: uppercase;
	letter-spacing: var(--ez-kicker-spacing, 0.14em);
	font-size: 0.8125rem;
	font-weight: 700;
}

p.is-style-ez-lede {
	font-size: var(--ez-lede-size, 1.25rem);
	line-height: 1.55;
}

/* =============================================================
   GOVERNED PATTERNS — CTA / NAP
   ============================================================= */

.ez-pattern-cta-nap-stack {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	align-items: center;
	padding: var(--ez-section-padding-y, 5.625rem) min(5vw, 2rem);
	text-align: center;
}

.ez-pattern-cta-nap-stack__actions,
.ez-pattern-cta-nap-stack__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ez-space-md, 1rem);
	align-items: center;
	justify-content: center;
}

.ez-pattern-cta-nap-stack__contact {
	font-size: var(--ez-type-sm, 0.875rem);
	opacity: 0.82;
}

/* =============================================================
   GOVERNED PATTERNS — SOFT CTA CONTENT
   ============================================================= */

.ez-pattern-soft-cta-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-soft-cta-section__content {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-soft-cta-section__heading {
	margin: 0;
}

.ez-pattern-soft-cta-section__text,
.ez-pattern-soft-cta-section__note {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-soft-cta-section__note {
	font-size: var(--ez-type-sm, 0.875rem);
	opacity: 0.78;
}

.ez-pattern-soft-cta-section__actions {
	margin-block-start: var(--ez-space-sm, 0.75rem);
}

/* =============================================================
   GOVERNED PATTERNS — FAQ CONTENT
   ============================================================= */

.ez-pattern-faq-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-faq-section__items {
	display: grid;
	gap: var(--ez-space-lg, 1.5rem);
}

.ez-pattern-faq-section__item {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	padding-block-end: var(--ez-space-lg, 1.5rem);
	border-block-end: 1px solid rgba(0, 0, 0, 0.12);
}

.ez-pattern-faq-section__question {
	margin: 0;
	font-size: var(--ez-type-lg, 1.25rem);
}

.ez-pattern-faq-section__answer {
	margin: 0;
	line-height: 1.65;
}

/* =============================================================
   GOVERNED PATTERNS — TRUST / PROOF CONTENT
   ============================================================= */

.ez-pattern-trust-proof-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-trust-proof-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-trust-proof-section__heading,
.ez-pattern-trust-proof-section__point-title {
	margin: 0;
}

.ez-pattern-trust-proof-section__lede,
.ez-pattern-trust-proof-section__point-text,
.ez-pattern-trust-proof-section__quote p {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-trust-proof-section__points {
	gap: var(--ez-grid-gap, 1.75rem);
}

.ez-pattern-trust-proof-section__point {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
}

.ez-pattern-trust-proof-section__quote {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	margin: 0;
	padding: var(--ez-card-padding, 2rem);
	border-inline-start: 4px solid var(--ez-accent-primary, #219997);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-trust-proof-section__quote cite {
	font-size: var(--ez-type-sm, 0.875rem);
	font-style: normal;
	opacity: 0.78;
}

.ez-pattern-trust-proof-section__logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ez-space-md, 1rem);
}

.ez-pattern-trust-proof-section__logo-placeholder {
	margin: 0;
	padding: var(--ez-space-sm, 0.75rem) var(--ez-space-md, 1rem);
	border: 1px dashed rgba(0, 0, 0, 0.28);
	border-radius: var(--ez-card-radius, 0.75rem);
	font-size: var(--ez-type-sm, 0.875rem);
}

/* =============================================================
   GOVERNED PATTERNS — EXPERTISE NOTE CONTENT
   ============================================================= */

.ez-pattern-expertise-note-section {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	padding: var(--ez-card-padding, 2rem);
	border-inline-start: 4px solid var(--ez-accent-primary, #219997);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-expertise-note-section__heading {
	margin: 0;
}

.ez-pattern-expertise-note-section__text,
.ez-pattern-expertise-note-section__support {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-expertise-note-section__support {
	font-size: var(--ez-type-sm, 0.875rem);
	opacity: 0.78;
}

/* =============================================================
   GOVERNED PATTERNS — PROOF MEDIA GALLERY CONTENT
   ============================================================= */

.ez-pattern-proof-gallery-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-proof-gallery-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-proof-gallery-section__heading,
.ez-pattern-proof-gallery-section__item-title {
	margin: 0;
}

.ez-pattern-proof-gallery-section__lede,
.ez-pattern-proof-gallery-section__item-text,
.ez-pattern-proof-gallery-section__media-label {
	margin: 0;
}

.ez-pattern-proof-gallery-section__lede,
.ez-pattern-proof-gallery-section__item-text {
	line-height: 1.65;
}

.ez-pattern-proof-gallery-section__items {
	gap: var(--ez-grid-gap, 1.75rem);
	align-items: stretch;
}

.ez-pattern-proof-gallery-section__item {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-proof-gallery-section__media {
	display: grid;
	place-items: center;
	min-height: 12rem;
	border: 1px dashed rgba(0, 0, 0, 0.28);
	border-radius: var(--ez-card-radius, 0.75rem);
	background: rgba(0, 0, 0, 0.035);
}

.ez-pattern-proof-gallery-section__media-label {
	padding: var(--ez-space-sm, 0.75rem);
	font-size: var(--ez-type-sm, 0.875rem);
	opacity: 0.72;
	text-align: center;
}

/* =============================================================
   GOVERNED PATTERNS — COMPARISON CONTENT
   ============================================================= */

.ez-pattern-comparison-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-comparison-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-comparison-section__heading,
.ez-pattern-comparison-section__item-title {
	margin: 0;
}

.ez-pattern-comparison-section__lede,
.ez-pattern-comparison-section__item-label,
.ez-pattern-comparison-section__item-text,
.ez-pattern-comparison-section__item-note {
	margin: 0;
}

.ez-pattern-comparison-section__lede,
.ez-pattern-comparison-section__item-text {
	line-height: 1.65;
}

.ez-pattern-comparison-section__items {
	gap: var(--ez-grid-gap, 1.75rem);
	align-items: stretch;
}

.ez-pattern-comparison-section__item {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-comparison-section__item-label,
.ez-pattern-comparison-section__item-note {
	font-size: var(--ez-type-sm, 0.875rem);
	opacity: 0.78;
}

.ez-pattern-comparison-section__item-label {
	text-transform: uppercase;
	letter-spacing: var(--ez-kicker-spacing, 0.14em);
	font-weight: 700;
}

/* =============================================================
   GOVERNED PATTERNS — SERVICE ROUTING CONTENT
   ============================================================= */

.ez-pattern-service-routing-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-service-routing-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-service-routing-section__heading,
.ez-pattern-service-routing-section__route-title {
	margin: 0;
}

.ez-pattern-service-routing-section__lede,
.ez-pattern-service-routing-section__route-text {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-service-routing-section__routes {
	gap: var(--ez-grid-gap, 1.75rem);
}

.ez-pattern-service-routing-section__route {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-service-routing-section__route-actions {
	margin-block-start: var(--ez-space-sm, 0.75rem);
}

/* =============================================================
   GOVERNED PATTERNS — RELATED RESOURCES CONTENT
   ============================================================= */

.ez-pattern-related-resources-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-related-resources-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-related-resources-section__heading,
.ez-pattern-related-resources-section__resource-title {
	margin: 0;
}

.ez-pattern-related-resources-section__lede,
.ez-pattern-related-resources-section__resource-text {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-related-resources-section__resources {
	gap: var(--ez-grid-gap, 1.75rem);
}

.ez-pattern-related-resources-section__resource {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-related-resources-section__resource-actions {
	margin-block-start: var(--ez-space-sm, 0.75rem);
}

/* =============================================================
   GOVERNED PATTERNS — LOCATION DETAIL CONTENT
   ============================================================= */

.ez-pattern-location-detail-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-location-detail-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-location-detail-section__heading,
.ez-pattern-location-detail-section__detail-title {
	margin: 0;
}

.ez-pattern-location-detail-section__lede,
.ez-pattern-location-detail-section__detail-text {
	margin: 0;
	line-height: 1.65;
}

.ez-pattern-location-detail-section__details {
	gap: var(--ez-grid-gap, 1.75rem);
}

.ez-pattern-location-detail-section__detail {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

/* =============================================================
   GOVERNED PATTERNS — PROCESS CONTENT
   ============================================================= */

.ez-pattern-process-section {
	display: grid;
	gap: var(--ez-grid-gap, 1.75rem);
	padding-block: var(--ez-section-padding-y, 5.625rem);
}

.ez-pattern-process-section__intro {
	display: grid;
	gap: var(--ez-space-md, 1rem);
	max-width: var(--ez-layout-content, 760px);
}

.ez-pattern-process-section__heading,
.ez-pattern-process-section__step-title {
	margin: 0;
}

.ez-pattern-process-section__lede,
.ez-pattern-process-section__step-marker,
.ez-pattern-process-section__step-text {
	margin: 0;
}

.ez-pattern-process-section__lede,
.ez-pattern-process-section__step-text {
	line-height: 1.65;
}

.ez-pattern-process-section__steps {
	gap: var(--ez-grid-gap, 1.75rem);
}

.ez-pattern-process-section__step {
	display: grid;
	gap: var(--ez-space-sm, 0.75rem);
	align-content: start;
	padding: var(--ez-card-padding, 2rem);
	border: 1px solid rgba(0, 0, 0, var(--ez-card-border-opacity, 0.12));
	border-radius: var(--ez-card-radius, 0.75rem);
	background: var(--ez-color-bg, #fff);
}

.ez-pattern-process-section__step-marker {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--ez-accent-primary, #219997);
	color: var(--ez-text-inverse, #fff);
	font-size: var(--ez-type-sm, 0.875rem);
	font-weight: 700;
}

/* =============================================================
   RUNTIME BINDINGS — HEADING PILOT
   ============================================================= */

[data-ez-runtime-binding="ez/heading"][data-ez-runtime-target="heading.container"] {
	display: var(--ez-block-display, block);
	padding: var(--ez-block-padding, 0);
}

[data-ez-runtime-binding="ez/heading"] [data-ez-runtime-target="heading.text"] {
	font-size: var(--ez-block-font-size, inherit);
	color: var(--ez-block-text, inherit);
}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */

.ez-muted {
	background: var(--ez-color-muted, #f8f8f8);
}

.ez-token-surface {
	background: var(--ez-color-surface, #fff);
	border: 1px solid var(--ez-color-border, rgba(0, 0, 0, 0.1));
}

/* =============================================================
   GLASS EFFECT
   ============================================================= */

.ez-glass {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

/* =============================================================
   SURFACE + GLASS BODY OVERRIDES
   ============================================================= */

body.ez-surface-muted {
	background: var(--ez-color-muted, #f4f0ec);
}

body.ez-surface-dark {
	background: #101416;
	color: #fff;
}

body.ez-glass-enabled .ez-card {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	border-color: rgba(255, 255, 255, 0.35);
}