/**
 * New owner information page template (LAND-03, OWN-01, OWN-02).
 *
 * Loaded only on templates/template-new-owner.php. Rebuilt from the Reminder
 * flyer's intro CSS, GPS-scoped (standards doc 08 Part F):
 *   Page    — body.page-template-template-new-owner
 *   Section — #primary (banner), #eenergy-new-owner (intro), #eenergy-new-owner-form
 *
 * Fonts: the site's Poppins, Rubik and Playfair Display only (LAND-04).
 * Colours: #587920 for green text; #8ab73f for decoration.
 * Mobile first; one breakpoint at 48em. With no photo (.no-photo) the text
 * runs full width (OWN-02).
 */


/* Page */

body.page-template-template-new-owner {
	--eenergy-own-green: #587920;
	--eenergy-own-green-dark: #3f5817;
	--eenergy-own-decor: #8ab73f;
	--eenergy-own-ink: #121212;
	--eenergy-own-text: #202528;
	--eenergy-own-tint: #f4f8f0;
	--eenergy-own-paper: #f2f2ef;
	--eenergy-own-wash: #fff;
}



/* Banner */

/* Green text uses the dark green (A11Y-01); the site's #8ab73f is 2.35:1 on white. */
body.page-template-template-new-owner #primary .entry-title {
	color: var(--eenergy-own-green);
}

/* The theme's 2.5rem phone size doesn't fit long words (e.g. "Information") at 320px (LAND-11). */
@media (width < 48em) {
	body.page-template-template-new-owner #primary .entry-title {
		font-size: min(2.5rem, 9vw);
	}
}


/* Section: intro (greeting, title, text, special box, photo) */

body.page-template-template-new-owner #eenergy-new-owner {
	padding-block: 2rem 1rem;
	background: #fff;
	color: var(--eenergy-own-text);
}

body.page-template-template-new-owner #eenergy-new-owner .layout {
	display: grid;
	gap: 1.5rem;
}

body.page-template-template-new-owner #eenergy-new-owner .greeting {
	margin: 0 0 0.25rem;
	color: var(--eenergy-own-ink);
	font-size: 1.1rem;
	font-weight: 700;
}

body.page-template-template-new-owner #eenergy-new-owner h2 {
	margin: 0;
	color: var(--eenergy-own-ink);
	font-family: Poppins, sans-serif;
	font-size: clamp(2rem, 4.5vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
}

/* Bold words in the title show in green, as on the flyer. */
body.page-template-template-new-owner #eenergy-new-owner h2 strong,
body.page-template-template-new-owner #eenergy-new-owner h2 b {
	color: var(--eenergy-own-green);
	font-weight: 700;
}

body.page-template-template-new-owner #eenergy-new-owner h2::after {
	display: block;
	inline-size: 6rem;
	block-size: 3px;
	margin-block: 0.6rem 1.25rem;
	background: var(--eenergy-own-decor);
	content: "";
}

body.page-template-template-new-owner #eenergy-new-owner .body p {
	max-inline-size: 34rem;
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
}

/* Links in the body text: dark green, underlined (A11Y-01, A11Y-04). The site's
   default link colour, #8ab73f, is only 2.35:1 on white. */
body.page-template-template-new-owner #eenergy-new-owner .body a {
	color: var(--eenergy-own-green);
	text-decoration: underline;
}

body.page-template-template-new-owner #eenergy-new-owner .body a:hover {
	color: var(--eenergy-own-green-dark);
}

body.page-template-template-new-owner #eenergy-new-owner .special {
	margin-block-start: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	background: var(--eenergy-own-tint);
}

body.page-template-template-new-owner #eenergy-new-owner .special > :first-child {
	margin-block-start: 0;
}

body.page-template-template-new-owner #eenergy-new-owner .special > :last-child {
	margin-block-end: 0;
}

body.page-template-template-new-owner #eenergy-new-owner .special h3 {
	margin: 0.25rem 0 0.5rem;
	color: var(--eenergy-own-ink);
	font-family: Poppins, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
}

body.page-template-template-new-owner #eenergy-new-owner .special strong {
	color: var(--eenergy-own-green);
}

body.page-template-template-new-owner #eenergy-new-owner .special p {
	margin: 0 0 0.6rem;
}

body.page-template-template-new-owner #eenergy-new-owner .photo {
	position: relative;
	margin: 0;
}

body.page-template-template-new-owner #eenergy-new-owner .photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 16rem;
	border-radius: 4px;
	object-fit: cover;
}

/* The badge over a photo, on a white backing so it stays readable. */
body.page-template-template-new-owner #eenergy-new-owner .badge {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	background: rgb(255 255 255 / 88%);
	color: var(--eenergy-own-ink);
	font-family: "Playfair Display", serif;
	font-size: 1.4rem;
	line-height: 1;
	text-align: end;
	transform: rotate(-8deg);
}

body.page-template-template-new-owner #eenergy-new-owner .badge::after {
	inline-size: 4.5rem;
	block-size: 4px;
	margin-block-start: 0.4rem;
	border-radius: 2px;
	background: var(--eenergy-own-decor);
	content: "";
}


/* Section: form */

body.page-template-template-new-owner #eenergy-new-owner-form {
	background: #fff;
}


/* 48em and up */

@media (width >= 48em) {
	body.page-template-template-new-owner #eenergy-new-owner.has-photo .layout {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: stretch;
	}

	body.page-template-template-new-owner #eenergy-new-owner .badge {
		inset-block-start: 1.5rem;
		inset-inline-end: 1.5rem;
		font-size: 2rem;
		transform: rotate(-14deg);
	}
}