/*
 * PrimeMetro — targeted Elementor overrides.
 * Kept intentionally small: only the layout nudges Elementor Free can't
 * express through its widget controls. Prefer editing widget settings in
 * Elementor over adding rules here.
 */

/* 0) Kill horizontal scroll at the page level — nothing in this layout
 *    is meant to be swiped horizontally, so any child that spills past
 *    the viewport (a wide nav row, a fixed boxed_width on a narrow window)
 *    must not create an ivory gutter. */
html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* Also stop Elementor's top-level page-wrap from overflowing. */
.elementor,
.elementor-section-wrap,
.elementor > .elementor-element.e-parent {
	max-width: 100vw;
	overflow-x: clip;
}

/* Let the header nav wrap onto a second line when the header narrows,
 *    instead of pushing the row wider than the viewport. */
.elementor-widget-button + .e-con,
.e-con.e-con--row:has(> .elementor-widget-text-editor) {
	flex-wrap: wrap;
}


/* 1) Phone-number pill in the header: never wrap the number, hug its content. */
.elementor-widget-button a.elementor-button[href^="tel:"] {
	white-space: nowrap;
}
.elementor-widget-button a.elementor-button[href^="tel:"] .elementor-button-text {
	white-space: nowrap;
	line-height: 1;
}

/* 2) Property Overview: keep the gold icon badge from overlapping the paragraph. */
.pmp-overview-row,
.elementor-element.e-con:has(> .elementor-widget-icon + .elementor-widget-text-editor) {
	flex-wrap: nowrap;
	align-items: flex-start;
}
.elementor-element.e-con > .elementor-widget-icon {
	flex: 0 0 auto;
}
.elementor-element.e-con > .elementor-widget-text-editor {
	flex: 1 1 0;
	min-width: 0;
}

/* 3) Highlights rows: icon | label (grows) | value (right-aligned).
 *    Elementor Free doesn't expose flex-grow on individual widgets reliably,
 *    so we assert it once here.
 */
.elementor-element.e-con.e-con--row > .elementor-widget-heading:not(:first-child):not(:last-child) {
	flex: 1 1 auto;
}
.elementor-element.e-con.e-con--row > .elementor-widget-heading:last-child .elementor-heading-title {
	text-align: right;
	white-space: nowrap;
}

/* 4) Nav links: guarantee a single line, no accidental wrapping when the header shrinks. */
.elementor-widget-text-editor[data-widget_type="text-editor.default"] p,
.elementor-widget-text-editor[data-widget_type="text-editor.default"] div {
	margin: 0;
}


/* 5) Hero aerial photo: FIX the frame at min-height (560/320 on mobile)
 *    and crop the tall portrait photo to cover it. The image widget is
 *    pulled out of flow (position:absolute; inset:0) so its intrinsic
 *    (very tall) size can never inflate the container or the row it
 *    sits in \u2014 without this, the whole hero row stretches to match
 *    the photo's natural height. */
.elementor-element-455041b7 {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	/* No fixed height here anymore \u2014 that was only needed to crop the
	 * tall aerial photo. Now that this panel is back to a plain
	 * placeholder, let it stretch to match the left column naturally
	 * (the parent row already has align-items:stretch); Elementor's own
	 * min_height:560/320 setting still applies as a floor. */
}
.elementor-element-d591762 {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
}
.elementor-element-d591762 .elementor-widget-container {
	width: 100%;
	height: 100%;
}
.elementor-element-d591762 .elementor-widget-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 6) View Aerial Gallery pill: anchored to the BOTTOM edge of the photo,
 *    centered horizontally. top:auto overrides Elementor's own inline
 *    top offset (it defaults to anchoring from the top). */
.elementor-element-69ecd122 {
	top: auto !important;
	bottom: 24px !important;
	left: 50% !important;
	transform: translateX(-50%);
	z-index: 5;
}

