/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/*
 * Powers 2026 — primary navigation (Figma: Powers-Website-2026 → Home → Navigation Bar)
 * Spec: 1309×90 contained pill on header#top, cornerRadius 16, ~42px top inset,
 *       logo 176×58, Calibri 22/700 #000 links, 42px item gap, 24px search.
 *
 * With “force transparent navigation” enabled, Salient paints #header-outer
 * transparent via header-perma-transparent.css (beats our outer-shell rules).
 * The visible pill is therefore painted on inner header#top — outer stays clear
 * so the hero shows through around the pill; #header-space stays clear too.
 */

/* Outer shell: positioning only — always transparent around the pill */
html body[data-bg-header="true"].material #header-outer[data-permanent-transparent="1"].transparent,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent,
html body.material #header-outer.transparent,
html body #header-outer.transparent,
html body.material #header-outer,
html body #header-outer,
html body #header-outer:not(.transparent),
html body[data-bg-header="true"] #header-outer,
html body[data-bg-header="false"] #header-outer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-radius: 0 !important;
  width: min(1309px, calc(100vw - 130px)) !important;
  max-width: 1309px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(42px) !important;
  overflow: visible !important;
  opacity: 1 !important;
}

/* Visible pill — inner <header id="top"> */
html body[data-bg-header="true"].material #header-outer[data-permanent-transparent="1"].transparent #top,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent #top,
html body.material #header-outer.transparent #top,
html body #header-outer.transparent #top,
html body #header-outer #top,
#header-outer #top {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 4px 6px rgba(9, 41, 70, 0.06),
    0 12px 28px rgba(9, 41, 70, 0.12) !important;
  -webkit-box-shadow:
    0 4px 6px rgba(9, 41, 70, 0.06),
    0 12px 28px rgba(9, 41, 70, 0.12) !important;
  overflow: visible !important;
}

html body.material #header-outer.scrolled-down,
html body #header-outer.scrolled-down {
  transform: translateX(-50%) translateY(42px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #header-outer.scrolled-down #top,
#header-outer.scrolled-down #top {
  box-shadow:
    0 4px 6px rgba(9, 41, 70, 0.06),
    0 12px 28px rgba(9, 41, 70, 0.12) !important;
}

/* No white band above hero when transparent nav is forced */
#header-space,
body.home #header-space,
body[data-bg-header="true"] #header-space {
  background: transparent !important;
  background-color: transparent !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header-outer,
#header-outer #top,
#header-outer #top .container,
#header-outer #top .row {
  height: 90px !important;
  min-height: 90px !important;
  overflow: visible !important;
}

/* Flex row: logo | nav | search */
#header-outer[data-format="centered-menu"] #top .row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
}

#header-outer[data-format="centered-menu"] #top .span_3,
#header-outer[data-format="centered-menu"] #top .col.span_3 {
  position: relative !important;
  left: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  z-index: 2 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 100% !important;
}

#header-outer[data-format="centered-menu"] #top .span_9,
#header-outer[data-format="centered-menu"] #top .col.span_9 {
  position: relative !important;
  float: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  z-index: 2 !important;
  overflow: visible !important;
}

#header-outer[data-format="centered-menu"] #top .span_9 nav,
#header-outer #top nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  text-align: right !important;
  overflow: visible !important;
}

#header-outer[data-format="centered-menu"] #top nav > .sf-menu > li,
#header-outer #top nav > .sf-menu > li {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

#header-outer #top nav .sub-menu,
#header-outer #top nav ul.sub-menu {
  z-index: 10000 !important;
  overflow: visible !important;
}

#header-outer[data-format="centered-menu"] #top .span_9 .sf-menu:not(.buttons),
#header-outer[data-format="centered-menu"] #top nav > .sf-menu:not(.buttons) {
  overflow: visible !important;
}

#header-outer #top nav > .sf-menu > li > a,
#header-outer #top nav > ul > li > a,
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"] #top nav > ul > li > a,
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent #top nav > ul > li > a {
  color: #000000 !important;
  font-family: Calibri, "Segoe UI", Candara, Roboto, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  padding: 0 !important;
}

#header-outer #top nav > .sf-menu > li > a:hover,
#header-outer #top nav > .sf-menu > li > a:focus {
  color: #092946 !important;
  opacity: 1 !important;
}

