/* =========================================================
 * AdPro Site Tools: site-wide typography + form contrast fixes.
 *
 * 1. The theme's default font was the operating-system font stack while the
 *    page text is Inter, so the Team Grid, directory cards, market statistics,
 *    form controls and buttons looked different from the text around them.
 *    They now follow the site's own text font (Elementor Site Settings → Typography → Text).
 * 2. WPForms' red "required" asterisk was 3.4:1 on the dark footer form and ~4:1 on light
 *    sections; it now meets 4.5:1 in both places (the first version of these rules was outranked by WPForms' own selector and never applied).
 * ========================================================= */

body,
button,
input,
select,
textarea {
	font-family: var(--e-global-typography-text-font-family, "Inter"), -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
}

/* WPForms colours the asterisk with div.wpforms-container-full .wpforms-form .wpforms-required-label (#d63637), which
 * outranks a shorter selector, so these repeat its shape to win. */
div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: #b3261e;
}

.ppar-footer div.wpforms-container-full .wpforms-form .wpforms-required-label,
div.wpforms-container-full.adpro-on-dark .wpforms-form .wpforms-required-label {
	color: #ffb4ab;
}

/* Logos: the Elementor kit rounds every <img> by 20px (.elementor-kit-7 img). A logo runs edge to edge inside its
 * image box, so the rounding trimmed the outer corners of the lettering (the P and the M of PPAR.COM). */
.elementor-kit-7 .elementor-element-703a2d2d img,     /* header logo (header template #221) */
.elementor-kit-7 .elementskit-nav-logo img,            /* logo at the top of the phone / tablet menu */
.elementor-kit-7 .ppar-footer__logo img {
	border-radius: 0;
}

/* =========================================================
 * Footer (Elementor footer template #248, root class "ppar-footer").
 *
 * Built to be read in one pass, top to bottom, as three short zones:
 *   1. Who we are and where to go: logo + intro beside the two link lists. Five links each; every other page is one
 *      click away in the header menus.
 *   2. Everything for getting in touch in one band: heading, intro and the four contact lines on the left, the
 *      message form on the right.
 *   3. A hairline bar: copyright, About / News / Contact, AdPro signature.
 * No cards, no icons, one small uppercase label style (the two link headings). The top edge is flat and flush with the
 * page, capped with a slim line in the header's slate blue; the logo's own mountain mark sits small on the divider above
 * the bar. Calm colours (soft blue-white instead of pure white), dark form fields, 44px tap rows on touch screens
 * (36px with a mouse). Spacing follows the 8 / 16 / 24 / 32 / 48 / 64px scale.
 * Tablet: the same three zones, narrower. Phone: one column, the two link lists side by side.
 * ========================================================= */
.ppar-footer {
	--f-bg: #152131;
	--f-text: #D5DEEA;
	--f-head: #F4F6F8;
	--f-muted: #9AB3D4;
	--f-line: #303E52;
	--f-field: #0F1927;
	--f-field-line: #4A5B72;
	--f-error: #FFB4AB;              /* 9:1 on the footer navy; WPForms' own red was 3:1 */
	--f-cap: #566B88;                /* the header's audience-tab slate */
	position: relative;
	margin-top: 0;
	border-top: 4px solid var(--f-cap) !important;
}

/* No stray side padding inside the footer: the grid gap separates columns; the grid and the bar set their own. */
.ppar-footer :where(.e-con, .e-con > .e-con-inner) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Text */
.ppar-footer .elementor-widget-text-editor,
.ppar-footer .elementor-widget-text-editor p {
	margin: 0;
	color: var(--f-text) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

.ppar-footer .ppar-footer__title .elementor-heading-title {
	margin: 0 0 8px;
	color: var(--f-muted) !important;
	font-family: var(--e-global-typography-text-font-family, "Inter"), sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

.ppar-footer .ppar-footer__title--card .elementor-heading-title {
	margin: 0;
	color: var(--f-head) !important;
	font-family: "Cormorant Garamond", serif !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 1.2 !important;
	text-transform: none;
}

/* Links */
.ppar-footer .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
}

.ppar-footer .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: 8px;
}

