/* a11y.css — raise muted secondary-text contrast to WCAG AA on light backgrounds.
   Deliberately unscoped-to-dark: footer/hero white text set by more-specific theme
   rules still wins. Text color only; no layout/animation impact. */
.container-wrap .wpb_text_column p,
.container-wrap .wpb_wrapper p,
.iwt-text p, .iwt-text,
.container-wrap li,
.container-wrap .nectar-post-grid-item p { color:#455468; }

/* Mobile + tablet (<=999px, the theme's mobile breakpoint).
   Root cause of the squished/collapsed layout: this static export applies
   Salient's DESKTOP side-paddings at every width (main column carries
   left/right_padding_desktop_220px = 440px; other rows carry 210/197/182px)
   with no mobile reset, so on a ~370px screen the content box collapsed to 0px.
   Fix = (1) tame those side-paddings on small screens, (2) stack the columns —
   the theme's own span-based and vc_span stacking rules never matched because
   this export renames the columns to the vc_col-sm naming. Verified at 370px. */
@media only screen and (max-width: 999px) {
  /* 1) neutralise oversized desktop side-padding (keep top/bottom spacing) */
  #ajax-content-wrap [class*="_padding_desktop_"] > .vc_column-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #ajax-content-wrap .vc_row[class*="_padding_"] .row_col_wrap_12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 2) stack multi-column WPBakery rows (photo+bio, service cards, etc.) */
  #ajax-content-wrap [class*="vc_col-sm-"]:not(.vc_col-sm-12) {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Mobile off-canvas menu was unclickable: the slide-out nav panel
   (#slide-out-widget-area, z-index 5) sat UNDER the content wrapper
   (.ocm-effect-wrap, z-index 10), so its nav links were covered and taps hit
   the overlay instead. Lift the panel above the content wrapper while the menu
   is open.

   Gated on #slide-out-widget-area.open, NOT body.material-ocm-open. Salient
   removes .open the instant closing begins, but keeps body.material-ocm-open
   for a further 900ms (setTimeout in the close routine). Keying on the body
   class left the panel at z-index 100 for that whole window while
   .ocm-effect-wrap had already dropped back to 10, so the nav items painted
   over the page content for the entire close animation and then snapped
   correct. */
#slide-out-widget-area.open { z-index: 100 !important; }

/* Contrast (WCAG AA on white). Theme ships nav links at #7b7b7b (~3.9:1) and
   icon-with-text descriptions at #9c9c9c (~2.8:1) — both fail. Darken to pass. */
#header-outer #top .sf-menu > li > a .menu-title-text { color: #545454 !important; }
.container-wrap .iwithtext p,
.container-wrap .iwithtext .iwt-text,
.container-wrap .iwithtext .iwt-text p { color: #455468 !important; }

/* Off-canvas CLOSE control (the red X) was untappable on touch devices.
   Salient relocates it out of the panel to body > .slide_out_area_close, where
   it keeps z-index:8 while .ocm-effect-wrap sits at z-index:10 - so the wrapper
   captures the tap. The X still PAINTS on top (it is later in paint order), which
   is why it looks fine in a screenshot but does nothing. The earlier
   #slide-out-widget-area z-index fix could not reach it, because by then the
   control is no longer inside that panel. Verified at 390px: control computes
   z-index 8 / position absolute, vs 10000 / fixed at desktop widths.
   Note the toggle closes fine via a click-only handler, so click delivery on iOS
   is not the issue - reachability is.

   Gated on the control's OWN .material-ocm-open class, not the body's. Salient
   strips it from body > .slide_out_area_close the moment closing starts, while
   the body keeps its copy for another 900ms - so keying on the body left the X
   painted over the page for the whole close animation. It gains the class at
   +350ms on open, the same moment hide_until_rendered is removed and the X
   becomes visible, so elevation and visibility start together and there is no
   window where the X is visible but not tappable. */
@media only screen and (max-width: 999px) {
  .slide_out_area_close.material-ocm-open { z-index: 10001 !important; }

  /* The visible target is only the 20x20 .close-wrap span (the <a> itself
     computes 0x0 because its children are absolutely positioned - normal, events
     still bubble). Expand the hit area to ~44x44 without moving the painted X:
     the .close-line spans are absolutely positioned inside .close-wrap, so a
     transparent ::after overlay changes nothing visually. */
  .slide_out_area_close.material-ocm-open .close-wrap::after {
    content: "";
    position: absolute;
    top: -12px; right: -12px; bottom: -12px; left: -12px;
  }
}

/* Team cards resized when touched. .inner-meet:hover jumps padding 10px -> 50px
   (salient-child/style.css), and touch devices latch :hover on tap until you tap
   elsewhere, so a transient desktop effect became a stuck one. Measured at 390px:
   image 297px -> 223px (-25%), content 319px -> 239px, card height +576px.
   Neutralise only on touch; desktop hover is unchanged. */
@media (hover: none), (pointer: coarse) {
  .inner-meet:hover { padding: 10px; border-radius: 5px; }
}