/*
 * ElderCare — custom-coded Contact page (inc/contact-page.php), layout
 * copied from the shared Contact.html mockup, colors from the theme
 * instead of the mockup's literal red palette — same conventions as every
 * other page on this site: fixed px not rem, no font-family set, neutral
 * grays + var(--listeo-primary-color) reused throughout.
 */

/* [ec_contact_header] ------------------------------------------------------- */

.ecp-header { background: #fff; border-bottom: 1px solid #E8E8E8; padding: 48px 20px 36px; text-align: center; }
.ecp-header-in { max-width: 460px; margin: 0 auto; }
.ecp-eyebrow { display: inline-block; background: var(--listeo-primary-color-light, #FDF1EE); color: var(--listeo-primary-color, #B04C2F); border-radius: 999px; padding: 4px 16px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }
.ecp-header-in h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: #1A1A1A; line-height: 1.2; margin: 0 0 12px; }
.ecp-header-in p { font-size: 15px; color: #666; line-height: 1.65; max-width: 460px; margin: 0 auto; }

/* [ec_contact_form] ------------------------------------------------------------ */

.ecp-form-card { background: var(--listeo-primary-color, #B04C2F); border-radius: 14px; padding: 30px 28px 28px; max-width: 560px; margin: 0 auto 16px; }
.ecp-form-title { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 22px; }

.ecp-error { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 9px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }

/* !important throughout below: the parent theme's style.css has a global
   `input, textarea, select { background-color:#fff; color:#808080;
   margin:0 0 16px 0; height:51px; box-shadow:...; }` rule that applies to
   every form field site-wide — same class of collision fixed elsewhere on
   this site (single-listing.css, the homepage hero search). Without
   overriding it, the dropdown's own white background fights our
   translucent-white/white-text styling (washing the text out), and its
   16px bottom margin stacks on top of .ecp-field's own spacing, on top of
   its default box-shadow — together reading as a stray line in the form. */
.ecp-field { margin-bottom: 10px; }
.ecp-field input,
.ecp-field select,
.ecp-field textarea {
	width: 100%; height: auto !important; line-height: 1.4 !important;
	background-color: rgba(255,255,255,.18) !important; background-image: none !important;
	border: 1px solid rgba(255,255,255,.28) !important; border-radius: 9px !important;
	box-shadow: none !important; margin: 0 !important;
	padding: 12px 14px !important; font-size: 14px; color: #fff !important; outline: none;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	transition: background .15s, border-color .15s;
}
.ecp-field select::-ms-expand { display: none; }
.ecp-field input::placeholder,
.ecp-field textarea::placeholder { color: rgba(255,255,255,.65); }
.ecp-field select {
	/* !important here too — needs to win over this file's own
	   background-image:none!important reset just above, which exists to
	   defeat the PARENT theme's background-image, not this one. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px !important; cursor: pointer;
}
.ecp-field select option { background: #fff; color: #1A1A1A; }
.ecp-field input:focus,
.ecp-field select:focus,
.ecp-field textarea:focus { background-color: rgba(255,255,255,.25) !important; border-color: rgba(255,255,255,.6) !important; }
.ecp-field textarea { resize: none; min-height: 90px; line-height: 1.6; }

/* !important + explicit border below: same reasoning as the fields above
   — the parent theme's own reset (bootstrap-grid.css: `button { color:
   inherit; margin: 0; }`) and possibly other global button styling was
   letting the button pick up ambient color/background from its
   surroundings instead of ours, on a bare <button> with no competing
   class of its own to raise specificity. The border also keeps it clearly
   defined as its own element even if some future rule changes background. */
.ecp-submit {
	width: 100%; margin: 6px 0 0 !important; background-color: #fff !important; color: var(--listeo-primary-color, #B04C2F) !important;
	border: 1.5px solid #fff !important; border-radius: 9px !important;
	padding: 13px 24px !important; font-size: 14px; font-weight: 700; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: background-color .15s, color .15s, transform .08s;
}
.ecp-submit i { color: inherit; }
/*
 * Deliberately NOT var(--listeo-primary-color-light) here, unlike most
 * hover states elsewhere on the site. On this site's Customizer settings
 * that variable resolves to the SAME primary color at 10% opacity (e.g.
 * #f919421A), not a distinct pale tint — fine when it sits on a white
 * background (elsewhere on this page, it reads as pale pink), but this
 * button sits on .ecp-form-card's SOLID primary-color background, so a
 * 10%-opacity wash of that same color over itself is nearly invisible —
 * the button visually disappeared into the card on hover. A plain light
 * gray stays visibly different from the button's own white base state
 * without depending on what the chosen primary color happens to be.
 */
.ecp-submit:hover { background-color: #EDEDED !important; }
.ecp-submit:active { transform: scale(.98); }

/* Honeypot field — real visitors never see this. */
.ecp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success state (replaces the form after a submission) */
.ecp-success { text-align: center; padding: 20px 10px; color: #fff; }
.ecp-success i { font-size: 34px; margin-bottom: 12px; }
.ecp-success h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.ecp-success p { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }

/* [ec_contact_info] -------------------------------------------------------------- */

.ecp-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; margin: 0 auto 36px; }
.ecp-cc { background: var(--listeo-primary-color-light, #FDF1EE); border-radius: 14px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; }
.ecp-cc-ico { width: 34px; height: 34px; flex-shrink: 0; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--listeo-primary-color, #B04C2F); font-size: 15px; }
.ecp-cc-label { font-size: 13px; font-weight: 700; color: #1A1A1A; margin-bottom: 3px; }
.ecp-cc-val { font-size: 12px; color: var(--listeo-primary-color, #B04C2F); font-weight: 500; text-decoration: none; }
.ecp-cc-val.ecp-cc-soft { color: #666; font-weight: 400; }

@media (max-width: 480px) { .ecp-cards-row { grid-template-columns: 1fr; } }

/* [ec_contact_cta] ---------------------------------------------------------------- */

.ecp-list-cta { max-width: 560px; margin: 0 auto; border-top: 1px solid #E8E8E8; padding-top: 22px; }
.ecp-list-cta p { font-size: 13px; color: #888; line-height: 1.7; }
.ecp-list-cta p strong { color: #555; font-weight: 600; }
.ecp-list-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--listeo-primary-color, #B04C2F); margin-top: 8px; text-decoration: none; }
.ecp-list-link:hover { text-decoration: underline; }
.ecp-list-link i { font-size: 11px; }