/**
 * Lenzzberry — contact page styles.
 * Loaded only on the Contact page (slug "contact") via inc/enqueues.php.
 *
 * Selectors match the actual rendered markup in templates/contact.php:
 *   .lenzz-contact (main)
 *     .lenzz-contact-hero > .lenzz-container--narrow
 *       .lenzz-contact-title  .lenzz-contact-sub
 *     .lenzz-contact-grid
 *       aside.lenzz-contact-info
 *         .lenzz-contact-info-title
 *         ul.lenzz-contact-channels > li > .lenzz-contact-label + a/span
 *         .lenzz-contact-info-subtitle
 *         ul.lenzz-foot-social.lenzz-contact-social
 *       section.lenzz-contact-form-wrap
 *         .lenzz-contact-form-title
 *         form.lenzz-contact-form
 *           .lenzz-form-row > label + input/textarea
 *           .lenzz-form-row.lenzz-form-row--check (checkbox row)
 *           button.lenzz-contact-submit
 *         .lenzz-contact-note
 *
 * Colors come from theme.json palette tokens — no hardcoded hex values.
 */

/* ====================================================================== */
/* PAGE BACKGROUND                                                        */
/* ====================================================================== */

.lenzz-contact {
	background-color: var(--wp--preset--color--cream);
	padding-bottom: var(--wp--preset--spacing--70);
}


/* ====================================================================== */
/* HERO BAND — title + intro                                              */
/* ====================================================================== */

.lenzz-contact-hero {
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
	text-align: center;
}

.lenzz-contact-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.lenzz-contact-sub {
	margin: 0 auto;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}


/* ====================================================================== */
/* TWO-COLUMN BODY — info (L) + form (R)                                  */
/* ====================================================================== */

.lenzz-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 960px) {
	.lenzz-contact-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}


/* ====================================================================== */
/* INFO CARD (left) — white card on cream page                            */
/* ====================================================================== */

.lenzz-contact-info {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(14, 123, 145, 0.12);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.lenzz-contact-info-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.005em;
}

/* Channel list — Phone / Email / Hours rows */
.lenzz-contact-channels {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.lenzz-contact-channels > li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

/* Small uppercase label above each value */
.lenzz-contact-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Value (link or plain text) */
.lenzz-contact-channels > li > a,
.lenzz-contact-channels > li > span:not(.lenzz-contact-label) {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 150ms ease;
}

.lenzz-contact-channels > li > a:hover {
	color: var(--wp--preset--color--brand);
}

/* About sub-section inside the info card */
.lenzz-contact-info-subtitle {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lenzz-contact-info > p {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--body);
	line-height: 1.65;
	font-size: var(--wp--preset--font-size--sm);
}

.lenzz-contact-info > p strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* Social row — same shape as the footer social, but recoloured for the
   light card (footer uses white-on-dark; here we use brand-on-cream). */
.lenzz-foot-social.lenzz-contact-social {
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.lenzz-foot-social.lenzz-contact-social li {
	margin: 0;
	padding: 0;
}

/* Override the dark-footer styling for this lighter context. */
.lenzz-foot-social.lenzz-contact-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--brand) !important;
	background: transparent !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.lenzz-foot-social.lenzz-contact-social a:hover {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
}


/* ====================================================================== */
/* CONTACT FORM (right column)                                            */
/* ====================================================================== */

.lenzz-contact-form-wrap {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(14, 123, 145, 0.12);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.lenzz-contact-form-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.005em;
}

.lenzz-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Each form row stacks its label above its input */
.lenzz-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lenzz-form-row > label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.lenzz-form-row .required {
	color: var(--wp--preset--color--sale);
	margin-left: 0.125rem;
}

/* Inputs + textarea — clean rounded fields with brand focus ring */
.lenzz-contact-form input[type="text"],
.lenzz-contact-form input[type="email"],
.lenzz-contact-form input[type="tel"],
.lenzz-contact-form input[type="url"],
.lenzz-contact-form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	transition: border-color 150ms ease, box-shadow 150ms ease;
	box-sizing: border-box;
}

.lenzz-contact-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
}

.lenzz-contact-form input:focus,
.lenzz-contact-form textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
	outline: none;
}

.lenzz-contact-form input::placeholder,
.lenzz-contact-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.7;
}

/* Privacy-policy checkbox row — checkbox sits inline with the label */
.lenzz-form-row--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.625rem;
}

.lenzz-form-row--check > label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--body);
	line-height: 1.5;
	cursor: pointer;
}

.lenzz-form-row--check input[type="checkbox"] {
	margin: 0.2rem 0 0 0;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--brand);
	cursor: pointer;
}

.lenzz-form-row--check a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid currentColor;
	transition: color 150ms ease;
}

.lenzz-form-row--check a:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Submit button — brand pill matching the rest of the site */
.lenzz-contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.85rem 2rem;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	min-height: 50px;
	min-width: 200px;
	align-self: flex-start;
}

.lenzz-contact-submit:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.22);
}

.lenzz-contact-submit:active {
	transform: translateY(0);
}

@media (max-width: 600px) {
	.lenzz-contact-submit {
		width: 100%;
		min-width: 0;
		align-self: stretch;
	}
}

/* Note below the form (the placeholder hint) */
.lenzz-contact-note {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--cream);
	border: 1px dashed rgba(14, 123, 145, 0.25);
	border-radius: 10px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.lenzz-contact-note small {
	font-size: inherit;
}