/* 7) Ideal For value is a multi-line phrase, unlike the other one-line
 * highlight values \u2014 opt it out of rule 3's forced nowrap so it wraps. */
.elementor-element-7b1ed17c .elementor-heading-title {
	white-space: normal !important;
	max-width: 320px;
	margin-left: auto;
}

/* 8) Hero CTA buttons: allow wrap on narrow screens without overlap. */
.elementor-element-cbe1844e, .elementor-element-efd26073 {
	flex: 0 0 auto;
}


/* 9) "Request to View the Property" button: force true full-width with
 * the icon and label centered together as one group. Elementor's built-in
 * 'justify' alignment was spreading icon/text apart, reading as overlap. */
.elementor-element-7207387f .elementor-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: normal;
	text-align: center;
}
.elementor-element-7207387f .elementor-button-content-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.elementor-element-7207387f .elementor-button-icon {
	flex: 0 0 auto;
}
.elementor-element-7207387f .elementor-button-text {
	flex: 0 1 auto;
}



/* NOTE: Elementor prints its own per-page generated stylesheet
 * (wp-content/uploads/elementor/css/post-10.css) AFTER this file in
 * <head>, using the same .elementor-element-<id> selectors. Equal
 * specificity + later source order means Elementor's rules win unless
 * we use !important here. This is what this file is for. */
/* 10) Footer Contact list (icon-list): keep icon + text side-by-side.
 * Verified against the actual rendered markup: items WITH a link
 * (phone, email) wrap icon+text together inside a single <a>, so the
 * text is a grandchild of the <li>, not a direct child \u2014 a selector
 * of '> .elementor-icon-list-text' never matches those and silently
 * does nothing. The location item has no link, so icon+text ARE direct
 * children there. Covering both shapes explicitly this time. */
.elementor-element-31289a15 .elementor-icon-list-item,
.elementor-element-31289a15 .elementor-icon-list-item > a {
	display: flex !important;
	align-items: flex-start !important;
	flex-wrap: nowrap !important;
	min-width: 0 !important;
}
.elementor-element-31289a15 .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-element-31289a15 .elementor-icon-list-item > a > .elementor-icon-list-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}
.elementor-element-31289a15 .elementor-icon-list-item > .elementor-icon-list-icon,
.elementor-element-31289a15 .elementor-icon-list-item > a > .elementor-icon-list-icon {
	flex: 0 0 auto !important;
}

/* 11) Footer row columns: let each column actually shrink to its
 * assigned width share instead of being held to its widest child's
 * un-wrapped content width. */
.elementor-element-42110598,
.elementor-element-99d7cb14,
.elementor-element-bc152c06 {
	min-width: 0 !important;
}


/* 12) Line up the Contact detail text with "Judy Carina R. San Mateo":
 * Represented By = 30px icon + 12px gap = 42px before its text starts.
 * Rather than juggle the Contact icon's own width plus Elementor's
 * separate padding-inline-end (whose combined effect depends on
 * box-sizing, which I can't verify without live devtools), zero out
 * that padding and set the icon column to exactly 42px directly \u2014
 * one controlled number, no interaction to get wrong. */
.elementor-element-31289a15 .elementor-icon-list-icon {
	width: 42px !important;
	padding-inline-end: 0 !important;
	margin-inline-end: 0 !important;
	box-sizing: content-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}


/* 13) Soften the hard edge between the navy hero panel and the aerial
 * photo: a dark-to-transparent fade from the left edge of the photo,
 * so it feels like it emerges from the panel rather than starting
 * abruptly, plus a subtle bottom shade for depth. Pseudo-element
 * layered over the image via the container that already has
 * position:relative + overflow:hidden from rule 5. */
.elementor-element-455041b7::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to right, #0B1A2C 0%, rgba(11,26,44,0.65) 8%, rgba(11,26,44,0) 26%),
		linear-gradient(to top, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 32%);
}




