/* =========================================================
   LORENE CONTACT POPUP
   WPForms Form ID 80

   MOBILE-FIRST RESPONSIVE ARCHITECTURE

   Mobile:
   Base styles / 0px–600px

   Tablet + desktop:
   601px+

   Component responsibilities:

   - Modal overlay
   - Film-frame presentation
   - Contact form surface
   - WPForms field styling
   - Submit-button styling
   - Validation styling
   - Success-message styling
   - Responsive contact-modal behavior

   Global site styles live in style.css.
========================================================= */


/* =========================================================
   MODAL OVERLAY
   MOBILE DEFAULT
========================================================= */

.lorene-contact-modal {
	position: fixed;
	inset: 0;

	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0.5rem;

	background:
		rgba(0, 0, 0, 0.78);

	-webkit-backdrop-filter:
		blur(5px);

	backdrop-filter:
		blur(5px);

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 180ms ease,
		visibility 180ms ease;
}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

.lorene-contact-modal.is-open {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;
}


/*
 * Prevent underlying page scrolling while modal is open.
 */

html.lorene-contact-open,
html.lorene-contact-open body {
	overflow: hidden;
}


/* =========================================================
   FILM FRAME
   MOBILE DEFAULT
========================================================= */

.lorene-contact-frame {
	position: relative;

	/*
	 * mail_frame.webp:
	 * 1024 × 1198
	 */

	aspect-ratio:
		1024 / 1198;

	width:
		min(
			96vw,
			calc(94vh * 1024 / 1198)
		);

	flex:
		0 0 auto;
}


/*
 * Decorative film artwork.
 *
 * Artwork sits above the form surface while remaining
 * completely transparent to pointer interaction.
 */

.lorene-contact-frame::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 3;

	background:
		url("../images/mail_frame.webp")
		center / 100% 100%
		no-repeat;

	pointer-events: none;
}


/* =========================================================
   INNER FILM WINDOW / FORM SURFACE
   MOBILE DEFAULT
========================================================= */

.lorene-contact-panel {
	position: absolute;

	/*
	 * Surface extends underneath the film artwork so its
	 * corners and side edges disappear behind the physical
	 * film border.
	 */

	top: 15.5%;
	right: 9.5%;
	bottom: 13.5%;
	left: 9.5%;

	z-index: 2;

	box-sizing: border-box;

	padding:
		1rem;

	overflow-y: auto;

	overscroll-behavior:
		contain;

	background:
		radial-gradient(
			circle at 35% 20%,
			rgba(255, 248, 224, 0.34),
			transparent 42%
		),
		linear-gradient(
			145deg,
			rgba(218, 205, 178, 0.98),
			rgba(197, 184, 158, 0.98)
		);

	box-shadow:
		inset 0 0 2.2rem
		rgba(67, 43, 26, 0.26);

	color:
		#2b1b13;

	scrollbar-width:
		none;
}


/* Hide WebKit scrollbar while preserving scrolling */

.lorene-contact-panel::-webkit-scrollbar {
	display: none;
}


/* =========================================================
   MODAL TITLE
   MOBILE DEFAULT
========================================================= */

.lorene-contact-title {
	margin:
		0 2.75rem 0.8rem 0;

	color:
		#2a1912;

	font-size:
		1.35rem;

	line-height:
		1.1;
}


/* =========================================================
   CLOSE BUTTON
   MOBILE DEFAULT
========================================================= */

.lorene-contact-close {
	position: absolute;

	top:
		0.9rem;

	right:
		0.9rem;

	z-index: 5;

	display: grid;

	place-items:
		center;

	width:
		2.25rem;

	height:
		2.25rem;

	padding:
		0;

	border:
		1px solid
		rgba(49, 29, 18, 0.76);

	border-radius:
		50%;

	background:
		rgba(218, 205, 178, 0.82);

	color:
		#29170f;

	font:
		inherit;

	font-size:
		1.6rem;

	line-height:
		1;

	cursor:
		pointer;

	box-shadow:
		inset 0 0 0.45rem
		rgba(62, 36, 21, 0.20),

		0 0 0.45rem
		rgba(41, 23, 15, 0.15);
}


.lorene-contact-close:hover,
.lorene-contact-close:focus-visible {
	background:
		rgba(237, 224, 195, 0.96);

	outline:
		2px solid
		rgba(58, 36, 24, 0.65);

	outline-offset:
		2px;
}


/* =========================================================
   WPFORMS FORM 80
========================================================= */


