/*
	Theme Name: Hello Elementor Child — Warren
	Theme URI: https://warren.local
	Description: Child theme for the Warren Sawczyn hotel-review site. Holds only the few utility classes Elementor cannot express natively (tilt, paper grain, hairline rules). Everything else — colour, type, spacing — lives in Elementor's Global Settings so it stays editable in the UI.
	Author: MaxVerse Digital
	Template: hello-elementor
	Version: 1.0.0
	License: GNU General Public License v3 or later
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
*/

/* --------------------------------------------------------------------------
   Utility classes.
   Apply from Elementor: Advanced > CSS Classes on the widget or container.

   Nothing below hard-codes a brand colour. Each rule reads Elementor's own
   global custom properties, so changing a Global Colour in
   Site Settings > Global Colours repaints these too:

     --e-global-color-primary    Ink          #3D3D3D
     --e-global-color-secondary  Warm Accent  #A88F73
     --e-global-color-text       Ink Soft     #6F6F6F
     --e-global-color-accent     Ink Faint    #9B968F
     --e-global-color-wrrule     Rule         #E6E1DA

   The second value in each var() is only a fallback for when the kit has not
   loaded yet (e.g. the editor's first paint).
   -------------------------------------------------------------------------- */

/* Paper grain. Add to the outermost container of a light section. */
.wr-grain { position: relative; }
.wr-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}
.wr-grain > * { position: relative; z-index: 2; }

/* Eyebrow: small-caps label with a short warm rule leading into it. */
.wr-eyebrow { display: flex; align-items: center; gap: 14px; }
.wr-eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 1px;
	background: var(--e-global-color-secondary, currentColor);
}

/* Credit line under a photo — same idea, baseline aligned. */
.wr-credit { display: flex; align-items: baseline; gap: 12px; }
.wr-credit::before {
	content: "";
	flex: none;
	width: 22px;
	height: 1px;
	position: relative;
	top: -5px;
	background: var(--e-global-color-secondary, currentColor);
}

/* Underlined "more" link whose rule retracts on hover. */
.wr-more a,
a.wr-more { position: relative; text-decoration: none; display: inline-block; }
.wr-more a::after,
a.wr-more::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	height: 1px;
	width: 100%;
	background: currentColor;
	transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.wr-more:hover a::after,
a.wr-more:hover::after { width: 62%; }

/* Polaroid: tilted photo on a white card with a soft drop shadow.
   Put this on the CONTAINER that wraps the image + its handwritten caption. */
.wr-polaroid {
	transform: rotate(-3.2deg);
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
	box-shadow: 0 18px 46px rgba(61,61,61,.16), 0 2px 8px rgba(61,61,61,.08);
}
.wr-polaroid:hover { transform: rotate(0deg); }
.wr-polaroid img { display: block; }

.wr-tilt-left  { transform: rotate(-2.4deg); }
.wr-tilt-right { transform: rotate(2.4deg); }

/* Script line that overlaps the cap-height line above it. */
.wr-script { margin-top: -.40em !important; }

/* Hero caption: keep text readable over any photo without a full-screen scrim. */
.wr-hero-caption { position: relative; isolation: isolate; }
.wr-hero-caption::before {
	content: "";
	position: absolute;
	inset: -30px -80px -26px -48px;
	z-index: -1;
	filter: blur(7px);
	background: radial-gradient(ellipse at 24% 52%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.22) 46%, rgba(0,0,0,0) 78%);
}

/* Thin vertical scroll cue with a trickling highlight. */
.wr-cue { position: relative; width: 1px; height: 52px; overflow: hidden; background: rgba(255,255,255,.22); }
.wr-cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: -52px;
	width: 1px;
	height: 52px;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,.95));
	animation: wr-trickle 2.9s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes wr-trickle { 0% { transform: translateY(0); } 60%, 100% { transform: translateY(104px); } }

@media (max-width: 767px) {
	.wr-tilt-left, .wr-tilt-right { transform: none; }   /* the polaroid keeps its tilt — the reference does */
	.wr-hero-caption::before { inset: -20px -30px; }
	.wr-script { margin-top: -.22em !important; }
}

