/*────────────────────────────────────────────────────────────────────────────
   1) Header & Drop‐Shadow
────────────────────────────────────────────────────────────────────────────*/
.enercare-nav {
  width: 100%;
  background: #fff;
  border-bottom: none;
  position: relative;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* center content to 1200px, full‐width behind it */
.nav-inner {
  /*max-width: 100%;*/
  width:auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 110px;            /* Enercare ≈80px tall */
  padding: 0 20px;
  box-sizing: border-box;
}

/* 1) Give the logo some breathing room from the first tab */
.enercare-nav .logo {
  margin-right: 0rem;   /* or whatever value feels right */
}

/* 2) Increase the gap between each top‐level tab */
.enercare-nav .nav-menu {
  gap: 0.7rem;              /* up from 12px; tweak to taste */
}


/* logo doubled height (≈60px) with no distortion */
.logo img {
  /*height: 50px !important;   /* same as Enercare’s logo height */
  width: auto   !important;  /* let the browser pick the correct width */
  padding: 0px 10px 0px 0px;
}

/* 2) Give the outer wrapper the Enercare-style bottom-only shadow */
.top-bar-wrap {
  /* same darker shadow you liked */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: relative;  /* ensure it sits above content */
  z-index: 1000;       /* if you need it above the page */
}

/* 1) Kill the old shadow (and optional bottom border) */
.enercare-nav {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 2) Give the outer wrapper the Enercare-style bottom-only shadow */
.top-bar-wrap {
  /* same darker shadow you liked */
  
  position: relative;  /* ensure it sits above content */
  z-index: 1000;       /* if you need it above the page */
}

/*────────────────────────────────────────────────────────────────────────────
   2) Main Menu Layout
────────────────────────────────────────────────────────────────────────────*/
.nav-menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  /* generous gap between each top‐level tab */
  gap: 12px;
}

/* push “expert” + phone to far right */
.nav-expert {
  margin-left: auto;
}

.nav-item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;        /* Enercare uses 14px */
  letter-spacing: 1px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
  padding:20px;
  width:100px;
height:115px;
}
.nav-item:hover > a,
.nav-item.active > a {
  color: #fff;         /* Enercare red */
  /*background-color:#b6ffac;*/
  /* Original Logo Color Code */
  background-color:#8cab00; 
}

/*────────────────────────────────────────────────────────────────────────────
   3) Icons & Labels
────────────────────────────────────────────────────────────────────────────*/
/* top‐level icons: 48×48px */
.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  fill: currentColor;
}
.icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* text under icon */
.label {
  font-size: 12px;
  line-height: 1;
  text-align:center;
  font-weight:500px;
}

/*────────────────────────────────────────────────────────────────────────────
   “Speak with an expert” + phone in one block
────────────────────────────────────────────────────────────────────────────*/
.nav-phone {
  margin-left: auto !important;                /* push to the far right */
  display: flex;
  align-items: center;
  padding: 0 20px;                              /* match Enercare spacing */
  border-left: 1px solid #E6E6E6;               /* vertical divider */
  width: max-content;
}

.nav-phone:hover{
    /*background-color:#b6ffac;*/
    /* Original Logo Color Code */
  /*background-color:#8cab00; */
  background-color: #ebebeb;
}

/* the sentence-case label above the number */
.nav-phone .expert-label {
  display: block;
  text-transform: none;                         /* keep “Speak with an expert” */
  font-size: 14px;                              /* match Enercare’s text size */
  font-weight: 400;
  color: #333333;
  margin-right: 12px;                           /* gap before icon+number */
}

/* the phone link itself stays in a row */
.nav-phone > a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* phone icon size & spacing */
.nav-phone .icon--phone {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  fill: currentColor;
}

/* red phone number styling */
.nav-phone .phone-number {
  font-size: 16px;
  font-weight: 700;
  color: #D81F26;
  /*color: #000;*/
  line-height: 1;
  text-transform: none;
}


/*────────────────────────────────────────────────────────────────────────────
   5) Mega‐Dropdown (unchanged)
────────────────────────────────────────────────────────────────────────────*/
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /*background: #b6ffac;*/
  /* Original Logo Color Code */
  background-color:#8cab00; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: none;
}
.nav-item:hover .mega-dropdown {
  display: block;
}
.dropdown-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 20px 0;
}
.dropdown-col {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid #E6E6E6;
  box-sizing: border-box;
}
.dropdown-col:last-child {
  border-right: none;
}
.dropdown-col h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  /*color: #333;*/
  color:#fff;
  margin-bottom: 12px;
}
.dropdown-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown-col li + li {
  margin-top: 8px;
}
.dropdown-col a {
  /*color: #666;*/
  color:#fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dropdown-col a:hover {
  color: #000;
  font-weight: 600;
}

