/**
 * Location: /assets/css/navbar.css
 * Purpose: Premium primary navigation styling for HyperDAF header menus, including dropdowns, active states, keyboard focus and responsive horizontal scrolling.
 */

:root{
  --hdaf-nav-bg: var(--hdaf-header-third-row-bg, var(--hdaf-surface-color, #ffffff));
  --hdaf-nav-text: var(--hdaf-heading-color, #111827);
  --hdaf-nav-muted: var(--hdaf-muted-text-color, #64748b);
  --hdaf-nav-border: color-mix(in srgb, var(--hdaf-nav-text) 10%, transparent);
  --hdaf-nav-orange: var(--hdaf-primary-color, #ff7a00);
  --hdaf-nav-orange-hover: var(--hdaf-link-hover-color, #ea580c);
}

.hdaf-navbar{
  width:100%;
  background: var(--hdaf-nav-bg);
  border-top:1px solid color-mix(in srgb, var(--hdaf-nav-text) 5%, transparent);
  border-bottom:1px solid var(--hdaf-nav-border);
}

.hdaf-navbar__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height: var(--hdaf-header-third-row-height, 46px);
  padding:0 !important;
}

.hdaf-header-nav{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.hdaf-primary-menu,
.hdaf-header #hdaf-primary-menu,
.hdaf-header ul.hdaf-primary-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  max-width:100%;
  margin:0 auto;
  padding:5px 8px;
  list-style:none;
  overflow:visible;
  white-space:nowrap;
}

.hdaf-primary-menu li,
.hdaf-header #hdaf-primary-menu li,
.hdaf-header ul.hdaf-primary-menu li{
  position:relative;
  margin:0;
  padding:0;
}

.hdaf-primary-menu > li > a,
.hdaf-header #hdaf-primary-menu > li > a,
.hdaf-header ul.hdaf-primary-menu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  color:var(--hdaf-nav-text);
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hdaf-primary-menu > li > a:hover,
.hdaf-primary-menu > li > a:focus-visible,
.hdaf-primary-menu > li.current-menu-item > a,
.hdaf-primary-menu > li.current-menu-ancestor > a,
.hdaf-primary-menu > li.current-menu-parent > a,
.hdaf-header #hdaf-primary-menu > li > a:hover,
.hdaf-header #hdaf-primary-menu > li > a:focus-visible,
.hdaf-header #hdaf-primary-menu > li.current-menu-item > a,
.hdaf-header #hdaf-primary-menu > li.current-menu-ancestor > a,
.hdaf-header #hdaf-primary-menu > li.current-menu-parent > a{
  background: color-mix(in srgb, var(--hdaf-nav-orange) 12%, transparent) !important;
  color: var(--hdaf-nav-orange-hover) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hdaf-nav-orange) 18%, transparent);
}

.hdaf-primary-menu > li.menu-item-has-children > a,
.hdaf-header #hdaf-primary-menu > li.menu-item-has-children > a{
  padding-right:30px;
}

.hdaf-primary-menu > li.menu-item-has-children > a::after,
.hdaf-header #hdaf-primary-menu > li.menu-item-has-children > a::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  opacity:.72;
}

.hdaf-primary-menu li ul,
.hdaf-header #hdaf-primary-menu li ul,
.hdaf-header ul.hdaf-primary-menu li ul{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:10070;
  min-width:236px;
  margin:0;
  padding:8px;
  list-style:none;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 18px 46px rgba(15,23,42,.12);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.hdaf-primary-menu li:hover > ul,
.hdaf-primary-menu li:focus-within > ul,
.hdaf-primary-menu li.is-hdaf-sub-open > ul,
.hdaf-header #hdaf-primary-menu li:hover > ul,
.hdaf-header #hdaf-primary-menu li:focus-within > ul,
.hdaf-header #hdaf-primary-menu li.is-hdaf-sub-open > ul{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  visibility:visible;
}

.hdaf-primary-menu li ul::before,
.hdaf-header #hdaf-primary-menu li ul::before{
  content:"";
  position:absolute;
  top:-8px;
  left:20px;
  width:14px;
  height:14px;
  background:#ffffff;
  border-top:1px solid rgba(15,23,42,.10);
  border-left:1px solid rgba(15,23,42,.10);
  transform:rotate(45deg);
}

.hdaf-primary-menu li ul li a,
.hdaf-header #hdaf-primary-menu li ul li a,
.hdaf-header ul.hdaf-primary-menu li ul li a{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:11px;
  color:var(--hdaf-nav-text);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}

.hdaf-primary-menu li ul li a:hover,
.hdaf-primary-menu li ul li a:focus-visible,
.hdaf-primary-menu li ul li.current-menu-item > a,
.hdaf-header #hdaf-primary-menu li ul li a:hover,
.hdaf-header #hdaf-primary-menu li ul li a:focus-visible,
.hdaf-header #hdaf-primary-menu li ul li.current-menu-item > a{
  background:var(--hdaf-nav-orange) !important;
  color:#ffffff !important;
}

