/*
 * DexMat main navigation (site header)
 * Loaded site-wide by the DexMat Specs plugin (v1.3.1).
 * Scope: Astra header builder output. Menu items and URLs come from the WP menu.
 * Astra breakpoint on this site is 1330px (Customizer > Header Builder > Menu breakpoint).
 */

:root {
  --dm-nav-h: 84px;
  --dm-nav-pad: 56px;
  --dm-teal: #2AD2C9;
  --dm-bar-bg: rgba(0, 0, 0, 0.85);        /* default: pages without a hero image */
  --dm-panel-bg: rgba(0, 0, 0, 0.85);
}
body.dm-hero-header {
  --dm-bar-bg: rgba(0, 0, 0, 0.6);         /* hero pages */
  --dm-panel-bg: rgba(0, 0, 0, 0.6);
}
body.dexmat-store-page {
  --dm-bar-bg: rgba(0, 0, 0, 0.30);        /* Store Build Brief 10.1, unchanged */
  --dm-panel-bg: rgba(0, 0, 0, 0.6);       /* nav brief 6.5 exception */
}

/* ---------- Bar ---------- */
#masthead .ast-primary-header-bar,
#masthead.ast-header-sticked .ast-primary-header-bar,
.ast-theme-transparent-header #masthead .ast-primary-header-bar {
  background: var(--dm-bar-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 0;
}
#masthead .ast-primary-header-bar .ast-builder-grid-row {
  min-height: var(--dm-nav-h);
}
/* Astra's own hide-on-scroll animation; brief 6.6 wants ~250ms */
#masthead.ast-header-sticked,
#masthead .ast-primary-header-bar {
  transition: transform 250ms ease, background 150ms ease;
}

/* Astra's full-width container adds 35px and the child theme indents the logo 20px; the bar's own 56px padding is the edge */
#masthead .ast-primary-header-bar .ast-container {
  padding-left: 0;
  padding-right: 0;
}
#masthead .ast-primary-header-bar .site-branding.ast-site-identity {
  margin-left: 0;
  padding-left: 0;
}

/* Logo */
#masthead .site-logo-img img,
#masthead .site-logo-img .custom-logo {
  height: 22px;
  width: auto;
}

/* ---------- Menu items (desktop) ---------- */
@media (min-width: 1331px) {
  #masthead .ast-builder-menu-1 .main-header-menu {
    gap: 30px;
  }
  #masthead .ast-builder-menu-1 .main-header-menu > li > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li > .ast-menu-toggle {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    padding: 0;
    line-height: var(--dm-nav-h);
    position: relative;
    background: transparent;
    text-decoration: none !important;   /* Astra/child theme underline on hover; the 2px rule below is the only line */
    outline: none !important;           /* Astra's dotted focus box on click */
    box-shadow: none !important;
  }
  #masthead .ast-builder-menu-1 .main-header-menu > li,
  #masthead .ast-builder-menu-1 .main-header-menu > li:focus,
  #masthead .ast-builder-menu-1 .main-header-menu > li.focus,
  #masthead .ast-builder-menu-1 .main-header-menu > li > a:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  /* Astra renders a dropdown caret on items with children; the panel replaces it */
  #masthead .ast-builder-menu-1 .main-header-menu > li > .ast-menu-toggle,
  #masthead .ast-builder-menu-1 .main-header-menu > li > a .ast-header-navigation-arrow {
    display: none;
  }
  /* Hover, open and current-section state: teal with a 2px rule 4px under the text */
  #masthead .ast-builder-menu-1 .main-header-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: calc(50% + 0.5em + 4px);
    height: 2px;
    background: var(--dm-teal);
    opacity: 0;
    transition: opacity 120ms ease;
  }
  #masthead .ast-builder-menu-1 .main-header-menu > li:hover > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li.dm-open > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-item > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-ancestor > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-parent > a,
  #masthead .ast-builder-menu-1 .main-header-menu > li > a:focus-visible {
    color: var(--dm-teal);
  }
  #masthead .ast-builder-menu-1 .main-header-menu > li:hover > a::after,
  #masthead .ast-builder-menu-1 .main-header-menu > li.dm-open > a::after,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-item > a::after,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-ancestor > a::after,
  #masthead .ast-builder-menu-1 .main-header-menu > li.current-menu-parent > a::after,
  #masthead .ast-builder-menu-1 .main-header-menu > li > a:focus-visible::after {
    opacity: 1;
  }
  /* Native Astra submenus are replaced by the panel below */
  #masthead .ast-builder-menu-1 .main-header-menu .sub-menu {
    display: none !important;
  }
}