@media (prefers-reduced-motion: reduce) {
	.wr-cue::after { animation: none; }
	.wr-polaroid, .wr-more a::after, a.wr-more::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Collage section (Option B). Matches the reference layout: only the polaroid
   is tilted, the two photographs sit straight, and the script line overlaps
   the tracked-caps line above it.
   -------------------------------------------------------------------------- */

/* "AS SEEN IN" + a placeholder wordmark.
   Deliberately generic: putting a real publication's name here would be a
   factual claim about the client that nobody has verified. Swap the chip for
   the real logo (an Image widget) once there is one. */
.wr-logo-chip {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 8px 2px;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: .84em;
	letter-spacing: .14em;
	line-height: 1;
	opacity: .7;
	vertical-align: middle;
}

/* The landscape photo is allowed to run under the polaroid, exactly as it does
   in the reference. The right-hand column is lifted above it. */
.wr-over { position: relative; z-index: 2; }

@media (max-width: 767px) {
	/* The collage keeps its composition on a phone rather than stacking, so the
	   wide photograph would otherwise render as a postage stamp at 48% of the
	   screen. Re-frame it to a portrait crop; the reference does the same. */
	.wr-pool img {
		aspect-ratio: 3 / 4;
		object-fit: cover;
		width: 100%;
		height: auto;
	}
}

/* --------------------------------------------------------------------------
   Hero slider.
   Structure comes from Elementor containers; js/hero-slider.js only toggles
   .is-active and appends the dots. Change the slide duration here — the script
   reads this value rather than carrying its own.
   -------------------------------------------------------------------------- */
/* Hero height. The two declarations are a deliberate fallback pair, not a
   duplicate: a browser without svh support discards the second and keeps 100vh.
   svh is the SMALL viewport height — the one with the address bar showing — so
   the hero never hides its own caption behind the bar on a phone. Elementor
   carries this variable through its own min_height declaration, which is why it
   does not have to out-specify anything. */
.wr-slider { --wr-hero-h: 100vh; }
.wr-slider { --wr-hero-h: 100svh; }

.wr-slider {
	--wr-hold: 7000ms;
	--wr-fade: 1500ms;
	--wr-ease: cubic-bezier(.22,.61,.36,1);
	position: relative;
	overflow: hidden;
}

/* A light photograph leaves the brand mark at the top unreadable, and the foot
   gradient cannot help up there. One shared scrim on the slider rather than one
   per slide, so it stays put while the images cross-fade. */
.wr-slider::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 250px;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.20) 52%, rgba(0,0,0,0) 100%);
}

/* Slides stack on top of each other and cross-fade. visibility is delayed by
   the fade so an outgoing slide stays visible while it fades, but is removed
   from the accessibility tree and from hit-testing once it is gone. */
.wr-slider > .wr-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wr-fade) var(--wr-ease), visibility 0s linear var(--wr-fade);
}
.wr-slider > .wr-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--wr-fade) var(--wr-ease), visibility 0s;
}

/* Ken Burns is applied to the media layer, never to the slide itself, so the
   caption does not drift or soften along with the photograph. */
/* Specificity has to beat Elementor's own `.e-con { position: relative }`,
   which is a single class and loads after this stylesheet. */
.wr-slider .wr-slide > .wr-slide-media {
	position: absolute;
	inset: -1px;            /* hides the hairline the scale can expose */
	transform: scale(1);
	will-change: transform;
}
.wr-slide.is-active .wr-slide-media {
	animation: wr-kenburns calc(var(--wr-hold) + var(--wr-fade)) linear forwards;
}
@keyframes wr-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* Caption lines rise and sharpen in sequence each time the slide comes round. */
.wr-slide-caption > * {
	opacity: 0;
	transform: translateY(16px);
	filter: blur(6px);
	transition:
		opacity   1.1s var(--wr-ease),
		transform 1.1s var(--wr-ease),
		filter    1.1s var(--wr-ease);
}
.wr-slide.is-active .wr-slide-caption > * {
	opacity: 1;
	transform: none;
	filter: blur(0);
}
.wr-slide.is-active .wr-slide-caption > *:nth-child(1) { transition-delay: .24s; }
.wr-slide.is-active .wr-slide-caption > *:nth-child(2) { transition-delay: .40s; }
.wr-slide.is-active .wr-slide-caption > *:nth-child(3) { transition-delay: .56s; }
.wr-slide.is-active .wr-slide-caption > *:nth-child(4) { transition-delay: .70s; }

