/* WCAG 2.2 AA category mega-menu */
:root{
  --ag-brand-red:#e5383b;
  --ag-menu-text:#4b5c6e;
  --ag-menu-text-hover:#181e25;
  --ag-menu-bg:#fff;
  --ag-menu-hover-bg:#f4f6f9;
}
html.dark{
  --ag-menu-text:#e2e8f0;
  --ag-menu-text-hover:#ffffff;
  --ag-menu-bg:#172033;
  --ag-menu-hover-bg:#273449;
}

.header-cat-trigger{
  min-height:44px;
  background-color:var(--ag-brand-red)!important;
  color:#fff!important;
  transition:opacity .18s ease,transform .18s ease;
}
.header-cat-trigger:hover,
.header-cat-trigger.is-open,
.header-cat-trigger:focus-visible{
  background-color:#c42e32!important;
  color:#fff!important;
  outline:none;
}
.header-cat-trigger:focus-visible{
  box-shadow:0 0 0 3px #ffffff,0 0 0 5px var(--ag-brand-red);
}
html.dark .header-cat-trigger:focus-visible{
  box-shadow:0 0 0 3px #172033,0 0 0 5px var(--ag-brand-red);
}

.header-mega-panel__card{
  background:var(--ag-menu-bg)!important;
}
html.dark .header-mega-panel__card,
html.dark .dk-mega__aside,
html.dark .dk-mega__panel,
html.dark .dk-mega{
  background:#172033!important;
  border-color:#273449!important;
}

.dk-mega__grid{
  align-items:stretch;
}

.dk-mega__label{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  line-height:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:inherit;
}

.dk-mega__root-btn,
.dk-mega__child-btn,
.dk-mega__grand-link{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  height:48px;
  min-height:48px;
  max-height:48px;
  padding-inline:10px;
  color:var(--ag-menu-text)!important;
  transition:none;
}
.dk-mega__root-btn{
  overflow:hidden;
  width:100%;
}
.dk-mega__all-link{
  position:relative;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--ag-menu-text)!important;
}

.dk-mega__root-btn::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:var(--ag-brand-red);
  opacity:0;
  transform:scaleY(.65);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.dk-mega__root-btn:hover,
.dk-mega__root-btn.is-active,
.dk-mega__root-btn:focus-visible{
  background:var(--ag-menu-hover-bg)!important;
  color:var(--ag-menu-text-hover)!important;
  box-shadow:none!important;
  outline:none;
}
.dk-mega__root-btn:hover::before,
.dk-mega__root-btn.is-active::before,
.dk-mega__root-btn:focus-visible::before{
  opacity:1;
  transform:scaleY(1);
}
.dk-mega__root-btn:focus-visible{
  box-shadow:inset 0 0 0 2px var(--ag-brand-red)!important;
}
.dk-mega__root-btn:hover .dk-mega__label,
.dk-mega__root-btn.is-active .dk-mega__label,
.dk-mega__root-btn:focus-visible .dk-mega__label{
  color:inherit!important;
}
html.dark .dk-mega__root-btn{
  color:#e2e8f0!important;
}
html.dark .dk-mega__root-btn:hover,
html.dark .dk-mega__root-btn.is-active,
html.dark .dk-mega__root-btn:focus-visible{
  background:#273449!important;
  color:#fff!important;
}
.dk-mega__all-link:hover,
.dk-mega__all-link:focus-visible{
  color:var(--ag-menu-text-hover)!important;
  outline:none;
}
html.dark .dk-mega__all-link,
html.dark .dk-mega__all-link:hover,
html.dark .dk-mega__all-link:focus-visible{
  color:#fff!important;
}
.dk-mega__all-link svg,
.dk-mega svg[class~="text-[#BF2222]"]{
  color:var(--ag-brand-red)!important;
}

.dk-mega__child{
  min-height:48px;
  border-color:#eef1f5;
}
html.dark .dk-mega__child{
  background:#172033!important;
  border-color:#273449!important;
}
.dk-mega__child-btn:hover,
.dk-mega__child-btn:focus-within,
.dk-mega__child-btn:focus-visible,
a.dk-mega__child-btn:hover,
a.dk-mega__child-btn:focus-visible{
  background:var(--ag-menu-hover-bg)!important;
  color:var(--ag-menu-text-hover)!important;
  outline:none;
}
html.dark .dk-mega__child-btn,
html.dark .dk-mega__child-btn a,
html.dark .dk-mega__child-btn .dk-mega__label{
  color:#e2e8f0!important;
}
html.dark .dk-mega__child-btn:hover,
html.dark .dk-mega__child-btn:focus-within,
html.dark a.dk-mega__child-btn:hover,
html.dark a.dk-mega__child-btn:focus-visible,
html.dark .dk-mega__child-btn:hover .dk-mega__label,
html.dark .dk-mega__child-btn:hover a,
html.dark .dk-mega__child-btn:focus-within .dk-mega__label{
  color:#fff!important;
}
html.dark a.dk-mega__child-btn:hover,
html.dark a.dk-mega__child-btn:focus-visible{
  background:#273449!important;
}
html.dark .dk-mega__child-btn:hover,
html.dark .dk-mega__child-btn:focus-within{
  background:#273449!important;
}

.dk-mega__child-toggle{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dk-mega__child-toggle:hover,
.dk-mega__child-toggle:focus-visible{
  background:transparent;
  color:var(--ag-brand-red)!important;
  outline:none;
}
.dk-mega__child-toggle:focus-visible{
  box-shadow:inset 0 0 0 2px var(--ag-brand-red);
}
.dk-mega__child-toggle svg{
  width:12px;
  height:12px;
  color:var(--ag-brand-red);
}

html.dark .dk-mega__grand-wrap{
  background:#172033!important;
  border-color:#273449!important;
}
.dk-mega__grand-link:hover,
.dk-mega__grand-link:focus-visible{
  background:var(--ag-menu-hover-bg)!important;
  color:var(--ag-menu-text-hover)!important;
  outline:none;
}
html.dark .dk-mega__grand-link{
  color:#e2e8f0!important;
}
html.dark .dk-mega__grand-link:hover,
html.dark .dk-mega__grand-link:focus-visible,
html.dark .dk-mega__grand-link:hover .dk-mega__label,
html.dark .dk-mega__grand-link:focus-visible .dk-mega__label{
  background:#273449!important;
  color:#fff!important;
}

html.dark .dk-mega a[class~="text-[#BF2222]"],
html.dark .dk-mega [class~="hover:text-[#BF2222]"]:hover,
html.dark .dk-mega a[class*="hover:text-[#FA5C64]"]:hover,
html.dark .dk-mega a[class*="hover:text-[#BF2222]"]:hover{
  color:#fff!important;
}
html.dark .dk-mega svg[class~="text-[#BF2222]"],
html.dark .dk-mega .dk-mega__child-toggle svg{
  color:var(--ag-brand-red)!important;
}

html.dark .mobile-cat-children a:hover,
html.dark .mobile-cat-children a:focus-visible,
html.dark .mobile-cat-children .group:hover span,
html.dark .mobile-cat-children [class*="hover:text-[#BF2222]"]:hover,
html.dark .mobile-cat-children [class*="group-hover:text-[#BF2222]"]{
  color:#fff!important;
}

@media (prefers-reduced-motion:reduce){
  .header-cat-trigger,
  .header-cat-trigger__chevron,
  .dk-mega__root-btn::before,
  .header-mega-panel,
  .header-mega-panel [class*="transition"]{
    transition:none!important;
    animation:none!important;
  }
  .dk-mega__root-btn::before{
    transform:none;
  }
}