/*
 * Sai Lux Sunrise Living — contact page
 * Includes styling for the Contact Form 7 form, which ships unstyled.
 */

.sls-ct {
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 20px;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--b-ink);
	-webkit-font-smoothing: antialiased;
}

.sls-ct *, .sls-ct *::before, .sls-ct *::after { box-sizing: border-box; }

:where(.sls-ct) :where(ul, li) { list-style: none; margin: 0; padding: 0; }
:where(.sls-ct) :where(p) { margin: 0; }
:where(.sls-ct) :where(h1, h2) { margin: 0; line-height: 1.18; color: var(--b-ink); }
.sls-ct ul, .sls-ct li { list-style: none !important; }

/* --- Hero ----------------------------------------------------------------- */
.sls-ct__hero { text-align: center; padding: 62px 16px 42px; }

.sls-ct__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--b-gold-d);
	background: var(--b-cream-l);
	border: 1px solid var(--b-cream-d);
	border-radius: 999px;
	padding: 8px 17px 8px 13px;
	margin-bottom: 20px !important;
}

.sls-ct__eyebrow svg { width: 16px; height: 16px; }

.sls-ct__eyebrow--plain {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: 12px !important;
}

.sls-ct__hero h1 {
	font-size: clamp(34px, 5.4vw, 56px);
	font-weight: 800;
	letter-spacing: -.034em;
}

.sls-ct__lede {
	margin: 18px auto 0 !important;
	font-size: clamp(15.5px, 1.5vw, 17.5px);
	line-height: 1.72;
	color: var(--b-ink-soft);
}

/* --- Contact cards -------------------------------------------------------- */
.sls-ct__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 60px;
}

.sls-ct__cards li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 24px;
	border: 1px solid var(--b-line);
	border-radius: 20px;
	background: linear-gradient(162deg, var(--b-cream-l) 0%, #fff 62%);
	box-shadow: 0 1px 2px rgba(var(--b-navy-rgb), .04), 0 8px 24px rgba(var(--b-navy-rgb), .05);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, border-color .26s ease;
}

.sls-ct__cards li:hover {
	transform: translateY(-5px);
	border-color: var(--b-cream-d);
	box-shadow: 0 4px 8px rgba(var(--b-navy-rgb), .06), 0 20px 44px rgba(var(--b-navy-rgb), .12);
}

.sls-ct__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 15px;
	border-radius: 14px;
	color: var(--b-gold-d);
	background: #fff;
	border: 1px solid var(--b-cream-d);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .05);
}

.sls-ct__icon svg { width: 24px; height: 24px; }

.sls-ct__cards h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sls-ct__cards p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--b-ink-soft); }

.sls-ct__link {
	margin-top: auto;
	padding-top: 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--b-gold-d) !important;
	text-decoration: none !important;
	word-break: break-word;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}

.sls-ct__cards li:hover .sls-ct__link { border-bottom-color: rgba(var(--b-gold-rgb), .5); }

/* --- Main layout ---------------------------------------------------------- */
.sls-ct__main {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.sls-ct__formwrap {
	padding: 40px 40px 34px;
	border: 1px solid var(--b-line);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(var(--b-navy-rgb), .04), 0 18px 44px rgba(var(--b-navy-rgb), .07);
}

.sls-ct__formwrap h2 {
	font-size: clamp(23px, 2.8vw, 32px);
	font-weight: 800;
	letter-spacing: -.028em;
}

.sls-ct__formlede {
	margin-top: 12px !important;
	margin-bottom: 28px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--b-ink-soft);
}

.sls-ct__fallback { font-size: 15.5px; line-height: 1.7; color: var(--b-ink-soft); }
.sls-ct__fallback a { color: var(--b-gold-d) !important; font-weight: 600; }

/* --- Contact Form 7 ------------------------------------------------------- */
/* CF7 ships almost no styling, so the whole form is dressed here. */
.sls-ct .wpcf7 form { margin: 0; }

.sls-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.sls-form__field { margin: 0 !important; }
.sls-form__field--full { grid-column: 1 / -1; }

.sls-form__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--b-ink);
}

.sls-form__field label span { color: var(--b-gold-d); }

