/* ============================================================================
   ACT Pools — animated mobile navigation.
   Bare hamburger, transient liquid splash, fullscreen menu. GSAP drives all
   meaningful motion; this file only holds resting states and the goo filter.
   Every class is prefixed bd- so nothing here can collide with Elementor.
   ========================================================================= */

:root{
  --bd-breakpoint:1024px;      /* mobile-only cutoff; also change the media queries below */
  --bd-icon-size:28px;         /* visible width of the three lines */
  --bd-icon-color:#243455;     /* ACT Pools navy — hamburger at rest */
  --bd-x-color:#ffffff;        /* the X, once the header has dropped away and the navy shows */
  --bd-menu-bg:#243455;        /* fullscreen menu ground */
  --bd-splash-color:#ffffff;   /* the liquid */
  --bd-accent:#F14FB2;         /* Brilliant Rose — link hover */
  --bd-speed:1;                /* global multiplier, >1 = slower */
}

/* ---------------------------------------------------------------- trigger -- */
/* sits inside the header row so it travels with the bar, never floating over content */
.bd-mobile-trigger{
  position:relative;
  flex:0 0 48px;
  width:48px!important;
  height:48px!important;
  min-width:0!important;
  min-height:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  box-sizing:border-box;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}
.bd-mobile-trigger:hover,
.bd-mobile-trigger:focus,
.bd-mobile-trigger:active{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:0!important;color:inherit!important}
.bd-mobile-trigger:focus{outline:none}
.bd-mobile-trigger:focus-visible{outline:2px solid var(--bd-accent);outline-offset:4px;border-radius:4px}

