/* =====================================================================
   LPK Landing Template
   Everything is scoped under .lpk-landing / body.lpk-landing-page
   so it cannot leak into (or be trampled by) the Kadence theme.
   ===================================================================== */

.lpk-landing {
	--lpk-navy: #2f3b52;        /* card + heading */
	--lpk-navy-deep: #273248;   /* card gradient base */
	--lpk-teal: #52a58e;        /* overline */
	--lpk-yellow: #ffc219;      /* submit button */
	--lpk-yellow-hover: #f5b400;
	--lpk-text: #6f7784;        /* body copy */
	--lpk-shape-blue: #b4c4ee;
	--lpk-shape-cream: #fbe3bb;
	--lpk-shape-grey: #d9dde3;
	--lpk-serif: "Playfair Display", "PT Serif", Georgia, "Times New Roman", serif;
	--lpk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Hide Kadence's own page title / hero for this template ---------- */
body.lpk-landing-page .entry-header,
body.lpk-landing-page .kadence-breadcrumbs,
body.lpk-landing-page #inner-wrap .entry-hero,
body.lpk-landing-page .page-title-inner-wrap {
	display: none;
}

body.lpk-landing-page .content-area,
body.lpk-landing-page .site-container .content-container {
	padding-top: 0;
	padding-bottom: 0;
	max-width: none;
}

/* --- Canvas mode (site header/footer hidden) -------------------------- */
body.lpk-canvas {
	margin: 0;
	background: #ffffff;
}

body.lpk-canvas .lpk-hero {
	min-height: 100vh;
	min-height: 100svh;
}

/* --- Hero section ---------------------------------------------------- */
.lpk-hero {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	padding: clamp(3rem, 8vw, 6.5rem) 1.5rem;
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.lpk-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: center;
}

/* --- Background shapes ------------------------------------------------ */
.lpk-shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.lpk-shape {
	position: absolute;
	display: block;
}

/* Rounded-triangle look via clip-path + generous border-radius blur. */
.lpk-shape--blue {
	top: -12%;
	right: -6%;
	width: 26vw;
	height: 26vw;
	max-width: 420px;
	max-height: 420px;
	background: var(--lpk-shape-blue);
	border-radius: 18%;
	transform: rotate(215deg);
	clip-path: polygon(50% 6%, 100% 94%, 0% 94%);
}

.lpk-shape--cream {
	left: -9%;
	top: 22%;
	width: 24vw;
	height: 24vw;
	max-width: 380px;
	max-height: 380px;
	background: var(--lpk-shape-cream);
	border-radius: 18%;
	transform: rotate(150deg);
	clip-path: polygon(50% 6%, 100% 94%, 0% 94%);
}

.lpk-shape--grey {
	left: -6%;
	bottom: -18%;
	width: 20vw;
	height: 20vw;
	max-width: 320px;
	max-height: 320px;
	background: var(--lpk-shape-grey);
	border-radius: 18%;
	transform: rotate(35deg);
	clip-path: polygon(50% 6%, 100% 94%, 0% 94%);
}

/* --- Left column ------------------------------------------------------ */
.lpk-overline {
	font-family: var(--lpk-serif);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lpk-teal);
	margin: 0 0 1.25rem;
}

.lpk-heading {
	font-family: var(--lpk-serif);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 3.75rem);
	line-height: 1.25;
	color: var(--lpk-navy);
	margin: 0 0 1.75rem;
}

.lpk-body {
	font-family: var(--lpk-serif);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--lpk-text);
	margin: 0;
	max-width: 32em;
}

.lpk-extra-content {
	margin-top: 2rem;
}

/* --- Form card -------------------------------------------------------- */
.lpk-card {
	background: linear-gradient(180deg, var(--lpk-navy) 0%, var(--lpk-navy-deep) 100%);
	border-radius: 10px;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 18px 40px rgba(47, 59, 82, 0.28);
	color: #ffffff;
}

