/* ===============================
   GLOBAL RESET (IMPORTANT)
   =============================== */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
}

body{
  font-family: 'Inter', sans-serif;
  color: #0f172a;
  background: #ffffff;
  overflow-x: hidden;

  /* IMPORTANT: space for fixed header */
  padding-top: 74px; /* adjust if you change header height */
}

/* ===============================
   HEADER (FIXED)
   =============================== */

.ebd-header{
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;

  /* fixed header */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  /* subtle professional shadow */
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

.ebd-header__wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===============================
   BRAND
   =============================== */

.ebd-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ebd-brand__logo{
  display: block;
  width: 35px;
  height: 35px;
}

.ebd-brand__name{
  font-size: 18px;
  font-weight: 600;
  color: #020617;
  white-space: nowrap;
}

/* ===============================
   NAVIGATION
   =============================== */

.ebd-nav{
  display: flex;
  align-items: center;
  gap: 26px;
}

.ebd-link{
  font-size: 15px;
  font-weight: 500;
  color: #020617;
  text-decoration: none;
  position: relative;
}

.ebd-link:hover{
  color: #2563eb;
}

.ebd-link.is-active{
  color: #2563eb;
}

/* ===============================
   DROPDOWN
   =============================== */

.ebd-dd{
  position: relative;
}

.ebd-dd__btn{
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ebd-dd__chev{
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Panel */
.ebd-dd__panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 18px 46px rgba(2,6,23,0.14);
  display: none;
  z-index: 2000;
}

/* Show dropdown on hover (desktop) */
.ebd-dd:hover .ebd-dd__panel{
  display: block;
}

/* keep open while mouse is over panel */
.ebd-dd__panel:hover{
  display: block;
}

.ebd-dd__item{
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: #020617;
  text-decoration: none;
}

.ebd-dd__item:hover{
  background: #f1f5f9;
  color: #2563eb;
}

/* ===============================
   CTA BUTTON
   =============================== */

.ebd-cta{
  background: #2563eb;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.ebd-cta:hover{
  background: #1d4ed8;
}

/* ===============================
   BURGER (MOBILE)
   =============================== */

.ebd-burger{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.ebd-burger span{
  display: block;
  width: 22px;
  height: 2px;
  background: #020617;
  margin: 5px 0;
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width: 1024px){

  body{
    padding-top: 72px; /* slight adjust for mobile */
  }

  .ebd-burger{
    display: block;
  }

  .ebd-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    gap: 16px;
    border-top: 1px solid #e5e7eb;
    display: none;
  }

  .ebd-nav.is-open{
    display: flex;
  }

  /* dropdown panel inside mobile nav should be static */
  .ebd-dd__panel{
    position: static;
    display: block;
    width: 100%;
    min-width: 100%;
    border: 1px solid #e5e7eb;
    margin-top: 10px;
    box-shadow: none;
    padding: 8px 0;
    border-radius: 10px;
  }

  /* on mobile, no hover behavior needed */
  .ebd-dd:hover .ebd-dd__panel{
    display: block;
  }
}
