/* =========================================================
   Duiker Custom Header (SAFE MODE) - v1024
   - Smooth load compatible (dp-header-ready + dp-ready)
   - Removed border/background from hamburger menu button
   - Clean hamburger icon with no box/outline
   - Added Resources tab, removed Buyers/Sellers tabs
   - Search submenu has Calgary Communities & Surrounding Areas links
   ========================================================= */

:root{
  --dp-black:#000;
  --dp-white:#fff;
  --dp-accent:#7fb4e8;

  --dp-header-h:120px;
  --dp-header-h-mobile:90px;
  --dp-header-h-small:80px;
}

/* 0) Keep site normal */
html, body{
  background:#fff !important;
  background-color:#fff !important;
  margin:0 !important;
  padding:0 !important;
}

/* When mobile menu is open, lock body scroll */
body.dp-menu-open{
  overflow:hidden !important;
}

/* 1) ONLY hide BoldTrail header AFTER our header is injected */
body.has-dp-header #header,
body.has-dp-header div#header,
body.has-dp-header .site-header,
body.has-dp-header .kv-header,
body.has-dp-header #quick-search,
body.has-dp-header #fixed-header-spacer,
body.has-dp-header .page-wrapper > #header{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
}

/* 2) Add space for our fixed header ONLY when stable/ready */
body.dp-header-ready{
  padding-top:var(--dp-header-h) !important;
}

/* 3) Header container */
#dp-header{
  background:var(--dp-black) !important;
  color:var(--dp-white) !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  pointer-events:auto !important;
  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* Layer/click safety */
#dp-header *{
  pointer-events:auto !important;
}

/* Mobile shell layer */
#dp-mobile-shell{
  position:relative;
  z-index:9998 !important;
  pointer-events:auto !important;
}
#dp-mobile-shell *{
  pointer-events:auto !important;
}

/* Kill invisible BoldTrail overlays/spacers that can block clicks */
body.has-dp-header #fixed-header-spacer,
body.has-dp-header .header-spacer,
body.has-dp-header .sticky-spacer,
body.has-dp-header .kv-sticky-spacer{
  position:static !important;
  z-index:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Header layout */
#dp-header .header-content{
  max-width:1400px;
  margin:0 auto;
  padding:15px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--dp-header-h);
  position:relative;
}

/* Left */
#dp-header .header-left{
  display:flex;
  align-items:center;
  gap:30px;
}

/* Hamburger */
#dp-header .menu-toggle{
  background:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  cursor:pointer;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  width:40px;
  height:40px;
  justify-content:center;
  align-items:center;
  transition:transform 0.3s ease;
}

#dp-header .menu-toggle:hover{
  transform:scale(1.1);
  background:none !important;
  border:none !important;
}

#dp-header .menu-toggle:focus{
  outline:none !important;
  border:none !important;
  box-shadow:none !important;
}

#dp-header .menu-toggle span{
  display:block;
  width:28px;
  height:3px;
  background:var(--dp-white);
  transition:all .25s ease;
  position:absolute;
  border-radius:2px;
}

#dp-header .menu-toggle span:nth-child(1){ top:11px; }
#dp-header .menu-toggle span:nth-child(2){ top:19px; }
#dp-header .menu-toggle span:nth-child(3){ top:27px; }

#dp-header .menu-toggle.active span:nth-child(1){
  top:19px;
  transform:rotate(45deg);
}
#dp-header .menu-toggle.active span:nth-child(2){
  opacity:0;
}
#dp-header .menu-toggle.active span:nth-child(3){
  top:19px;
  transform:rotate(-45deg);
}

/* Quick links */
#dp-header .quick-links{
  display:flex;
  gap:25px;
}
#dp-header .quick-links a{
  text-decoration:none;
  color:var(--dp-white);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  transition:color 0.2s ease;
  letter-spacing:0.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#dp-header .quick-links a:hover{
  color:var(--dp-accent);
}

/* Center logo */
#dp-header .header-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
#dp-header .main-logo{
  height:100px;
  width:auto;
  display:block;
  transition:transform 0.2s ease;
}
#dp-header .main-logo:hover{
  transform:scale(1.02);
}

/* Right */
#dp-header .header-right{
  display:flex;
  align-items:center;
  gap:25px;
}
#dp-header .contact-link{
  text-decoration:none;
  color:var(--dp-white);
  font-size:15px;
  font-weight:500;
  transition:color 0.2s ease;
  letter-spacing:0.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#dp-header .contact-link:hover{
  color:var(--dp-accent);
}
#dp-header .phone-link{
  text-decoration:none;
  color:var(--dp-accent);
  font-size:16px;
  font-weight:700;
  transition:color 0.2s ease;
  letter-spacing:0.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#dp-header .phone-link:hover{
  color:var(--dp-white);
}

