/*
 * Editorial pages: About, Contact, and anything else the client writes.
 *
 * The parent theme prints the page content straight into <article class="page">
 * with no wrapper of its own, so these rules target that article.
 *
 * They hang off .lb-prose, which Rentpro_Child_Pages adds to the article only
 * for pages Elementor did not build. An Elementor page therefore keeps its own
 * width and its own typography, and nothing here has to guess at its markup.
 *
 * @package RentPro_Child
 */

/* ------------------------------------------------------------- Shell ----- */

.lb-scope #page-main-content > article.lb-prose {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--lb-s7);
	font-size: 16.5px;
	line-height: var(--lb-lh-body);
	color: var(--lb-ink-2);
}

/* --------------------------------------------------------- Typography ---- */

.lb-scope .lb-prose h2 {
	margin: var(--lb-s7) 0 var(--lb-s4);
	font-family: var(--lb-font-serif);
	font-size: clamp(24px, 3vw, 31px);
	font-weight: 300;
	line-height: 1.2;
	color: var(--lb-ink);
}

.lb-scope .lb-prose > h2:first-of-type,
.lb-scope .lb-band:first-child > h2 { margin-top: 0; }

.lb-scope .lb-prose h3 {
	margin: var(--lb-s6) 0 var(--lb-s3);
	font-family: var(--lb-font-sans);
	font-size: 18px;
	font-weight: 500;
	color: var(--lb-ink);
}

.lb-scope .lb-prose p {
	margin: 0 0 var(--lb-s4);
}

/*
 * The paragraph that opens the page carries the summary, so it is set larger
 * and in ink. `:first-of-type` rather than a class, because the client writes
 * these pages in the editor and should not have to remember to add one.
 */
.lb-scope .lb-prose > p:first-of-type,
.lb-scope .lb-band--intro > p:first-of-type {
	font-size: 19px;
	line-height: 1.62;
	color: var(--lb-ink);
}

.lb-scope .lb-prose ul,
.lb-scope .lb-prose ol {
	margin: 0 0 var(--lb-s4);
	padding-left: var(--lb-s5);
}

.lb-scope .lb-prose ul > li,
.lb-scope .lb-prose ol > li {
	margin-bottom: var(--lb-s2);
}

.lb-scope .lb-prose a {
	color: var(--lb-violet-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lb-scope .lb-prose a:hover { color: var(--lb-violet); }

/* ------------------------------------------------------------- Bands ----- */

/*
 * Rentpro_Child_Pages wraps each h2 and the copy under it in a .lb-band, so a
 * long page reads as parts instead of one column of text. Alternate bands sit
 * on linen; the rest keep the page ground.
 *
 * The negative inline margin lets a band's colour reach past the prose column
 * while the text stays on the same measure as everything else.
 */
.lb-band {
	padding-block: var(--lb-s2);
}

.lb-band--alt {
	margin-inline: calc(var(--lb-s6) * -1);
	margin-block: var(--lb-s6);
	padding: var(--lb-s6);
	border-radius: var(--lb-r-card);
	background: var(--lb-linen);
}

.lb-band--alt > h2 { margin-top: 0; }
.lb-band > *:last-child { margin-bottom: 0; }

/* On a phone the band keeps the page's own gutter rather than reaching past
   it, which would push the layout into a horizontal scroll. */
@media (max-width: 767px) {
	.lb-band--alt {
		margin-inline: 0;
		padding: var(--lb-s5);
	}
}


/* --------------------------------------------------------- Title bar ----- */

/*
 * The parent's title bar is the page's only heading, so it is kept - it is only
 * restyled onto the warm ground with the breadcrumb underneath it.
 */
.lb-scope .page-title-bar {
	padding-block: var(--lb-s7) var(--lb-s5);
	background: var(--lb-linen);
	border-bottom: 1px solid var(--lb-line);
	text-align: left;
}

.lb-scope .page-title-bar-heading .page-title,
.lb-scope .page-title-bar-heading h1 {
	margin: 0;
	font-family: var(--lb-font-serif);
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--lb-ink);
}

.lb-scope .page-breadcrumb {
	padding-block: var(--lb-s3);
	font-size: 13px;
	color: var(--lb-mute);
}

.lb-scope .page-breadcrumb a { color: var(--lb-mute); }
.lb-scope .page-breadcrumb a:hover { color: var(--lb-violet-ink); }

/* -------------------------------------------------------------- Form ----- */

/*
 * The contact form. It is a shortcode, so it can sit inside page content, in an
 * Elementor column or in a widget - which is why it carries its own panel
 * rather than relying on where it was dropped.
 */
.lb-form {
	margin-block: var(--lb-s6);
	padding: var(--lb-s6);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-card);
	background: var(--lb-surface);
	box-shadow: var(--lb-sh-rest);
	scroll-margin-top: 120px;
}