.ppar-footer .elementor-icon-list-text,
.ppar-footer .elementor-icon-list-item > a {
	color: var(--f-text) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.ppar-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.ppar-footer .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
	color: #FFFFFF !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Contact details: four plain lines under the intro (phone, e-mail, address, hours). Each value has the same 10px of
 * air above and below; links grow into it so they are 44px tall to tap (the width stays the text's own, so the empty
 * space beside a link is not clickable). */
.ppar-footer__strip {
	display: flex !important;
	flex-direction: column !important;
	gap: 0;
	width: 100%;
	max-width: none;
	margin-top: 16px;
	padding: 0 !important;
}

.ppar-footer__strip > .e-con {
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	padding: 0 !important;
	gap: 0;
}

.ppar-footer__cell .elementor-widget-text-editor p {
	padding-block: 10px;
}

.ppar-footer__cell a {
	display: block;
	width: fit-content;
	margin-block: -10px;
	padding-block: 10px;
	color: inherit !important;
	text-decoration: none;
}

.ppar-footer__cell a:hover,
.ppar-footer__cell a:focus-visible {
	color: #FFFFFF !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* With a mouse the rows can be a little tighter than a thumb needs. */
@media (min-width: 1025px) and (pointer: fine) {
	.ppar-footer .elementor-icon-list-item > a {
		min-height: 36px;
		padding-block: 4px;
	}

	.ppar-footer__cell .elementor-widget-text-editor p {
		padding-block: 4px;
	}

	.ppar-footer__cell a {
		margin-block: -4px;
		padding-block: 4px;
	}
}

.ppar-footer .elementor-widget-image,
.ppar-footer .elementor-widget-image img {
	text-align: left;
}

.ppar-footer__logo img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}

/* Grid, aligned to the 1140px page content. Zone one: brand (cols 1-5) | members (7-9) | public (10-12).
 * Zone two: the get-in-touch band across the full width. Column 6 is the empty gutter. */
.ppar-footer__grid {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 56px 24px;
	width: 100%;
	max-width: 1188px;
	margin-inline: auto;
	padding: 0 24px 48px !important;   /* content lines up with the page's 70px edge at 1280 */
	box-sizing: border-box;
}

.ppar-footer__grid > .e-con {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	padding: 0 !important;
	gap: 16px;
}

.ppar-footer__grid > .ppar-footer__brand { grid-column: 1 / span 5; }
.ppar-footer__grid > .ppar-footer__nav--members { grid-column: 7 / span 3; }
.ppar-footer__grid > .ppar-footer__nav--public { grid-column: 10 / span 3; }
.ppar-footer__grid > .ppar-footer__form { grid-column: 1 / -1; }

/* Get-in-touch band: heading, one line and the contact details on the left (under the brand), the form on the right
 * (under the link lists). The last row is flexible so the left column stays tight to the top however tall the form is. */
.ppar-footer__grid > .ppar-footer__form {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto auto 1fr;
	gap: 8px 24px;
	align-items: start;
}

.ppar-footer__form > .elementor-widget-heading,
.ppar-footer__form > .ppar-footer__intro,
.ppar-footer__form > .ppar-footer__strip {
	grid-column: 1 / span 5;
	margin-block: 0;
}

.ppar-footer__form > .elementor-widget-heading { grid-row: 1; }
.ppar-footer__form > .ppar-footer__intro { grid-row: 2; }
.ppar-footer__form > .ppar-footer__strip { grid-row: 3; margin-top: 16px; }

.ppar-footer__form > .elementor-widget-shortcode {
	grid-column: 7 / span 6;
	grid-row: 1 / -1;
	min-width: 0;
	container-type: inline-size;
}

.ppar-footer__intro p {
	color: var(--f-text) !important;
	font-size: 16px !important;
}

/* The form adapts to the width it is given: Name and Email side by side from 440px, the reCAPTCHA and the Submit
 * button on one line from 520px. */
@container (min-width: 440px) {
	.ppar-footer .wpforms-container .wpforms-field-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
	}

	.ppar-footer .wpforms-container .wpforms-field-container .wpforms-field-textarea {
		grid-column: 1 / -1;
	}
}

