/*--------------------------------------------------------------
1) Hide GP default nav on mobile/tablet
--------------------------------------------------------------*/
@media (max-width: 1024px) {
  .mobile-menu-control-wrapper,
  .main-navigation,
  .main-navigation .inside-navigation {
    display: none !important;
  }
}

/*--------------------------------------------------------------
2) Container for our custom controls
--------------------------------------------------------------*/
#custom-mobile-menu {
  position: relative;
  z-index: 1000;
}

/*--------------------------------------------------------------
3) “Schedule a Call” pill (hidden on desktop, below 450px)
--------------------------------------------------------------*/
.schedule-button {
  display: none;
}
@media (max-width: 1024px) {
  #custom-mobile-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 5px;
    right: 20px;
  }
  .schedule-button {
    display: inline-flex;
    background-color: #26567E;
    color: #fff;
    border-radius: 50px;
    padding: 16px 25px;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 1001;
  }
}
@media (max-width: 450px) {
  .schedule-button {
    display: none !important;
  }
}

/*--------------------------------------------------------------
4) Hamburger toggle button (hidden on desktop)
--------------------------------------------------------------*/
#menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 2000;
}
@media (max-width: 1024px) {
  #menu-toggle {
    display: block;
  }
}

/*--------------------------------------------------------------
Off-canvas reveal via clip-path polygon
--------------------------------------------------------------*/
#mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  padding: 150px 25px 25px;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  visibility: hidden;
  transition:
    clip-path 0.5s cubic-bezier(0.3, 0, 0.7, 1),
    visibility 0s ease 0.5s;
  z-index: 1001;
}
#mobile-nav.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  visibility: visible;
  transition-delay: 0s;
}
#mobile-nav.exit {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  visibility: hidden;
  transition:
    clip-path 0.3s cubic-bezier(0.3, 0, 0.7, 1),
    visibility 0s ease 0s;
}

/*--------------------------------------------------------------
6) Ensure site-logo shows when menu is open on mobile
--------------------------------------------------------------*/
@media (max-width: 1024px) {
  body.mobile-menu-open .site-header .site-logo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
7) Close “×” button inside panel — REMOVED (no longer in HTML)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
8) Menu items
--------------------------------------------------------------*/
.mobile-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-items li + li {
  margin-top: 5px;
}
.mobile-menu-items a {
  display: block;
  color: #3a3a3a !important;
  text-decoration: none !important;
  font-size: clamp(2rem, 2.5vw, 3rem);
}

/*--------------------------------------------------------------
9) Sub-menus
--------------------------------------------------------------*/
.mobile-menu-items .sub-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  padding-left: 15px;
}
.mobile-menu-items .menu-item-has-children.active > .sub-menu {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu-items .menu-item-has-children.active > a {
  color: #7bafd4 !important;
}

/*--------------------------------------------------------------
10) Footer inside the mobile menu
--------------------------------------------------------------*/
.mobile-menu-footer {
  margin-top: 50px;
  border-top: 1px solid rgba(49, 49, 49, 0.2);
  padding-top: 1em;
  display: none !important;
}
@media (max-width: 1024px) {
  .mobile-menu-footer {
    display: flex !important;
    flex-direction: column;
  }
}
.mobile-menu-footer p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5em;
  color: #414141;
}

/*--------------------------------------------------------------
11) Make GP header/nav transparent
--------------------------------------------------------------*/
.site-header,
#masthead.site-header {
  background-color: transparent !important;
  box-shadow: none !important;
  margin-bottom: -150px;
  position: sticky !important;
  top: 0;
  width: 100%;
}
.site-header .inside-header {
  background-color: transparent !important;
}
.site-header.fixed-nav,
.site-header.sticky-nav {
  background-color: transparent !important;
  box-shadow: none !important;
}

/*--------------------------------------------------------------
12) Fade/slide logo & toggle instead of abrupt hide
--------------------------------------------------------------*/
.site-header .site-logo,
#menu-toggle {
  position: relative;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/*--------------------------------------------------------------
13) CodePen-style SVG hamburger animation
--------------------------------------------------------------*/
#menu-toggle.menu .line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#menu-toggle.menu .line1 {
  stroke-dasharray: 60 207;
}
#menu-toggle.menu .line2 {
  stroke-dasharray: 60 60;
}
#menu-toggle.menu .line3 {
  stroke-dasharray: 60 207;
}
#menu-toggle.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}
#menu-toggle.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}
#menu-toggle.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}
/* 13b) Animate stroke color from white → black on toggle */
#menu-toggle.hamburger .line {
  stroke: #fff;
  transition:
    stroke 300ms ease,
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#menu-toggle.opened .line {
  stroke: #000;
}