/* 5) Mobile menu shell */
#dp-mobile-shell .mobile-menu{
  position:fixed;
  top:var(--dp-header-h);
  left:0;
  bottom:0;
  width:auto;
  max-width:520px;
  min-width:280px;
  height:calc(100vh - var(--dp-header-h));
  background:rgba(0,0,0,1);
  backdrop-filter:none;
  border-right:1px solid rgba(255,255,255,0.08);
  box-shadow:4px 0 24px rgba(0,0,0,0.4);

  transform:translate3d(-100%,0,0);
  transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);

  overflow:auto;
  z-index:9998 !important;

  display:block !important;
  pointer-events:auto !important;
}
#dp-mobile-shell .mobile-menu.active{
  transform:translate3d(0,0,0);
}

#dp-mobile-shell .mobile-menu-wrapper{
  display:flex;
  min-height:100%;
  padding:40px 30px;
  gap:60px;
  position:relative;
  flex-direction:row;
  align-items:flex-start;
}

#dp-mobile-shell .main-menu-column{
  flex:0 0 auto;
  min-width:200px;
}

#dp-mobile-shell .submenu-columns-container{
  flex:1;
  position:relative;
  min-height:400px;
}

#dp-mobile-shell ul{
  list-style:none;
  margin:0;
  padding:0;
}

#dp-mobile-shell li{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

#dp-mobile-shell .main-menu-column > ul > li{
  border-bottom:1px solid rgba(255,255,255,0.1) !important;
}

/* Links/buttons */
#dp-mobile-shell a,
#dp-mobile-shell button{
  display:block;
  padding:20px 0;
  text-decoration:none;
  color:#fff;
  font-size:18px;
  font-weight:500;
  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:none;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:color 0.2s ease;
  letter-spacing:0.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#dp-mobile-shell a:hover,
#dp-mobile-shell button:hover{
  color:var(--dp-accent);
}

#dp-mobile-shell a:focus,
#dp-mobile-shell button:focus{
  outline:none !important;
  border:none !important;
}

/* Submenu styling */
#dp-mobile-shell .menu-item-with-submenu{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  position:relative;
}

#dp-mobile-shell .submenu-toggle{
  font-size:24px;
  transition:transform 0.2s ease;
  font-weight:300;
  margin-left:10px;
}

#dp-mobile-shell .menu-item-with-submenu.active .submenu-toggle{
  transform:rotate(45deg);
}
#dp-mobile-shell .menu-item-with-submenu.active{
  color:var(--dp-accent);
}

/* Submenu column in right area */
#dp-mobile-shell .submenu-column{
  display:none;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  opacity:0;
  transition:opacity 0.2s ease;
}
#dp-mobile-shell .submenu-column.active{
  display:block;
  opacity:1;
}

#dp-mobile-shell .submenu-column li{
  border:none !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
  background:transparent !important;
}

#dp-mobile-shell .submenu-column a{
  font-size:18px;
  padding:20px 0 !important;
  color:rgba(255,255,255,0.85);
  font-weight:500;
  border:none !important;
  outline:none !important;
  letter-spacing:0.5px;
}
#dp-mobile-shell .submenu-column a:hover{
  color:var(--dp-accent);
}

/* Submenu link buttons (e.g. Calgary Communities › inside Search submenu) */
#dp-mobile-shell .submenu-link-btn{
  font-size:18px;
  padding:20px 0 !important;
  color:rgba(255,255,255,0.85);
  font-weight:500;
  border:none !important;
  outline:none !important;
  letter-spacing:0.5px;
  background:none !important;
  box-shadow:none !important;
  width:100%;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:color 0.2s ease;
}
#dp-mobile-shell .submenu-link-btn:hover{
  color:var(--dp-accent);
}

/* Responsive */
@media (max-width:768px){
  body.dp-header-ready{ padding-top:var(--dp-header-h-mobile) !important; }

  #dp-header .quick-links{ display:none; }
  #dp-header .contact-link{ display:none; }
  #dp-header .main-logo{ height:70px; }

  #dp-header .header-content{
    min-height:var(--dp-header-h-mobile);
    padding:10px 20px;
  }

  #dp-mobile-shell .mobile-menu{
    top:var(--dp-header-h-mobile);
    height:calc(100vh - var(--dp-header-h-mobile));
    max-width:100vw;
  }

  #dp-mobile-shell .mobile-menu-wrapper{
    flex-direction:row;
    gap:40px;
    padding:30px 20px;
  }

  #dp-mobile-shell .main-menu-column{
    min-width:180px;
  }
}

@media (max-width:480px){
  body.dp-header-ready{ padding-top:var(--dp-header-h-small) !important; }

  #dp-header .header-content{
    min-height:var(--dp-header-h-small);
    padding:10px 15px;
  }
  #dp-header .main-logo{ height:50px; }
  #dp-header .phone-link{ font-size:14px; }

  #dp-mobile-shell .mobile-menu{
    top:var(--dp-header-h-small);
    height:calc(100vh - var(--dp-header-h-small));
    max-width:100vw;
  }

  #dp-mobile-shell a,
  #dp-mobile-shell button{
    font-size:16px;
    padding:15px 0;
  }
}