/* ==========================================================================
   HOCO Redesign — 15-nav.css
   Scope: MAIN NAVIGATION MENU + dropdowns / mega-menu only.
   Owns: .wd-header-nav .wd-nav (main + secondary link menus), Woodmart
   dropdowns (.sub-menu / .wd-dropdown-menu / mega panels), mobile drawer menus.
   Does NOT touch the search bar or cart icons (owned by 10-header).
   RTL-first: logical properties only.
   ========================================================================== */

/* Recolor Woodmart's built-in nav underline / hover accent to brand purple.
   Scoped to the nav so it never leaks into the rest of the header. */
.wd-header-nav,
.wd-header-nav .wd-nav {
  --wd-primary-color: var(--hoco-brand);
}

/* --------------------------------------------------------------------------
   1) Main navigation links
   -------------------------------------------------------------------------- */
.wd-header-main-nav .wd-nav-main {
  font-family: "Tajawal", system-ui, Arial, sans-serif;
  gap: 4px;
}

.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link {
  position: relative;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--hoco-ink);
  transition: color .18s ease, background-color .18s ease;
}

.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link .nav-link-text {
  position: relative;
}

/* Brand-tint pill on hover / focus */
.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link:hover,
.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link:focus-visible {
  color: var(--hoco-brand);
  background-color: color-mix(in srgb, var(--hoco-brand) 8%, transparent);
}

/* Brand underline that grows from center on hover / active */
.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--hoco-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.wd-header-main-nav .wd-nav-main > .menu-item > a.woodmart-nav-link:hover::after,
.wd-header-main-nav .wd-nav-main > .menu-item.current-menu-item > a.woodmart-nav-link::after,
.wd-header-main-nav .wd-nav-main > .menu-item.current-menu-ancestor > a.woodmart-nav-link::after {
  transform: scaleX(1);
}

/* Active item keeps brand color */
.wd-header-main-nav .wd-nav-main > .menu-item.current-menu-item > a.woodmart-nav-link,
.wd-header-main-nav .wd-nav-main > .menu-item.current-menu-ancestor > a.woodmart-nav-link {
  color: var(--hoco-brand);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2) Secondary nav (phone / email / language) — light link polish only.
      Backgrounds belong to the header bar (10-header); we only tidy links.
   -------------------------------------------------------------------------- */
.wd-header-secondary-nav .wd-nav-secondary {
  font-family: "Tajawal", system-ui, Arial, sans-serif;
}
.wd-header-secondary-nav .wd-nav-secondary > .menu-item > a.woodmart-nav-link {
  font-weight: 500;
  transition: color .18s ease, opacity .18s ease;
}
.wd-header-secondary-nav .wd-nav-secondary > .menu-item > a.woodmart-nav-link:hover {
  color: var(--hoco-brand);
}

/* --------------------------------------------------------------------------
   3) Dropdown / sub-menu cards + mega-menu panels
      Woodmart wraps sub-menus in .wd-dropdown-menu (or plain ul.sub-menu).
   -------------------------------------------------------------------------- */
.wd-nav .sub-menu,
.wd-nav .wd-dropdown-menu,
.wd-header-nav .wd-dropdown-menu {
  font-family: "Tajawal", system-ui, Arial, sans-serif;
  background: #fff;
  border: 1px solid var(--hoco-line);
  border-radius: var(--hoco-radius, 14px);
  box-shadow: var(--hoco-shadow, 0 6px 20px rgba(40, 10, 50, .08));
  padding: 8px;
  margin-block-start: 10px;
}

/* Little arrow / caret color if Woodmart draws one */
.wd-nav .wd-dropdown-menu:before {
  border-bottom-color: #fff;
}

/* Dropdown items */
.wd-nav .sub-menu > .menu-item > a.woodmart-nav-link,
.wd-nav .wd-dropdown-menu .menu-item > a.woodmart-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hoco-ink);
  transition: color .16s ease, background-color .16s ease;
}

/* Brand-tint highlight on hover + brand text */
.wd-nav .sub-menu > .menu-item > a.woodmart-nav-link:hover,
.wd-nav .sub-menu > .menu-item.current-menu-item > a.woodmart-nav-link,
.wd-nav .wd-dropdown-menu .menu-item > a.woodmart-nav-link:hover,
.wd-nav .wd-dropdown-menu .menu-item.current-menu-item > a.woodmart-nav-link {
  color: var(--hoco-brand);
  background-color: color-mix(in srgb, var(--hoco-brand) 9%, transparent);
}

/* Mega-menu labels / column titles */
.wd-nav .wd-dropdown-menu .menu-item-has-children > a.woodmart-nav-link,
.wd-nav .wd-dropdown-menu .wd-nav-title {
  font-weight: 700;
  color: var(--hoco-ink);
}

/* Keep drop-down internal dividers subtle */
.wd-nav .sub-menu .menu-item + .menu-item {
  border-color: var(--hoco-line);
}

/* --------------------------------------------------------------------------
   4) Mobile drawer navigation menus
   -------------------------------------------------------------------------- */
.mobile-nav .wd-nav-mobile,
.mobile-nav .wd-nav-mob-tab {
  font-family: "Tajawal", system-ui, Arial, sans-serif;
}

.mobile-nav .wd-nav-mobile > .menu-item > a {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--hoco-ink);
  border-radius: 10px;
  transition: color .16s ease, background-color .16s ease;
}
.mobile-nav .wd-nav-mobile > .menu-item > a:hover,
.mobile-nav .wd-nav-mobile > .menu-item.current-menu-item > a {
  color: var(--hoco-brand);
  background-color: color-mix(in srgb, var(--hoco-brand) 8%, transparent);
}

/* Mobile tab switcher (Menu / Categories) active tab in brand */
.mobile-nav .wd-nav-mob-tab .mobile-tab-title.wd-active > a,
.mobile-nav .wd-nav-mob-tab .mobile-tab-title > a:hover {
  color: var(--hoco-brand);
}
.mobile-nav .wd-nav-mob-tab .mobile-tab-title.wd-active .nav-link-text {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5) RTL alignment safety
   -------------------------------------------------------------------------- */
.rtl .wd-header-main-nav .wd-nav-main,
.rtl .mobile-nav .wd-nav-mobile {
  text-align: start;
}