/**
 * Appreciation "thank a worker" landing.
 *
 * Port of the old AMPS sector-landing (afscme.org/theme/sass/landing.css +
 * partials). These are STANDALONE campaign pages with no site header/footer
 * (the page-appreciation template omits both). The green textured canvas
 * (bg.jpg) and torn-paper diagonal (angle.png) sit on the body; a white
 * content panel holds the green grunge-swash headline (headline.png), the
 * form, and a matching grunge-swash submit button; the cutout worker photo
 * fills the right; a simple paid-for/copyright footer sits below on the green.
 *
 * Scoped to body.appreciation-page (added via body_class for this template).
 * Assets live in ../appreciation/ relative to this file.
 */

body.appreciation-page {
	margin: 0;
	min-height: 100vh;
	text-align: center;
	color: #000;
	font-family: "Roboto Condensed", sans-serif;
	background-color: #33a83a;
	background-image: url(../appreciation/angle.png), url(../appreciation/bg.jpg);
	background-position: left top, center center;
	background-size: 100% 60vh, cover;
	background-repeat: no-repeat, no-repeat;
}

@media (min-width: 48em) {
	body.appreciation-page {
		background-size: 100% auto, cover;
	}
}

/* Strip any inherited page padding so the landing is edge to edge. */
.appreciation-page .appreciation-main,
.appreciation-page .entry-content {
	margin: 0;
	padding: 0;
	max-width: none;
}

/* These are standalone pages: neutralize the theme's interior scroll-reveal
   (it targets .entry-content > div and would otherwise strand the landing at
   opacity:0 when it is in view on load). */
.appreciation-page .entry-content > * {
	opacity: 1 !important;
	transform: none !important;
}

/* The grid: white content panel + cutout photo. */
.appreciation-landing {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: 100vh;
	background: transparent;
}

.appreciation-landing > * {
	position: relative;
	z-index: 1;
}

/* AFSCME logo, top-right corner (AMPS .photo svg). */
.appreciation-landing::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: clamp(6rem, 9vw, 10rem);
	height: calc(clamp(6rem, 9vw, 10rem) * 74 / 180);
	background: url(../appreciation/afscme-logo.svg) right top / contain no-repeat;
	z-index: 3;
	pointer-events: none;
}

/* Left: white content panel (offset like AMPS .content). */
.appreciation-content {
	width: 55%;
	background: #fff;
	margin: 1rem 0 1rem 1rem;
	padding: 2.5rem 2rem 2rem;
	align-self: flex-start;
	box-sizing: border-box;
}

@media (min-width: 64em) {
	.appreciation-content {
		margin: 1.5rem 0 1.5rem 1.5rem;
		padding: 3.5rem 3rem 3rem;
	}
}

/* Right: cutout worker photo, large (AMPS .photo-subject, ~90% of height). */
.appreciation-photo {
	width: 45%;
	position: relative;
	overflow: hidden;
	padding: 0;
}

.appreciation-photo img {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 94%;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: center bottom;
}

/* Green grunge-swash headline. */
.appreciation-content .appreciation-headline {
	display: inline-block;
	background: url(../appreciation/headline.png) center center / 100% 100% no-repeat;
	color: #000 !important;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	line-height: 0.85;
	text-transform: uppercase;
	margin: 0 auto 1rem;
	padding: 1.75rem 1.5rem;
	font-size: clamp(2rem, 3.2vw, 4rem);
}

.appreciation-content > p {
	color: #505050;
	font-family: "Roboto Condensed", sans-serif;
	line-height: 1.35;
	max-width: 38em;
	margin: 1rem auto;
	font-size: 1.2rem;
}

@media (min-width: 64em) {
	.appreciation-content > p {
		font-size: 1.3rem;
	}
}

/* "THANK YOU, NURSES!" call-to-action heading above the form (AMPS .action-cta). */
.appreciation-content .appreciation-cta {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	line-height: 1;
	margin: 1.5rem auto 0.5rem;
	font-size: clamp(1.5rem, 2.4vw, 2.4rem);
}

/* Form (afscme/form) styled to match AMPS .form. */
.appreciation-content .afscme-form {
	max-width: 40em;
	margin: 1rem auto 0;
}

.appreciation-content .afscme-form-field__label {
	text-align: left;
	color: #909090;
	font-family: "Roboto Condensed", sans-serif;
}

.appreciation-content .afscme-form-field__input {
	width: 100%;
	border: 2px solid #00693a;
	outline: 0;
	padding: 0.9rem;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2rem;
	background: #fff;
	color: #000;
	transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
}

.appreciation-content .afscme-form-field__input:hover {
	background: #00954c;
	color: #fff;
	border-color: #005a33;
}

.appreciation-content .afscme-form-field__input:hover::placeholder {
	color: #fff;
}

.appreciation-content .afscme-form-field__input:focus {
	background: #fff;
	color: #063b76;
	border-color: #063b76;
}

.appreciation-content .afscme-form-field__textarea {
	min-height: 6rem;
}

@media (min-width: 64em) {
	.appreciation-content .afscme-form-field__textarea {
		min-height: 8rem;
	}
}

/* Green grunge-swash submit button: compact, centered (not full width). */
.appreciation-content .afscme-form-submit {
	text-align: center;
	width: 100% !important;
}

.appreciation-content .afscme-form-submit__button {
	display: inline-block;
	width: auto !important;
	background: url(../appreciation/headline.png) center center / 100% 100% no-repeat !important;
	color: #000 !important;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 900;
	font-size: clamp(1.4rem, 1.6vw, 1.9rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 1.4rem 3.5rem !important;
	border: 0 !important;
	box-shadow: none !important;
	transition: transform 0.5s cubic-bezier(0.5, 1.65, 0.4, 0.8);
}

.appreciation-content .afscme-form-submit__label {
	font-size: inherit;
}

.appreciation-content .afscme-form-submit__button:hover {
	transform: scale(1.05);
}

.appreciation-content .afscme-form-submit__button:active {
	transform: scale(0.96);
}

/* Simple footer (paid-for + copyright), white on the green canvas. */
.appreciation-footer {
	color: #fff;
	padding: 2rem;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.4;
}

.appreciation-footer .paidfor {
	border: 1px solid #fff;
	max-width: 50rem;
	margin: 0 auto 1rem;
	padding: 0.8rem 0.8rem 0.7rem;
}

.appreciation-footer .copyright {
	margin: 0 auto;
}

.appreciation-footer a {
	color: #fff;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	transition: border-color 0.4s ease;
}

.appreciation-footer a:hover {
	border-bottom-color: #005daa;
}

/* Stack on phones: photo on top (AMPS column-reverse). */
@media (max-width: 48em) {
	.appreciation-landing {
		flex-direction: column-reverse;
		min-height: 0;
	}

	.appreciation-content,
	.appreciation-photo {
		width: 100%;
	}

	.appreciation-content {
		margin: 1rem;
		padding: 1.5rem 1.25rem;
	}

	.appreciation-photo {
		height: 60vh;
	}

	.appreciation-photo img {
		height: 96%;
	}

	.appreciation-landing::after {
		top: 1rem;
		right: 1rem;
		width: 6rem;
		height: calc(6rem * 74 / 180);
	}
}