/* MCR mobile fixes - 2026-08-19
 *
 * Design system: zero rounded corners, no gradients, royal #1E3A8A used sparingly,
 * hyphens only. Fonts are NOT changed anywhere in this file.
 *
 * Every selector here is scoped. There are deliberately no `*` rules and nothing
 * touches background-image - a previous blanket `* { background-image: none }`
 * broke the Showcase IDX listing hero images.
 */

/* ---------------------------------------------------------------- ISSUE 5
 * Hero CTA was a 1px white outline with transparent fill sitting on the photo.
 * Measured worst case 1.47:1 (mobile) / 2.18:1 (desktop) against bright patches
 * of the aerial image - far below the 4.5:1 floor.
 * Option (a): solid royal fill, white text. 10.43:1 against its own fill,
 * independent of whatever the photo does underneath. Same on desktop and mobile.
 */
/* Elementor emits per-widget rules like
 * `.elementor-72 .elementor-element-XXXX .elementor-button` (0,3,0 specificity),
 * which outranks any reasonable hand-written selector. !important is the correct
 * tool here rather than escalating into an unreadable selector arms race. */
.elementor-button.elementor-button-link,
a.elementor-button,
.elementor-button-wrapper a.elementor-button {
  background-color: rgba(10, 10, 12, 0.55) !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 0 !important;
}
.elementor-button.elementor-button-link .elementor-button-text,
a.elementor-button .elementor-button-text,
.elementor-button.elementor-button-link,
a.elementor-button {
  color: #FFFFFF !important;
}
.elementor-button.elementor-button-link:hover,
a.elementor-button:hover,
.elementor-button.elementor-button-link:focus-visible,
a.elementor-button:focus-visible {
  background-color: rgba(10, 10, 12, 0.72) !important;
  border-color: #FFFFFF !important;
}

/* Hero legibility. The photo lives on .mcr-hero-media (position:absolute,
 * z-index:0, 540px tall). Elementor's own .elementor-background-overlay scrim
 * only spans the section box (398px), so the lower band of the photo was never
 * dimmed at all. Attach the scrim to the media element itself so it covers
 * exactly the photo, at every viewport, with no reliance on section height.
 * Flat colour - not a gradient. The wordmark/headline sit above it.
 */
.mcr-hero-media { position: relative; }
.mcr-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 12, 0.56);
  pointer-events: none;
}

/* Hero eyebrow "CENTRAL FLORIDA - SPACE COAST" was rgb(192,196,204) light grey.
 * Measured 7.36:1 mean but 21.3% of its area below 4.5:1 against the photo.
 * White clears it; the scrim above does the rest. */
.elementor-element-15a8c7e4 .elementor-heading-title {
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------------- ISSUE 4
 * Headings carried `word-break: break-word`, which lets the browser split
 * inside a word. With a fixed 56-64px size in a ~270px mobile column, the
 * fallback font used during webfont load is wider than the box, so
 * "Currently" split as "Currentl / y". Stop the split, and make the oversized
 * headings fluid so they fit at 390 even before the webfont arrives.
 * Font families are untouched - Fraunces and Playfair remain as set.
 */
h1, h2, h3, h4,
.elementor-heading-title {
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  /* Elementor emits `.elementor-72 .elementor-element.elementor-element-XXXX
     .elementor-heading-title { font-size:56px }` - specificity 0,3,0, which beat the
     0,2,1 selector used here before, so the clamp never applied and the heading stayed
     56px. !important is the fix; matching Elementor's generated specificity by hand is
     not maintainable. */
  .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(28px, 8.6vw, 44px) !important; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(26px, 8.0vw, 40px) !important; }
  .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(19px, 5.2vw, 28px) !important; }
}

/* Showcase IDX truncates its own labels with break-word; those are the only two
 * genuine mid-word splits left (COUNTY -> COUNT/Y). Scoped to sidx only. */