.lb-form__title {
	margin: 0 0 var(--lb-s5);
}

.lb-form__notice {
	margin: 0 0 var(--lb-s5);
	padding: var(--lb-s3) var(--lb-s4);
	border-radius: var(--lb-r-thumb);
	font-size: 14.5px;
}

.lb-form__notice--ok {
	background: var(--lb-ok-bg);
	color: var(--lb-ok);
}

.lb-form__notice--warn {
	background: var(--lb-linen);
	color: var(--lb-ink);
}

.lb-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lb-s4);
}

/* The honeypot is for bots only. It is moved out of sight rather than set to
   display:none, because some bots skip anything that is genuinely hidden. */
.lb-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	grid-column: span 2;
}

.lb-field--half { grid-column: span 1; }

.lb-field__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--lb-ink);
}

.lb-field__optional {
	margin-left: 6px;
	font-weight: 400;
	color: var(--lb-mute);
}

.lb-scope .lb-field__control {
	width: 100%;
	min-height: 48px;
	padding: 12px var(--lb-s4);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-r-control);
	background: var(--lb-paper);
	color: var(--lb-ink);
	font-family: var(--lb-font-sans);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color var(--lb-dur) var(--lb-ease),
	            box-shadow var(--lb-dur) var(--lb-ease);
}

.lb-scope textarea.lb-field__control {
	min-height: 140px;
	resize: vertical;
}

.lb-scope .lb-field__control:hover { border-color: var(--lb-sand); }

.lb-scope .lb-field__control:focus {
	outline: none;
	border-color: var(--lb-violet);
	box-shadow: var(--lb-ring-active);
}

.lb-field.is-invalid .lb-field__control { border-color: #B3261E; }

.lb-field__error {
	font-size: 12.5px;
	color: #B3261E;
}

.lb-form__actions {
	flex-direction: row;
	align-items: center;
	margin-top: var(--lb-s2);
}

@media (max-width: 599px) {
	.lb-form { padding: var(--lb-s5); }
	.lb-field--half { grid-column: span 2; }
}

/*
 * A select with the native arrow suppressed has to draw its own, or it reads as
 * a text field that will not accept typing. The chevron is painted as a
 * background image, so it must be set after the rule above that uses the
 * `background` shorthand - the shorthand resets background-image to none.
 */
.lb-scope select.lb-field__control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: var(--lb-s7);
	background-color: var(--lb-paper);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231A1620' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--lb-s4) center;
	background-size: 12px 8px;
}

/* -------------------------------------------------- Builder-made pages --- */

/*
 * An Elementor page gets type and links only. No measure, no section padding
 * and no bands: the builder already decides width, columns and spacing, and
 * overriding those is what makes a themed builder page look broken.
 *
 * The selectors stay inside .elementor-widget-text-editor so that headings and
 * buttons the builder styles itself are left alone; only the rich-text blocks
 * a client types into are brought into the design's typography.
 */
.lb-scope .lb-prose-lite .elementor-widget-text-editor {
	font-size: 16.5px;
	line-height: var(--lb-lh-body);
	color: var(--lb-ink-2);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor h2 {
	margin: var(--lb-s6) 0 var(--lb-s4);
	font-family: var(--lb-font-serif);
	font-size: clamp(24px, 3vw, 31px);
	font-weight: 300;
	line-height: 1.2;
	color: var(--lb-ink);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor h3 {
	margin: var(--lb-s5) 0 var(--lb-s3);
	font-family: var(--lb-font-sans);
	font-size: 18px;
	font-weight: 500;
	color: var(--lb-ink);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor p {
	margin: 0 0 var(--lb-s4);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor ul,
.lb-scope .lb-prose-lite .elementor-widget-text-editor ol {
	margin: 0 0 var(--lb-s4);
	padding-left: var(--lb-s5);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor li {
	margin-bottom: var(--lb-s2);
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor a {
	color: var(--lb-violet-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lb-scope .lb-prose-lite .elementor-widget-text-editor a:hover { color: var(--lb-violet); }