/*
Theme Name: Etch Child Theme
Theme URI: https://etchwp.com/
Author: Digital Gravy
Author URI: https://digitalgravy.co
Description: This theme is a child theme for Etch theme
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GPL v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
Template: etch-theme
Text Domain: etch-child-theme
Tags: Etch, Block Authoring
*/

.artist-social-proof {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(0.7rem, 1.5vw, 0.9rem);
	flex-wrap: nowrap;
}

.artist-social-proof__avatars {
	display: flex;
	align-items: center;
	inline-size: max-content;
	min-inline-size: max-content;
	flex: 0 0 auto;
}

.artist-social-proof__avatars--preview {
	display: none;
}

.editor-styles-wrapper .artist-social-proof__avatars--preview,
.block-editor-block-list__layout .artist-social-proof__avatars--preview,
.edit-post-visual-editor .artist-social-proof__avatars--preview {
	display: flex;
}

.artist-social-proof:has(.artist-social-proof__avatars:not(.artist-social-proof__avatars--preview) > .artist-social-proof__avatar) .artist-social-proof__avatars--preview {
	display: none;
}

.artist-social-proof__avatar {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 2.65rem;
	block-size: 2.65rem;
	min-inline-size: 2.65rem;
	max-inline-size: 2.65rem;
	flex: 0 0 2.65rem;
	margin-inline-start: -0.5rem;
	border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, var(--surface-background));
	border-radius: 50%;
	background:
		color-mix(
			in srgb,
			var(--surface-elevated) 84%,
			var(--surface-background)
		);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.02),
		0 10px 30px rgb(0 0 0 / 0.35);
	backdrop-filter: blur(10px);
	overflow: hidden;
	z-index: 1;
}

.artist-social-proof__avatar:first-child {
	margin-inline-start: 0;
}

.artist-social-proof__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.artist-social-proof__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--text-primary);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	text-overflow: clip;
	max-inline-size: 2.65rem;
	overflow: hidden;
	white-space: nowrap;
}

.artist-social-proof__rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	min-inline-size: 0;
}

.artist-social-proof__stars {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-inline-size: max-content;
	padding: 0.22rem 0.75rem;
	border-radius: 999rem;
	border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
	color: var(--brand-primary);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.artist-social-proof__rating-number,
.artist-social-proof__text {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	line-height: 1.3;
	text-align: left;
}

.artist-social-proof__text {
	margin: 0;
}

.hero-section-quebec__cta {
	container-type: inline-size;
}

@container (inline-size < 24rem) {
	.artist-social-proof {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}

	.artist-social-proof__rating {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
		inline-size: 100%;
	}

	.artist-social-proof__text {
		max-inline-size: 24ch;
		text-wrap: balance;
	}
}

.hero-section-quebec__anchor:focus-visible,
.hero-section-quebec__anchor-secondary:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 4px;
}

.hero-section-quebec__featured-image-wrapper {
	overflow: hidden;
}

.hero-section-quebec__featured-image {
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-section-quebec__featured-image-wrapper:hover .hero-section-quebec__featured-image {
	transform: scale(1.025);
}

.hero-section-quebec .artist-social-proof__avatar {
	border: 1px solid color-mix(
		in srgb,
		var(--brand-primary) 32%,
		var(--surface-background)
	);
}

/* ==========================================================================
   HOMEPAGE REFINEMENTS (PHASE 1)
   ========================================================================== */

/* 2. Global Keyboard Focus Accessibility */
*:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--brand-primary) 64%, transparent);
	outline-offset: 3px;
}


/* ==========================================================================
   ABOUT PAGE EDITORIAL REDESIGN (PHASE 2)
   ========================================================================== */