/* Dots double as a progress read-out: the fill runs for exactly one hold. */
.wr-slider-nav {
	position: absolute;
	right: 44px;
	bottom: 46px;
	z-index: 4;
	display: flex;
	gap: 12px;
}
.wr-dot {
	width: 38px;
	height: 2px;
	padding: 0;
	border: 0;
	margin: 0;
	background: rgba(255,255,255,.32);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .3s var(--wr-ease);
}
.wr-dot:hover { background: rgba(255,255,255,.55); }
.wr-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	background: #fff;
}
.wr-dot.is-active::after { animation: wr-dotfill var(--wr-hold) linear forwards; }
@keyframes wr-dotfill { to { width: 100%; } }
.wr-dot:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

@media (max-width: 767px) {
	.wr-slider-nav { right: 22px; bottom: 24px; gap: 8px; }
	.wr-dot { width: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.wr-slider > .wr-slide { transition: opacity .01s; }
	.wr-slide.is-active .wr-slide-media { animation: none; }
	.wr-slide-caption > * { opacity: 1; transform: none; filter: none; transition: none; }
	.wr-dot.is-active::after { animation: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero slider — editorial variant (Option B).

   Add .wr-slider--editorial alongside .wr-slider. Same markup and same script;
   everything below is presentation only. The numbered rail and the progress
   line are emitted by the script for every slider and stay hidden unless this
   variant asks for them.
   -------------------------------------------------------------------------- */

/* Emitted always, shown only here. */
.wr-dot-num { display: none; }
.wr-slider-progress { display: none; }

/* ---- numbered rail, right edge, vertically centred ---- */
.wr-slider--editorial .wr-slider-nav {
	right: 46px;
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}
.wr-slider--editorial .wr-dot {
	width: auto;
	height: auto;
	background: none;
	display: flex;
	align-items: center;
	gap: 12px;
	overflow: visible;
}
.wr-slider--editorial .wr-dot:hover { background: none; }

/* The rule to the left of each number grows when its slide is showing. */
.wr-slider--editorial .wr-dot::after {
	position: static;
	width: 16px;
	height: 1px;
	background: rgba(255,255,255,.6);
	order: -1;
	transition: width .55s var(--wr-ease), background .55s var(--wr-ease);
	animation: none;
}
.wr-slider--editorial .wr-dot:hover::after { width: 26px; background: rgba(255,255,255,.75); }
.wr-slider--editorial .wr-dot.is-active::after {
	width: 40px;
	background: #fff;
	animation: none;   /* the bottom line carries progress in this variant */
}

.wr-slider--editorial .wr-dot-num {
	display: block;
	font-family: var(--e-global-typography-accent-font-family, Lato), sans-serif;
	font-size: 11px;
	letter-spacing: .18em;
	line-height: 1;
	color: rgba(255,255,255,.7);
	transition: color .45s var(--wr-ease);
	/* A bright photograph washes the rail out; the shadow does the work a
	   scrim would, without darkening the picture behind it. */
	text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 1px 14px rgba(0,0,0,.5);
}
.wr-slider--editorial .wr-dot:hover .wr-dot-num { color: rgba(255,255,255,.92); }
.wr-slider--editorial .wr-dot.is-active .wr-dot-num { color: #fff; }

/* ---- progress line along the foot ---- */
.wr-slider--editorial .wr-slider-progress {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	z-index: 4;
	background: rgba(255,255,255,.16);
}
.wr-slider--editorial .wr-slider-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: rgba(255,255,255,.9);
}
.wr-slider--editorial .wr-slider-progress span.is-running {
	animation: wr-progress var(--wr-hold) linear forwards;
}
@keyframes wr-progress { to { width: 100%; } }

/* ---- caption: mask reveal instead of a blur fade ----
   Lines rise out from behind their own top edge, which reads sharper than a
   blur at large sizes. The negative insets stop descenders and the italic
   overhang being clipped once the line has arrived. */
.wr-slider--editorial .wr-slide-caption > * {
	opacity: 1;
	filter: none;
	transform: translateY(.38em);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.05s var(--wr-ease), transform 1.05s var(--wr-ease);
}
.wr-slider--editorial .wr-slide.is-active .wr-slide-caption > * {
	transform: none;
	clip-path: inset(-.18em -.6em -.28em -.12em);
}

/* ---- index + kicker on one line, separated by a rule ---- */
.wr-slide-kicker .wr-idx {
	position: relative;
	padding-right: 46px;
	margin-right: 4px;
	opacity: .75;
}
.wr-slide-kicker .wr-idx::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

@media (max-width: 1024px) {
	.wr-slider--editorial .wr-slider-nav { right: 24px; gap: 15px; }
	.wr-slider--editorial .wr-dot.is-active::after { width: 26px; }
}

@media (max-width: 767px) {
	/* A vertical rail fights the caption on a phone; fall back to the dot row. */
	.wr-slider--editorial .wr-slider-nav {
		right: 22px;
		left: auto;
		top: auto;
		bottom: 26px;
		transform: none;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.wr-slider--editorial .wr-dot { gap: 7px; }
	.wr-slider--editorial .wr-dot::after { width: 10px; }
	.wr-slider--editorial .wr-dot.is-active::after { width: 18px; }
	.wr-slider--editorial .wr-dot-num { font-size: 10px; }
	.wr-slide-kicker .wr-idx { padding-right: 34px; }
	.wr-slide-kicker .wr-idx::after { right: 10px; width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.wr-slider--editorial .wr-slide-caption > * { clip-path: none; transform: none; transition: none; }
	.wr-slider--editorial .wr-slider-progress span.is-running { animation: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   Review spec list — labelled rows separated by hairlines.

   The rules live here rather than on the container's Border control because a
   border colour CANNOT be bound to a Global: Elementor's is_global_control()
   requires the control to declare global.active, and the Border group's colour
   field does not (includes/controls/groups/border.php:89-99). Binding it would
   fail silently. Reading the custom property keeps the rules tied to the
   "Rule" Global Colour anyway.
   -------------------------------------------------------------------------- */
.wr-spec-list { border-bottom: 1px solid var(--e-global-color-wrrule, #E6E1DA); }

.wr-spec-row {
	border-top: 1px solid var(--e-global-color-wrrule, #E6E1DA);
	transition: background .4s var(--wr-ease, cubic-bezier(.22,.61,.36,1));
}
.wr-spec-row:hover { background: rgba(0,0,0,.018); }

/* The label keeps its line even when the value beside it runs long. */
.wr-spec-label { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
	.wr-spec-row { transition: none; }
}

/* The brand mark sits over whichever photograph is showing, and the newer slides
   are bright skies. A single soft shadow — which is all Elementor's Text Shadow
   control can emit — washes out against those. Layering a tight dark shadow under
   a wider diffuse one holds the 10.5px type legible without darkening the
   photograph itself, which a heavier scrim would. */
.wr-brand .elementor-widget-heading {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .55),
		0 1px 14px rgba(0, 0, 0, .45),
		0 0 28px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------------
   Pause / play button. js/hero-slider.js now adds one to every slider (the
   WCAG 2.2.2 control that replaces pause-on-hover). The HLP hero styles its
   own in css/hlp/20-hero.css; the legacy sliders on Options A/B and Samples
   1/2 get this small white one in the bottom-right corner.
   -------------------------------------------------------------------------- */
.wr-slider:not(.hlp-hero) .wr-pause,
.wr-slider:not(.hlp-hero) .wr-pause:hover,
.wr-slider:not(.hlp-hero) .wr-pause:focus {
	position: absolute;
	right: 10px;
	bottom: 33px;
	z-index: 4;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.wr-slider:not(.hlp-hero) .wr-pause::before,
.wr-slider:not(.hlp-hero) .wr-pause::after {
	content: "";
	position: absolute;
	top: 9px;
	width: 2px;
	height: 10px;
	background: currentColor;
}
.wr-slider:not(.hlp-hero) .wr-pause::before { left: 11px; }
.wr-slider:not(.hlp-hero) .wr-pause::after { left: 16px; }
.wr-slider:not(.hlp-hero) .wr-pause.is-paused::before {
	left: 10px; top: 8px; width: 0; height: 0; background: none;
	border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.wr-slider:not(.hlp-hero) .wr-pause.is-paused::after { display: none; }
.wr-slider:not(.hlp-hero) .wr-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
	.wr-slider:not(.hlp-hero) .wr-pause { right: 2px; bottom: 11px; }
}
/* The "01 / 03" counter is only part of the HLP hero's design. */
.wr-slider:not(.hlp-hero) .wr-count { display: none; }