/* Remove animated underline hover effect */
#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a:after,
#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a:before {
  display: none !important;
}

/* Figma top-level nav has no dropdown carets */
#header-outer #top nav > .sf-menu > li > a .sf-sub-indicator {
  display: none !important;
}

/* Logo — Figma 176×58, vertically centered in the 90px band */
#header-outer #logo {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 0 !important;
  height: auto !important;
}

#header-outer #logo img.stnd.default-logo,
#header-outer #logo img.default-logo,
/* Salient scroll swap hides img:not(.dark-version) on .dark-slide — keep full-color mark */
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent #logo img.stnd.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent #logo img.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.dark-slide #logo img.stnd.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.dark-slide #logo img.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.scrolled-down #logo img.stnd.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.scrolled-down #logo img.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent:not(.dark-slide) #logo img.stnd.default-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent:not(.dark-slide) #logo img.default-logo {
  display: block !important;
  visibility: visible !important;
  height: 58px !important;
  width: auto !important;
  max-width: 176px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
}

#header-outer #logo img.starting-logo,
#header-outer #logo img.dark-version,
#header-outer.scrolled-down #logo img.starting-logo,
#header-outer.scrolled-down #logo img.dark-version,
#header-outer.dark-slide #logo img.starting-logo,
#header-outer.dark-slide #logo img.dark-version,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent #logo img.starting-logo,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent #logo img.dark-version,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.dark-slide #logo img.dark-version,
html body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent:not(.dark-slide) #logo img.dark-version {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#header-outer #logo .logo-spacing,
#header-outer #top .logo-spacing {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Search icon */
#header-outer #top nav > .buttons,
#header-outer #top nav > ul.buttons {
  position: relative !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  z-index: 2 !important;
}

#header-outer #top nav > .buttons #search-btn,
#header-outer #top nav > ul.buttons #search-btn {
  float: none !important;
  margin: 0 !important;
}

#header-outer #top nav ul a .icon-salient-search,
#header-outer #search-btn a .icon-salient-search,
body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent #top nav ul a .icon-salient-search {
  color: #000000 !important;
  opacity: 1 !important;
  font-size: 24px !important;
}

#header-outer #top nav ul a:hover .icon-salient-search {
  color: #092946 !important;
  opacity: 0.85 !important;
}

/* Inner gutters — Figma 28px padding inside the pill */
#header-outer #top .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Space between logo and first nav item (~68px in Figma at 1440+) */
#header-outer[data-format="centered-menu"] #top .span_9 .sf-menu:not(.buttons),
#header-outer[data-format="centered-menu"] #top nav > .sf-menu:not(.buttons) {
  margin-left: clamp(32px, 4.5vw, 68px) !important;
}

@media only screen and (min-width: 1000px) {
  #header-outer #top .slide-out-widget-area-toggle.mobile-icon,
  #header-outer #top .mobile-search {
    display: none !important;
  }
}

@media only screen and (max-width: 999px) {
  html body #header-outer#header-outer,
  html body.material #header-outer#header-outer,
  html body #header-outer#header-outer.scrolled-down {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    transform: translateX(-50%) translateY(12px) !important;
  }

  html body #header-outer #top,
  #header-outer #top {
    border-radius: 12px !important;
  }

  #header-outer#header-outer #logo#logo img.starting-logo {
    display: none !important;
  }

  .slide-out-widget-area-toggle.mobile-icon .lines {
    background-color: #020202 !important;
  }

  #header-outer#header-outer[data-format="centered-menu"] #top .span_9 nav,
  #header-outer#header-outer #top nav {
    display: none !important;
  }

  #page-header-bg .row {
    display: flex !important;
    align-items: flex-end !important;
  }

  #page-header-bg .span_6 {
    transform: none !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }

  /* Single blog posts use the real post title (variable length, sometimes with category tags above it) as this heading, unlike the fixed short tagline on the News archive above. Bottom-anchoring can push a long title back up into the fixed nav pill, so single posts get a safe top-anchored layout instead: a guaranteed clearance below the nav, with the hero height allowed to grow to fit whatever content needs. */
  body.single-post #page-header-bg#page-header-bg {
    height: auto !important;
    min-height: 420px !important;
  }

  body.single-post #page-header-bg#page-header-bg .row {
    display: block !important;
  }

  body.single-post #page-header-bg#page-header-bg .span_6.span_6 {
    height: auto !important;
    padding-top: 130px !important;
    padding-bottom: 40px !important;
  }

  /* Page-builder inline style forces height:700px on mobile for every #page-header-bg row (e.g. News & Events); that leaves a large empty gap below the heading now that it is not vertically centered. Shrink to a proportionate mobile height, beating the inline !important via ID-doubled specificity. */
  #page-header-bg#page-header-bg {
    height: 420px !important;
  }

  #header-outer #top nav > .sf-menu:not(.buttons) {
    gap: 10px !important;
    margin-left: 0 !important;
  }

  #header-outer #top nav > .sf-menu > li > a {
    font-size: 18px !important;
  }

}

