/**
 * Plumber Hero — frontend styles
 *
 * Colours, sizes, overlay, height, fonts and the background image are supplied
 * per-instance as CSS custom properties on the .plumber-hero element (render()).
 * Layout is set with a modifier class: --left (default), --center, --right.
 */

.plumber-hero {
	--ph-bg: #0a2540;
	--ph-overlay-color: #040c18;
	--ph-overlay: 0.6;
	--ph-height: 100;
	--ph-content-width: 1180px;
	--ph-heading-maxwidth: none;

	--ph-eyebrow-color: #ffffff;
	--ph-eyebrow-line: #e07a3f;
	--ph-heading-color: #ffffff;
	--ph-sub-color: #e8edf3;
	--ph-feature-color: #ffffff;

	--ph-check-bg: #e07a3f;
	--ph-check-color: #ffffff;

	--ph-pbtn-bg: #e07a3f;
	--ph-pbtn-text: #ffffff;
	--ph-pbtn-bg-hover: #f0915a;
	--ph-pbtn-text-hover: #ffffff;

	--ph-sbtn-bg: #13314f;
	--ph-sbtn-text: #ffffff;
	--ph-sbtn-border: #ffffff;
	--ph-sbtn-bg-hover: #ffffff;
	--ph-sbtn-text-hover: #0a2540;
	--ph-sbtn-border-hover: #ffffff;

	--ph-scroll-color: #ffffff;

	--ph-eyebrow-size: 13px;
	--ph-heading-size: 64px;
	--ph-sub-size: 20px;
	--ph-button-size: 16px;
	--ph-feature-size: 16px;

	--ph-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: calc(var(--ph-height) * 1vh);
	margin: 0;
	overflow: hidden;
	background-color: var(--ph-bg);
	background-image: var(--ph-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;
}

@supports (min-height: 1svh) {
	.plumber-hero {
		min-height: calc(var(--ph-height) * 1svh);
	}
}

/* Full-bleed break-out for the shortcode-in-content case. */
.plumber-hero--breakout {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* --- Overlay ---------------------------------------------------------- */
.plumber-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--ph-overlay-color) 72%, transparent) 0%,
			color-mix(in srgb, var(--ph-overlay-color) 34%, transparent) 45%,
			color-mix(in srgb, var(--ph-overlay-color) 78%, transparent) 100%
		),
		color-mix(in srgb, var(--ph-overlay-color) calc(var(--ph-overlay) * 100%), transparent);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.plumber-hero__overlay {
		background: var(--ph-overlay-color);
		opacity: var(--ph-overlay);
	}
}

.plumber-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ph-content-width, 1180px);
	margin: 0 auto;
	padding: clamp(7rem, 14vh, 11rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
	color: #fff;
}

/* --- Eyebrow ---------------------------------------------------------- */
.plumber-hero__eyebrow {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.7em;
	margin: 0 0 1.1rem;
	font-family: var(--ph-font-eyebrow), var(--ph-fallback);
	font-size: var(--ph-eyebrow-size, 13px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ph-eyebrow-color);
}

.plumber-hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2px;
	margin-top: 0.6em; /* sits on the first line even when the eyebrow wraps */
	background: var(--ph-eyebrow-line);
	border-radius: 2px;
}

/* Centered layout: stack the accent rule above the text so it stays centred. */
.plumber-hero--center .plumber-hero__eyebrow {
	flex-direction: column;
	align-items: center;
	gap: 0.55em;
}
.plumber-hero--center .plumber-hero__eyebrow::before {
	margin-top: 0;
}

/* --- Headline --------------------------------------------------------- */
.plumber-hero__title {
	margin: 0 0 1.1rem;
	max-width: var(--ph-heading-maxwidth, none);
	font-family: var(--ph-font-heading), var(--ph-fallback);
	font-size: clamp(1.9rem, 6vw, var(--ph-heading-size, 64px));
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ph-heading-color);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.plumber-hero__subtitle {
	margin: 0 0 2rem;
	max-width: 56ch;
	font-family: var(--ph-font-body), var(--ph-fallback);
	font-size: clamp(1rem, 2.2vw, var(--ph-sub-size, 20px));
	line-height: 1.55;
	color: var(--ph-sub-color);
}

/* --- Buttons ---------------------------------------------------------- */
.plumber-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2.25rem;
}

.plumber-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.95em 1.9em;
	border-radius: 10px;
	font-family: var(--ph-font-button), var(--ph-fallback);
	font-size: clamp(0.9rem, 1.3vw, var(--ph-button-size, 16px));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	will-change: transform;
}

.plumber-hero__btn,
.plumber-hero__btn:link,
.plumber-hero__btn:visited,
.plumber-hero__btn:hover,
.plumber-hero__btn:focus,
.plumber-hero__btn:active {
	text-decoration: none !important;
}

.plumber-hero__btn--primary {
	background: var(--ph-pbtn-bg);
	color: var(--ph-pbtn-text);
	box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ph-pbtn-bg) 70%, transparent);
}

.plumber-hero__btn--primary:hover,
.plumber-hero__btn--primary:focus-visible {
	transform: translateY(-2px);
	background: var(--ph-pbtn-bg-hover);
	color: var(--ph-pbtn-text-hover);
	box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--ph-pbtn-bg-hover) 80%, transparent);
}

.plumber-hero__btn--secondary {
	background: var(--ph-sbtn-bg);
	color: var(--ph-sbtn-text);
	border: 1.5px solid var(--ph-sbtn-border);
}