.bd-menu-lines{
  position:relative;
  display:block;
  width:var(--bd-icon-size);
  height:18px;
  pointer-events:none;
}
.bd-menu-line{
  position:absolute;
  left:0;
  width:100%;
  height:2.5px;
  border-radius:2px;
  background:var(--bd-icon-color);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.bd-line-1{top:0}
.bd-line-2{top:50%;margin-top:-1.25px}
.bd-line-3{top:100%;margin-top:-2.5px}

/* ------------------------------------------------------------ liquid layer -- */
.bd-liquid-layer{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  pointer-events:none;
  z-index:9995;
  filter:url(#bd-goo);
  will-change:transform;
}
.bd-liquid-core,
.bd-drop{
  position:absolute;
  top:0;
  left:0;
  background:var(--bd-splash-color);
  border-radius:999px;
  opacity:0;
  will-change:transform,opacity;
}
.bd-liquid-core{
  width:34px;
  height:34px;
  margin:-17px 0 0 -17px;
}
.bd-drop{
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
}

/* the panel's own wordmark, matched to the header logo's position */
.bd-menu-logo{position:absolute;top:14px;left:19.5px;z-index:2;display:block;width:143.4px;line-height:0}
.bd-menu-logo img{width:100%;height:auto;display:block}
@media (max-width:400px){.bd-menu-logo{left:16px;width:128px}}

/* ---------------------------------------------------------------- overlay -- */
.bd-mobile-overlay{
  position:fixed;
  inset:0;
  height:100dvh;
  z-index:9990;
  background:var(--bd-menu-bg);
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  will-change:clip-path;
}
.bd-mobile-overlay.bd-is-visible{visibility:visible}

.bd-mobile-menu-content{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:104px 28px 48px;
  box-sizing:border-box;
}

/* the nav itself — no dividers, no active underline, just the links */
.bd-mobile-menu-content ul{list-style:none;margin:0;padding:0}
.bd-mobile-menu-content .bd-nav > li{display:block}
.bd-mobile-menu-content .bd-nav > li > a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:11px 0;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:32px;
  line-height:1.18;
  letter-spacing:-.02em;
  color:#fff!important;
  text-decoration:none!important;
  border:0;
  transition:color .18s ease;
}
.bd-mobile-menu-content .bd-nav > li > a:hover,
.bd-mobile-menu-content .bd-nav > li > a:focus-visible{color:var(--bd-accent)!important}
.bd-mobile-menu-content .bd-nav > li.current-menu-item > a,
.bd-mobile-menu-content .bd-nav > li.current-menu-ancestor > a{color:#fff!important;text-decoration:none!important;border:0!important}

.bd-sub-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:30px!important;
  height:30px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 0 0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box;
  color:rgba(255,255,255,.75)!important;
  cursor:pointer;
  transition:transform .2s ease,color .18s ease;
}
.bd-sub-toggle:hover{background:transparent!important;background-color:transparent!important;color:#fff!important}
.bd-sub-toggle svg{width:15px;height:15px;display:block}
.bd-sub-toggle:focus-visible{outline:2px solid var(--bd-accent);outline-offset:3px;border-radius:4px}
.bd-has-children.bd-is-open > a > .bd-sub-toggle{transform:rotate(180deg);color:var(--bd-accent)}

.bd-mobile-menu-content .bd-nav ul.sub-menu{
  height:0;
  overflow:hidden;
  transition:height .22s cubic-bezier(.4,0,.2,1);
}
.bd-mobile-menu-content .bd-nav ul.sub-menu > li > a{
  display:block;
  padding:9px 0 9px 2px;
  font-family:'Nunito Sans',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.4;
  color:rgba(255,255,255,.72)!important;
  text-decoration:none!important;
  transition:color .18s ease;
}
.bd-mobile-menu-content .bd-nav ul.sub-menu > li:first-child > a{padding-top:4px}
.bd-mobile-menu-content .bd-nav ul.sub-menu > li:last-child > a{padding-bottom:16px}
.bd-mobile-menu-content .bd-nav ul.sub-menu > li > a:hover{color:var(--bd-accent)!important}

/* footer of the panel: full-width quote button, centred phone */
.bd-menu-foot{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.bd-menu-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  padding:14px 28px;
  border-radius:12px;
  background:var(--bd-accent)!important;
  color:#fff!important;
  font-family:'Nunito Sans',sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:24px;
  text-decoration:none;
  transition:background-color .2s ease;
}
.bd-menu-cta:hover{background:#C03F8E!important;color:#fff!important}
.bd-mobile-overlay a{text-decoration:none}
.bd-menu-phone{
  display:block;
  width:100%;
  text-align:center;
  font-family:Manrope,sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:26px;
  color:#fff!important;
  text-decoration:none!important;
  transition:color .18s ease;
}
.bd-menu-phone:hover{color:var(--bd-accent)!important}

.bd-scroll-locked{overflow:hidden!important;touch-action:none}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .bd-menu-line,.bd-sub-toggle,.bd-mobile-menu-content .bd-nav ul.sub-menu{transition:none!important}
  .bd-liquid-layer{display:none!important}
}

/* -------------------------------------------------------------- breakpoint -- */
@media (min-width:1025px){
  .bd-mobile-trigger,.bd-mobile-overlay,.bd-liquid-layer{display:none!important}
}
@media (max-width:1024px){
  /* the site's own header nav stays out of the way */
  .ap-nav{display:none!important}
  /* the trigger sits in the CTA cluster and reserves its own space now */
  .ap-header .ap-hdr-cta{padding-right:0!important;gap:10px}
  /* With the menu open the header itself gets out of the way: the bar, the logo and the
     quote button all go, and only the trigger is left so it can finish morphing into the X
     in place. The panel supplies its own white wordmark in the same spot. */
  html.bd-scroll-locked .ap-header{position:relative;z-index:10000!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important}
  html.bd-scroll-locked .ap-header.bd-header-fixed{z-index:10000!important}
  html.bd-scroll-locked .ap-header .elementor-widget-theme-site-logo,
  html.bd-scroll-locked .ap-header .ap-phone,
  html.bd-scroll-locked .ap-header .ap-btn-header{opacity:0!important;pointer-events:none!important;transition:opacity .14s ease}
  .ap-header .elementor-widget-theme-site-logo,
  .ap-header .ap-phone,
  .ap-header .ap-btn-header{transition:opacity .18s ease}
}
@media (max-width:400px){
  .bd-mobile-menu-content{padding:96px 20px 40px}
  .bd-mobile-menu-content .bd-nav > li > a{font-size:28px}
}