/* ====================================================================== */
/* DROP-IN FORM PLUGINS — harmonise styling                                */
/* (Fluent Forms / CF7 / SureForms / Forminator)                          */
/* ====================================================================== */

.lenzz-contact-page-content,
.lenzz-contact-form-wrap .wpcf7 {
	margin: 0;
}

.lenzz-contact-form-wrap input[type="text"],
.lenzz-contact-form-wrap input[type="email"],
.lenzz-contact-form-wrap input[type="tel"],
.lenzz-contact-form-wrap input[type="url"],
.lenzz-contact-form-wrap input[type="number"],
.lenzz-contact-form-wrap input[type="search"],
.lenzz-contact-form-wrap textarea,
.lenzz-contact-form-wrap select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lenzz-contact-form-wrap input:focus,
.lenzz-contact-form-wrap textarea:focus,
.lenzz-contact-form-wrap select:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
	outline: none;
}

.lenzz-contact-form-wrap input::placeholder,
.lenzz-contact-form-wrap textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.7;
}

.lenzz-contact-form-wrap button[type="submit"],
.lenzz-contact-form-wrap input[type="submit"] {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.02em;
	min-height: 50px;
	min-width: 200px;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.lenzz-contact-form-wrap button[type="submit"]:hover,
.lenzz-contact-form-wrap input[type="submit"]:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.22);
}


/* ====================================================================== */
/* CONTACT FORM 7 — specific tweaks for [contact-form-7] shortcode output  */
/* CF7 markup looks like:                                                  */
/*   .wpcf7 > .wpcf7-form                                                  */
/*     <p> <label> Field name                                              */
/*           .wpcf7-form-control-wrap > input.wpcf7-text/email/textarea   */
/*         </label> </p>                                                   */
/*     <p> input[type=submit].wpcf7-submit + .wpcf7-spinner </p>           */
/*     .wpcf7-response-output                                              */
/* ====================================================================== */

.lenzz-contact-form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

/* CF7 wraps every field in a <p> — strip default paragraph margins so the
   form's flex `gap` is the single source of vertical spacing. */
.lenzz-contact-form-wrap .wpcf7-form > p {
	margin: 0;
}

/* Each label stacks "Field name" above the input (CF7 puts the label text
   directly inside the <label> next to the .wpcf7-form-control-wrap span). */
.lenzz-contact-form-wrap .wpcf7-form > p > label,
.lenzz-contact-form-wrap .wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* The form-control-wrap span shouldn't add any visual styling — it's just
   a hook for validation tips. Make it a block so the input fills the row. */
.lenzz-contact-form-wrap .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* CF7's required marker (a `*` rendered next to the label) — recolor to
   the brand sale red so it matches our `.required` style. */
.lenzz-contact-form-wrap .wpcf7-form .required-marker,
.lenzz-contact-form-wrap .wpcf7-form abbr[title="required"] {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
	margin-left: 0.125rem;
	font-weight: 700;
}

/* Textarea sizing */
.lenzz-contact-form-wrap .wpcf7-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.5;
}

/* Validation states — invalid field gets a soft sale-color border + tip */
.lenzz-contact-form-wrap .wpcf7-not-valid {
	border-color: var(--wp--preset--color--sale) !important;
	background: rgba(220, 38, 38, 0.03);
}

.lenzz-contact-form-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--sale);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* Submit row — give the button some room and align left */
.lenzz-contact-form-wrap .wpcf7-form > p:has(.wpcf7-submit),
.lenzz-contact-form-wrap .wpcf7-form > p:has(input[type="submit"]) {
	margin-top: var(--wp--preset--spacing--20);
}

.lenzz-contact-form-wrap .wpcf7-submit,
.lenzz-contact-form-wrap input[type="submit"].wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.02em;
	min-height: 50px;
	min-width: 200px;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.lenzz-contact-form-wrap .wpcf7-submit:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(14, 123, 145, 0.22);
}

.lenzz-contact-form-wrap .wpcf7-submit:active {
	transform: translateY(0);
}

.lenzz-contact-form-wrap .wpcf7-submit[disabled],
.lenzz-contact-form-wrap .wpcf7-submit.wpcf7-submitting {
	opacity: 0.6;
	cursor: wait;
}

/* Loading spinner CF7 shows next to the submit button while submitting */
.lenzz-contact-form-wrap .wpcf7-spinner {
	background-color: var(--wp--preset--color--brand);
	margin-left: 0.625rem;
	width: 18px;
	height: 18px;
}

/* Response output messages (success / error after submit) — chip-styled */
.lenzz-contact-form-wrap .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding: 0.75rem 1rem !important;
	border-radius: 10px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.lenzz-contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--success) !important;
	background: rgba(22, 163, 74, 0.08);
	color: var(--wp--preset--color--success);
}

.lenzz-contact-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.lenzz-contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.lenzz-contact-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.lenzz-contact-form-wrap .wpcf7 form.spam .wpcf7-response-output,
.lenzz-contact-form-wrap .wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--wp--preset--color--sale) !important;
	background: rgba(220, 38, 38, 0.06);
	color: var(--wp--preset--color--sale);
}

@media (max-width: 600px) {
	.lenzz-contact-form-wrap .wpcf7-submit,
	.lenzz-contact-form-wrap input[type="submit"].wpcf7-submit {
		width: 100%;
		min-width: 0;
	}
}


/* ====================================================================== */
/* RESPONSIVE                                                             */
/* ====================================================================== */

@media (max-width: 600px) {
	.lenzz-contact-info,
	.lenzz-contact-form-wrap {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}