/* htrans-ns 
no need js
pure header transparent, work with or without sticky*/

:root{
  --header-height:var(--header-height-mobile);
  --header-fhwh:calc(100vh - var(--wp-admin--admin-bar--height,0px) - var(--header-height));
  --header-fh:calc(100vh - var(--wp-admin--admin-bar--height,0px));
}

@media (min-width:1024px){
  :root{
    --header-height:var(--header-height-desktop,var(--header-height-mobile,48px));
  }
}

header{
  transition:background-color var(--header-transition-duration,200ms) var(--header-transition-easing,ease-in),
            border-color var(--header-transition-duration,200ms) var(--header-transition-easing,ease-in),
            color var(--header-transition-duration,200ms) var(--header-transition-easing,ease-in);
}

header.header-transparent:not([role]):has(.large-logo),
header:has(.header-transparent:not([role]) .large-logo){
  --header-bg-top: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  --header-color-top: var(--contrast-max);
}

header.header-transparent.light-bg:not([role]),
header.light-bg:has(.header-transparent:not([role])),
header:has(.header-transparent.light-bg:not([role])){
  --header-bg-top: linear-gradient(to bottom, var(--contrast-lg-a30), transparent);
}

header.header-transparent:not([role]),
header:has(.header-transparent:not([role])){
  /* Your existing sticky/top/z-index here if needed */  
  background: var(--header-bg-top);
  color: var(--header-color-top);
  /* border-bottom: 1px solid transparent; */

  z-index: 2;
  position: relative;
  margin-bottom: calc(0px - var(--header-height)) !important;
}

header.header-transparent:is(:hover, :focus-within, :focus-visible),
header:has(.header-transparent):has(:hover, :focus-within, :focus-visible){
    background: var(--header-bg-top-act);
    color: var(--header-color-top-act);
    /* border-bottom: 1px solid var(--header-border); */
}

header.header-transparent + .entry-content > section:first-child:has(form),
header.header-transparent + section:not(.entry-content):has(form),
header:has(.header-transparent) + .entry-content > section:first-child:has(form),
header:has(.header-transparent) + section:not(.entry-content):has(form){
  padding-top: calc(clamp(40px,calc(40px + 24 * (100vw - 640px) / 384),64px) + var(--header-height));
  padding-bottom: clamp(40px,calc(40px + 24 * (100vw - 640px) / 384),64px);
}

/* .header-transparent{
  border-bottom: 1px solid transparent;
} */
header:not(.title){
    background: var(--header-bg);
    color: var(--header-color);
    /* border-bottom: 1px solid var(--header-border); */
}

header.header-transparent:not(:hover, :focus-within, :focus-visible) :is(#mega-menu-wrap-max_mega_menu_1, #mega-menu-wrap-max_mega_menu_2):not( .mega-menu-open) :is(#mega-menu-max_mega_menu_1, #mega-menu-max_mega_menu_2) > li.mega-menu-item > a.mega-menu-link,
header:has(.header-transparent):not(:hover, :focus-within, :focus-visible) :is(#mega-menu-wrap-max_mega_menu_1, #mega-menu-wrap-max_mega_menu_2):not( .mega-menu-open) :is(#mega-menu-max_mega_menu_1, #mega-menu-max_mega_menu_2) > li.mega-menu-item > a.mega-menu-link{
    color: var(--header-color-top);
}

header.header-transparent:is(:hover, :focus-within, :focus-visible) :is(#mega-menu-wrap-max_mega_menu_1, #mega-menu-wrap-max_mega_menu_2):not( .mega-menu-open) :is(#mega-menu-max_mega_menu_1, #mega-menu-max_mega_menu_2) > li.mega-menu-item > a.mega-menu-link,
header:has(.header-transparent):has(:hover, :focus-within, :focus-visible) :is(#mega-menu-wrap-max_mega_menu_1, #mega-menu-wrap-max_mega_menu_2):not( .mega-menu-open) :is(#mega-menu-max_mega_menu_1, #mega-menu-max_mega_menu_2) > li.mega-menu-item > a.mega-menu-link{
    color: var(--header-color);
}