/*
 * White Dolphin refinements for the TRU Salon site (loaded by mu-plugins/wd-tru-salon.php, after the TRU plugin's CSS).
 * Lives outside the TRU Salon Website Builder plugin on purpose: a plugin release cannot overwrite it.
 * Overrides are prefixed with "html" so they win over the plugin's equal selectors whatever the load order.
 * Colours come from Elementor > Site Settings > Global Colors (Deep Espresso, Soft Mocha, Primary Ivory, Warm Taupe,
 * Warm Cream...), so they stay editable there.
 */

/* ---------- Tokens ---------- */
html body {
	--tru-cream: var(--e-global-color-trucream, #efe6dc);
	--tru-mocha: var(--tru-champagne);
	--tru-ink-muted: #85776b;
	--tru-ivory-muted: #a39586;
	--tru-section: clamp(3.25rem, 1.75rem + 5vw, 7.5rem);
	--tru-section-tight: clamp(2.75rem, 2rem + 2.6vw, 5rem);
	--tru-shadow-panel: 0 34px 70px -34px rgb(41 38 35 / 0.36);
}

/* ---------- Section tones (Advanced > CSS classes on each section) ---------- */
html .tru-tone--taupe {
	background-color: var(--tru-linen);
}

html .tru-tone--cream,
html .tru-tone--greige {
	background-color: var(--tru-cream);
}

html .tru-tone--taupe,
html .tru-tone--cream {
	--tru-line: rgb(168 151 138 / 0.42);
	--tru-line-strong: rgb(168 151 138 / 0.75);
}

html .tru-tone--ink {
	--tru-text-muted: #d3c7ba;
	--tru-line: rgb(196 178 162 / 0.3);
	--tru-line-strong: rgb(196 178 162 / 0.55);
}

/* Back-to-back sections of the same warm tone get the same content-width hairline as ivory ones. */
html .e-con.tru-sec.tru-tone--taupe + .e-con.tru-sec.tru-tone--taupe,
html .e-con.tru-sec.tru-tone--cream + .e-con.tru-sec.tru-tone--cream {
	--position: relative;
	position: relative;
}

html .e-con.tru-sec.tru-tone--taupe + .e-con.tru-sec.tru-tone--taupe::before,
html .e-con.tru-sec.tru-tone--cream + .e-con.tru-sec.tru-tone--cream::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(var(--tru-maxw), calc(100% - 2 * var(--tru-gutter)));
	height: 1px;
	background: var(--tru-line);
	transform: translateX(-50%);
	opacity: 1;
	pointer-events: none;
}

/* Why TRU follows its section tone (the plugin hard-codes it for a dark section). */
html .tru-site .tru-why__title .elementor-heading-title {
	color: var(--tru-text);
}

html .e-con.tru-why__item > .elementor-widget-tru-svg-icon {
	color: var(--tru-accent-text);
}

/* Signature services on Warm Taupe: soft-white cards lift off the background without borders. */
html .e-con.tru-sec--services.tru-tone--taupe .tru-scard {
	--tru-card-bg: var(--tru-white);
	box-shadow: 0 1px 0 rgb(41 38 35 / 0.05), 0 22px 40px -32px rgb(41 38 35 / 0.35);
}

html .e-con.tru-sec--services.tru-tone--taupe .tru-scard__media {
	background: var(--tru-cream);
}

html .e-con.tru-sec--services.tru-tone--taupe .tru-scard--type {
	--tru-card-bg: var(--tru-ivory);
	border-color: transparent;
}

/* Espresso statement sections: photo-stack panel and line art in soft mocha. */
html .tru-tone--ink .e-con.tru-stack::before {
	background: var(--tru-champagne);
	opacity: 0.16;
}

html .tru-site .tru-tone--ink .tru-divider {
	color: var(--tru-champagne);
}

/* Final booking band: a deeper espresso veil over the blurred photo; warm text. */
html .tru-site .tru-cta-band__bg::after {
	background: linear-gradient(180deg, rgb(41 38 35 / 0.74) 0%, rgb(41 38 35 / 0.88) 100%);
}