@container (min-width: 520px) {
	.ppar-footer .wpforms-container form.wpforms-form {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 16px;
		align-items: center;
	}

	.ppar-footer .wpforms-container form.wpforms-form > * {
		grid-column: 1 / -1;
	}

	.ppar-footer .wpforms-container form.wpforms-form > .wpforms-recaptcha-container {
		grid-column: 1;
	}

	.ppar-footer .wpforms-container form.wpforms-form > .wpforms-submit-container {
		grid-column: 2;
	}
}

/* WPForms adds 24px above and below its container; the band's own spacing does that job (and the form's top edge
 * should line up with the heading beside it). */
.ppar-footer div.wpforms-container-full:not(:empty) {
	margin: 0;
}

.ppar-footer .wpforms-container .wpforms-field {
	padding: 0 0 16px;
}

.ppar-footer .wpforms-container .wpforms-field-label {
	margin-bottom: 8px;
	color: var(--f-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.ppar-footer .wpforms-container input[type="text"],
.ppar-footer .wpforms-container input[type="email"],
.ppar-footer .wpforms-container textarea {
	box-sizing: border-box;
	max-width: 100% !important;
	min-height: 48px;
	padding: 8px 16px;
	background: var(--f-field) !important;
	border: 1px solid var(--f-field-line) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--f-head) !important;
	font-size: 16px;
}

.ppar-footer .wpforms-container textarea {
	min-height: 96px;
}

.ppar-footer .wpforms-container input:focus,
.ppar-footer .wpforms-container textarea:focus {
	border-color: var(--f-muted) !important;
	outline: 2px solid var(--f-muted);
	outline-offset: 2px;
}

/* Error state on the dark footer: WPForms' red (#d63637) is only 3:1 here. These beat WPForms' own selectors. */
.ppar-footer div.wpforms-container-full .wpforms-form .wpforms-required-label,
.ppar-footer div.wpforms-container-full .wpforms-form label.wpforms-error,
.ppar-footer div.wpforms-container-full .wpforms-form em.wpforms-error {
	color: var(--f-error);
}

.ppar-footer div.wpforms-container-full .wpforms-form input.wpforms-error,
.ppar-footer div.wpforms-container-full .wpforms-form textarea.wpforms-error {
	border-color: var(--f-error) !important;
}

.ppar-footer .wpforms-container .wpforms-submit-container {
	padding-top: 0;
}

.ppar-footer .wpforms-container button.wpforms-submit {
	width: 100%;
	min-height: 48px;
	padding: 0 32px;
	background: #E6ECF3 !important;
	border: 0 !important;
	border-radius: 8px !important;
	color: #152131 !important;
	font-size: 16px;
	font-weight: 600;
}

.ppar-footer .wpforms-container button.wpforms-submit:hover,
.ppar-footer .wpforms-container button.wpforms-submit:focus-visible {
	background: #FFFFFF !important;
}

/* The reCAPTCHA checkbox is 304px wide: scale it down only on the narrowest phones. */
.ppar-footer .wpforms-recaptcha-container {
	max-width: 100%;
	padding: 0;
}

@media (max-width: 335px) {
	.ppar-footer .wpforms-recaptcha-container .g-recaptcha {
		transform: scale(0.9);
		transform-origin: 0 0;
		margin-bottom: -8px;
	}
}

@media (max-width: 310px) {
	.ppar-footer .wpforms-recaptcha-container .g-recaptcha {
		transform: scale(0.8);
		margin-bottom: -16px;
	}
}

/* Bottom bar: copyright | about links | AdPro signature. */
.ppar-footer__bar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
	width: 100%;
	max-width: 1188px;
	margin-inline: auto;
	padding: 16px 24px 24px !important;
	box-sizing: border-box;
	border-top: 0 !important;
	/* Divider inset by the gutter (lines up with the content above), with a gap in the middle for the mark. */
	--f-gutter: 24px;
	background: linear-gradient(to right, var(--f-line) calc(50% - 40px), transparent calc(50% - 40px), transparent calc(50% + 40px), var(--f-line) calc(50% + 40px)) var(--f-gutter) 0 / calc(100% - 2 * var(--f-gutter)) 1px no-repeat !important;
}

