@charset "UTF-8";
/* sections/page-header.php */
.ph-section {
	position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
	padding: calc(var(--space-7) + var(--space-5) + var(--header-offset, 0px)) var(--space-gutter) var(--space-7);
	/* Same deep navy and red glow as the hero and the footer, plus a blue glow behind the picture. */
	--ph-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	--ph-soft: color-mix(in srgb, var(--c-on-dark) 84%, transparent);
	--ph-line: color-mix(in srgb, var(--c-on-dark) 24%, transparent);
	background-color: var(--ph-blue);
	background-image:
		radial-gradient(44rem 24rem at 0% 115%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 70%),
		radial-gradient(46rem 30rem at 95% 10%, color-mix(in srgb, var(--c-primary) 85%, transparent), transparent 70%);
	color: var(--c-on-dark); font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.5;
}
.ph-section *, .ph-section *::before, .ph-section *::after { box-sizing: border-box; }
.ph-inner { display: grid; gap: var(--space-6); align-items: center; max-width: var(--container); margin: 0 auto; }
.ph-inner > * { min-width: 0; }

/* Breadcrumb */
.ph-crumbs { margin: 0 0 var(--space-4); }
.ph-crumb-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.ph-crumb { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ph-soft); }
.ph-crumb + .ph-crumb::before { content: "›"; color: var(--c-primary-light); }
.ph-crumb[aria-current="page"] { color: var(--c-on-dark); font-weight: 600; }
.ph-section .ph-crumb-link { color: var(--ph-soft); text-decoration: none; transition: color 0.2s; }
.ph-section .ph-crumb-link:hover, .ph-section .ph-crumb-link:focus { color: var(--c-on-dark); text-decoration: underline; text-underline-offset: 0.2em; }

.ph-section .ph-title {
	margin: 0; color: var(--c-on-dark);
	font-family: var(--f-heading); font-size: var(--fs-3xl); font-weight: 800;
	line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance;
}
/* Second line of the h1 (set in code for some pages): on its own line, sky blue like the hero's. */
.ph-title-accent { display: block; color: var(--c-primary-light); }
.ph-lead { max-width: 56ch; margin: var(--space-4) 0 0; color: var(--ph-soft); font-size: var(--fs-lg); line-height: 1.6; }
.ph-lead--cities { margin-top: var(--space-3); }
/* Blog post: date · category · reading time, small sky-blue line */
.ph-meta { margin: var(--space-4) 0 0; color: var(--c-primary-light); font-size: var(--fs-sm); font-weight: 600; }
.ph-city-note { white-space: nowrap; }
.ph-section .ph-city { color: var(--c-on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.ph-section .ph-city:hover, .ph-section .ph-city:focus { color: var(--c-primary-light); }
.ph-lead--todo { padding: var(--space-3) var(--space-4); border: 1px dashed var(--ph-line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }

/* Call to action: white pill with a red round badge, as in the hero */
.ph-section .ph-btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	min-height: 3.5rem; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	border: 1px solid transparent; border-radius: var(--radius-pill);
	background: var(--c-surface); color: var(--c-primary);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--c-bg-dark) 40%, transparent);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none;
	transition: transform 0.25s, box-shadow 0.25s;
}
.ph-section .ph-btn:hover, .ph-section .ph-btn:focus {
	background: var(--c-surface); color: var(--c-primary); transform: translateY(-2px);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--c-bg-dark) 50%, transparent);
}
.ph-btn-icon {
	display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--c-accent); color: var(--c-on-accent); transition: background-color 0.25s, transform 0.25s;
}
.ph-btn-icon .ph-icon { width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform 0.25s; }
.ph-btn:hover .ph-btn-icon, .ph-btn:focus-visible .ph-btn-icon { background: var(--c-accent-hover); transform: scale(1.06); }
.ph-btn:hover .ph-btn-icon .ph-icon, .ph-btn:focus-visible .ph-btn-icon .ph-icon { transform: rotate(0deg); }
.ph-section .ph-btn:focus-visible, .ph-section .ph-crumb-link:focus-visible, .ph-section .ph-rating:focus-visible {
	outline: 2px solid var(--c-on-dark); outline-offset: 3px;
}

/* Button + Google rating on one line (the rating wraps under the button on narrow screens) */
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.ph-section .ph-rating {
	display: inline-flex; align-items: center; gap: var(--space-2);
	min-height: 3.5rem; padding: var(--space-2) var(--space-3);
	border: 1px solid var(--ph-line); border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--c-on-dark) 10%, transparent); color: var(--ph-soft);
	font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap;
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: border-color 0.2s, background-color 0.2s;
}
.ph-section .ph-rating:hover, .ph-section .ph-rating:focus {
	border-color: color-mix(in srgb, var(--c-on-dark) 60%, transparent);
	background: color-mix(in srgb, var(--c-on-dark) 16%, transparent); color: var(--c-on-dark);
}
.ph-rating-logo { flex: none; width: 1.5rem; height: 1.5rem; }
.ph-rating-score { color: var(--c-on-dark); font-family: var(--f-heading); font-size: var(--fs-lg); font-weight: 800; line-height: 1; }
.ph-stars { display: inline-flex; gap: 0.0625rem; color: var(--c-star); }
.ph-star { width: 0.9375rem; height: 0.9375rem; fill: currentColor; }

