/* ==========================================================================
   MODERNIZED HEADER & NAVIGATION (Carlos Linares Design)
   ========================================================================== */

#header.main-header,
.header-wrapper #header.main-header {
  background-color: #FFFFFF !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Constrain header content to match page column max-width */
#header.nda-site-header .container,
.header-wrapper.wide #header.nda-site-header .container,
.header-wrapper #header.nda-site-header .container {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   1. TOP BAR (Desktop only)
   ========================================================================== */
#header .header-top.nda-header-top,
.nda-header-top {
  background-color: var(--color-navy, #023A66) !important;
  color: #FFFFFF !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 8px 0 !important;
  font-family: var(--font-sans, 'Inter', sans-serif);
  border-bottom: none !important;
  line-height: 1.5 !important;
}

#header.nda-site-header .header-top .container,
.header-wrapper #header.nda-site-header .header-top .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: unset !important;
  height: auto !important;
}

.topbar-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

.topbar-nav li {
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-nav a {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.topbar-nav a:hover {
  opacity: 1 !important;
  color: var(--color-gold, #F3CA00) !important;
}

.topbar-nav li.current-menu-item > a,
.topbar-nav li.active > a,
.topbar-nav a.active {
  color: var(--color-gold, #F3CA00) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.topbar-phone {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.topbar-phone .phone-icon {
  color: #FF5A82 !important; /* Coral icon from mockup */
}

.topbar-phone:hover {
  color: var(--color-gold, #F3CA00) !important;
}

/* ==========================================================================
   2. MAIN HEADER ROW (Desktop)
   ========================================================================== */
#header.nda-site-header .header-main .container,
.header-wrapper #header.nda-site-header .header-main .container {
  display: block !important;
  min-height: unset !important;
  height: auto !important;
}

.nda-header-main {
  padding: 16px 0 !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.desktop-header-row {
  min-height: 44px !important;
}

.nda-logo .brand-logo-link,
.nda-logo-mobile .brand-logo-link,
.drawer-header .brand-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.nda-logo-img {
  height: auto !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
}

.nda-logo-mobile .nda-logo-img,
.drawer-header .nda-logo-img {
  max-height: 28px !important;
  max-width: 190px !important;
}

.header-search-col {
  flex: 1 1 auto !important;
  max-width: 620px !important;
  margin: 0 32px !important;
}

/* Advanced Woo Search Customization */
.header-search-col .aws-container,
.mobile-search-col .aws-container {
  width: 100% !important;
  max-width: 100% !important;
}

.header-search-col .aws-search-form,
.mobile-search-col .aws-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  background-color: #F0F2F5 !important;
  border-radius: var(--radius-pill, 9999px) !important;
  border: 1px solid transparent !important;
  padding: 0 5px 0 16px !important;
  transition: all 0.2s ease !important;
}

.header-search-col .aws-search-form:focus-within,
.mobile-search-col .aws-search-form:focus-within {
  background-color: #FFFFFF !important;
  border-color: var(--color-primary, #034A82) !important;
  box-shadow: 0 0 0 3px rgba(3, 74, 130, 0.12) !important;
}

.header-search-col .aws-search-form .aws-wrapper,
.mobile-search-col .aws-search-form .aws-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.header-search-col .aws-search-field,
.mobile-search-col .aws-search-field {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  color: #1C2B36 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.header-search-col .aws-container .aws-search-form .aws-form-btn,
.mobile-search-col .aws-container .aws-search-form .aws-form-btn,
.header-search-col .aws-search-btn,
.mobile-search-col .aws-search-btn {
  background-color: var(--color-primary, #034A82) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  margin: 0 0 0 8px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex: 0 0 36px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

.header-search-col .aws-search-btn:hover,
.mobile-search-col .aws-search-btn:hover {
  background-color: var(--color-navy, #023A66) !important;
}

.header-search-col .aws-search-btn_icon,
.mobile-search-col .aws-search-btn_icon {
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-search-col .aws-search-btn_icon svg,
.mobile-search-col .aws-search-btn_icon svg {
  fill: #FFFFFF !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Header Right Actions (Account & Cart) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.action-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--color-navy, #023A66) !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  gap: 3px !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  position: relative !important;
}

.action-link:hover {
  color: var(--color-primary, #034A82) !important;
}

.action-link .action-icon {
  stroke: var(--color-navy, #023A66) !important;
  width: 22px !important;
  height: 22px !important;
  transition: stroke 0.2s ease !important;
}

.action-link:hover .action-icon {
  stroke: var(--color-primary, #034A82) !important;
}

.action-link .action-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Mini Cart in Header Actions */
.action-cart-wrap {
  position: relative !important;
}

.action-cart-wrap #mini-cart,
.mobile-cart-col #mini-cart {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.action-cart-wrap #mini-cart .cart-head,
.mobile-cart-col #mini-cart .cart-head {
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Remove Porto dropdown arrow on mini-cart */
#mini-cart.minicart-arrow-alt .cart-head:after,
.action-cart-wrap #mini-cart .cart-head:after,
.mobile-cart-col #mini-cart .cart-head:after,
.action-cart-wrap #mini-cart:after,
.mobile-cart-col #mini-cart:after {
  display: none !important;
  content: none !important;
}

.action-cart-wrap #mini-cart .cart-items-text,
.action-cart-wrap #mini-cart .cart-subtotal,
.mobile-cart-col #mini-cart .cart-items-text,
.mobile-cart-col #mini-cart .cart-subtotal {
  display: none !important;
}

.action-cart-wrap #mini-cart .cart-icon {
  font-size: 22px !important;
  color: var(--color-navy, #023A66) !important;
  position: relative !important;
  display: inline-block !important;
}

.action-cart-wrap #mini-cart .cart-items {
  background-color: #D97706 !important; /* Orange badge from mockup */
  color: #FFFFFF !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 9999px !important;
  position: absolute !important;
  top: -8px !important;
  right: -10px !important;
  text-align: center !important;
  padding: 0 4px !important;
}

/* ==========================================================================
   3. NAVIGATION MENU BAR (Desktop)
   ========================================================================== */
.nda-nav-bar {
  background-color: #F4F5F7 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
}

.nav-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

.nav-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-menu a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-navy, #023A66) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.nav-menu a:hover {
  color: var(--color-primary, #034A82) !important;
  transform: translateY(-1px) !important;
}

.nav-menu a.highlight-link {
  color: #BD6C01 !important; /* Orange highlight from mockup */
  font-weight: 700 !important;
}

.nav-menu a.highlight-link:hover {
  color: #8B4D00 !important;
}

/* Active Navigation Item (Indicator tab line docked to nav bar bottom) */
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a,
.nav-menu li.active > a,
.nav-menu a.active {
  color: var(--color-primary, #034A82) !important;
  font-weight: 700 !important;
  position: relative !important;
}

.nav-menu li.current-menu-item > a::after,
.nav-menu li.current_page_item > a::after,
.nav-menu li.active > a::after,
.nav-menu a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -12px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background-color: var(--color-primary, #034A82) !important;
  border-radius: 3px 3px 0 0 !important;
}

.nav-menu li.current-menu-item > a.highlight-link,
.nav-menu a.highlight-link.active {
  color: #BD6C01 !important;
}

.nav-menu li.current-menu-item > a.highlight-link::after,
.nav-menu a.highlight-link.active::after {
  background-color: #BD6C01 !important;
}

/* ==========================================================================
   NAVIGATION DROPDOWNS (Desktop)
   ========================================================================== */
.nav-menu li.menu-item-has-children {
  position: relative !important;
}

.nav-menu li.menu-item-has-children > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.dropdown-chevron {
  transition: transform 0.2s ease !important;
}

.nav-menu li.menu-item-has-children:hover .dropdown-chevron {
  transform: rotate(180deg) !important;
}

.nav-menu .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 250px !important;
  background-color: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: none !important;
  z-index: 1050 !important;
}

/* Invisible bridge so mouse hover is preserved across gap */
.nav-menu .sub-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  width: 100% !important;
  height: 12px !important;
  background: transparent !important;
}

.nav-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu li.menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  animation: ndaDropdownFade 0.2s ease forwards !important;
}

@keyframes ndaDropdownFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-menu .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.nav-menu .sub-menu a {
  display: block !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--color-navy, #023A66) !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
  white-space: nowrap !important;
  border-bottom: none !important;
}

.nav-menu .sub-menu a::after {
  display: none !important;
}

.nav-menu .sub-menu a:hover {
  background-color: #F4F5F7 !important;
  color: var(--color-primary, #034A82) !important;
  padding-left: 22px !important;
  transform: none !important;
}

.nav-menu .sub-menu a.sub-menu-all {
  font-weight: 700 !important;
  color: var(--color-primary, #034A82) !important;
}

.nav-menu .sub-menu .sub-menu-divider {
  height: 1px !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  margin: 6px 0 !important;
}

/* ==========================================================================
   4. MOBILE HEADER & DRAWER (< 992px)
   ========================================================================== */
@media (max-width: 991px) {
  .nda-header-main {
    padding: 10px 0 12px !important;
  }

  .mobile-top-row {
    padding-bottom: 10px !important;
  }

  /* Hamburger Button */
  .mobile-menu-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 32px !important;
    height: 24px !important;
    cursor: pointer !important;
    outline: none !important;
  }

  .mobile-menu-btn span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    background-color: var(--color-navy, #023A66) !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
  }

  .nda-logo-mobile .brand-logo {
    font-size: 21px !important;
  }

  .nda-logo-mobile .brand-logo .brand-logo-de {
    font-size: 16px !important;
  }

  .mobile-account-link {
    color: var(--color-navy, #023A66) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
  }

  .mobile-search-row {
    gap: 12px !important;
  }

  .mobile-cart-col #mini-cart {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
  }

  .mobile-cart-col #mini-cart .cart-items-text,
  .mobile-cart-col #mini-cart .cart-subtotal {
    display: none !important;
  }

  .mobile-cart-col #mini-cart .cart-icon {
    font-size: 24px !important;
    color: var(--color-navy, #023A66) !important;
    position: relative !important;
    display: inline-block !important;
  }

  .mobile-cart-col #mini-cart .cart-items {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 9999px !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   5. MOBILE DRAWER SLIDE-IN & OVERLAY
   ========================================================================== */
.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: -320px !important;
  width: 300px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  background-color: #FFFFFF !important;
  z-index: 99999 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.mobile-nav-drawer.open {
  transform: translateX(320px) !important;
}

.drawer-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.drawer-close-btn {
  background: none !important;
  border: none !important;
  color: var(--color-navy, #023A66) !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.drawer-account-link {
  color: var(--color-navy, #023A66) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.mobile-nav-list a {
  display: block !important;
  padding: 14px 20px !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-navy, #023A66) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mobile-nav-list a:hover {
  background-color: #F8F9FA !important;
  color: var(--color-primary, #034A82) !important;
  padding-left: 24px !important;
}

.mobile-nav-list a.highlight-link {
  color: #BD6C01 !important;
  font-weight: 700 !important;
}

/* Active item in mobile drawer */
.mobile-nav-list li.current-menu-item > a,
.mobile-nav-list li.current_page_item > a,
.mobile-nav-list li.active > a,
.mobile-nav-list a.active {
  color: var(--color-primary, #034A82) !important;
  font-weight: 700 !important;
  background-color: rgba(3, 74, 130, 0.08) !important;
  border-left: 4px solid var(--color-primary, #034A82) !important;
  padding-left: 20px !important;
}

.mobile-nav-list li.current-menu-item > a.highlight-link,
.mobile-nav-list a.highlight-link.active {
  color: #BD6C01 !important;
  border-left-color: #BD6C01 !important;
}

.mobile-nav-list .drawer-divider {
  height: 8px !important;
  background-color: #F4F5F7 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Mobile Submenus in Drawer */
.mobile-parent-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mobile-parent-row a {
  flex: 1 1 auto !important;
}

.mobile-sub-toggle {
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-navy, #023A66) !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-sub-menu,
.mobile-nav-list .sub-menu {
  display: none;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 10px 16px !important;
  background-color: rgba(2, 58, 102, 0.04) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.mobile-sub-menu.open,
.mobile-nav-list .sub-menu.open {
  display: block !important;
}

.mobile-sub-menu li,
.mobile-nav-list .sub-menu li {
  border-bottom: none !important;
}

.mobile-sub-menu a,
.mobile-nav-list .sub-menu a {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(2, 58, 102, 0.85) !important;
}

.mobile-sub-menu a:hover {
  color: var(--color-primary, #034A82) !important;
  padding-left: 24px !important;
}