.about-arrival {
	background: var(--bg-ultra-light);
	color: var(--text-dark);
	padding-block: var(--section-space-l);
	overflow: clip;
}
.about-arrival__grid {
	--media-span: 7;
	--heading-span: 7;
	display: grid;
	position: relative;
	isolation: isolate;
	gap: var(--content-gap);
	inline-size: min(100%, var(--content-width));
	margin-inline: auto;
}
@media (min-width: 48rem) {
	.about-arrival__grid {
		grid-template-columns: var(--grid-12);
		grid-template-rows: repeat(3, 1fr);
	}
}
.about-arrival__heading-wrapper {
	position: relative;
	z-index: 3;
}
@media (min-width: 48rem) {
	.about-arrival__heading-wrapper {
		grid-column: 1 / span var(--heading-span);
		grid-row: 1;
		translate: 0 var(--space-l);
	}
}
.about-arrival__heading {
	margin: 0;
	font-size: var(--h1);
	line-height: 1;
	color: var(--text-dark);
	text-transform: none;
}
.about-arrival__heading-line {
	display: block;
	width: fit-content;
	padding: 0.15em 0.25em;
	margin-block: 0.075em;
	background: var(--white);
	color: var(--black);
	border-radius: var(--radius);
}
.about-arrival__media-wrapper {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	overflow: clip;
	border-radius: var(--radius);
}
@media (min-width: 48rem) {
	.about-arrival__media-wrapper {
		grid-column: calc(12 - var(--media-span)) / -1;
		grid-row: 1 / -1;
	}
	.about-arrival__media-wrapper img,
	.about-arrival__media {
		aspect-ratio: 1 / 1;
	}
}
.about-arrival__media {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}
.about-arrival__content-wrapper {
	position: relative;
	z-index: 2;
	padding: var(--space-l);
	background: var(--bg-dark);
	color: var(--text-light-muted);
	border-radius: var(--radius);
}
@media (min-width: 48rem) {
	.about-arrival__content-wrapper {
		grid-column: 1 / span 11;
		grid-row: 3;
		align-self: end;
	}
}
.about-arrival__content {
	--col-count: 2;
	--col-min-width: 250px;
	--col-gap: var(--grid-gap);
	--row-gap: var(--grid-gap);
	display: block;
	columns: var(--col-count) var(--col-min-width);
	column-gap: var(--col-gap);
	font-size: var(--text-l);
}
.about-arrival__content > * {
	break-inside: avoid;
	margin-block-end: var(--row-gap);
}
.about-arrival__text {
	margin: 0;
	color: var(--text-light-muted);
}
.about-arrival__proof-list {
	display: grid;
	grid-template-columns: var(--grid-4);
	gap: var(--grid-gap);
	list-style: none;
	padding-inline-start: 0;
	margin-block: var(--space-l) 0;
	margin-inline: auto;
	inline-size: min(100%, var(--content-width));
}
.about-arrival__proof-item {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 0.25em;
	text-align: center;
}
@media (min-width: 62rem) {
	.about-arrival__proof-item:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(100% + var(--grid-gap) / 2);
		inline-size: 1px;
		background: var(--border-dark);
	}
}
.about-arrival__proof-value {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-dark);
}
.about-arrival__proof-description {
	margin: 0;
	color: var(--text-dark-muted);
}
@media (max-width: 62rem) {
	.about-arrival__proof-list {
		grid-template-columns: var(--grid-2);
	}
}
@media (max-width: 30rem) {
	.about-arrival__proof-list {
		grid-template-columns: var(--grid-1);
	}
	.about-arrival__content {
		columns: 1;
	}
}

/* Mobile drawer scroll lock */
html.cpa-mobile-nav-lock,
body.cpa-mobile-nav-lock {
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none;
}

body.cpa-mobile-nav-lock {
	block-size: 100dvh;
}

/* Booking 1250: keep native controls at their intrinsic box size when a grid
 * row grows for validation text or a neighbouring field's label. */
body.page-id-1250 .booking-form__grid > label {
	align-content: start;
}

/* The native file control already presents the selected filename. Hide the
 * duplicate ETCH-managed status line, while retaining the native, accessible
 * chooser and filename presentation. */
body.page-id-1250 .booking-form [data-file-name] {
	display: none;
}

body.page-id-1250 .booking-form input[type="file"] {
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 3.875rem;
	min-block-size: 3.875rem;
	/* Native file controls ignore flex alignment. Symmetric padding centers
	 * Chrome's file button and filename within the shared control height. */
	padding-block: 1rem;
}

body.page-id-1250 .booking-form input[type="file"]::file-selector-button {
	margin-block: 0;
}

/* In the two-column review grid, keep the native file control in the same
 * control row as Budget even when its shorter local-only note wraps less. */
@media (min-width: 48rem) {
	body.page-id-1250 .booking-form label:has(input[type="file"]) > .booking-form__helper:not([data-file-name]) {
		min-block-size: 3lh;
	}
}