.sls-ct .wpcf7 input[type="text"],
.sls-ct .wpcf7 input[type="email"],
.sls-ct .wpcf7 input[type="tel"],
.sls-ct .wpcf7 input[type="date"],
.sls-ct .wpcf7 input[type="number"],
.sls-ct .wpcf7 select,
.sls-ct .wpcf7 textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--b-ink);
	background: var(--b-cream-l);
	border: 1px solid var(--b-line);
	border-radius: 12px;
	padding: 13px 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sls-ct .wpcf7 textarea { resize: vertical; min-height: 130px; }

.sls-ct .wpcf7 input:focus,
.sls-ct .wpcf7 select:focus,
.sls-ct .wpcf7 textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--b-gold);
	box-shadow: 0 0 0 4px rgba(var(--b-gold-rgb), .16);
}

.sls-ct .wpcf7 ::placeholder { color: #9aa6b4; }

/* Checkbox group */
.sls-ct .wpcf7 .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 9px;
}

.sls-ct .wpcf7 .wpcf7-list-item { margin: 0 !important; }

.sls-ct .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--b-line);
	border-radius: 12px;
	background: var(--b-cream-l);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.sls-ct .wpcf7 .wpcf7-list-item label:hover { border-color: var(--b-cream-d); }

.sls-ct .wpcf7 .wpcf7-list-item input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--b-gold);
	margin: 0;
}

.sls-ct .wpcf7 .wpcf7-list-item-label { line-height: 1.35; }

/* Submit */
.sls-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 6px 0 0 !important;
}

.sls-ct .wpcf7 input[type="submit"] {
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
	background: var(--b-navy);
	border: 0;
	border-radius: 999px;
	padding: 16px 38px;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(var(--b-navy-rgb), .26);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.sls-ct .wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px);
	background: var(--b-gold-d);
	box-shadow: 0 16px 34px rgba(var(--b-gold-rgb), .34);
}

.sls-form__note { font-size: 13.5px; line-height: 1.55; color: var(--b-ink-soft); }

/* CF7 response + validation messages */
.sls-ct .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #b3261e;
}

.sls-ct .wpcf7 .wpcf7-not-valid { border-color: #e0a4a0 !important; background: #fdf5f4 !important; }

.sls-ct .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 15px 18px !important;
	border-radius: 12px !important;
	border-width: 1px !important;
	font-size: 14.5px;
	line-height: 1.6;
}

.sls-ct .wpcf7 form.sent .wpcf7-response-output {
	border-color: #9dcbb2 !important;
	background: #f0faf4;
	color: #12603a;
}

.sls-ct .wpcf7 form.invalid .wpcf7-response-output,
.sls-ct .wpcf7 form.failed .wpcf7-response-output {
	border-color: #e0b4b0 !important;
	background: #fdf5f4;
	color: #8c2f27;
}

.sls-ct .wpcf7-spinner { margin: 0 0 0 10px; }

/* --- Side panels ---------------------------------------------------------- */
.sls-ct__side { display: grid; gap: 18px; }

.sls-ct__panel {
	padding: 28px 26px;
	border-radius: 22px;
	border: 1px solid var(--b-line);
	background: linear-gradient(165deg, var(--b-cream-l) 0%, #fff 60%);
}

.sls-ct__panel h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sls-ct__panel p { margin-top: 10px; font-size: 14.5px; line-height: 1.68; color: var(--b-ink-soft); }

.sls-ct__list { display: grid; gap: 14px; margin-top: 18px !important; }

.sls-ct__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--b-ink-soft);
}

.sls-ct__list strong { color: var(--b-ink); font-weight: 700; }
.sls-ct__list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--b-gold-d); }

.sls-ct__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 14px 26px;
	transition: transform .2s ease, background .2s ease;
}

