/* VIP Services – refined desktop dropdown menus (v1.0.0)
 * Desktop/tablet nav only (.sf-menu, visible >= 768px). The mobile menu
 * (.mobile-menu) is not targeted. Deactivate the plugin to revert. */
@media screen and (min-width: 768px) {

  /* ---- Top level: maroon underline on hover / current section ---- */
  .header-container .menu-container .sf-menu > li > a { position: relative; }
  .header-container .menu-container .sf-menu > li > a::before {
    content: ""; position: absolute; left: 8px; right: 14px; bottom: 8px;
    height: 2px; background: #9A2629; border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .22s ease;
  }
  .header-container .menu-container .sf-menu > li:first-child > a::before { left: 0; }
  .header-container .menu-container .sf-menu > li:hover > a::before,
  .header-container .menu-container .sf-menu > li.current-menu-item > a::before,
  .header-container .menu-container .sf-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); }
  /* while another tab is hovered, only that tab is underlined */
  .header-container .menu-container .sf-menu:hover > li:not(:hover) > a::before { transform: scaleX(0); }

  /* ---- Panels (all levels) ---- */
  .header-container .menu-container .sf-menu ul.sub-menu {
    width: max-content !important;
    min-width: 230px !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
    padding: 6px 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 3px solid #9A2629 !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 34px rgba(20, 12, 12, .16), 0 3px 8px rgba(20, 12, 12, .06);
  }
  .header-container .menu-container .sf-menu ul.sub-menu ul.sub-menu {
    min-width: 270px !important;
    border-radius: 0 8px 8px 8px;
  }
  .header-container .menu-container .sf-menu ul.sub-menu ul.sub-menu ul.sub-menu {
    min-width: 300px !important;
  }

  /* first level drops straight under its tab */
  .header-container .menu-container .sf-menu > li:hover > ul.sub-menu,
  .header-container .menu-container .sf-menu > li.sfHover > ul.sub-menu {
    top: 48px !important;
    animation: vipMenuDown .2s ease-out both;
  }
  /* flyouts sit flush against the parent panel, first row aligned with the parent row */
  .header-container .menu-container .sf-menu ul.sub-menu li:hover > ul.sub-menu,
  .header-container .menu-container .sf-menu ul.sub-menu li.sfHover > ul.sub-menu {
    left: 100% !important; right: auto !important;
    top: -9px !important;
    animation: vipMenuSide .18s ease-out both;
  }
  /* edge flip (class added by vip-menu-style.js when a flyout would leave the screen) */
  .header-container .menu-container .sf-menu ul.sub-menu li.vip-flip:hover > ul.sub-menu,
  .header-container .menu-container .sf-menu ul.sub-menu li.vip-flip.sfHover > ul.sub-menu {
    left: auto !important; right: 100% !important;
    border-radius: 8px 0 8px 8px;
    animation-name: vipMenuSideL;
  }
  .header-container .menu-container .sf-menu > li.vip-flip:hover > ul.sub-menu,
  .header-container .menu-container .sf-menu > li.vip-flip.sfHover > ul.sub-menu {
    left: auto !important; right: 0 !important;
  }

  /* ---- Rows ---- */
  .header-container .menu-container .sf-menu ul.sub-menu li {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    background: transparent !important;
  }
  .header-container .menu-container .sf-menu ul.sub-menu li a,
  .header-container .menu-container .sf-menu ul.sub-menu li a:visited {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: .1px;
    color: #2b2b2b !important;
    background: transparent !important;
    border-top: 1px solid #f1ecec !important;
    padding: 11px 24px 11px 22px !important;
    transition: background-color .16s ease, color .16s ease, padding-left .16s ease, box-shadow .16s ease;
  }
  .header-container .menu-container .sf-menu ul.sub-menu > li:first-child > a { border-top-color: transparent !important; }
  .header-container .menu-container .sf-menu ul.sub-menu li.menu-item-has-children > a { padding-right: 44px !important; }

  /* hover / open branch */
  .header-container .menu-container .sf-menu ul.sub-menu li > a:hover,
  .header-container .menu-container .sf-menu ul.sub-menu li > a:focus,
  .header-container .menu-container .sf-menu ul.sub-menu li:hover > a,
  .header-container .menu-container .sf-menu ul.sub-menu li.sfHover > a {
    color: #9A2629 !important;
    background: #faf2f2 !important;
    box-shadow: inset 3px 0 0 #9A2629;
    padding-left: 26px !important;
  }
  /* current page (and its parents) */
  .header-container .menu-container .sf-menu ul.sub-menu li.current-menu-item > a,
  .header-container .menu-container .sf-menu ul.sub-menu li.current-menu-ancestor > a,
  .header-container .menu-container .sf-menu ul.sub-menu li.current_page_item > a {
    color: #9A2629 !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 #9A2629;
  }

  /* ---- Chevrons ---- */
  .header-container .menu-container .sf-menu ul.sub-menu li.menu-item-has-children > a::after {
    content: "" !important;
    font-family: inherit !important;
    position: absolute; right: 20px; top: 50%;
    float: none !important;
    width: 6px; height: 6px; margin-top: -4px;
    border-top: 2px solid #b9a5a5; border-right: 2px solid #b9a5a5;
    transform: rotate(45deg);
    transition: border-color .16s ease, right .16s ease;
  }
  .header-container .menu-container .sf-menu ul.sub-menu li.menu-item-has-children:hover > a::after,
  .header-container .menu-container .sf-menu ul.sub-menu li.menu-item-has-children > a:hover::after {
    border-color: #9A2629; right: 17px;
  }
  .header-container .menu-container .sf-menu ul.sub-menu li.vip-flip > a::after { transform: rotate(-135deg); }

  @keyframes vipMenuDown { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes vipMenuSide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  @keyframes vipMenuSideL { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .header-container .menu-container .sf-menu ul.sub-menu { animation: none !important; }
}