/* ---------------------------------------------------------
   REMOVE WPFORMS OUTER DECORATION
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-container,

.lorene-contact-panel
.wpforms-container-full {
	margin:
		0;

	padding:
		0;

	background:
		transparent;
}


/* ---------------------------------------------------------
   FIELD SPACING
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-field {
	padding:
		0 0 0.7rem;
}


/* =========================================================
   FIELD LABELS
   Burned brown treatment
========================================================= */

.lorene-contact-panel
.wpforms-field-label {
	margin-bottom:
		0.4rem;

	color:
		#301c13;

	font-weight:
		600;

	letter-spacing:
		0.02em;
}


/* Required marker */

.lorene-contact-panel
.wpforms-required-label {
	color:
		#5a2e1b;
}


/* =========================================================
   INPUTS + TEXTAREA

   Pale grey-sepia surface.
   Burned treatment remains in border and typography.
========================================================= */

.lorene-contact-panel
.wpforms-form
input[type="text"],

.lorene-contact-panel
.wpforms-form
input[type="email"],

.lorene-contact-panel
.wpforms-form
input[type="tel"],

.lorene-contact-panel
.wpforms-form
input[type="url"],

.lorene-contact-panel
.wpforms-form
textarea {
	box-sizing:
		border-box;

	width:
		100%;

	border:
		1px solid #3a2418;

	border-radius:
		2px;

	background:
		rgba(215, 210, 198, 0.92);

	color:
		#29170f;

	font:
		inherit;

	box-shadow:
		inset 0 0 0.42rem
		rgba(49, 27, 16, 0.25),

		0 0 0.35rem
		rgba(72, 42, 24, 0.16);

	transition:
		border-color 150ms ease,
		background 150ms ease,
		box-shadow 150ms ease;
}


/* ---------------------------------------------------------
   SINGLE-LINE INPUTS
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-form
input[type="text"],

.lorene-contact-panel
.wpforms-form
input[type="email"],

.lorene-contact-panel
.wpforms-form
input[type="tel"],

.lorene-contact-panel
.wpforms-form
input[type="url"] {
	min-height:
		44px;

	padding:
		0.7rem 0.8rem;
}


/* ---------------------------------------------------------
   MESSAGE FIELD
   MOBILE DEFAULT
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-form
textarea {
	min-height:
		86px;

	padding:
		0.75rem 0.8rem;

	resize:
		vertical;
}


/* ---------------------------------------------------------
   PLACEHOLDER TEXT
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-form
input::placeholder,

.lorene-contact-panel
.wpforms-form
textarea::placeholder {
	color:
		rgba(60, 38, 27, 0.56);

	opacity:
		1;
}


/* ---------------------------------------------------------
   FIELD FOCUS
--------------------------------------------------------- */

.lorene-contact-panel
.wpforms-form
input:focus,

.lorene-contact-panel
.wpforms-form
textarea:focus {
	border-color:
		#21120c;

	background:
		rgba(229, 222, 207, 0.98);

	outline:
		none;

	box-shadow:
		inset 0 0 0.5rem
		rgba(41, 22, 13, 0.30),

		0 0 0 2px
		rgba(73, 43, 26, 0.28);
}


/* =========================================================
   SUBMIT BUTTON

   Dark burned surface.
   Light sepia typography.
========================================================= */

#wpforms-form-80
button.wpforms-submit,

#wpforms-form-80
button[type="submit"],

.lorene-contact-panel
.wpforms-form
.wpforms-submit {
	-webkit-appearance:
		none !important;

	appearance:
		none !important;

	display:
		inline-flex !important;

	align-items:
		center !important;

	justify-content:
		center !important;

	min-height:
		44px;

	padding:
		0 1.6rem !important;

	border:
		1px solid #21120c !important;

	border-radius:
		2px !important;

	background:
		#342016 !important;

	background-color:
		#342016 !important;

	color:
		#eadfc7 !important;

	font:
		inherit !important;

	font-weight:
		600 !important;

	line-height:
		1 !important;

	letter-spacing:
		0.06em;

	cursor:
		pointer;

	box-shadow:
		inset 0 0 0.65rem
		rgba(0, 0, 0, 0.48),

		0 0 0.4rem
		rgba(67, 36, 20, 0.28)
		!important;

	text-shadow:
		none !important;

	transition:
		border-color 150ms ease,
		background 150ms ease,
		box-shadow 150ms ease,
		color 150ms ease;
}


/* ---------------------------------------------------------
   SUBMIT HOVER / FOCUS
--------------------------------------------------------- */

