/**
 * Reminder sign-up page template (LAND-03, REM-01, REM-02).
 *
 * Loaded only on templates/template-reminder.php. Rebuilt from the flyer's
 * inline CSS, GPS-scoped (standards doc 08 Part F):
 *   Page    — body.page-template-template-reminder
 *   Section — #primary (banner), #eenergy-reminder (intro),
 *             #eenergy-reminder-details, #eenergy-reminder-expiring,
 *             #eenergy-reminder-contact, #eenergy-reminder-form
 *
 * Fonts: the site's Poppins, Rubik and Playfair Display only (LAND-04).
 * Colours: #587920 for green text and white-on-green; #8ab73f for decoration.
 * Mobile first; one breakpoint at 48em.
 */


/* Page */

body.page-template-template-reminder {
	--eenergy-rem-green: #587920;
	--eenergy-rem-green-dark: #3f5817;
	--eenergy-rem-decor: #8ab73f;
	--eenergy-rem-ink: #121212;
	--eenergy-rem-text: #202528;
	--eenergy-rem-tint: #f4f8f0;
	--eenergy-rem-paper: #f2f2ef;
	--eenergy-rem-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-reminder #primary .entry-title {
	color: var(--eenergy-rem-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-reminder #primary .entry-title {
		font-size: min(2.5rem, 9vw);
	}
}


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

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

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

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

body.page-template-template-reminder #eenergy-reminder h2 {
	margin: 0;
	color: var(--eenergy-rem-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-reminder #eenergy-reminder h2 strong,
body.page-template-template-reminder #eenergy-reminder h2 b {
	color: var(--eenergy-rem-green);
	font-weight: 700;
}

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

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

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

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

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

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

body.page-template-template-reminder #eenergy-reminder .special strong {
	color: var(--eenergy-rem-green);
}

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

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

body.page-template-template-reminder #eenergy-reminder .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-reminder #eenergy-reminder .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-rem-ink);
	font-family: "Playfair Display", serif;
	font-size: 1.4rem;
	line-height: 1;
	text-align: end;
	transform: rotate(-8deg);
}

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


/* Buttons (details and find-out boxes) */

body.page-template-template-reminder #main .button {
	margin: 1rem 0 0;
}

body.page-template-template-reminder #main .button a {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.8rem 1.4rem;
	border-radius: 999px;
	background: var(--eenergy-rem-green);
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body.page-template-template-reminder #main .button a:hover {
	background: var(--eenergy-rem-green-dark);
}

body.page-template-template-reminder #main .button svg {
	flex: none;
	inline-size: 1.2em;
	block-size: auto;
}

body.page-template-template-reminder #main .icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: 50%;
	background: var(--eenergy-rem-decor);
	color: #fff;
}

body.page-template-template-reminder #main .icon svg {
	inline-size: 55%;
	block-size: auto;
}


/* Section: keep your details current */

body.page-template-template-reminder #eenergy-reminder-details {
	padding-block: 1rem;
	background: #fff;
}

body.page-template-template-reminder #eenergy-reminder-details .box {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	background: var(--eenergy-rem-tint);
	box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
}

body.page-template-template-reminder #eenergy-reminder-details .box > div {
	flex: 1 1 16rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 2px solid var(--eenergy-rem-decor);
}

body.page-template-template-reminder #eenergy-reminder-details h2 {
	margin: 0;
	color: var(--eenergy-rem-ink);
	font-family: Poppins, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
}

body.page-template-template-reminder #eenergy-reminder-details p {
	margin: 0.35rem 0 0;
	color: var(--eenergy-rem-green);
	font-weight: 700;
}

body.page-template-template-reminder #eenergy-reminder-details .button {
	margin: 0;
}


/* Section: expiring */

body.page-template-template-reminder #eenergy-reminder-expiring {
	padding-block: 1.5rem 2rem;
	border-block-start: 2px solid var(--eenergy-rem-decor);
	background: #fff;
	color: var(--eenergy-rem-text);
}

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

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

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

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

body.page-template-template-reminder #eenergy-reminder-expiring h2 strong,
body.page-template-template-reminder #eenergy-reminder-expiring h2 b {
	color: var(--eenergy-rem-green);
}

body.page-template-template-reminder #eenergy-reminder-expiring .lead {
	margin: 1.25rem 0;
	font-size: 1.05rem;
}

body.page-template-template-reminder #eenergy-reminder-expiring ul {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-template-template-reminder #eenergy-reminder-expiring li {
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

body.page-template-template-reminder #eenergy-reminder-expiring li h3 {
	margin: 0;
	color: var(--eenergy-rem-ink);
	font-family: Poppins, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
}

body.page-template-template-reminder #eenergy-reminder-expiring li p {
	margin: 0.15rem 0 0;
}

body.page-template-template-reminder #eenergy-reminder-expiring .box {
	margin-block-start: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	background: var(--eenergy-rem-tint);
	box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
}

body.page-template-template-reminder #eenergy-reminder-expiring .box h3 {
	margin: 0;
	color: var(--eenergy-rem-ink);
	font-family: Poppins, sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
}

body.page-template-template-reminder #eenergy-reminder-expiring .box p {
	margin: 0.35rem 0 0;
}

/* The badge over a photo, on a white backing so it stays readable. */
body.page-template-template-reminder #eenergy-reminder-expiring .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-rem-ink);
	font-family: "Playfair Display", serif;
	font-size: 1.4rem;
	line-height: 1;
	text-align: end;
	transform: rotate(-8deg);
}

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


/* Contact strip */

body.page-template-template-reminder #eenergy-reminder-contact {
	padding-block: 1.75rem;
	background: var(--eenergy-rem-paper);
	color: var(--eenergy-rem-ink);
}

body.page-template-template-reminder #eenergy-reminder-contact ul {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	background: var(--eenergy-rem-wash);
	list-style: none;
}

body.page-template-template-reminder #eenergy-reminder-contact a {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	color: var(--eenergy-rem-ink);
	text-decoration: underline;
	text-decoration-color: var(--eenergy-rem-decor);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

body.page-template-template-reminder #eenergy-reminder-contact a:hover {
	color: var(--eenergy-rem-green);
}

body.page-template-template-reminder #eenergy-reminder-contact .icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background: var(--eenergy-rem-decor);
	color: #fff;
}

body.page-template-template-reminder #eenergy-reminder-contact .icon svg {
	inline-size: 55%;
	block-size: auto;
}

body.page-template-template-reminder #eenergy-reminder-contact strong {
	display: block;
	font-weight: 700;
}

body.page-template-template-reminder #eenergy-reminder-contact .values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	justify-content: center;
	margin: 1.25rem 0 0;
	font-size: clamp(1rem, 2vw, 1.25rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.page-template-template-reminder #eenergy-reminder-contact .values span + span::before {
	display: inline-block;
	inline-size: 2px;
	block-size: 1.1em;
	margin-inline-end: 1.25rem;
	background: var(--eenergy-rem-decor);
	content: "";
	vertical-align: -0.15em;
}



/* Form */

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


/* 48em and up */

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

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

	body.page-template-template-reminder #eenergy-reminder-contact ul {
		flex-direction: row;
		gap: 2rem;
		justify-content: center;
	}
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	body.page-template-template-reminder #main .button a {
		transition: none;
	}
}