/*
 * Deliberate deviation from the original site (approved): split "text + photo" rows.
 *
 * Originally the photo column was an empty column whose height came from padding that scaled with the
 * viewport width (padding-N-percent) copied from the text column, so the photo's height and crop jumped
 * around as the window resized. Here the row gets a sensible height range, the photo simply fills its
 * half (background-size: cover), and when stacked it keeps a fixed aspect ratio.
 */
.vc_row:has(> .col > .wpb_column[data-bg-cover="true"]) > .col > .wpb_column[data-using-bg="true"]:not([data-bg-cover="true"]) {
  /* text column: padding scales gently instead of 10% of the width on every side */
  padding: clamp(56px, 6vw, 104px) clamp(32px, 7vw, 120px) !important;
}
.vc_row:has(> .col > .wpb_column[data-bg-cover="true"]) > .col > .wpb_column[data-bg-cover="true"] {
  padding: 0 !important;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width: 1001px) {
  .vc_row:has(> .col > .wpb_column[data-bg-cover="true"]) > .col > .wpb_column[data-bg-cover="true"] {
    min-height: clamp(380px, 40vw, 620px);
  }
}
@media only screen and (max-width: 1000px) {
  .vc_row:has(> .col > .wpb_column[data-bg-cover="true"]) > .col > .wpb_column[data-using-bg="true"]:not([data-bg-cover="true"]) {
    padding: 56px 8% !important;
  }
  .vc_row:has(> .col > .wpb_column[data-bg-cover="true"]) > .col > .wpb_column[data-bg-cover="true"] {
    aspect-ratio: 4 / 3;
    max-height: 480px;
    width: 100%;
  }
}

/*
 * Desktop dropdowns: open/close with pure CSS instead of Superfish's hover-intent timers + show/hide
 * animation. The JS version was timing-sensitive (Safari especially): a menu that was mid-fade or
 * closing when the click landed swallowed it. Here the menu opens instantly on hover/focus and closes
 * 350ms after the pointer leaves, so a diagonal mouse path to a sub-item doesn't drop it.
 */
header#top nav ul.sf-menu ul.sub-menu {
  display: block !important;
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.35s;
}
header#top nav ul.sf-menu li:hover > ul.sub-menu,
header#top nav ul.sf-menu li:focus-within > ul.sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Nav parent items are href-less anchors (see components/Header.tsx); keep the pointer cursor. */
#header-outer nav .sf-menu a:not([href]),
#mobile-menu a:not([href]) {
  cursor: pointer;
}

/*
 * Home "Our Specialties" cards: the gap between the two rows of cards used to be 6% of the viewport
 * width (padding on the section), much larger than the 2.1% gutter between the cards side by side.
 * Make the vertical gap equal to the horizontal gutter. (A percentage margin is relative to the
 * container's width, which is exactly how the horizontal gutter is computed.)
 */
@media only screen and (min-width: 1001px) {
  .wpb_row:has(.specialties-row-1) { padding-bottom: 0 !important; }
  /* on the columns, so the % resolves against the same box as the horizontal gutter (exactly equal) */
  .specialties-row-1 .wpb_column { margin-bottom: 2.1% !important; }
}