/* =========================================================
   "Cityscape basim" (body.csb-page) — /en/cityscape
   WordPress page 77648: the plain Hello theme page — its title,
   then the Elementor form in a 490px column at the start of the
   1140px container. Values from the live Elementor CSS; the page
   ground is white (WordPress puts the form on a #F5F5F5 band).
   Markup: src/seed/fix-cityscape-basim.ts
   ========================================================= */

body.csb-page, .csb-main { background: #fff; }
.csb-main { padding-bottom: 90px; color: #2C2C2C; }
.csb-main > .cms-section { display: contents; }

/* ---------- title (Hello theme .page-header) ---------- */
.csb-title { max-width: 1140px; margin: 0 auto; padding: 40px 10px 20px; }
.csb-title h1 { margin: 0; font-family: 'Marcellus', serif; font-size: 40px; font-weight: 400; line-height: 1.2; color: #2C2C2C; }

/* ---------- form ---------- */
.csb-main > .cms-form-section { padding: 10px 0 0; background: #fff; }
.csb-main > .cms-form-section .container { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
.csb-main > .cms-form-section .section-title,
.csb-main > .cms-form-section .cms-form-section__intro { display: none; }

.csb-main .lead-form { grid-template-columns: 1fr; gap: 10px; max-width: 490px; padding: 0; border: 0; background: transparent; font-family: 'Marcellus', serif; }
/* WordPress shows the fields without labels (placeholders only) */
.csb-main .lead-form .flbl,
.csb-main .lead-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.csb-main .lead-form label, .csb-main .lead-form .fselect, .csb-main .lead-form .fphone { gap: 0; }
.csb-main .lead-form input, .csb-main .lead-form select, .csb-main .lead-form textarea,
.csb-main .lead-form .ss-trigger {
	min-height: 40px; padding: 5px 14px;
	border: 1px solid #7A7A7A6E; border-radius: 3px; background: transparent;
	font-size: 14px; line-height: 1.4; color: #000;
}
.csb-main .lead-form :is(input, select, textarea):focus, .csb-main .lead-form .ss-trigger:focus-visible { border-color: #2C2C2C; }
.csb-main .lead-form ::placeholder, .csb-main .lead-form .ss-ph { color: #7A7A7A; opacity: 1; }
/* selects read dark, with Elementor's small filled caret instead of the chevron */
.csb-main .lead-form .ss-ph { color: #000; }
.csb-main .lead-form .ss-chev { display: none; }
.csb-main .lead-form .ss-trigger::after {
	content: ''; flex: none; width: 0; height: 0;
	border-inline: 5px solid transparent; border-top: 6px solid #000;
}
/* phone: one outlined box, flag and caret inside, no dial code */
.csb-main .lead-form .pi { border-color: #7A7A7A6E; border-radius: 3px; background: transparent; }
.csb-main .lead-form .pi:focus-within { border-color: #2C2C2C; }
.csb-main .lead-form .pi .pi-num, .csb-main .lead-form .pi .ss-trigger { border: 0; background: transparent; }
.csb-main .lead-form .pi .ss-trigger { gap: 4px; padding-inline: 10px 4px; }
.csb-main .lead-form .pi .ss-trigger .pi-dial { display: none; }
.csb-main .lead-form .pi .ss-trigger::after { border-inline-width: 4px; border-top-width: 5px; }
/* LeadSource and channel are tracking selects WordPress keeps out of sight */
.csb-main .lead-form .fselect:has(input[name="LeadSource"]),
.csb-main .lead-form .fselect:has(select[name="LeadSource"]),
.csb-main .lead-form .fselect:has(input[name="channel"]),
.csb-main .lead-form .fselect:has(select[name="channel"]) { position: absolute; z-index: 0; opacity: 0; visibility: hidden; }

.csb-main .lead-form .btn-solid {
	grid-column: 1 / -1; justify-self: stretch !important; justify-content: center; width: 100%;
	padding: 12px 24px; border: 0; border-radius: 3px; background: #85553A;
	font-family: 'Marcellus', serif; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff;
	transition: background-color .3s;
}
.csb-main .lead-form .btn-solid:hover, .csb-main .lead-form .btn-solid:focus-visible { background: #2C2C2C; color: #fff; }
.csb-main .lead-form .btn-solid .arr { display: none; }

@media (max-width: 1200px) {
	.csb-main .lead-form input, .csb-main .lead-form select, .csb-main .lead-form .ss-trigger { font-size: 13px; }
}

@media (max-width: 767px) {
	.csb-title { padding: 30px 20px 15px; }
	.csb-title h1 { font-size: 30px; }
	.csb-main > .cms-form-section .container { padding: 0 20px; }
	.csb-main .lead-form { max-width: none; }
}