/* SABRE — theme conflict guards.
   Loaded LAST so it wins against the Proactive child theme's globals.
   Each rule here exists because a specific theme rule was reaching into the
   SABRE page bodies. Scoped to sabre- components only; the theme keeps its
   behavior everywhere else (listings, Realty NA, legacy pages). */

/* 1. Child theme has  p { white-space: pre-wrap }  which makes every paragraph
      preserve source newlines and double spaces. The SABRE page bodies are
      pretty-printed HTML, so that turns indentation into visible line breaks
      and ragged gaps. */
[class*="sabre-"] p,
[class*="sabre-"] li,
[class*="sabre-"] span,
[class*="sabre-"] div {
  white-space: normal;
}

/* 2. Child theme has  .elementor-widget a:focus { border: none !important }
      which strips the border-bottom that the SABRE link-underline treatment is
      built from, so CTAs lost their underline the moment they were clicked.

      Restore ONLY the bottom edge. An earlier version of this file used
      `border-style: solid !important`, which also revealed the other three
      sides at their default `medium` (3px) width — a stray box around focused
      nav links, coloured by currentColor. Do not reintroduce that. */
.elementor-widget [class*="sabre-"] a:focus,
.elementor-widget [class*="sabre-"] a:active,
[class*="sabre-"] a:focus,
[class*="sabre-"] a:active {
  border-bottom-style: solid;
}

/* Keyboard focus only. A mouse click must never draw a ring: the theme's
   blanket `outline: none !important` is a genuine accessibility problem, but
   the fix belongs on :focus-visible, not :focus. */
[class*="sabre-"] a:focus:not(:focus-visible),
[class*="sabre-"] button:focus:not(:focus-visible) {
  outline: none !important;
}
[class*="sabre-"] a:focus-visible,
[class*="sabre-"] button:focus-visible,
[class*="sabre-"] input:focus-visible,
[class*="sabre-"] textarea:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* 3. Child theme's  nav ul li a::after  injects a 2px lime underline on any nav
      link. The SABRE header nav uses bare <a>, not ul/li, so it is not hit
      today, but a switch to an Elementor Nav Menu widget would inherit it. */
.sabre-hdr__nav ul li a::after,
.sabre-hdr__panel ul li a::after {
  content: none;
}

/* 3b. `position: sticky` is silently broken by ANY ancestor with a non-visible
      overflow: that ancestor becomes the scrollport, so the card sticks to a
      box the reader is not scrolling. Elementor containers and several themes
      set `overflow: hidden` on wrappers.

      Confirmed on dev.sabre.life: one clipping ancestor above the card stacks.
      `!important` is warranted here because the theme/Elementor rules we are
      overriding are themselves often `!important` or higher-specificity, and a
      silent failure is worse than the (nil) cost of not clipping these
      wrappers. Scoped with :has() so only wrappers holding SABRE content are
      touched; everything else keeps the theme's behavior.

      If the stacks still fail, run the console probe in the README and add the
      reported class name to this list. */
.elementor-widget-html:has([class*="sabre-"]),
.elementor-widget-container:has([class*="sabre-"]),
.elementor-element:has([class*="sabre-"]),
.elementor-section:has([class*="sabre-"]),
.elementor-column:has([class*="sabre-"]),
.elementor-column-wrap:has([class*="sabre-"]),
.elementor-widget-wrap:has([class*="sabre-"]),
.e-con:has([class*="sabre-"]),
.e-con-inner:has([class*="sabre-"]),
.e-parent:has([class*="sabre-"]),
.e-child:has([class*="sabre-"]),
.site-main:has([class*="sabre-"]),
.site-content:has([class*="sabre-"]),
main:has([class*="sabre-"]),
article:has([class*="sabre-"]),
.entry-content:has([class*="sabre-"]),
.page-content:has([class*="sabre-"]) {
  overflow: visible !important;
}

/* Belt and braces for browsers without :has() — the two wrappers that always
   sit directly around an HTML widget's content. */
.elementor-widget-html > .elementor-widget-container { overflow: visible; }

/* 4. Elementor container row-gap override (.e-con.e-flex > .e-con-inner) adds
      7px between the SABRE sections, which breaks the flush section stacking. */
.e-con.e-flex > .e-con-inner > .elementor-widget-html {
  row-gap: 0;
}
[class*="sabre-"] { --align-content: initial; }