/* =================================================================
   Pug Forever Homes - hero backdrop, logo lockup, text motion
   The hero photograph is shown at full strength and never blurred.
   A warm dark scrim over it carries the light copy to AA contrast.
   ================================================================= */

/* ---------- the host band ---------- */
.pfh-heroshow-host {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom-left-radius: 34px;
	border-bottom-right-radius: 34px;
}
.pfh-heroshow-host > *:not(.pfh-heroshow) { position: relative; z-index: 1; }
.pfh-heroshow-host.pfh-pagehead {
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 4.5rem);
	background: transparent;
	border-bottom: 0;
}

/* ---------- the backdrop ---------- */
.pfh-heroshow {
	position: fixed; inset: 0; z-index: -1; opacity: 0;
	overflow: hidden; pointer-events: none;
}
.pfh-heroshow.is-placed { position: absolute; z-index: 0; opacity: 1; }
.pfh-heroshow__stage { position: absolute; inset: 0; display: flex; }
.pfh-heroshow__tile { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.pfh-heroshow__slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 38%;
	opacity: 0; transform: scale(1.055);
	transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pfh-heroshow__slide.is-current { opacity: 1; }
.pfh-motion .pfh-heroshow.is-placed .pfh-heroshow__slide.is-current {
	animation: pfh-drift 15s linear forwards;
}
@keyframes pfh-drift {
	from { transform: scale(1.055); }
	to   { transform: scale(1); }
}
.pfh-heroshow__veil { position: absolute; inset: 0; background: var(--pfh-scrim); }

/* Copy left, photograph most open on the right. */
.pfh-heroshow[data-variant="side"] {
	--pfh-scrim: linear-gradient(100deg,
		rgba(26, 19, 14, .80) 0%,
		rgba(26, 19, 14, .74) 40%,
		rgba(26, 19, 14, .58) 72%,
		rgba(26, 19, 14, .50) 100%);
}
/* Centred page heads: photograph opens at both outer edges. */
.pfh-heroshow[data-variant="center"] {
	--pfh-scrim: linear-gradient(90deg,
		rgba(26, 19, 14, .52) 0%,
		rgba(26, 19, 14, .74) 22%,
		rgba(26, 19, 14, .76) 50%,
		rgba(26, 19, 14, .74) 78%,
		rgba(26, 19, 14, .52) 100%);
}

/* ---------- light copy over the photograph ----------
   Page builders set per-element colours with a higher specificity than any
   sane selector here, and those colours were chosen for a cream band. Over a
   photograph they would be unreadable, so these win outright. */
.pfh-heroshow-host { color: #F3EDE4; }
.pfh-heroshow-host :is(h1, h2, h3, .pfh-h1, .elementor-heading-title) { color: #FFFFFF !important; }
.pfh-heroshow-host :is(p, .pfh-lede, .elementor-widget-text-editor) { color: #EFE7DA !important; }
.pfh-heroshow-host :is(.pfh-eyebrow, .elementor-widget-heading .elementor-heading-title[class*="eyebrow"]) { color: #FFE3BE !important; }
/* A small uppercase label above the headline reads as the eyebrow. */
.pfh-heroshow-host .elementor-widget-heading div.elementor-heading-title { color: #FFE3BE !important; }
.pfh-heroshow-host :is(.pfh-crumbs, .pfh-crumbs a) { color: #DACEBC !important; }
.pfh-heroshow-host .pfh-crumbs span[aria-current] { color: #FFFFFF !important; }
.pfh-heroshow-host .pfh-crumbs a:hover { color: #FFE3BE !important; }
.pfh-heroshow-host a:focus-visible,
.pfh-heroshow-host .elementor-button:focus-visible {
	outline: 3px solid #FFE3BE;
	outline-offset: 3px;
}

/* Secondary actions become an outline on the dark ground. */
.pfh-heroshow-host .pfh-btn--ghost {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, .6);
}
.pfh-heroshow-host .pfh-btn--ghost:hover {
	background: rgba(255, 255, 255, .16);
	border-color: #FFFFFF;
	color: #FFFFFF;
}
.pfh-heroshow-host .elementor-element-b33b970 .elementor-button {
	background-color: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, .6);
}
.pfh-heroshow-host .elementor-element-b33b970 .elementor-button:hover {
	background-color: rgba(255, 255, 255, .16);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

/* ---------- logo lockup ---------- */
.pfh-logo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	line-height: 1;
	color: inherit;
}
.pfh-logo__mark { flex: 0 0 auto; width: 52px; height: 52px; display: block; }
.pfh-logo__type { display: block; }
.pfh-logo__name {
	display: block;
	font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.15rem, 2.1vw, 1.4rem);
	letter-spacing: -0.01em;
	color: var(--pfh-logo-ink, #241F1B);
}
.pfh-logo__rule {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-top: .32rem;
}
.pfh-logo__rule::before {
	content: "";
	width: 14px;
	height: 1px;
	flex: 0 0 auto;
	background: var(--pfh-logo-line, #D9C9B2);
}
.pfh-logo__tag {
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: .56rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pfh-logo-tag, #A2521B);
}
.pfh-logo--light {
	--pfh-logo-ink: #FFFFFF;
	--pfh-logo-line: rgba(255, 255, 255, .38);
	--pfh-logo-tag: #F0B871;
}
.pfh-logo--footer { gap: .8rem; }
.pfh-logo--footer .pfh-logo__mark { width: 58px; height: 58px; }

/* ---------- text motion ---------- */
.pfh-motion :is(
	main .pfh-root h1,
	main .pfh-root h2,
	main .pfh-root .pfh-lede,
	main .pfh-root .pfh-eyebrow,
	main .elementor-widget-heading .elementor-heading-title,
	main .elementor-widget-text-editor,
	main .elementor-widget-button .elementor-button-wrapper
) {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}
.pfh-motion :is(
	main .pfh-root h1,
	main .pfh-root h2,
	main .pfh-root .pfh-lede,
	main .pfh-root .pfh-eyebrow,
	main .elementor-widget-heading .elementor-heading-title,
	main .elementor-widget-text-editor,
	main .elementor-widget-button .elementor-button-wrapper
).is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 680ms cubic-bezier(0.16, 1, 0.3, 1) var(--pfh-delay, 0ms),
		transform 680ms cubic-bezier(0.16, 1, 0.3, 1) var(--pfh-delay, 0ms);
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	/* Copy runs full width, so the scrim covers the whole frame evenly. */
	.pfh-heroshow[data-variant="side"],
	.pfh-heroshow[data-variant="center"] {
		--pfh-scrim: linear-gradient(180deg,
			rgba(26, 19, 14, .66) 0%,
			rgba(26, 19, 14, .74) 45%,
			rgba(26, 19, 14, .82) 100%);
	}
	.pfh-heroshow__slide { object-position: center 34%; }
	.pfh-heroshow-host {
		border-bottom-left-radius: 26px;
		border-bottom-right-radius: 26px;
	}

	.pfh-logo__mark { width: 44px; height: 44px; }
	.pfh-logo__name { font-size: 1.02rem; }
	.pfh-logo__tag { font-size: .5rem; letter-spacing: .15em; }

	.pfh-root .pfh-btn { min-height: 46px; }
	.pfh-wrap { width: calc(100% - 2rem); }
	.pfh-puppy__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iOS zooms the page when a control's text is under 16px. */
@media (max-width: 767px) {
	.fluentform input, .fluentform select, .fluentform textarea,
	.pfh-root input, .pfh-root select, .pfh-root textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pfh-heroshow__slide { transition: none; animation: none; transform: none; }
	.pfh-motion :is(
		main .pfh-root h1,
		main .pfh-root h2,
		main .pfh-root .pfh-lede,
		main .pfh-root .pfh-eyebrow,
		main .elementor-widget-heading .elementor-heading-title,
		main .elementor-widget-text-editor,
		main .elementor-widget-button .elementor-button-wrapper
	) { opacity: 1; transform: none; transition: none; }
}

/* The home hero's inset photo card is retired: the backdrop carries it. */
.pfh-heroshow-host .elementor-element-f6af8b5 { display: none; }
.pfh-heroshow-host .elementor-element-1b97797 { max-width: 760px; }