#wpforms-form-80
button.wpforms-submit:hover,

#wpforms-form-80
button.wpforms-submit:focus-visible,

#wpforms-form-80
button[type="submit"]:hover,

#wpforms-form-80
button[type="submit"]:focus-visible,

.lorene-contact-panel
.wpforms-form
.wpforms-submit:hover,

.lorene-contact-panel
.wpforms-form
.wpforms-submit:focus-visible {
	border-color:
		#160b07 !important;

	background:
		#25150f !important;

	background-color:
		#25150f !important;

	color:
		#f3e5c6 !important;

	outline:
		2px solid
		rgba(73, 43, 26, 0.35);

	outline-offset:
		2px;

	box-shadow:
		inset 0 0 0.7rem
		rgba(0, 0, 0, 0.55),

		0 0 0 2px
		rgba(73, 43, 26, 0.18)
		!important;
}


/* =========================================================
   VALIDATION
========================================================= */

.lorene-contact-panel
.wpforms-error {
	color:
		#692a1c;
}


.lorene-contact-panel
input.wpforms-error,

.lorene-contact-panel
textarea.wpforms-error {
	border-color:
		#6c2e20;
}


/* =========================================================
   SUCCESS MESSAGE

   Compact burned field with light sepia text.
========================================================= */

#wpforms-confirmation-80,

.lorene-contact-panel
#wpforms-confirmation-80,

.lorene-contact-panel
.wpforms-confirmation-container-full,

.lorene-contact-panel
.wpforms-confirmation-container {
	display:
		block !important;

	width:
		fit-content !important;

	max-width:
		90% !important;

	min-height:
		0 !important;

	margin:
		1.5rem auto 0 !important;

	padding:
		0.85rem 1.15rem !important;

	border:
		1px solid #21120c !important;

	border-radius:
		2px !important;

	background:
		#342016 !important;

	background-color:
		#342016 !important;

	color:
		#eadfc7 !important;

	text-align:
		center !important;

	font-size:
		clamp(
			0.9rem,
			1.5vw,
			1rem
		)
		!important;

	line-height:
		1.35 !important;

	box-sizing:
		border-box !important;

	box-shadow:
		inset 0 0 0.65rem
		rgba(0, 0, 0, 0.48),

		0 0 0.4rem
		rgba(67, 36, 20, 0.28)
		!important;
}


/* Success-message paragraph */

#wpforms-confirmation-80 p,

.lorene-contact-panel
.wpforms-confirmation-container-full p,

.lorene-contact-panel
.wpforms-confirmation-container p {
	margin:
		0 !important;

	background:
		transparent !important;

	color:
		#eadfc7 !important;

	font:
		inherit !important;
}


/* =========================================================
   TABLET + DESKTOP
   601px+
========================================================= */

@media (min-width: 601px) {

	/* -----------------------------------------------------
	   MODAL
	----------------------------------------------------- */

	.lorene-contact-modal {
		padding:
			1rem;
	}


	/* -----------------------------------------------------
	   FILM FRAME
	----------------------------------------------------- */

	.lorene-contact-frame {
		width:
			min(
				88vw,
				calc(90vh * 1024 / 1198),
				720px
			);
	}


	/* -----------------------------------------------------
	   FORM SURFACE
	----------------------------------------------------- */

	.lorene-contact-panel {
		top:
			15.5%;

		right:
			9.5%;

		bottom:
			14%;

		left:
			9.5%;

		padding:
			clamp(1.4rem, 3vw, 2.4rem);
	}


	/* -----------------------------------------------------
	   TITLE
	----------------------------------------------------- */

	.lorene-contact-title {
		margin:
			0 2.75rem 1.25rem 0;

		font-size:
			clamp(1.45rem, 3vw, 2.1rem);
	}


	/* -----------------------------------------------------
	   FIELD SPACING
	----------------------------------------------------- */

	.lorene-contact-panel
	.wpforms-field {
		padding:
			0 0 1rem;
	}


	/* -----------------------------------------------------
	   MESSAGE FIELD
	----------------------------------------------------- */

	.lorene-contact-panel
	.wpforms-form
	textarea {
		min-height:
			118px;
	}


	/* -----------------------------------------------------
	   CLOSE BUTTON
	----------------------------------------------------- */

	.lorene-contact-close {
		top:
			1.15rem;

		right:
			1.15rem;

		width:
			2.5rem;

		height:
			2.5rem;
	}

}


/* =========================================================
   COMPONENT REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.lorene-contact-modal {
		transition:
			none;
	}

}