@media (max-width:1024px){
  .hdaf-navbar{
    display:block !important;
    visibility:visible !important;
  }

  .hdaf-header-nav{
    justify-content:flex-start;
    overflow:hidden;
  }

  .hdaf-primary-menu,
  .hdaf-header #hdaf-primary-menu,
  .hdaf-header ul.hdaf-primary-menu{
    justify-content:flex-start;
    gap:6px;
    width:100%;
    max-width:100%;
    padding:7px 12px;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .hdaf-primary-menu::-webkit-scrollbar,
  .hdaf-header #hdaf-primary-menu::-webkit-scrollbar,
  .hdaf-header ul.hdaf-primary-menu::-webkit-scrollbar{
    display:none;
  }

  .hdaf-primary-menu > li,
  .hdaf-header #hdaf-primary-menu > li,
  .hdaf-header ul.hdaf-primary-menu > li{
    flex:0 0 auto;
  }

  .hdaf-primary-menu > li > a,
  .hdaf-header #hdaf-primary-menu > li > a,
  .hdaf-header ul.hdaf-primary-menu > li > a{
    min-height:32px;
    padding:0 12px;
    font-size:13px;
    background:rgba(15,23,42,.035);
  }

  .hdaf-primary-menu li ul,
  .hdaf-header #hdaf-primary-menu li ul,
  .hdaf-header ul.hdaf-primary-menu li ul{
    display:none !important;
  }
}

@media (max-width:480px){
  .hdaf-primary-menu,
  .hdaf-header #hdaf-primary-menu,
  .hdaf-header ul.hdaf-primary-menu{
    padding-right:10px;
    padding-left:10px;
  }

  .hdaf-primary-menu > li > a,
  .hdaf-header #hdaf-primary-menu > li > a,
  .hdaf-header ul.hdaf-primary-menu > li > a{
    min-height:30px;
    padding:0 10px;
    font-size:12px;
  }
}


/* ======================================================
   HyperDAF vPro Patch: Clean navbar hover/active state
   Location: /assets/css/navbar.css
   Purpose:
   - Remove colored pill background from header navbar hover/current states.
   - Keep menu text black and use underline for active menu only.
   - Reduce menu weight to commercial-safe 650.
====================================================== */
.hdaf-primary-menu > li > a,
.hdaf-header #hdaf-primary-menu > li > a,
.hdaf-header ul.hdaf-primary-menu > li > a{
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font-weight:650 !important;
}

.hdaf-primary-menu > li > a::before,
.hdaf-header #hdaf-primary-menu > li > a::before,
.hdaf-header ul.hdaf-primary-menu > li > a::before{
  content:"";
  position:absolute;
  right:14px;
  bottom:2px;
  left:14px;
  height:2px;
  border-radius:999px;
  background:var(--hdaf-nav-orange);
  opacity:0;
  transform:scaleX(.35);
  transform-origin:center;
  transition:opacity .16s ease, transform .16s ease;
}

.hdaf-primary-menu > li > a:hover,
.hdaf-primary-menu > li > a:focus-visible,
.hdaf-header #hdaf-primary-menu > li > a:hover,
.hdaf-header #hdaf-primary-menu > li > a:focus-visible,
.hdaf-header ul.hdaf-primary-menu > li > a:hover,
.hdaf-header ul.hdaf-primary-menu > li > a:focus-visible{
  background:transparent !important;
  color:#0f172a !important;
  box-shadow:none !important;
}

.hdaf-primary-menu > li.current-menu-item > a,
.hdaf-primary-menu > li.current-menu-ancestor > a,
.hdaf-primary-menu > li.current-menu-parent > a,
.hdaf-header #hdaf-primary-menu > li.current-menu-item > a,
.hdaf-header #hdaf-primary-menu > li.current-menu-ancestor > a,
.hdaf-header #hdaf-primary-menu > li.current-menu-parent > a,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-item > a,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-ancestor > a,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-parent > a{
  background:transparent !important;
  color:#0f172a !important;
  box-shadow:none !important;
  font-weight:650 !important;
}

.hdaf-primary-menu > li.current-menu-item > a::before,
.hdaf-primary-menu > li.current-menu-ancestor > a::before,
.hdaf-primary-menu > li.current-menu-parent > a::before,
.hdaf-header #hdaf-primary-menu > li.current-menu-item > a::before,
.hdaf-header #hdaf-primary-menu > li.current-menu-ancestor > a::before,
.hdaf-header #hdaf-primary-menu > li.current-menu-parent > a::before,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-item > a::before,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-ancestor > a::before,
.hdaf-header ul.hdaf-primary-menu > li.current-menu-parent > a::before{
  opacity:1;
  transform:scaleX(1);
}

.hdaf-primary-menu li ul li a,
.hdaf-header #hdaf-primary-menu li ul li a,
.hdaf-header ul.hdaf-primary-menu li ul li a{
  color:#0f172a !important;
  font-weight:650 !important;
}

.hdaf-primary-menu li ul li a:hover,
.hdaf-primary-menu li ul li a:focus-visible,
.hdaf-primary-menu li ul li.current-menu-item > a,
.hdaf-header #hdaf-primary-menu li ul li a:hover,
.hdaf-header #hdaf-primary-menu li ul li a:focus-visible,
.hdaf-header #hdaf-primary-menu li ul li.current-menu-item > a,
.hdaf-header ul.hdaf-primary-menu li ul li a:hover,
.hdaf-header ul.hdaf-primary-menu li ul li a:focus-visible,
.hdaf-header ul.hdaf-primary-menu li ul li.current-menu-item > a{
  background:#f8fafc !important;
  color:#0f172a !important;
  box-shadow:none !important;
}

@media (max-width:1024px){
  .hdaf-primary-menu > li > a,
  .hdaf-header #hdaf-primary-menu > li > a,
  .hdaf-header ul.hdaf-primary-menu > li > a{
    background:transparent !important;
    color:#0f172a !important;
  }
}