html .tru-site .tru-cta-band .elementor-widget-text-editor {
	color: #efe6dc;
}

/* Footer: warm muted text and hours. */
html .tru-site .tru-footer .tru-footer__book-lead,
html .tru-site .tru-footer .elementor-widget-text-editor {
	color: #d3c7ba;
}

html .tru-contact--footer address,
html .tru-contact--footer .tru-hours,
html .tru-site .tru-contact--footer table.tru-hours tbody > tr > :is(th, td) {
	color: #efe6dc;
}

html .tru-site .tru-contact--footer table.tru-hours tr.is-closed td {
	color: rgb(239 230 220 / 0.62);
}

html .tru-site .tru-contact--footer table.tru-hours tr.is-today > :is(th, td) {
	color: var(--tru-champagne);
}

html .tru-contact--footer .tru-hours tr.is-today th::after {
	border-color: rgb(196 178 162 / 0.55);
}

/* ---------- Header ---------- */
/* Opaque ivory bar: page text never shows through behind the logo. */
html .tru-nav {
	--tru-nav-bg: var(--tru-ivory);
	border-bottom-color: rgb(196 178 162 / 0.45);
}

/* Short phone label of the booking button (header widget > Booking button > Phone label). */
html .tru-btn__label-short {
	display: none;
}