/* The logo's mountain mark, small and dimmed, centred on the divider. */
.ppar-footer__bar::after {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 44px;
	height: 16px;
	transform: translateX(-50%);
	background: url("../img/ppar-mark-white.png") no-repeat center / contain;
	opacity: 0.55;
	pointer-events: none;
}

.ppar-footer__bar > .e-con {
	width: auto !important;
	flex: 0 1 auto;
	padding: 0 !important;
}

.ppar-footer__bar .elementor-widget,
.ppar-footer__bar .elementor-widget-container {
	padding: 0 !important;
}

.ppar-footer__bar .elementor-widget-text-editor,
.ppar-footer__bar .elementor-widget-text-editor p {
	color: var(--f-muted) !important;
	font-size: 14px !important;
	margin: 0;
}

.ppar-footer__bar > .ppar-footer__legal {
	flex: 1 1 auto !important;
}

.ppar-footer__legal p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 8px;
}

@media (min-width: 1025px) {
	.ppar-footer__legal p {
		flex-wrap: nowrap;
	}
}

.ppar-footer__legal a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	min-height: 44px;
	padding-inline: 8px;
	color: var(--f-muted);
	text-decoration: none;
}

.ppar-footer__legal a:hover,
.ppar-footer__legal a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Bar row on desktop: copyright and credit take their own width, the five links share the rest.
   Elementor gives the three children equal thirds, which only fits three short links. */
@media (min-width: 1025px) {
	.ppar-footer__bar > .e-con-inner {
		flex-wrap: wrap !important;
		justify-content: space-between !important;
	}

	.ppar-footer__bar > .e-con-inner > .e-con {
		flex: 0 0 auto !important;
		width: max-content !important;
	}

	.ppar-footer__bar > .e-con-inner > .ppar-footer__legal {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

/* Below 1200px the links do not fit between the copyright and the credit: give them their own centred row. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.ppar-footer__bar > .e-con-inner > .e-con:last-child {
		order: 2;
	}

	.ppar-footer__bar > .e-con-inner > .ppar-footer__legal {
		order: 3;
		flex: 1 1 100% !important;
	}
}

.ppar-footer__bar .adpro-sig {
	width: auto;
}

/* The widget sets the logo to width:100% plus a max-width cap (80px); inside a content-sized box, and before the lazy
   image has loaded, that resolves to 0 and the row jumps when it arrives. A definite size (the widget's 80px cap, the
   image is 270x147) keeps the credit's box stable. */
.ppar-footer__bar .adpro-sig__logo img {
	width: 80px !important;
	aspect-ratio: 270 / 147;
}

/* The signature sits at the right edge of the bar: open its tooltip leftwards so it never hangs off the page
 * (it is invisible until hover, but its box still made the page scroll sideways on laptop widths). */
@media (min-width: 768px) {
	.ppar-footer__bar .adpro-sig__tip {
		left: auto !important;
		right: 0;
		transform: translateY(calc(-1 * var(--sig-offset) + var(--sig-y) + 6px)) !important;
	}

	.ppar-footer__bar .adpro-sig__link:hover .adpro-sig__tip,
	.ppar-footer__bar .adpro-sig__link:focus-visible .adpro-sig__tip {
		transform: translateY(calc(-1 * var(--sig-offset) + var(--sig-y))) !important;
	}
}

/* Keep the signature clear of the theme's fixed scroll-to-top button on laptop widths. */
@media (min-width: 768px) and (max-width: 1366px) {
	.ppar-footer__bar {
		padding-right: 64px !important;
	}
}

/* Tablet: the same three zones, narrower. */
@media (max-width: 1024px) {
	.ppar-footer__grid {
		grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
	}

	.ppar-footer__grid > .ppar-footer__brand { grid-column: 1; }
	.ppar-footer__grid > .ppar-footer__nav--members { grid-column: 2; }
	.ppar-footer__grid > .ppar-footer__nav--public { grid-column: 3; }

	.ppar-footer__grid > .ppar-footer__form {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: 32px;
	}

	.ppar-footer__form > .elementor-widget-heading,
	.ppar-footer__form > .ppar-footer__intro,
	.ppar-footer__form > .ppar-footer__strip { grid-column: 1; }
	.ppar-footer__form > .elementor-widget-shortcode { grid-column: 2; }
}

/* Phone: one column; the two link lists stay side by side (five short links each fit 160px). */
@media (max-width: 767px) {
	.ppar-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 16px;
		padding: 0 16px 32px !important;
	}

	.ppar-footer__grid > .ppar-footer__brand,
	.ppar-footer__grid > .ppar-footer__form { grid-column: 1 / -1; }
	.ppar-footer__grid > .ppar-footer__nav--members { grid-column: 1; }
	.ppar-footer__grid > .ppar-footer__nav--public { grid-column: 2; }

	.ppar-footer__grid > .ppar-footer__form {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 8px;
	}

	.ppar-footer__form > .elementor-widget-heading,
	.ppar-footer__form > .ppar-footer__intro,
	.ppar-footer__form > .ppar-footer__strip,
	.ppar-footer__form > .elementor-widget-shortcode { grid-column: 1; }
	.ppar-footer__form > .elementor-widget-shortcode { grid-row: 4; margin-top: 24px; }

	.ppar-footer__bar {
		--f-gutter: 16px;
		flex-direction: column !important;
		padding: 16px 16px 24px !important;
		text-align: center;
	}

	.ppar-footer__bar .elementor-widget-text-editor,
	.ppar-footer__bar .elementor-widget-text-editor p {
		text-align: center !important;
	}

	.ppar-footer__legal p {
		justify-content: center;
	}

	.ppar-footer__bar .adpro-sig {
		justify-content: center;
	}
}

/* =========================================================
 * Touch targets and small text (phones).
 * Every control a thumb has to hit is at least 44px; nothing a visitor has to read is under 12px
 * (uppercase labels) / 14px (everything else).
 * ========================================================= */
.elementskit-menu-hamburger,
.elementskit-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.elementor-button {
	min-height: 44px;
}

.wpforms-container .wpforms-submit,
.wpforms-container button.wpforms-submit {
	min-height: 44px;
}

@media (max-width: 767px) {
	.adpro-aud .adpro-aud__tab.adpro-aud__tab {
		font-size: 14px !important;
		min-height: 48px;
	}

	.adpro-aud .adpro-aud__link,
	.adpro-aud--m-scroll .adpro-aud__links a,
	.adpro-aud--m-grid .adpro-aud__links a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
		padding-block: 8px !important;
		font-size: 14px !important;
	}
}

