/* =========================================================
   Dason header — hangangfood-style mega menu
   Hovering the header opens a full-width white panel and reveals
   every top-level dropdown at once. Pure CSS (#header_main:hover);
   the base header positioning (Enfold sticky/white) is untouched.
   ========================================================= */

/* Full-width white backdrop, sits just below the header bar.
   #header_main is already viewport-wide with overflow: visible.
   z-index: -1 keeps it behind the menu content while still
   floating above the page (inside #header's fixed context). */
#top #header_main::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 200px;
  background: #fff;
  /* Hairline at the top makes the header / panel seam distinct
     (both surfaces are white otherwise). */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Collapsed to a thin line at the top — unfolds downward on hover. */
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.25s ease, visibility 0.25s ease, clip-path 0.32s ease;
  z-index: -1;
}

/* Hovering anywhere on the header opens the mega menu.
   pointer-events: auto lets the cursor travel onto the empty
   parts of the panel without the menu collapsing. */
#top #header_main:hover::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Unfold the panel from top to bottom. */
  clip-path: inset(0 0 0 0);
}

/* Reveal every top-level dropdown simultaneously (hangangfood style).
   Each .sub-menu is absolutely positioned under its own parent item,
   so they line up as columns across the white panel. clip-path opens
   each column top-to-bottom in sync with the backdrop. */
#top #header_main:hover .av-main-nav > .menu-item-has-children > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
}

/* --- Strip Enfold's default dropdown chrome ---
   Enfold gives sub-menu links 1px side borders, the <ul> a shadow,
   a bullet marker span and a hover fill box. Clear all of it so the
   columns sit flat on the white mega-menu panel (white-on-white). */
#top #header .av-main-nav .sub-menu,
#top #header .av-main-nav .sub-menu li,
#top #header .av-main-nav .sub-menu a {
  border: 0 !important;
  box-shadow: none !important;
}

/* Transparent backgrounds on the dropdown <ul>, <li> and <a> so the
   only white surface is the full-width backdrop panel — no narrow
   white column flashing in before the panel. */
#top #header .av-main-nav .sub-menu,
#top #header .av-main-nav .sub-menu li,
#top #header .av-main-nav .sub-menu a {
  background: transparent !important;
}

/* Hide Enfold's bullet marker inside dropdown items. */
#top #header .av-main-nav .sub-menu .avia-bullet {
  display: none !important;
}

/* Match each dropdown column to its parent menu item's width.
   Enfold's default 208px sub-menu is wider than the 139px item
   spacing, so adjacent dropdowns overlap when shown together.
   width: 100% pins each column to its <li>, so they tile cleanly
   side by side (hangangfood-style columns aligned under parents).
   padding-top adds breathing room so items don't sit flush against
   the header / backdrop boundary. */
#top #header .av-main-nav > .menu-item-has-children > .sub-menu {
  width: 100% !important;
  min-width: 0 !important;
  padding-top: 18px !important;
  /* Collapsed at the top; reveals top-to-bottom in sync with the
     backdrop unfold. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.32s ease, opacity 0.32s ease;
}

/* Dropdown links: centered text, clean accent-colour hover with no
   leftover Enfold fill box. */
#top #header .av-main-nav .sub-menu a {
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center !important;
}

#top #header .av-main-nav .sub-menu a:hover,
#top #header .av-main-nav .sub-menu li:hover > a {
  background: transparent !important;
  color: var(--dason-accent-strong) !important;
}

/* Mobile uses Enfold's hamburger panel, so the desktop hover backdrop
   must not appear behind or below the mobile header. */
@media (max-width: 989px) {
  #top #header_main::after {
    content: none;
    display: none;
  }

  #top #header_main:hover .av-main-nav > .menu-item-has-children > .sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0) !important;
  }

  #top #header_main .container.av-logo-container {
    width: auto !important;
    max-width: none !important;
    margin-right: 20px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #top #av-burger-menu-ul {
    vertical-align: top !important;
  }
}

/* --- Menu typography overrides ---
   Base values live in style.css; these overrides are kept here in
   header.css per request. header.css is enqueued after child-style,
   so same-specificity rules win without !important. Wrapped in the
   same @media (min-width: 990px) as the base rules. */
@media (min-width: 990px) {
  /* Main menu: larger label text. */
  #top #header .av-main-nav > li > a,
  #top #header .av-main-nav > li > a .avia-menu-text {
    font-size: 18px;
  }

  /* Wider spacing between main menu items (base is 40px in style.css).
     Header has ~150px of free space right of the nav, so this fits. */
  #top #header_main .av-main-nav > li > a {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Sub-menu: lighter weight than the main menu for clearer
     hierarchy (main 600 vs sub 400). */
  #top #header .av-main-nav .sub-menu a,
  #top #header .av-main-nav .sub-menu a .avia-menu-text {
    font-size: 16px;
    font-weight: 500;
  }
}


#menu-item-431 .avia-menu-text {
    color: #5f9521 !important;
    font-weight: 600 !important;  
}