.sidx-info-title,
.sidx-info-value {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- ISSUE 3
 * Horizontal overflow at 390.
 *
 * (a) Showcase IDX. Nested container padding (.sidx-container 20px +
 *     .sidx-main-app-body 15px) squeezed the row, then .sidx-pagination -
 *     a flex row with the default min-width:auto - refused to shrink and
 *     ran to 409px. Let it wrap and allow it to shrink.
 *     React renders these client-side, so only layout properties are set here.
 */
@media (max-width: 767px) {
  .sidx-pagination {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    row-gap: 6px;
  }
  .sidx-pagination > * { min-width: 0; }

  .sidx-container { padding-left: 12px; padding-right: 12px; }
  .sidx-main-app-body { padding-left: 8px; padding-right: 8px; }

  /* IDX attribution/disclaimer lines are long unbreakable strings. */
  .sidx-main-app-body em,
  .sidx-main-app-body small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* (b) Footer. Kadence emits .site-footer-row-columns-N; the child theme's
 *     existing media query targets .site-footer-row-layout-equal, which is not
 *     the class actually rendered, so the 4-column grid never collapsed - each
 *     column was 63px wide and the email address ran to 522px.
 */
@media (max-width: 767px) {
  #colophon .site-footer-row.site-footer-row-columns-4,
  #colophon .site-footer-row.site-footer-row-columns-3,
  #colophon .site-footer-row.site-footer-row-columns-2 {
    grid-template-columns: 1fr !important;
  }
  #colophon .mcr-footer-list a,
  #colophon .mcr-footer-addr a {
    overflow-wrap: anywhere;
  }
  #colophon .mcr-footer-copy { text-align: left; }
}

/* (c) NOT a defect: .elementor-form-fields-wrapper carries margin:-5px as
 *     Elementor's gutter compensation, and each field carries a matching 5px
 *     padding. It measures 400px inside a 390px viewport but clips nothing and
 *     produces no horizontal scroll. Identical at 1440. Left alone deliberately.
 */

/* ---------------------------------------------------------------- ISSUE 2
 * Mobile sticky header. Enabled via the Kadence option `mobile_header_sticky`;
 * this only keeps it compact and above the Showcase IDX overlays.
 */
@media (max-width: 1024px) {
  #mobile-header .kadence-sticky-header.item-is-fixed { z-index: 1000; }
  #mobile-header .site-header-row { min-height: 0; }
}

/* ---------------------------------------------------------------- ISSUE 3 (cont.)
 * Listing cards were left-shifted with the right edge clipped: gutters measured
 * 70px left / 50px right at 390.
 *
 * Cause: .sidx-search-result-grid-item carries min-width:250px, and the grid is
 * grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Neither can shrink,
 * so the grid computed to 270px inside its 250px parent and overhung the right.
 * At 390 a single column is correct anyway. Scoped to sidx; layout properties only.
 */
@media (max-width: 767px) {
  .sidx-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
  .sidx-search-result-grid-item {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* The real culprit: .sidx-widget.sidx-hotsheet carries min-width:270px inside a
     250px parent. min-width always wins over max-width, so capping max-width did
     nothing - the whole subtree inherited 270px and overhung the right edge by 20px,
     giving 70px/50px gutters. Releasing the floor lets it size to its parent. */
  .sidx-widget,
  .sidx-widget.sidx-hotsheet,
  .sidx-search-results,
  .sidx-require-auth,
  .sidx-widget-wrapper {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Reclaim the doubled inner padding so cards use more of a 390px screen. */
  .sidx-container { padding-left: 0; padding-right: 0; }
}

/* ---------------------------------------------------------------- ISSUE 5b
 * Drawer menu.
 *
 * (a) "Buy" rendered at 12px against its siblings' 28px and read as a missing item.
 *     Because it has a submenu, Kadence wraps its <a> in <div class="drawer-nav-drop-wrap">,
 *     so the theme's `.mobile-navigation .menu > li > a` direct-child rule never matched
 *     it. Match the wrapped anchor too.
 * (b) At 28px each row was 83px tall; 9 items needed 790px against a 664px viewport, so
 *     Journal and Contact sat below the fold. 17px with tighter padding brings a row to
 *     ~56px, fitting all 9 with room to spare, and no item wraps.
 */
.mobile-navigation .menu > li > a,
.mobile-navigation .menu > li > .drawer-nav-drop-wrap > a {
  font-size: 17px;
  line-height: 1.35;
  padding-top: 14px;
  padding-bottom: 14px;
  white-space: nowrap;
}
.mobile-navigation .menu > li > .drawer-nav-drop-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-navigation .menu .sub-menu > li > a {
  font-size: 15px;
  line-height: 1.35;
  padding-top: 10px;
  padding-bottom: 10px;
}