/*
	Watermark as a guarantee seal: the logo as a white silhouette (mask over a white
	fill), tilted, the same size as the footer watermark (34rem), on the LEFT side of
	the section. On small screens it sits behind the title, off the left edge; from
	1024px it stands in the left margin and reaches a little under the start of the
	text. The section clips what goes past the edge of the screen.
*/
.ph-section::before {
	content: ""; position: absolute; z-index: 0; top: 4.5rem; left: -9rem; width: min(34rem, 90vw); aspect-ratio: 350 / 293;
	background: var(--c-on-dark); opacity: 0.06; pointer-events: none; transform: rotate(-12deg);
	-webkit-mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
}
.ph-inner { position: relative; z-index: 1; } /* content above the watermark */
.ph-visual { position: relative; }
.ph-visual > .ph-media { z-index: 1; }

/*
	Picture card: two large opposite corners, an outlined twin of the same shape
	offset behind it, and a glass chip overlapping its lower-left edge. On small
	screens the card keeps the picture's own proportions (4:3 when unknown); from
	1024px it stretches to the height of the text column.
*/
.ph-visual { --ph-shape: var(--radius-lg) 3.5rem var(--radius-lg) 3.5rem; }
.ph-visual::after {
	content: ""; position: absolute; z-index: 0; inset: 0;
	border: 1px solid color-mix(in srgb, var(--c-on-dark) 32%, transparent); border-radius: var(--ph-shape);
	transform: translate(0.625rem, 0.625rem); pointer-events: none;
}
.ph-media {
	position: relative; overflow: hidden; margin: 0; aspect-ratio: var(--ph-ratio, 4 / 3);
	border: 1px solid var(--ph-line); border-radius: var(--ph-shape); box-shadow: var(--shadow-lg);
	background: color-mix(in srgb, var(--c-on-dark) 8%, transparent);
}
.ph-section .ph-img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.ph-chip {
	position: absolute; z-index: 2; bottom: var(--space-3); left: var(--space-3);
	display: flex; align-items: center; gap: var(--space-3); margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
	border: 1px solid var(--ph-line); border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--ph-blue) 68%, transparent); box-shadow: var(--shadow-md);
	font-size: var(--fs-xs); line-height: 1.25;
	-webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.ph-chip-icon {
	display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem;
	border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent);
}
.ph-chip-icon .ph-icon { width: 1.125rem; height: 1.125rem; }
.ph-chip-label { display: block; color: var(--ph-soft); }
.ph-chip-strong { display: block; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
/* No featured image on a pest page: its icon in a glass tile. */
.ph-media--icon {
	display: grid; place-items: center; aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c-on-dark) 16%, transparent), color-mix(in srgb, var(--c-on-dark) 4%, transparent));
}
.ph-section .ph-post-logo { width: 34%; max-width: 9rem; height: auto; opacity: 0.4; }
.ph-pest { width: 40%; max-width: 11rem; height: auto; color: var(--c-primary-light); stroke-width: 0.9; }

@media (min-width: 768px) {
	.ph-media--icon { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
	.ph-section {
		padding-top: calc(var(--space-8) + var(--space-6) + var(--header-offset, 0px));
		padding-bottom: var(--space-8);
	}
	.ph-inner--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); align-items: stretch; }
	.ph-text { align-self: center; }
	/* The card fills the row: as tall as the text column, never less than 22rem. */
	.ph-visual { --ph-shape: var(--radius-lg) 5rem var(--radius-lg) 5rem; display: flex; min-height: 22rem; }
	.ph-visual > .ph-media { flex: 1; aspect-ratio: auto; }
	.ph-visual > .ph-media .ph-img { position: absolute; inset: 0; }
	.ph-visual::after { transform: translate(1rem, 1rem); }
	.ph-chip { bottom: var(--space-6); left: calc(var(--space-5) * -1); }
	.ph-section::before {
		top: 50%; left: calc(max(var(--space-gutter), (100% - var(--container)) / 2) + var(--space-8) - 34rem);
		width: 34rem; opacity: 0.09; transform: translateY(-50%) rotate(-12deg);
	}
}
/*
	Entrance on load, same movement as the hero and as the site-wide entrance of the other
	sections: the lines of the text column, then the picture, rise into place (CSS only).
*/
.ph-text > *, .ph-visual { animation: ph-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ph-text > :nth-child(2) { animation-delay: 0.08s; }
.ph-text > :nth-child(3) { animation-delay: 0.16s; }
.ph-text > :nth-child(n+4) { animation-delay: 0.24s; }
.ph-visual { animation-delay: 0.2s; }
@keyframes ph-rise { from { opacity: 0; transform: translateY(1.25rem); } }
@media (prefers-reduced-motion: reduce) {
	.ph-section * { animation: none !important; transition: none !important; }
}