/* ---------- Dropdown panel (built by dexmat-nav.js) ---------- */
.dm-nav-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 5;
  background: var(--dm-panel-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.dm-nav-panel[hidden] { display: none; }
.dm-nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 22px 0 50px var(--dm-left, var(--dm-nav-pad));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dm-nav-panel__list a {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none !important;
  outline: none !important;
  line-height: 1;
  display: inline-block;
}
.dm-nav-panel__list a:hover,
.dm-nav-panel__list a:focus-visible {
  color: #fff;
  outline: none;
}

/* ---------- Buy Samples button (Astra header Button 1) ---------- */
#masthead .ast-builder-button-wrap .ast-custom-button,
#masthead .ast-header-button-1 .ast-custom-button {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--dm-teal);
  background: transparent;
  border: 1px solid var(--dm-teal);
  border-radius: 0;
  padding: 13px 23px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 150ms ease, color 150ms ease;
}
#masthead .ast-builder-button-wrap .ast-custom-button::after {
  content: '';
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8h12M9 3l5 5-5 5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8h12M9 3l5 5-5 5'/></svg>") center / contain no-repeat;
}
#masthead .ast-builder-button-wrap .ast-custom-button:hover,
#masthead .ast-builder-button-wrap .ast-custom-button:focus-visible {
  background: var(--dm-teal);
  color: #000;
}

/* ---------- Header cart/account (CP4 fallback: hide if the element must stay for the drawer) ---------- */
#masthead .ast-header-woo-cart,
#masthead .ast-header-account {
  display: none !important;
}

/* ---------- Mobile header (Astra dropdown menu, <= 1330px) ---------- */
@media (max-width: 1330px) {
  #masthead .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row {
    min-height: 64px;
  }
  /* Buy Samples sits left of the toggle; smaller padding so both fit at 390px */
  #masthead .ast-mobile-header-wrap .ast-builder-button-wrap .ast-custom-button {
    padding: 10px 14px;
  }
  /* Toggle: white lines, becomes X while open (Astra adds .toggled) */
  #masthead .ast-mobile-header-wrap .menu-toggle {
    background: transparent;
    color: #fff;
    padding: 0;
    border: 0;
  }
  #masthead .ast-mobile-header-wrap .menu-toggle.toggled .ast-mobile-svg { display: none; }
  #masthead .ast-mobile-header-wrap .menu-toggle .ast-close-svg { display: none; }
  #masthead .ast-mobile-header-wrap .menu-toggle.toggled .ast-close-svg { display: inline-block; }

  /* Dropdown panel: solid black so links stay readable over page content */
  #masthead .ast-mobile-header-content {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  #masthead .ast-mobile-header-content .main-header-menu > li > a,
  #masthead .ast-mobile-header-content .sub-menu a {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    padding: 16px var(--dm-mobile-pad, 20px);
    border: 0;
  }
  #masthead .ast-mobile-header-content .sub-menu a {
    font-weight: 200;
    color: rgba(255, 255, 255, 0.78);
    padding-left: calc(var(--dm-mobile-pad, 20px) + 16px);
  }
  #masthead .ast-mobile-header-content .main-header-menu > li.current-menu-item > a,
  #masthead .ast-mobile-header-content .main-header-menu > li.current-menu-ancestor > a {
    color: var(--dm-teal);
  }
  #masthead .ast-mobile-header-content .ast-menu-toggle {
    color: #fff;
  }
  #masthead .ast-mobile-header-content .main-header-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  /* Page does not scroll while the menu is open (class added by dexmat-nav.js) */
  html.dm-mobile-menu-open,
  html.dm-mobile-menu-open body {
    overflow: hidden;
  }
}