/* ============================================================
   custom-fixes.css
   Small, hand-written additions layered on top of the recovered
   site.css. Everything in site.css is real CSS pulled from the
   site's own pages; this file only covers the couple of pieces
   that could NOT be recovered because they depended on the
   vendor's original JavaScript bundle, which no longer exists
   anywhere we have access to.

   Specifically:
   1. Mobile nav open/close. The original markup clones the menu
      into an empty <div class="nav-optimal"></div> via JS for
      small screens. We don't have that JS, so instead we just
      show/hide the existing .nav-full menu directly on mobile,
      toggled by a "js-menu-open" class that site.js adds to
      <nav> when the hamburger icon is tapped. Functionally
      equivalent, just a simpler implementation.
   ============================================================ */

@media only screen and (max-width: 1023px) {
  header nav .nav-full {
    display: none !important;
    float: none;
    width: 100%;
    padding: 0;
  }

  header nav.js-menu-open .nav-full {
    display: block !important;
  }

  header nav.js-menu-open .nav-full > ul {
    float: none;
    width: 100%;
  }

  header nav.js-menu-open .nav-full > ul > li {
    float: none;
    width: 100%;
  }

  header nav .nav-toggle {
    display: block !important;
  }

  /* On mobile, the Services submenu should expand in place on tap
     rather than relying on the :hover-only desktop behavior. */
  header nav .nav-full ul li.drop .dropdownContain {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    display: none;
  }

  header nav .nav-full ul li.drop .dropdownContain.js-open {
    display: block;
  }
}

@media only screen and (min-width: 1024px) {
  header nav .nav-toggle {
    display: none !important;
  }

  header nav .nav-full {
    display: block !important;
  }
}

/* ============================================================
   Fix for the doctor/practice hero photo covering the bio text.

   Root cause: the recovered CSS gives the hero photo div
   (.photo-layout.hero-media) "position:absolute; height:100%",
   which is correct -- but section.doctor / section.practice
   (its parent) is never given a "position" of its own anywhere
   in the recovered CSS. An absolutely positioned element with no
   positioned ancestor sizes itself against the page's initial
   containing block (effectively the browser viewport) instead of
   its intended parent. So "height:100%" was computing as 100% of
   the *browser window's height*, not 100% of the 760px hero
   section -- which is also why the bug got worse on a taller
   window and seemed to "fix itself" on a short one; that was a
   coincidence of viewport height, not an actual fix.

   The fix: give the section itself a positioning context so the
   photo div anchors to it correctly.
   ============================================================ */
section.doctor,
section.practice {
  position: relative;
  overflow: hidden;
}