@media (min-width: 62rem) {
	body.page-id-1250 .booking-form label:has(input[type="file"]) > .booking-form__helper:not([data-file-name]) {
		min-block-size: 2lh;
	}
}

/* Native selects retain a UA line-height, while text-like inputs inherit the
 * responsive type scale. Normalize only their outer control box. */
body.page-id-1250 .booking-form :is(
	input:not([type]),
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	select
) {
	box-sizing: border-box;
	block-size: 3.875rem;
	min-block-size: 3.875rem;
}

/* Booking Intake uses the native hidden attribute to disable inactive branch
 * controls. The grid display declaration would otherwise keep those controls
 * visibly rendered, even while disabled. */
body.page-id-1250 .booking-form__grid[data-location-panel][hidden],
body.page-id-1250 .booking-form [data-service-group][hidden],
body.page-id-1250 .booking-form [data-technical-panel][hidden],
body.page-id-1250 [data-duration-details][hidden] {
	display: none;
}

/* Keep the consent acknowledgement and its preview-only note as one aligned
 * unit without changing the native checkbox, label, or ETCH-owned copy. */
body.page-id-1250 .booking-form__panel[data-step="5"] {
	--cpa-consent-control-size: 1.25rem;
	--cpa-consent-column-gap: 0.75rem;
}

body.page-id-1250 .booking-form__consent {
	box-sizing: border-box;
	inline-size: min(100%, 58ch);
	grid-template-columns: var(--cpa-consent-control-size) minmax(0, 1fr);
	column-gap: var(--cpa-consent-column-gap);
	align-items: start;
	margin-block-start: 1.25rem;
}

body.page-id-1250 .booking-form__consent > input[type="checkbox"] {
	inline-size: var(--cpa-consent-control-size);
	block-size: var(--cpa-consent-control-size);
	margin-block: 0.15em 0;
}

body.page-id-1250 .booking-form__consent > span {
	line-height: 1.35;
}

body.page-id-1250 .booking-form__privacy {
	max-inline-size: calc(58ch - var(--cpa-consent-control-size) - var(--cpa-consent-column-gap));
	margin-block: 0.5rem 0;
	margin-inline-start: calc(var(--cpa-consent-control-size) + var(--cpa-consent-column-gap));
	line-height: 1.35;
}

body.page-id-1250 .booking-places__field {
	position: relative;
}

body.page-id-1250 .booking-places__suggestions {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 10;
	max-block-size: min(20rem, 50vh);
	overflow-y: auto;
	border: 1px solid var(--border-subtle);
	background: #171c1e;
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
}

body.page-id-1250 .booking-places__option {
	display: block;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.75rem 0.95rem;
	border: 0;
	border-block-end: 1px solid var(--border-subtle);
	background: transparent;
	color: var(--text-primary);
	font: inherit;
	font-weight: 500;
	text-align: start;
	cursor: pointer;
}

body.page-id-1250 .booking-places__option:hover,
body.page-id-1250 .booking-places__option[aria-selected="true"] {
	background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface-elevated, #171c1e));
	color: var(--brand-primary-bright);
}

body.page-id-1250 .booking-places__option:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--primary-light);
	outline-offset: -3px;
}

body.page-id-1250 .booking-places__attribution {
	display: block;
	padding: 0.45rem 0.95rem;
	color: var(--text-secondary);
	font-size: 0.75rem;
}

/* Once the physical-location fields stack, let predictions take up layout
 * space so they cannot intercept pointer input intended for Address. */
@media (max-width: 47.99rem) {
	body.page-id-1250 .booking-places__suggestions {
		position: static;
		margin-block-start: 0.35rem;
		z-index: auto;
	}
}

:is(.booking-form, .contact-form) > :is(.booking-form__required-note, .contact-form__required-note) {
	grid-column: 1 / -1;
	inline-size: 100%;
	margin: 0 0 var(--space-s);
	color: var(--text-secondary);
	font-size: var(--text-xs);
	line-height: 1.4;
}

:is(.booking-form, .contact-form) .required-field-indicator {
	color: var(--brand-primary-bright);
	font-weight: 700;
}

:is(.booking-form, .contact-form) [data-required-field-meta] {
	white-space: nowrap;
}