/*────────────────────────────────────────────────────────────────────────────
   6) Responsiveness (unchanged)
────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .dropdown-inner { flex-wrap: wrap; }
  .dropdown-col { width: 50%; }
}
@media (max-width: 767px) {
  .nav-inner {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }
  .nav-menu {
    flex-direction: column;
    gap: 0;
  }
  .nav-item,
  .nav-expert,
  .nav-phone {
    width: 100%;
    margin: 4px 0;
    text-align: left;
  }
  .mega-dropdown {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
  }
  .dropdown-inner { flex-direction: column; }
  .dropdown-col {
    width: 100%;
    border: none;
    padding: 10px 0;
  }
}

/*────────────────────────────────────────────────────────────────────────────
   7) Hide the desktop mega-menu under tablet size
────────────────────────────────────────────────────────────────────────────*/
/* ————————————————————————
   Desktop nav “enercare-nav”
   shows above 1025px only
   ———————————————————————— */
@media (max-width: 1300px) {
  .enercare-nav     { display: none; }
  .mobile-header    { display: flex; }   /* show your mobile header */
  .mobile-menu      { display: flex; }   /* will be toggled via JS */
}

/* ————————————————————————
   On really large screens revert
   ———————————————————————— */
@media (min-width: 1300px) {
  .enercare-nav     { display: flex; }
  .mobile-header    { display: none; }
  .mobile-menu      { display: none; }
}


/*────────────────────────────────────────────────────────────────────────────
  Hide desktop nav / show mobile nav under 1300px
────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 1300px) {
  /*.enercare-nav { display: none !important; }*/

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 100px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1100;
  }
  .mobile-header .mobile-logo img {
    height: 50px;
    width: auto;
  }
  .mobile-toggle {
    background: none;
    border: none;
    padding: 8px;
    color: #333;
    cursor: pointer;
  }
}

/*────────────────────────────────────────────────────────────────────────────
  Mobile off‐canvas container
────────────────────────────────────────────────────────────────────────────*/
.mobile-menu {
  position: fixed;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  transition: left .3s ease;
  z-index: 1050;
  overflow-y: auto;
  padding-top: 80px;
}
.mobile-menu.open { left: 0; }

/* Close button */
.mobile-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  padding: 8px;
  color: #333;
  cursor: pointer;
}

/*────────────────────────────────────────────────────────────────────────────
  Accordion basics
────────────────────────────────────────────────────────────────────────────*/
.mm-accordion {
  width: 100%;
  padding: 16px 20px;
  background: #f9f9f9;
  border: none;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-accordion + .mm-panel { display: none; }
.mm-panel {
  padding: 0 20px 20px;
}
.mm-panel.open { display: block; }

/*────────────────────────────────────────────────────────────────────────────
  Columns inside each panel
────────────────────────────────────────────────────────────────────────────*/
.mm-col {
  margin-bottom: 16px;
}
.mm-col h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.mm-col ul {
  list-style: none;
  margin: 0 0 0 8px;
  padding: 0;
}
.mm-col li + li {
  margin-top: 6px;
}
.mm-col a {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color .2s;
}
.mm-col a:hover { color: #D81F26; }

/*────────────────────────────────────────────────────────────────────────────
  Speak with an expert
────────────────────────────────────────────────────────────────────────────*/
.mobile-expert {
  padding: 20px;
  border-top: 1px solid #eee;
  font-size: 16px;
  line-height: 1.3;
}
.mobile-expert > span {
  display: block; margin-bottom: 8px;
  font-weight: 400;
}
.mobile-expert > a {
  font-size: 20px; font-weight: 700;
  color: #D81F26; text-decoration: none;
}

/*────────────────────────────────────────────────────────────────────────────
  Icons in accordion heading (optional arrow)
────────────────────────────────────────────────────────────────────────────*/
.mm-accordion::after {
  content: "▼";
  font-size: 14px;
  transition: transform .2s ease;
}
.mm-accordion.active::after {
  transform: rotate(-180deg);
}

/*────────────────────────────────────────────────────────────────────────────
  Hide mobile nav above breakpoint
────────────────────────────────────────────────────────────────────────────*/
@media (min-width: 1301px) {
  .mobile-header,
  .mobile-menu {
    display: none !important;
  }
}