.plumber-hero__btn--secondary:hover,
.plumber-hero__btn--secondary:focus-visible {
	transform: translateY(-2px);
	background: var(--ph-sbtn-bg-hover);
	color: var(--ph-sbtn-text-hover);
	border-color: var(--ph-sbtn-border-hover);
}

.plumber-hero__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Touch feedback (hover never fires on mobile). */
.plumber-hero__btn:active {
	transform: translateY(0) scale(0.985);
}

/* --- Trust points ----------------------------------------------------- */
.plumber-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plumber-hero__features li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--ph-font-feature), var(--ph-fallback);
	font-size: clamp(0.85rem, 1.3vw, var(--ph-feature-size, 16px));
	font-weight: 600;
	color: var(--ph-feature-color);
}

.plumber-hero__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--ph-check-bg);
}

.plumber-hero__check svg {
	display: block;
	width: 0.82rem;
	height: 0.82rem;
	fill: none;
	stroke: var(--ph-check-color);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Layouts ---------------------------------------------------------- */
.plumber-hero--center .plumber-hero__inner {
	text-align: center;
}
.plumber-hero--center .plumber-hero__title,
.plumber-hero--center .plumber-hero__subtitle {
	margin-left: auto;
	margin-right: auto;
}
.plumber-hero--center .plumber-hero__actions,
.plumber-hero--center .plumber-hero__features {
	justify-content: center;
}

.plumber-hero--right .plumber-hero__inner {
	text-align: right;
}
.plumber-hero--right .plumber-hero__title,
.plumber-hero--right .plumber-hero__subtitle {
	margin-left: auto;
	margin-right: 0;
}
.plumber-hero--right .plumber-hero__actions,
.plumber-hero--right .plumber-hero__features {
	justify-content: flex-end;
}

/* --- Scroll cue ------------------------------------------------------- */
.plumber-hero__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
}

.plumber-hero__scroll span {
	display: block;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--ph-scroll-color);
	border-bottom: 2px solid var(--ph-scroll-color);
	transform: rotate(45deg);
	animation: plumber-hero-bounce 1.8s ease-in-out infinite;
}

@keyframes plumber-hero-bounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
	50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* --- Entrance animation ----------------------------------------------- */
.plumber-hero__eyebrow,
.plumber-hero__title,
.plumber-hero__subtitle,
.plumber-hero__actions,
.plumber-hero__features {
	opacity: 0;
	transform: translateY(18px);
	animation: plumber-hero-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

.plumber-hero__title      { animation-delay: 0.08s; }
.plumber-hero__subtitle   { animation-delay: 0.16s; }
.plumber-hero__actions    { animation-delay: 0.24s; }
.plumber-hero__features   { animation-delay: 0.32s; }

@keyframes plumber-hero-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* --- Mobile ----------------------------------------------------------- */
/*
 * On phones the hero is recomposed: content is anchored toward the lower
 * part of the screen so the photo breathes up top and the call-to-action
 * buttons land in the thumb zone. The top padding still clears Astra's
 * transparent header whenever the content grows tall.
 */
@media (max-width: 782px) {
	.plumber-hero {
		align-items: flex-end;
	}
	.plumber-hero__inner {
		padding: clamp(6rem, 22vh, 9rem) 1.5rem clamp(2.75rem, 8vh, 4rem);
	}
	.plumber-hero__title {
		max-width: 100%;
		font-size: clamp(2rem, 7.6vw, 2.9rem);
		line-height: 1.06;
		margin-bottom: 1rem;
	}
	.plumber-hero__subtitle {
		max-width: 100%;
		font-size: clamp(1.0625rem, 4vw, 1.25rem);
		margin-bottom: 1.75rem;
	}
	.plumber-hero__eyebrow {
		margin-bottom: 0.85rem;
	}
	/* The scroll cue overlaps bottom-anchored content and adds clutter. */
	.plumber-hero__scroll {
		display: none;
	}
}

@media (max-width: 600px) {
	.plumber-hero__eyebrow {
		letter-spacing: 0.14em;
	}
	.plumber-hero__eyebrow::before {
		width: 1.8rem;
	}
	.plumber-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.65rem;
		margin-bottom: 1.85rem;
	}
	.plumber-hero__btn {
		width: 100%;
		min-height: 3.25rem;
		padding: 0.8em 1.4em;
	}
	/* Tighter, crisper shadow so it never blooms onto a dark photo. */
	.plumber-hero__btn--primary {
		box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ph-pbtn-bg) 55%, transparent);
	}
	.plumber-hero__features {
		flex-direction: column;
		gap: 0.65rem;
	}
	.plumber-hero--center .plumber-hero__features,
	.plumber-hero--right .plumber-hero__features {
		align-items: center;
	}
}

@media (max-width: 380px) {
	.plumber-hero__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.plumber-hero__title {
		line-height: 1.1;
	}
}

@media (max-height: 620px) {
	.plumber-hero {
		align-items: center;
	}
	.plumber-hero__scroll {
		display: none;
	}
	.plumber-hero__inner {
		padding-top: clamp(4.5rem, 16vw, 6rem);
		padding-bottom: 2rem;
	}
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.plumber-hero__eyebrow,
	.plumber-hero__title,
	.plumber-hero__subtitle,
	.plumber-hero__actions,
	.plumber-hero__features,
	.plumber-hero__scroll span,
	.plumber-hero__btn {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}