/* Breadcrumb in the page banner: a 17px-tall link is hard to hit. */
.ekit-breadcrumb a,
.ekit_breadcrumbs_start a,
.ekit-breadcrumb-list a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select {
	min-height: 44px;
}

/* =========================================================
 * Home page title ("ppar-hero-title"): always two balanced lines,
 * "Pikes Peak Association" over "of REALTORS®", at every screen width.
 * The size follows the viewport (capped at 72px) so the longer line always fits.
 * ========================================================= */
.ppar-hero-title .elementor-heading-title {
	max-width: 12em;
	margin-inline: auto;
	font-size: min(72px, 9.4vw) !important;
	line-height: 1.05 !important;
	text-wrap: balance;
}

/* Header top bar (phone, e-mail, address): never break a phone number or an address in the middle of a word on tablets. */
.ppar-topbar,
.ppar-topbar > .e-con {
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
}

.ppar-topbar .elementor-widget,
.ppar-topbar .elementor-widget * {
	white-space: nowrap;
}

/* Wide enough for one row (about 1240px): phone and e-mail on the logo's left edge, the address on the Member Login
 * button's right edge, i.e. the same box as the header below (1400px max, centred, 24px gutters). */
@media (min-width: 1240px) {
	.ppar-topbar {
		justify-content: space-between;
		padding-inline: max(24px, calc((100% - 1400px) / 2)) !important;
	}

	.ppar-topbar > .e-con {
		justify-content: flex-start;
	}

	.ppar-topbar > .e-con:first-child {
		margin-left: -8px;               /* the icon box's own 8px inner padding */
	}
}

@media (max-width: 1024px) {
	.ppar-topbar > .e-con,
	.ppar-topbar .elementor-widget {
		width: auto !important;
		max-width: none !important;
	}
}