/* The comment form textarea/inputs inherit a site-wide "textarea { border: 2px solid transparent }" style (likely meant for use on a dark/colored background elsewhere) which makes the Leave a Reply box invisible against this white page. Give the comment form its own visible border, matching the gray already used on the Contact Us form fields. */
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  border: 1px solid rgb(211, 211, 211) !important;
}


/* Events & Webinars (The Events Calendar plugin list view) starts its content right at the top of the page. The fixed nav pill (#header-outer, position:fixed sitewide, not just mobile) overlays roughly its own height + top inset above whatever is in normal flow underneath -- on mobile that is ~90px pill height + ~12px inset, on desktop ~90px pill height + ~42px inset (see the file header comment for the Figma spec) -- so the events widget needs the same clearance push on both, not only inside the mobile media query. */
.tribe-events-view {
  padding-top: 90px !important;
}


/* Several interior pages (Practice Areas, About Us, and likely others) build their hero banner as a plain WPBakery full-width row ("first-section") rather than the theme's page-header component, with a responsive padding-top sized as a fraction of viewport width (25vw). That formula alone is enough to clear the fixed nav pill on wider mobile/tablet widths, but on narrow phones 25vw is smaller than the pill\u2019s own (roughly fixed) height + inset, so the heading still starts underneath it. max() keeps the existing responsive design where it already works and only raises it to a safe floor where it does not. */
@media only screen and (max-width: 999px) {
  .full-width-section.first-section {
    padding-top: max(calc(100vw * 0.25), 160px) !important;
  }
}


/* Privacy Policy and Terms of Use are plain content pages with no hero component at all, so their body copy starts flush at the very top of the page (no responsive spacing to begin with, unlike the hero pages above), and the fixed nav pill covers a good chunk of the first paragraph on both mobile and desktop alike. Scoped to just these two pages (by body class / page id) so it does not add extra spacing to pages that already have their own hero clearance fix. */
body.privacy-policy .container.main-content,
body.page-id-67951 .container.main-content {
  padding-top: 120px !important;
}

/* Mobile off-canvas menu: toggle arrow that expands a parent item's
   submenu, added next to the link so the link itself can navigate
   normally (see the WPCode JS snippet "Mobile Menu: Link Tap Navigates
   to Parent Page" for the click-handling logic). */
#slide-out-widget-area li.menu-item-has-children {
  position: relative;
}

#slide-out-widget-area li.menu-item-has-children > a {
  display: block;
  padding-right: 54px;
}

#slide-out-widget-area .mobile-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#slide-out-widget-area .mobile-submenu-toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  display: block;
}

/* WPBakery rows built with a custom desktop "column gap" (row-level
   data-column-margin, e.g. Practice Areas' image/text teaser rows) leak
   that same gap into mobile as an oversized margin-bottom on the first
   stacked column. Salient's own responsive CSS already corrects this for
   reverse_columns_column_phone rows (image last in the DOM); this covers
   the normal (non-reversed) rows, whose image column is the first DOM
   child, at the same breakpoint the buggy rule applies. */
@media only screen and (max-width: 999px) {
  .wpb_row[data-column-margin]:not([data-column-margin="none"]):not(.reverse_columns_column_phone) > .row_col_wrap_12 > .wpb_column:first-of-type {
    margin-bottom: 25px !important;
  }
}