@media (max-width: 767px) {
	/* Phones keep the booking button in the header, compact; the full label stays as its accessible name. */
	html .tru-nav__actions .tru-btn-wrap:has(.tru-btn__label-short) {
		display: flex;
	}

	html .tru-nav__actions {
		gap: var(--tru-s1);
	}

	html .tru-site .tru-nav__actions a.tru-btn {
		min-height: 44px !important;
		padding: 0.6rem 0.95rem !important;
		font-size: 0.6875rem !important;
		letter-spacing: 0.14em;
		gap: 0.5rem;
	}

	html .tru-nav__actions .tru-btn:has(.tru-btn__label-short) .tru-btn__label-full {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	html .tru-nav__actions .tru-btn__label-short {
		display: inline;
	}
}

/* The narrowest phones (under 375 px): the booking button drops its icon so the menu button keeps its place. */
@media (max-width: 374px) {
	html .tru-site .tru-nav__actions a.tru-btn .tru-btn__icon {
		display: none;
	}
}

/* Mega menu feature image slow pan (header widget > Mega panel feature > Image motion): runs only while the panel is
   open, holds on hover or keyboard focus, and never moves for visitors who prefer reduced motion. */
@keyframes wd-tru-mega-pan {
	0%, 8% { object-position: 50% 0%; }
	92%, 100% { object-position: 50% 100%; }
}

@media (prefers-reduced-motion: no-preference) {
	html .tru-mega__feature--pan .tru-mega__feature-media img {
		animation: wd-tru-mega-pan var(--tru-mega-pan-duration, 18s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
		animation-play-state: paused;
	}

	html .tru-nav__item.is-open > .tru-mega .tru-mega__feature--pan .tru-mega__feature-media img,
	html:not(.tru-js) .tru-nav__item--parent:is(:hover, :focus-within) > .tru-mega .tru-mega__feature--pan .tru-mega__feature-media img {
		animation-play-state: running;
	}

	html .tru-nav__item > .tru-mega .tru-mega__feature--pan:is(:hover, :focus-visible) .tru-mega__feature-media img {
		animation-play-state: paused;
	}
}

/* ---------- Hero ---------- */
/* Home hero: tighter top and bottom so the opening reads as one composition (inner pages keep their own padding). */
html .tru-hero--home {
	padding-top: clamp(2rem, 1.25rem + 3vw, 4.5rem);
	padding-bottom: clamp(3rem, 1.75rem + 4vw, 6rem);
}

/* Home: a Warm Taupe block behind the portrait, offset down and right, for editorial depth. */
html .tru-hero--home .tru-hero__media::before {
	content: "";
	position: absolute;
	top: 9%;
	right: -4%;
	bottom: -5%;
	left: 30%;
	z-index: -1;
	background: var(--tru-linen);
	pointer-events: none;
}

@media (max-width: 1024px) {
	/* Tablets and phones: the block stays inside the screen edge (no horizontal scroll). */
	html .tru-hero--home .tru-hero__media::before {
		top: 7%;
		right: 0;
		bottom: -4%;
		left: 26%;
	}
}

/* Page hero with a straight top (hero widget > Photos > Photo top): the line art becomes a matching straight frame. */
html .tru-hero--page.tru-hero--straight .tru-hero__main img {
	border-radius: 0;
}

/* ---------- Service cards (Style > Card > Photo shape, Style > Photo framing) ---------- */
/* The frame owns the shape and the photo fills it; empty settings fall back to these defaults. */
html .tru-scard__media {
	flex-shrink: 0;
	aspect-ratio: 3 / 4;
}

html .tru-scard--featured .tru-scard__media {
	aspect-ratio: 3 / 2;
}

html .tru-site .tru-scard__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: var(--wd-scard-fit, cover);
	object-position: var(--wd-scard-focus-x, 50%) var(--wd-scard-focus-y, 50%);
}

html .tru-site .tru-scard--featured .tru-scard__media img {
	object-position: var(--wd-scard-focus-x, 50%) var(--wd-scard-focus-y, 40%);
}

/* Phones: the cards scroll sideways, so a portrait 4:5 frame adds no page length; the upper-third focus keeps faces
   and hands in the photo (a landscape crop of portrait photos cut them off). */
@media (max-width: 767px) {
	html .tru-scard__media,
	html .tru-scard--featured .tru-scard__media {
		aspect-ratio: 4 / 5;
	}

	html .tru-site .tru-scard__media img,
	html .tru-site .tru-scard--featured .tru-scard__media img {
		aspect-ratio: auto;
		object-position: var(--wd-scard-focus-x, 50%) var(--wd-scard-focus-y, 30%);
	}
}

/* Desktop services grid: every photo in a row keeps one height (the plugin sizes the image; here the frame). */
@media (min-width: 1025px) {
	html .tru-site .e-con.tru-cards .tru-scard__media,
	html .tru-site .e-con.tru-cards .tru-scard--featured .tru-scard__media {
		aspect-ratio: auto;
		height: calc((100cqi - 3 * var(--tru-s5)) / 3);
	}

	html .tru-site .e-con.tru-cards .tru-scard__media img,
	html .tru-site .e-con.tru-cards .tru-scard--featured .tru-scard__media img {
		height: 100%;
	}
}

/* ---------- Image frames ---------- */
/* Add tru-frame--natural (Advanced > CSS classes) to an Image widget with tru-frame to show the photo whole in its own
   proportions instead of the 4:5 crop; a 2:3 space is held until the lazy photo loads, so the page does not jump. */
html .tru-site .tru-frame--natural img {
	aspect-ratio: auto 2 / 3;
	height: auto;
	object-fit: contain;
}

/* ---------- Team portraits: a Warm Taupe block offset behind each photo, alternating sides ---------- */
html .tru-artist__media {
	--wd-artist-mat: clamp(8px, 0.9vw, 14px);
	box-shadow: var(--wd-artist-mat) var(--wd-artist-mat) 0 0 var(--tru-linen);
}

html .elementor-widget-tru-artist:nth-child(even) .tru-artist__media {
	box-shadow: calc(var(--wd-artist-mat) * -1) var(--wd-artist-mat) 0 0 var(--tru-linen);
}

/* ---------- Ritual cards, products band ---------- */
html .tru-rituals {
	--tru-ritual-bg: rgb(251 248 244 / 0.8);
}

html .tru-ritual--blush .tru-ritual__art {
	background: #eae0d5;
}

html .tru-ritual--stone .tru-ritual__art {
	background: #ddd1c4;
}

html .tru-ritual__halo {
	background: rgb(251 248 244 / 0.62);
}

html .tru-brands::before {
	background: linear-gradient(180deg, rgb(245 244 240 / 0.74) 0%, rgb(231 222 212 / 0.9) 100%);
}

html .tru-product {
	--tru-product-frame: var(--tru-cream);
	border-color: var(--tru-line);
}

html .tru-product--cool {
	--tru-product-frame: var(--tru-linen);
}