/* 14) MOBILE ONLY: Property Highlights rows (Lot Area / Price per SQM /
 * Title Status / Viewing) each split their label+value as 60% + 54%
 * width \u2014 114% combined, which only ever "worked" on desktop because
 * the row's available width let flexbox silently shrink both to fit
 * one line. On the much narrower mobile width that shrink isn't
 * enough, so each item wraps onto its own line instead \u2014 icon, then
 * label, then value, stacked. Force them to stay one row and size to
 * their actual content instead. Desktop widths (60%/54%) are untouched
 * \u2014 this only applies below 767px. */
@media (max-width: 767px) {
	.elementor-element-bdc4fd31, .elementor-element-397f4391,
	.elementor-element-a8f2361a, .elementor-element-480342c4 {
		flex-wrap: nowrap !important;
	}
	.elementor-element-04a7605d, .elementor-element-bfa2fe85,
	.elementor-element-97130243, .elementor-element-02ff9222 {
		width: auto !important;
		max-width: none !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.elementor-element-0664a400, .elementor-element-1db31bd3,
	.elementor-element-cd559028, .elementor-element-6de95662 {
		width: auto !important;
		max-width: 45% !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
	}
}


/* 15) DESKTOP ONLY (min-width:1025px \u2014 confirmed this site's tablet
 * cutoff is max-width:1024px, mobile max-width:767px, so 1025px+ is the
 * only range that can't also match a tablet/mobile override): center
 * the footer's "Represented By" block and the bottom-bar disclaimer.
 * Both are leftover from when each sat alongside a sibling column
 * (Contact / Follow Us) that's since been removed \u2014 the parent's
 * justify-content:center alone wasn't enough because the child itself
 * was still full-width, so "centering" a full-width box did nothing
 * visually. Forcing fit-content width + auto margins here is a direct
 * guarantee, independent of how Elementor's own width variables
 * resolve. */
@media (min-width: 1025px) {
	.elementor-element-42110598 {
		flex: 0 0 auto !important;
		width: fit-content !important;
		max-width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.elementor-element-2bd1748e {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-element-2bd1748e .elementor-heading-title,
	.elementor-element-2bd1748e p {
		text-align: center !important;
	}
}


/* 16) TABLET ONLY (768px\u20131024px, this site's confirmed tablet range \u2014
 * excludes mobile \u2264767px and desktop \u22651025px): same centering fix as
 * rule 15, applied to the tablet breakpoint specifically. Desktop and
 * mobile are untouched by this rule. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-42110598 {
		flex: 0 0 auto !important;
		width: fit-content !important;
		max-width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.elementor-element-2bd1748e {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-element-2bd1748e .elementor-heading-title,
	.elementor-element-2bd1748e p {
		text-align: center !important;
	}
}




/* 17) Mobile-only inline photo (id 64e7c619), inserted between the
 * icon-list and the CTA button so it sits exactly there in the mobile
 * stack \u2014 the original desktop photo panel (455041b7) is a sibling at
 * a different nesting level, so true interleaving needed a second
 * image widget (hidden on desktop/tablet via Elementor's native
 * responsive-visibility controls) rather than a CSS reorder. Same
 * rounded-corners + cropped treatment as the desktop photo, just at a
 * shorter height appropriate for sitting inline in the text column. */
.elementor-element-64e7c619 {
	overflow: hidden;
	border-radius: 16px;
}
.elementor-element-64e7c619 .elementor-widget-container img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 16px;
}


/* 18) MOBILE ONLY: "Request to View the Property" button was wrapping
 * to 2 lines on narrow screens (14px bold uppercase + 0.06em letter-
 * spacing + 24px side padding doesn't fit ~320-375px mobile widths).
 * That wrap was also why the icon looked misaligned \u2014 it was centered
 * against the full 2-line block instead of a single line of text. Force
 * nowrap and shrink font-size/letter-spacing/padding to fit one line;
 * since the icon is a font glyph sized relative to the button's own
 * font-size, it shrinks proportionally too, so it should now visually
 * match the smaller text as well as re-center cleanly against the
 * single line. Desktop/tablet untouched. */
@media (max-width: 767px) {
	.elementor-element-7207387f .elementor-button {
		white-space: nowrap !important;
		font-size: 12px !important;
		letter-spacing: 0.02em !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	.elementor-element-7207387f .elementor-button-text {
		white-space: nowrap !important;
	}
	.elementor-element-7207387f .elementor-button-icon {
		margin-inline-end: 6px !important;
	}
}


/* 19) DESKTOP ONLY: Property Overview feature descriptions were wrapping
 * "infrastructure." onto its own orphaned 4th line in the Land Potential
 * item. Slightly reducing font-size (applied to all 3 items for visual
 * consistency, not just the one that needed it) gives each line enough
 * extra horizontal room for the word to wrap up onto line 3 instead.
 * Scoped to min-width:1025px \u2014 tablet/mobile untouched. */
@media (min-width: 1025px) {
	.elementor-element-c5da0a32 p,
	.elementor-element-db69f9c0 p,
	.elementor-element-912d973c p {
		font-size: 11.5px !important;
		letter-spacing: -0.01em !important;
	}
}


/* 20) DESKTOP ONLY: the Fluent Forms widget (dc8f50a, form ID 3) in the
 * "Interested?" column uses Fluent Forms' own plugin-default text size
 * for labels\/inputs\/button, which is noticeably larger than the site's
 * ~13-14px body copy elsewhere in that same column (confirmed against
 * the intro paragraph, id 10374207, which is 14px). Scoped to this one
 * widget instance (.elementor-element-dc8f50a ancestor) so it doesn't
 * affect Fluent Forms anywhere else on the site, and to min-width:1025px
 * so tablet\/mobile are untouched. Verified class names against the
 * actual rendered form HTML rather than guessed. */
@media (min-width: 1025px) {
	.elementor-element-dc8f50a .ff-el-input--label label {
		font-size: 13px !important;
		font-family: 'Poppins', sans-serif !important;
		font-weight: 600 !important;
		color: #0B1A2C !important;
	}
	.elementor-element-dc8f50a .ff-el-form-control {
		font-size: 14px !important;
		font-family: 'Poppins', sans-serif !important;
		color: #0B1A2C !important;
		padding: 9px 12px !important;
	}
	.elementor-element-dc8f50a .ff-el-form-control::placeholder {
		font-size: 14px !important;
	}
	.elementor-element-dc8f50a .ff_t_c,
	.elementor-element-dc8f50a .ff_tc_label {
		font-size: 12px !important;
		font-family: 'Poppins', sans-serif !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit {
		font-size: 13px !important;
		font-family: 'Poppins', sans-serif !important;
		padding: 10px 22px !important;
	}
}


/* 21) TABLET + MOBILE (max-width:1024px covers both ranges on this
 * site \u2014 same target sizes as rule 20's desktop fix, just extended
 * down since the request was to match, not differ, across devices).
 * Same Fluent Forms widget (dc8f50a), same verified class names. */
@media (max-width: 1024px) {
	.elementor-element-dc8f50a .ff-el-input--label label {
		font-size: 13px !important;
		font-family: 'Poppins', sans-serif !important;
		font-weight: 600 !important;
		color: #0B1A2C !important;
	}
	.elementor-element-dc8f50a .ff-el-form-control {
		font-size: 14px !important;
		font-family: 'Poppins', sans-serif !important;
		color: #0B1A2C !important;
		padding: 9px 12px !important;
	}
	.elementor-element-dc8f50a .ff-el-form-control::placeholder {
		font-size: 14px !important;
	}
	.elementor-element-dc8f50a .ff_t_c,
	.elementor-element-dc8f50a .ff_tc_label {
		font-size: 12px !important;
		font-family: 'Poppins', sans-serif !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit {
		font-size: 13px !important;
		font-family: 'Poppins', sans-serif !important;
		padding: 10px 22px !important;
	}
}


/* 23) DESKTOP ONLY: "Request to View the Property" button was forced
 * to width:100% by rule 9 (needed at the time to fix an icon\/text
 * overlap bug), which stretches it edge-to-edge across the whole hero
 * column \u2014 reads as an oversized, unnatural bar rather than a normal
 * button. Its parent (751fb1a7) also has align-items:stretch, so just
 * removing width:100% isn't enough \u2014 the button still gets stretched
 * via flex align-self unless that's opted out of too. Scoped to
 * min-width:1025px; mobile\/tablet keep the full-width treatment
 * (rule 18 specifically sized it for one-line mobile fit). */
@media (min-width: 1025px) {
	.elementor-element-7207387f {
		align-self: flex-start !important;
	}
	.elementor-element-7207387f .elementor-button {
		width: auto !important;
		display: inline-flex !important;
	}
	.elementor-element-7207387f .elementor-button-content-wrapper {
		width: auto !important;
	}
}





/* 25) DESKTOP ONLY: "Interested?" card treatment to match the
 * reference \u2014 the section wrapped in a white, rounded, softly-shadowed
 * card sitting on the ivory page background, Terms\/Privacy links in
 * the site's gold accent, and a send icon on the submit button (the
 * button's own color+text were changed properly via Fluent Forms'
 * database, not CSS \u2014 see the PHP update to wp_fluentform_forms). */
@media (min-width: 1025px) {
	.elementor-element-e6af0a9f {
		background-color: #FFFFFF !important;
		border-radius: 18px !important;
		box-shadow: 0 4px 24px rgba(11,26,44,0.07) !important;
		padding: 36px !important;
		margin-top: -36px !important;
	}
	.elementor-element-dc8f50a .ff_t_c a {
		color: #C9891A !important;
		font-weight: 600 !important;
		text-decoration: none !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit {
		border-radius: 999px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit::before {
		content: '\f1d8';
		font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 12px;
	}
}


/* 26) TABLET + MOBILE (max-width:1024px, same combined range as rule
 * 21): extends rule 25's card treatment down to these breakpoints too.
 * The Fluent Forms submit button's own color and text (gold, "Send
 * Inquiry") already apply everywhere regardless of screen size, since
 * that part was changed at the database level, not via CSS - this rule
 * just extends the CSS-only parts (card background, Terms\/Privacy
 * link color, button shape+icon) to match. */
@media (max-width: 1024px) {
	.elementor-element-e6af0a9f {
		background-color: #FFFFFF !important;
		border-radius: 18px !important;
		box-shadow: 0 4px 24px rgba(11,26,44,0.07) !important;
		padding: 28px !important;
	}
	.elementor-element-dc8f50a .ff_t_c a {
		color: #C9891A !important;
		font-weight: 600 !important;
		text-decoration: none !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit {
		border-radius: 999px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.elementor-element-dc8f50a .ff-btn-submit::before {
		content: '\f1d8';
		font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 12px;
	}
}


/* 27) TABLET + MOBILE: the First Name\/Last Name (and Company) rows use
 * Fluent Forms' own .ff-t-container, which is display:flex with no
 * flex-wrap and NO responsive override anywhere in the plugin's own
 * CSS (checked directly, not assumed) to stack on narrow screens. That
 * forces both fields to squeeze side-by-side even on a phone-width
 * screen, causing the reported "doesn't fit" overflow. Stack them
 * vertically below 1024px instead. Scoped to this one form widget
 * instance so it doesn't affect Fluent Forms elsewhere on the site. */
@media (max-width: 1024px) {
	.elementor-element-dc8f50a .ff-t-container {
		flex-direction: column !important;
		gap: 16px !important;
	}
	.elementor-element-dc8f50a .ff-t-cell {
		width: 100% !important;
	}
}