.lpk-card__title {
	font-family: var(--lpk-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	color: #ffffff;
	text-align: center;
	margin: 0 0 1.75rem;
}

.lpk-field {
	margin-bottom: 1.25rem;
}

.lpk-field label {
	display: block;
	font-family: var(--lpk-sans);
	font-size: 0.95rem;
	color: #ffffff;
	margin-bottom: 0.5rem;
}

.lpk-landing .lpk-field input {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 0.9rem 1rem;
	font-family: var(--lpk-sans);
	font-size: 1rem;
	color: var(--lpk-navy);
	line-height: 1.4;
	transition: box-shadow 0.15s ease;
}

.lpk-landing .lpk-field input:focus {
	outline: 2px solid var(--lpk-yellow);
	outline-offset: 1px;
	box-shadow: 0 0 0 4px rgba(255, 194, 25, 0.25);
}

.lpk-landing .lpk-submit {
	display: block;
	width: 100%;
	background: var(--lpk-yellow);
	color: #1f2634;
	border: none;
	border-radius: 6px;
	padding: 1rem;
	font-family: var(--lpk-sans);
	font-size: 1.1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
	margin-top: 0.5rem;
}

.lpk-landing .lpk-submit:hover,
.lpk-landing .lpk-submit:focus-visible {
	background: var(--lpk-yellow-hover);
}

.lpk-landing .lpk-submit:active {
	transform: translateY(1px);
}

.lpk-landing .lpk-submit[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.lpk-form__status {
	font-family: var(--lpk-sans);
	font-size: 0.95rem;
	margin: 0.9rem 0 0;
	min-height: 1.3em;
	text-align: center;
}

.lpk-form__status.is-success { color: #9be3c3; }
.lpk-form__status.is-error   { color: #ffb3a1; }

/* Honeypot — visually removed, still in the DOM for bots. */
.lpk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Shortcode-based forms (CF7 etc.) inherit sensible styling. */
.lpk-card__shortcode input[type="text"],
.lpk-card__shortcode input[type="email"],
.lpk-card__shortcode input[type="tel"],
.lpk-card__shortcode input[type="number"],
.lpk-card__shortcode textarea {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 0.9rem 1rem;
	font-size: 1rem;
	color: var(--lpk-navy);
}

.lpk-card__shortcode label {
	color: #ffffff;
	font-family: var(--lpk-sans);
	font-size: 0.95rem;
}

.lpk-card__shortcode input[type="submit"],
.lpk-card__shortcode button[type="submit"] {
	display: block;
	width: 100%;
	background: var(--lpk-yellow);
	color: #1f2634;
	border: none;
	border-radius: 6px;
	padding: 1rem;
	font-size: 1.1rem;
	font-weight: 500;
	cursor: pointer;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
	.lpk-hero__inner {
		grid-template-columns: 1fr;
	}

	.lpk-shape--blue { right: -20%; }
	.lpk-shape--cream { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lpk-landing * {
		transition: none !important;
	}
}

/* --- v1.4.0: Custom backgrounds --------------------------------------- */
/* The resolved background CSS is applied inline on .lpk-hero.
   When a real background is set, the shapes are suppressed server-side. */

.lpk-hero--has-bg {
	background-color: transparent;
}

/* Image/video backgrounds get a readability scrim behind the copy so the
   dark card and serif heading stay legible over busy media. */
.lpk-hero--bg-image::before,
.lpk-hero--bg-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

/* Video element fills the hero, sits beneath content. */
.lpk-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.lpk-bg-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

/* On image/video backgrounds the left copy can be hard to read; give it a
   subtle text backdrop only when it would otherwise sit on media. */
.lpk-hero--bg-image .lpk-hero__copy,
.lpk-hero--bg-video .lpk-hero__copy {
	position: relative;
	z-index: 1;
}

/* --- v1.4.0: Terms & Conditions checkbox ------------------------------ */
.lpk-field--tc {
	margin-top: 0.25rem;
}

.lpk-tc {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	font-family: var(--lpk-sans);
	font-size: 0.9rem;
	line-height: 1.5;
	color: #dfe3ea;
}

.lpk-landing .lpk-tc input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--lpk-yellow);
	cursor: pointer;
}

.lpk-tc__text a {
	color: var(--lpk-yellow);
	text-decoration: underline;
}

.lpk-tc__text a:hover {
	text-decoration: none;
}

/* --- v1.5.0: Layout media (image/video in the left column) ------------ */
.lpk-media {
	margin: 0 0 1.5rem;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	max-height: 520px;
}

/* When the media is the last thing in the column (no text below it), drop
   the trailing margin so its bottom edge lines up with the form card. */
.lpk-media:last-child {
	margin-bottom: 0;
}

.lpk-media img,
.lpk-media video {
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

.lpk-copy-above {
	margin-bottom: 1.5rem;
}

.lpk-copy-below {
	margin-top: 1.5rem;
}

/* When there's media, the heading above it shouldn't carry the huge
   bottom margin it uses in the classic layout. */
.lpk-copy-above .lpk-heading {
	margin-bottom: 1rem;
}

/* --- v1.5.0: T&Cs spacing fix ----------------------------------------- */
/* A little more room below the consent row so the browser's validation
   tooltip doesn't crowd the Submit button. */
.lpk-field--tc {
	margin-top: 0.25rem;
	margin-bottom: 1.5rem;
}