/*--------------------------------------------------------------
14) GP primary menu (desktop)
--------------------------------------------------------------*/
.main-navigation .inside-navigation a {
  color: #ffffff !important;
}

.main-navigation ul ul {
  background-color:rgb(29, 29, 29) !important;
}

.main-navigation .scolled .inside-navigation > a {
  color: #1d1d1d !important;
}


.main-navigation .main-nav .sub-menu a:hover {
  color: #2fc4ff !important;
}

/*--------------------------------------------------------------
15) Scroll-lock when menu is open (no background scroll)
--------------------------------------------------------------*/
@media (max-width: 1024px) {
  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  #mobile-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header,
  #masthead.site-header {
    position: relative !important;
  }
}

/* ─────────────────────────────────────────────
   Sticky Header with Scroll-Triggered BG + Logo Swap
   ───────────────────────────────────────────── */
.site-header {
  position: sticky !important;
  top: 0 !important;
  width: 100%;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 10000;
    padding-left:20px;
  padding-right:20px;
}

/* Hide sticky header logo on tablet and smaller */
.main-navigation .main-nav ul li a {
  padding-left: 10px !important;
  padding-right: 10px !important;
  line-height: 35px !important;
}

.inside-header {
  padding: 40px 20px;

}
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.site-header.scrolled ul a {
  color:rgb(32, 32, 32);
}

/* Change only top-level links to black */


.site-header.scrolled .menu-item .contact-us{
  color: #292929 !important;
}
.site-header .site-logo {
  transform: scale(1);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  opacity: 1;
}


/* ─────────────────────────────────────────────
   Rounded Border Around Primary Menu on Scroll
   ───────────────────────────────────────────── */
#primary-menu {
  transition: background 0.3s ease,
              border 0.3s ease,
              border-radius 0.3s ease,
              padding 0.3s ease;
}
.site-header.scrolled #primary-menu {
background: rgba(36, 36, 36, 0.5); /* semi-transparent background */
  border-radius: 12px;
  backdrop-filter: blur(25px); /* BLUR EFFECT */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  padding-top:5px;
  padding-left:6px;
  padding-right:6px;
  padding-bottom:5px;
  color:white;
}
.site-header.scrolled .main-nav {
  background: transparent;
}


.blur {
    backdrop-filter: blur(25px); /* BLUR EFFECT */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* ─────────────────────────────────────────────
   Fix social-icon alignment & color
   ───────────────────────────────────────────── */
.main-navigation .inside-navigation .social {
  display: inline-flex;
  align-items: center;
  margin: 0;
  gap:12px;
  padding-left:5px;
}

.dashicons, .dashicons-before:before {
  vertical-align: middle !important;
}
.main-navigation .inside-navigation .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.2s ease, background-color 0.2s ease;
  line-height: 1;
  padding: 0;
  
}
.main-navigation .inside-navigation .social a svg {
  width: 20px;
  height: 20px;
  display: block;
}
.main-navigation .inside-navigation .social a svg path,
.main-navigation .inside-navigation .social a svg circle,
.main-navigation .inside-navigation .social a svg rect {
  fill: #2100F4 !important;
  stroke: #2100F4 !important;
}
.main-navigation .inside-navigation .social a:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}
@media (max-width: 1024px) {
  #mobile-nav .menu-item.contact-us,
  #mobile-nav .menu-item.header-phone,
  #mobile-nav .menu-item.social {
    display: none !important;
  }
}



/* Override transparent styles when not needed */
body.no-transparent-header .site-header {
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

body.no-transparent-header .main-navigation .inside-navigation a {
  color: #1a1a1a;
}

body.no-transparent-header .site-header.scrolled ul a {
  color: #1a1a1a;
}

/* Optional: revert logo or toggle colors if needed */
body.no-transparent-header #menu-toggle .line {
  stroke: #ffffff;
}


.site-header.scrolled.light-text ul a {
  color: #fff;
}

.site-header.scrolled.dark-text ul a {
  color: #111;
}