/* ═══════════════════════════════════════════════════
   /communities/ archive page styles.
   Section + column _css_classes don't render in this
   Elementor build, so we hook off the WIDGET class
   `.mcr-archive-hero__bg` (which does render) and use
   `:has()` to style its column + section.
   ═══════════════════════════════════════════════════ */

/* Make the column that contains the hero bg image a positioned, full-height stage */
.elementor-column:has(> .elementor-widget-wrap > .mcr-archive-hero__bg),
.elementor-column:has(.mcr-archive-hero__bg) {
  position: relative !important;
  min-height: 80vh;
  overflow: hidden;
  background: var(--mcr-black);
  isolation: isolate;
}
.elementor-column:has(.mcr-archive-hero__bg) > .elementor-widget-wrap,
.elementor-column:has(.mcr-archive-hero__bg) > .elementor-column-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 var(--gutter-desktop);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The Image widget itself fills the column behind everything */
.mcr-archive-hero__bg.elementor-widget-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
}
.mcr-archive-hero__bg .elementor-widget-container,
.mcr-archive-hero__bg .elementor-image,
.mcr-archive-hero__bg img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
}
.mcr-archive-hero__bg img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ── Split hero: two images side by side (MCR-18) ──────────────────
   LEFT  = Greater Orlando (Lake Eola / oak canopy / downtown skyline)
   RIGHT = the coast (aerial, homes on the water — deliberately generic)
   The 50/50 vertical split is held at EVERY breakpoint; narrow viewports
   crop each half via object-fit:cover rather than stacking or dropping
   one image, so the two-regions reading never collapses to one place. */
.mcr-archive-hero__bg--l.elementor-widget-image {
  left: 0 !important;
  right: auto !important;
  width: 50% !important;
}
.mcr-archive-hero__bg--r.elementor-widget-image {
  left: 50% !important;
  right: auto !important;
  width: 50% !important;
}
/* STACKING FIX (pre-existing defect, found while building MCR-18).
   `.elementor-widget-wrap` below is position:relative; z-index:2, so it opens
   its OWN stacking context. The hero images live inside it at z-index 0, which
   means the column-level `::after` scrim at z-index 1 was painting *underneath*
   an opaque full-bleed image and darkening nothing at all. Verified by forcing
   that scrim to opaque red: 0 of 72 sampled hero pixels changed.
   The scrim therefore has to be re-issued INSIDE the wrap, where it can sit
   above the images (z 0) and below the text widgets (z 2).
   Absolutely positioned children of a flex container are not flex items, so
   this does not disturb the wrap's column layout. */
.elementor-column:has(.mcr-archive-hero__bg) > .elementor-widget-wrap::before,
.elementor-column:has(.mcr-archive-hero__bg) > .elementor-column-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.65); /* flat rgba, single value, no ramp */
  z-index: 1;
  pointer-events: none;
}
/* Hairline seam so the two halves read as a deliberate split, not a
   mis-stitched panorama. Flat rgba only. Same stacking context as the scrim. */
.elementor-column:has(.mcr-archive-hero__bg--r) > .elementor-widget-wrap::after,
.elementor-column:has(.mcr-archive-hero__bg--r) > .elementor-column-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: rgba(255, 255, 255, 0.22);
  z-index: 1; /* painted after ::before, so it reads over the scrim */
  pointer-events: none;
}
/* Zero rounding / zero shadow on every hero image layer, at all sizes. */
.mcr-archive-hero__bg,
.mcr-archive-hero__bg .elementor-widget-container,
.mcr-archive-hero__bg .elementor-image,
.mcr-archive-hero__bg img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Legacy column-level scrim. Kept deliberately: it is a no-op while the images
   load (see STACKING FIX above), but it still darkens the section's #0A0A0C
   background if an image ever fails to load. Do not treat as the live scrim. */
.elementor-column:has(.mcr-archive-hero__bg)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Ensure the text widgets in the hero sit above the scrim */
.mcr-archive-hero__eyebrow,
.mcr-archive-hero__title,
.mcr-archive-hero__lede {
  position: relative;
  z-index: 2;
}

/* Hero typography */
.mcr-archive-hero__eyebrow,
.mcr-archive-hero__eyebrow .elementor-heading-title {
  /* 0.82 measured 4.07:1 at its worst glyph pixel over the right half at a
     320px viewport - under the 4.5:1 needed for 11px text. Raised to 0.95.
     The widget class itself is in the selector because Elementor 4.x ships this
     heading widget as a bare text node at runtime - there is no
     .elementor-heading-title child in the live DOM, so the descendant-only
     selector matched nothing and the eyebrow painted at #8A8680 (1.9:1). */
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 28px !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
}
.mcr-archive-hero__title .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.75rem, 6vw, 5.5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  margin: 0 auto 32px !important;
  text-align: center;
  text-transform: none;
}
.mcr-archive-hero__lede.elementor-widget-text-editor,
.mcr-archive-hero__lede .elementor-widget-container,
.mcr-archive-hero__lede p {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem) !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  max-width: 56ch;
  margin: 0 auto !important;
  text-align: center;
}

/* County chip rail — center the chips */
.elementor-widget-shortcode .mcr-chips { justify-content: center; }

/* Editorial pull — Bodoni Moda enforced via the editorial-lead widget class */
.editorial-lead.elementor-widget-text-editor,
.editorial-lead.elementor-widget-text-editor .elementor-widget-container,
.editorial-lead.elementor-widget-text-editor p {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
  color: var(--mcr-dark-text) !important;
  max-width: 44ch;
  margin: 0 auto !important;
  text-align: center;
}

/* CTA band — dark band, form widget styled minimal-luxury */
.mcr-final-cta__sub.elementor-widget-text-editor,
.mcr-final-cta__sub .elementor-widget-container p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  max-width: 60ch;
  margin: 0 auto 40px !important;
  text-align: center;
}

/* Form widget */
.mcr-cta-form .elementor-form-fields-wrapper { gap: 16px; }
.mcr-cta-form .elementor-field-group label.elementor-field-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 8px;
}
.mcr-cta-form input[type="text"],
.mcr-cta-form input[type="email"],
.mcr-cta-form select,
.mcr-cta-form textarea {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  box-shadow: none !important;
}
.mcr-cta-form input::placeholder,
.mcr-cta-form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.mcr-cta-form input:focus,
.mcr-cta-form select:focus,
.mcr-cta-form textarea:focus {
  outline: none !important;
  border-bottom-color: #FFFFFF !important;
}
.mcr-cta-form button.elementor-button {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF !important;
  color: var(--mcr-royal) !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 0 !important;
  padding: 18px 36px !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 16px;
  transition: background 200ms ease, color 200ms ease;
}
.mcr-cta-form button.elementor-button:hover {
  background: transparent !important;
  color: #FFFFFF !important;
}