/**
 * Header & Navigation Styles
 * Modular and easily overridable in child themes via CSS Variables.
 */

:root {
  --mt-logo-height-current: var(--mt-logo-height-desktop);
}

@media (max-width: 1042px) {
  :root {
    --mt-logo-height-current: var(--mt-logo-height-tablet);
  }
}

@media (max-width: 768px) {
  :root {
    --mt-logo-height-current: var(--mt-logo-height-mobile);
  }
}

/* ─────────────────────────────────────────────
   HEADER LAYOUT
   ───────────────────────────────────────────── */
.header-main {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-col {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-main.layout-style2 .col-center {
  flex: 1;
  justify-content: center;
}

.header-main.layout-style3 .col-left,
.header-main.layout-style3 .col-right {
  flex: 1;
}

.header-main.layout-style3 .col-left {
  justify-content: flex-start;
}

.header-main.layout-style3 .col-center {
  justify-content: center;
}

.header-main.layout-style3 .col-right {
  justify-content: flex-end;
}

/* ─────────────────────────────────────────────
   LOGO
   ───────────────────────────────────────────── */
.site-logo,
.site-logo img,
.custom-logo-link img,
.site-logo-link img,
.custom-logo {
  max-height: var(--mt-logo-height-current);
  width: auto;
}

.logo-main,
.logo-light,
.logo-dark,
.logo-sticky,
.custom-logo {
  display: none;
}

/* Visibility Logic */
.site-header:not(.is-transparent):not(.is-scrolled) .logo-main,
.site-header:not(.is-transparent):not(.is-scrolled) .custom-logo,
.mobile-menu-drawer .logo-main,
.mobile-menu-drawer .custom-logo,
.site-header.is-transparent:not(.is-scrolled) .logo-light,
.site-header.is-scrolled .logo-sticky,
.logo-light-only,
.logo-dark-only,
.logo-sticky-only {
  display: block;
}

/* ─────────────────────────────────────────────
   MAIN MENU
   ───────────────────────────────────────────── */
.primary-navigation>ul,
.main-menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--mt-menu-gap);
}

.main-menu li {
  position: relative;
  list-style: none;
}

.main-menu a {
  text-decoration: none;
  color: var(--mt-menu-color);
  text-transform: uppercase;
  font-size: var(--mt-menu-font-size);
  font-weight: 500;
  transition: all 0.3s;
  padding: 25px 0;
  display: flex;
  align-items: center;
}

.main-menu a:hover {
  color: var(--mt-menu-hover);
}


/* Sticky/Transparent Overrides */
.site-header.is-scrolled .main-menu>li>a {
  color: var(--mt-sticky-color);
}

.site-header.is-scrolled .main-menu>li>a:hover {
  color: var(--mt-sticky-hover);
}

.site-header.is-transparent:not(.is-scrolled) .main-menu>li>a {
  color: #fff;
}

/* ─────────────────────────────────────────────
   SUBMENU
   ───────────────────────────────────────────── */
.main-menu .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--mt-submenu-bg);
  min-width: var(--mt-submenu-width);
  padding: var(--mt-submenu-padding-y) 0;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--mt-submenu-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

.main-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  transform: translateX(10px);
}

.main-menu li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
}

.main-menu>li:hover>.sub-menu {
  transform: translateY(0);
}

.main-menu .sub-menu li:hover>.sub-menu {
  transform: translateX(0);
}

.sub-menu li {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.sub-menu li:last-child {
  border-bottom: none;
}

.sub-menu a {
  text-transform: none;
  font-weight: 400;
  padding: var(--mt-submenu-link-py) var(--mt-submenu-link-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mt-submenu-font-size);
  color: var(--mt-submenu-color);
}

.sub-menu a:hover {
  background: var(--mt-submenu-hover-bg);
  color: var(--mt-submenu-hover-color);
  padding-left: calc(var(--mt-submenu-link-px) + 5px);
}

/* ─────────────────────────────────────────────
   MOBILE DRAWER
   ───────────────────────────────────────────── */
.mobile-menu-inner {
  width: var(--mt-drawer-width-mobile);
  max-width: 100%;
}

@media (min-width: 769px) {
  .mobile-menu-inner {
    width: var(--mt-drawer-width-tablet);
  }
}

@media (min-width: 1043px) {
  .mobile-menu-inner {
    width: var(--mt-drawer-width-desktop);
  }
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-list>li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--mt-primary-color, #0a0a0a);
  text-decoration: none;
  line-height: 1.8 !important;
}

.mobile-menu-list .sub-menu {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-list li.is-open>.sub-menu {
  max-height: 1000px;
  opacity: 1;
  padding-bottom: 15px;
}

.mobile-menu-list .sub-menu a {
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: #666;
}

/* Hide desktop arrows in mobile drawer */
.mobile-menu-list .menu-arrow {
  display: none !important;
}

/* Accordion Icons (+/-) */
.mobile-menu-list .menu-item-has-children>a::before,
.mobile-menu-list .menu-item-has-children>a::after {
  content: '';
  position: absolute;
  right: 0;
  background-color: currentColor;
  transition: all 0.3s ease;
}

.mobile-menu-list .menu-item-has-children>a::before {
  width: 14px;
  height: 2px;
}

.mobile-menu-list .menu-item-has-children>a::after {
  right: 6px;
  width: 2px;
  height: 14px;
}

.mobile-menu-list li.is-open>a::after {
  transform: rotate(90deg);
  opacity: 0;
}

.mobile-menu-list li.is-open>a {
  color: var(--mt-accent-color, #6366f1);
}

/* ─────────────────────────────────────────────
   COMPONENTS
   ───────────────────────────────────────────── */
.header-search-trigger,
.cart-icon,
.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--mt-menu-color);
}

.site-header.is-scrolled .header-search-trigger,
.site-header.is-scrolled .cart-icon,
.site-header.is-scrolled .menu-toggle {
  color: var(--mt-sticky-item-color);
}