/* ==========================================================================
   Shared site extras: header "Areas" menu, floating contact buttons and
   the sticky mobile call bar. Kept in one file so the phone number, the
   area list and their styling don't have to be edited across 39 pages.
   ========================================================================== */

/* ---- Page-level overflow guard ----
   The AOS fade-right/fade-left sections start translated outside the
   viewport, which lets the page slide ~80px sideways on phones. clip
   stops that without creating a scroll container, so the fixed call bar
   keeps positioning against the viewport (overflow: hidden can break it). */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

/* ---- Header: Areas mega menu ---- */

.new-header .nav-wrap .areas-dropdown {
  position: relative;
}

.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 10px;
  background: #0b0525;
  border-top: 3px solid #ba8e23;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 14px 16px;
  z-index: 100;
}

/* Invisible bridge so the menu survives the 12px gap on the way down. */
.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

.new-header .nav-wrap .areas-dropdown:hover .dropdown-menu-areas,
.new-header .nav-wrap .areas-dropdown.open .dropdown-menu-areas {
  display: grid;
}

.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas a {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 5px;
  transition: background 0.25s ease, color 0.25s ease;
}

.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas a:hover,
.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas a.active {
  color: #ba8e23;
  background: rgba(186, 142, 35, 0.1);
}

/* The underline animation is for top-level items only. */
.new-header .nav-wrap .areas-dropdown .dropdown-menu-areas a::after {
  display: none;
}

@media (max-width: 900px) {
  /* Hover can't be tapped, so the menu opens on click and sits inline. */
  .new-header .nav-wrap .areas-dropdown {
    width: 100%;
    text-align: center;
  }

  .new-header .nav-wrap .areas-dropdown:hover .dropdown-menu-areas {
    display: none;
  }

  .new-header .nav-wrap .areas-dropdown.open .dropdown-menu-areas {
    display: grid;
  }

  .new-header .nav-wrap .areas-dropdown .dropdown-menu-areas {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 12px;
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border-top: 2px solid #ba8e23;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
  }

  .new-header .nav-wrap .areas-dropdown .dropdown-menu-areas a {
    text-align: left;
    font-size: 13.5px;
    padding: 9px 8px;
  }
}

/* ---- Floating contact buttons ---- */

.contact-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 26px;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-float a:hover,
.contact-float a:focus {
  transform: scale(1.1);
  color: #ffffff;
}

.contact-float .float-call {
  background: #ba8e23;
  box-shadow: 0 4px 20px rgba(186, 142, 35, 0.5);
}

.contact-float .float-call:hover,
.contact-float .float-call:focus {
  box-shadow: 0 6px 30px rgba(186, 142, 35, 0.7);
}

.contact-float .float-wa {
  background: #25d366;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
}

.contact-float .float-wa:hover,
.contact-float .float-wa:focus {
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.7);
}

/* ---- Sticky mobile call bar ---- */

.mobile-call-bar {
  display: none;
}

@media (max-width: 768px) {
  /* The bar replaces the floating buttons on small screens. */
  .contact-float {
    display: none;
  }

  .mobile-call-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    background: #0b0525;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-call-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
  }

  .mobile-call-bar a i {
    font-size: 17px;
  }

  .mobile-call-bar .bar-call {
    background: #ba8e23;
  }

  .mobile-call-bar .bar-wa {
    background: #25d366;
  }

  .mobile-call-bar a:active {
    filter: brightness(0.92);
  }

  /* Stop the bar covering the end of the page. Matches the bar's own height. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}