/**
 * How Many Days — Web: styling die aansluit op AppLy #main-nav (LeafColor).
 * Wordt geladen na de plugin (handle hmd-web), alleen als de plugin actief is.
 *
 * - Donker schema: trigger als gewone witte menu-link; panel als theme-dropdown (donker/transparant).
 * - Light schema: trigger #444; panel licht zoals .light-nav .dropdown-menu.
 */

/* Zoekicoon uit header (patch); staat Theme Options → Enable Search weer aan, verwijder dit blok. */
#main-nav a.search-toggle,
#main-nav .navbar-nav > li:has(> a.search-toggle) {
  display: none !important;
}

/* Zelfde rij-uitlijning als andere menu-items */
#main-nav li.menu-item-hmd-auth {
  display: flex !important;
  align-items: stretch !important;
}

#main-nav li.menu-item-hmd-auth > .hmd-nav-auth-shell {
  display: flex !important;
  align-items: center !important;
  margin: 0;
  padding: 0;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-auth-inner {
  margin: 0;
  padding: 0;
}

/* Paneel boven pagina-content; navbar mag niet clippen */
#main-nav .navbar,
#main-nav .navbar-nav,
#main-nav .navbar-collapse,
#main-nav li.menu-item-hmd-auth {
  overflow: visible !important;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-dropdown {
  position: relative;
  z-index: 1000020;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-panel {
  z-index: 1000030 !important;
  top: 100% !important;
  margin-top: 2px;
}

/* ——— Donker navigatie-schema (standaard AppLy) ——— */
#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-trigger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: 20px;
  min-height: 100px;
  padding: 30px 2px;
  margin: 0 20px;
  border-radius: 0 !important;
  position: relative;
}

#main-nav:not(.light-nav).disable-description li.menu-item-hmd-auth .hmd-nav-trigger {
  line-height: 40px;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-trigger:hover {
  opacity: 1;
  background: transparent !important;
  color: #fff !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-trigger--avatar {
  padding: 6px 2px;
  min-height: 100px;
  margin: 0 16px 0 20px;
  gap: 0.4rem;
}

/* Grotere profielfoto in menubalk + zichtbaar in AppLy */
#main-nav li.menu-item-hmd-auth .hmd-nav-avatar-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-avatar-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-avatar-ph {
  font-size: 0.95rem !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-chevron {
  border-right-color: rgba(255, 255, 255, 0.65);
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-avatar-wrap {
  border: 2px solid rgba(255, 255, 255, 0.35);
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-avatar-ph {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.08)
  ) !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-panel {
  /* Geen rgba: anders zie je hero/App Store door het paneel heen */
  background: #2f2f2f !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  min-width: 200px !important;
  max-width: 240px !important;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-panel-inner--login {
  gap: 0.45rem !important;
  padding: 0.55rem 0.65rem !important;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-field {
  margin: 0 !important;
  font-size: 0.72rem !important;
}

#main-nav li.menu-item-hmd-auth .hmd-nav-field-label {
  font-size: inherit !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-panel-inner,
#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-panel-inner--login {
  color: #eee;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-field {
  color: rgba(255, 255, 255, 0.75);
}

/* Overschrijf .dark-div input { background: vrij transparant } — dat toont content erachter */
#main-nav.dark-div li.menu-item-hmd-auth input.hmd-nav-input,
#main-nav:not(.light-nav) li.menu-item-hmd-auth input.hmd-nav-input[type="email"],
#main-nav:not(.light-nav) li.menu-item-hmd-auth input.hmd-nav-input[type="password"],
#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-input {
  background-color: #3a3a3a !important;
  background-image: none !important;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  height: 34px !important;
  min-height: 34px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding: 5px 10px !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-input:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  background-color: #404040 !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-btn--primary {
  background: var(--hmd-blue, #39ba93) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-email {
  color: rgba(255, 255, 255, 0.88);
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-link {
  color: #eee !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-link:hover {
  background: transparent !important;
  color: #fff !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-logout {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ff9a9a !important;
  background: transparent !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-dd-logout:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#main-nav:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-error--dd {
  color: #ffb4b4;
}

/* ——— Light navigatie-schema ——— */
#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-trigger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #444 !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 20px;
  min-height: 100px;
  padding: 30px 2px;
  margin: 0 20px;
  border-radius: 0 !important;
}

#main-nav.light-nav.disable-description li.menu-item-hmd-auth .hmd-nav-trigger {
  line-height: 40px;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-trigger:hover {
  opacity: 1;
  background: transparent !important;
  color: #222 !important;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-chevron {
  border-right-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.45);
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-panel {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  min-width: 200px !important;
  max-width: 240px !important;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-input {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-btn--primary {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-dd-link {
  color: #666 !important;
}

#main-nav.light-nav li.menu-item-hmd-auth .hmd-nav-dd-link:hover {
  color: #333 !important;
  background: transparent !important;
}

/* ——— Compacte sticky header ——— */
#main-nav.affix:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-trigger {
  min-height: 50px;
  padding: 5px 2px;
  line-height: 40px;
}

#main-nav.affix:not(.light-nav) li.menu-item-hmd-auth .hmd-nav-trigger--avatar {
  min-height: 50px;
  padding: 4px 2px;
}

#main-nav.affix.light-nav li.menu-item-hmd-auth .hmd-nav-trigger {
  min-height: 50px;
  padding: 5px 2px;
  line-height: 40px;
}

#main-nav.affix.light-nav li.menu-item-hmd-auth .hmd-nav-trigger--avatar {
  min-height: 50px;
  padding: 4px 2px;
}