.sls-ct__btn--dark { color: #fff !important; background: var(--b-navy); }
.sls-ct__btn--dark:hover { transform: translateY(-2px); color: #fff !important; }

.sls-ct__btn--gold { color: var(--b-navy) !important; background: var(--b-gold-l); }
.sls-ct__btn--gold:hover { transform: translateY(-2px); background: var(--b-gold); color: #fff !important; }

.sls-ct__panel--book {
	color: #fff;
	border-color: transparent;
	background:
		radial-gradient(70% 130% at 8% 0%, rgba(var(--b-gold-rgb), .45), transparent 62%),
		var(--b-navy);
	box-shadow: 0 16px 40px rgba(var(--b-navy-rgb), .22);
}

.sls-ct__panel--book h2 { color: #fff; }
.sls-ct__panel--book p { color: rgba(255, 255, 255, .82); }

.sls-ct__travel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }

.sls-ct__travel a {
	font-size: 13px;
	font-weight: 600;
	color: var(--b-gold-d) !important;
	text-decoration: none !important;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(var(--b-gold-rgb), .38);
	background: rgba(var(--b-gold-rgb), .07);
	transition: background .2s ease;
}

.sls-ct__travel a:hover { background: rgba(var(--b-gold-rgb), .18); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.sls-ct__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sls-ct__main { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
	.sls-ct__hero { padding: 44px 12px 32px; }
	.sls-ct__cards { grid-template-columns: 1fr; margin-bottom: 40px; }
	.sls-ct__formwrap { padding: 28px 20px 24px; border-radius: 20px; }
	.sls-form__grid { grid-template-columns: 1fr; gap: 15px; }
	.sls-ct .wpcf7 input[type="submit"] { width: 100%; }
	.sls-form__submit { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.sls-ct *, .sls-ct *::before, .sls-ct *::after { transition: none !important; }
	.sls-ct__cards li:hover { transform: none; }
}

@media print {
	.sls-ct__formwrap, .sls-ct__panel--book { display: none; }
	.sls-ct__cards li { break-inside: avoid; box-shadow: none; }
}

/* --- "Our Location" maps (Contact page) ------------------------------------
   Two Google embeds added in Elementor. They ship as raw 600x450 iframes, so
   they neither fit the 1240px box the rest of the page sits in nor shrink on a
   phone. Formatting only — the blocks stay exactly as they are in Elementor,
   so they can still be edited, moved or removed there.

   Selectors hang off the iframe rather than Elementor's generated class hashes
   (e-2a3317a and friends), which change whenever the layout is re-saved. */

/* Scoped to "the page carrying the contact widget" rather than a page id, so
   the formatting survives the page being rebuilt with a new id. */

/* The heading block. */
body:has(.sls-ct) .e-con:has(> h2.e-heading-base) {
	max-width: 1240px;
	margin: 0 auto;
	padding: 26px 20px 0;
}

body:has(.sls-ct) h2.e-heading-base {
	font-size: clamp(23px, 2.8vw, 32px);
	font-weight: 800;
	letter-spacing: -.028em;
	color: var(--b-ink);
	margin: 0;
}

/* The row holding both maps. */
body:has(.sls-ct) .e-con:has(> .e-con iframe[src*="google.com/maps"]) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 20px 28px;
}

/* Each map sits in a card that matches the panels above it. */
body:has(.sls-ct) .e-con:has(> .elementor-widget-html iframe[src*="google.com/maps"]) {
	/* Elementor sizes an atomic flexbox from its content, so without this the
	   card sat at half the width of the grid column it lives in. */
	width: 100%;
	max-width: none;
	flex: 1 1 auto;
	padding: 0;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid var(--b-line);
	background: var(--b-cream-l);
	box-shadow: 0 1px 2px rgba(var(--b-navy-rgb), .05), 0 12px 30px rgba(var(--b-navy-rgb), .09);
}

body:has(.sls-ct) .elementor-widget-html:has(iframe[src*="google.com/maps"]) {
	display: block;
	line-height: 0;
}

/* The embed itself: fill the card, keep a sane shape at every width. */
body:has(.sls-ct) iframe[src*="google.com/maps"] {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	min-height: 300px;
	border: 0;
}

@media (max-width: 900px) {
	body:has(.sls-ct) .e-con:has(> .e-con iframe[src*="google.com/maps"]) {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px 20px 24px;
	}
	body:has(.sls-ct) iframe[src*="google.com/maps"] { aspect-ratio: 16 / 11; min-height: 260px; }
}

@media (max-width: 560px) {
	body:has(.sls-ct) .e-con:has(> h2.e-heading-base) { padding: 20px 16px 0; }
	body:has(.sls-ct) .e-con:has(> .e-con iframe[src*="google.com/maps"]) { padding: 14px 16px 20px; }
	body:has(.sls-ct) iframe[src*="google.com/maps"] { aspect-ratio: 4 / 3; min-height: 240px; }
}

/* Without :has() the cards cannot be found, but the embeds themselves still
   need to stop being 600px wide on a phone. */
@supports not selector(:has(*)) {
	.page-id-2394 iframe[src*="google.com/maps"] {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 18px;
	}
}