/* ==========================================================================
   Honley Dental — post-migration enhancements
   Loaded after the Webflow stylesheet. Nothing here is generated by Webflow,
   so it is safe to edit. Three concerns, in order:
     1. sticky navigation
     2. mobile "Enquire" button in the header
     3. testimonial video modals on the homepage
   ========================================================================== */


/* 1. -------------------------------------------------- sticky navigation --
   The nav was position:absolute at the top of the page wrapper, so it scrolled
   away. It was already out of normal flow, so switching to fixed changes no
   layout — it just keeps it on screen.                                      */

.nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

/* Over the dark hero the nav is transparent by design. Once scrolled it can sit
   over light sections, where light nav text would be unreadable — so fade in a
   solid backdrop. Matches the dark tone the nav already uses on small screens. */
.nav-main {
  transition: background-color .3s ease, -webkit-backdrop-filter .3s ease,
              backdrop-filter .3s ease;
}

.nav.hd-scrolled .nav-main {
  background-color: rgba(27, 32, 38, .94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}


/* 2. ------------------------------------------- mobile "Enquire" in header --
   Below 992px Webflow hides .nav-main-links, which is where the desktop
   Enquire button lives, leaving dead space between the logo and the menu
   button. This puts a full-height Enquire back in that gap.                  */

.hd-mobile-enquire {
  display: none;
}

@media screen and (max-width: 991px) {
  /* the right-hand wrapper is empty at this width — reclaim its space */
  .nav-main > .nav-main-wrapper:not(.is-on-left) {
    display: none !important;
  }

  .hd-mobile-enquire {
    z-index: 10;
    flex: none;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 4vw;
    display: flex;

    background-color: var(--brown-color-5);
    color: var(--brown-color-12);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    text-indent: .1em;
    font-size: 1em;
    font-weight: 500;
    line-height: 1em;
    white-space: nowrap;
    transition: background-color .2s;
  }

  .hd-mobile-enquire:hover,
  .hd-mobile-enquire:focus-visible {
    background-color: var(--brown-color-3);
    color: var(--brown-color-12);
  }
}

/* Small phones have no spare room in the bar — the contact icons, logo and menu
   button already fill it. Let the fixed widths shrink so Enquire fits without
   pushing the menu button off-screen. */
@media screen and (max-width: 479px) {
  .hd-mobile-enquire {
    padding: 0 2.5vw;
    font-size: .72em;
    letter-spacing: .04em;
    text-indent: .04em;
  }

  .nav-main > .nav-main-wrapper.is-on-left {
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav-contact {
    grid-column-gap: 1vw !important;
    min-width: 0 !important;
    padding-left: 2vw !important;
    padding-right: 0 !important;
  }

  .nav-contact-button {
    padding-left: 1.5vw !important;
    padding-right: 1.5vw !important;
  }

  .nav-brand {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .nav-menu-button {
    min-width: 0 !important;
    flex: 0 0 auto;
    padding-left: 3.5vw !important;
    padding-right: 3.5vw !important;
  }
}


/* 3. ----------------------------------------------- testimonial video modal --
   Original behaviour: .pop-up-3 carried padding-top:220px, .video-container-02
   capped at max-height:700px with overflow:hidden, and the Vimeo iframe kept
   its height="1920" attribute (only width was set to 100%). A 9:16 video was
   therefore rendered ~1920px tall inside a 700px box — cropped, overflowing,
   and pushing the page into scroll. These rules size the modal to the viewport
   and letterbox the video correctly.

   NOTE: `display` is deliberately never overridden here — Webflow's own
   interaction toggles it, and forcing it would break open/close.             */

.pop-up-2,
.pop-up-3,
.pop-up-4 {
  /* consumed by the video-box sizing below */
  --hd-modal-h: 100vh;
  --hd-modal-pad-y: 48px;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  background-color: rgba(18, 18, 18, .93) !important;
  /* above .fullscreen-menu (999999) and everything else on the page */
  z-index: 2147483000 !important;
}

/* dvh avoids the mobile browser-chrome resize jump */
@supports (height: 100dvh) {
  .pop-up-2,
  .pop-up-3,
  .pop-up-4 {
    --hd-modal-h: 100dvh;
    height: 100dvh !important;
  }
}

.pop-up-2 > .w-container,
.pop-up-3 > .w-container,
.pop-up-4 > .w-container {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Portrait 1080x1920 source: fill the available height, clamp on narrow screens. */
.pop-up-2 .video-container-02,
.pop-up-3 .video-container-02,
.pop-up-4 .video-container-02 {
  position: relative !important;
  inset: auto !important;
  /* Fit a 9:16 box inside the viewport on BOTH axes. `height:100%` alone breaks
     on narrow screens (width clamps but height doesn't, so Vimeo letterboxes);
     `width:100%` alone breaks on wide ones. Taking the smaller of the two
     candidate widths gives an exact 9:16 box at every size. */
  width: min(100%, calc((var(--hd-modal-h) - var(--hd-modal-pad-y)) * 9 / 16)) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 9 / 16;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.pop-up-2 .video-2,
.pop-up-2 .video-2-copy,
.pop-up-3 .video-2,
.pop-up-3 .video-2-copy,
.pop-up-4 .video-2,
.pop-up-4 .video-2-copy {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
}

/* The embed ships an inline `iframe { width:100% }` with no height rule, and the
   element keeps height="1920" — both are overridden here. */
.pop-up-2 iframe,
.pop-up-3 iframe,
.pop-up-4 iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  border-radius: 14px;
  background: #000;
}

/* Close control: consistent hit area, always above the video. */
.pop-up-2 .closevideo,
.pop-up-3 .closevideo,
.pop-up-4 .closevideo {
  position: absolute !important;
  inset: 10px 10px auto auto !important;
  order: 0 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 5 !important;
}

.pop-up-2 .closevideo img,
.pop-up-3 .closevideo img,
.pop-up-4 .closevideo img {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  display: block;
}

@media screen and (max-width: 479px) {
  .pop-up-2,
  .pop-up-3,
  .pop-up-4 {
    --hd-modal-pad-y: 28px;
    padding: 14px 10px !important;
  }
}

/* Background scroll lock while a modal is open (iOS-safe). */
html.hd-modal-open,
html.hd-modal-open body {
  overflow: hidden !important;
}

html.hd-modal-open body {
  position: fixed;
  width: 100%;
}