/* MiMe navigation: base styling, overlay and responsive geometry. */

#main-header {
  background: var(--cs-ink) !important;
  border-bottom: 5px solid var(--cs-yellow);
  box-shadow: none !important;
}
#main-header .container { width: min(92%, 1480px); }
#logo { display: none !important; }
.logo_container a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.logo_container a::before {
  content: "COMIC SANS";
  color: var(--cs-yellow);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  letter-spacing: .035em;
  line-height: 1;
  transform: rotate(-2deg);
  text-shadow: 3px 3px 0 var(--cs-red);
}
#top-menu a {
  color: var(--cs-white) !important;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#top-menu li.current-menu-item > a, #top-menu a:hover { color: var(--cs-yellow) !important; opacity: 1; }
#top-menu-nav > ul > li > a { padding-bottom: 30px !important; }
.mobile_menu_bar::before { color: var(--cs-yellow) !important; }
.et_mobile_menu {
  background: var(--cs-ink) !important;
  border-top: 4px solid var(--cs-yellow) !important;
}
.et_mobile_menu a { color: var(--cs-white) !important; }
@media (min-width: 1181px) {
  #et-top-navigation { padding-left: 190px !important; }}

/* Accessible navigation dropdown palette */
.nav li ul,
#top-menu li ul {
    background: var(--cs-ink) !important;
    border: 4px solid var(--cs-ink) !important;
    border-top-color: var(--cs-yellow) !important;
    box-shadow: 7px 7px 0 var(--cs-red-dark) !important;
    padding: 8px 0 !important;
}
#top-menu li li a {
    width: 200px !important;
    color: var(--cs-white) !important;
    background: transparent !important;
    padding: 10px 18px !important;
    line-height: 1.35 !important;
}
#top-menu li li a:hover,
#top-menu li li.current-menu-item > a,
#top-menu li li.current-menu-ancestor > a {
    color: var(--cs-ink) !important;
    background: var(--cs-yellow) !important;
    opacity: 1 !important;
}
.et_mobile_menu .menu-item-has-children > a {
    color: var(--cs-yellow) !important;
}
.et_mobile_menu .sub-menu a:hover,
.et_mobile_menu .sub-menu .current-menu-item > a {
    color: var(--cs-ink) !important;
    background: var(--cs-yellow) !important;
}


/* Slightly taller global header, still flush with custom heroes */
#main-header { min-height: 92px !important; }
#main-header .container.et_menu_container,
#main-header .logo_container { height: 87px !important; }
.et_header_style_left #et-top-navigation { padding-top: 38px !important; }
.et_header_style_left #et-top-navigation nav > ul > li > a { padding-bottom: 38px !important; }


/* Persistent primary logo visibility */
body #page-container #main-header .logo_container > a {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: 100%;
}
body #page-container #main-header .logo_container > a > #logo {
  display: block !important;
  width: auto !important;
  max-width: 145px !important;
  max-height: 74px !important;
}
@media (max-width: 1180px) {
  body #page-container #main-header .logo_container > a > #logo {
    max-width: 122px !important;
    max-height: 62px !important;
  }}

/* Remove legacy generated wordmark */
body #page-container #main-header .logo_container a::before { content: none !important; display: none !important; width: 0 !important; }


/* Master hero composition 2026-09-08 v1 */
#main-header,
#main-header.et-fixed-header {
  background: #15111c !important;
  border-bottom: 5px solid #e7e136;
  box-shadow: 0 7px 0 #000 !important;
}
#main-header .container { min-height: 95px; }
body #page-container #main-header .logo_container > a {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: 100%;
}
body #page-container #main-header .logo_container > a::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
}
body #page-container #main-header #logo {
  display: block !important;
  width: auto !important;
  max-width: 145px !important;
  max-height: 74px !important;
  padding: 0 !important;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #e7e136;
  transform: rotate(-1deg);
}
#main-header #top-menu a,
#main-header .et_mobile_menu a { color: #fff !important; }
#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current-menu-ancestor > a {
  color: #e7e136 !important;
  opacity: 1;
}
#main-header .nav li ul,
#main-header .et_mobile_menu {
  background: #15111c !important;
  border-color: #e7e136 !important;
}
#main-header .mobile_menu_bar::before { color: #e7e136 !important; }

@media (max-width:1180px) {
  #main-header .container { min-height: 86px; }
  body #page-container #main-header #logo {
    max-width: 122px !important;
    max-height: 62px !important;
  }}


/* Transparent logo and mobile QA polish 2026-09-08 */
body #page-container #main-header #logo {
  width: auto !important;
  max-width: 182px !important;
  max-height: 78px !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  object-fit: contain !important;
}
@media (max-width: 1180px) {
  body #page-container #main-header #logo {
    max-width: 148px !important;
    max-height: 68px !important;
  }}
@media (max-width: 600px) {
  body #page-container #main-header #logo {
    max-width: 140px !important;
    max-height: 64px !important;
  }}


/* Fullscreen mobile navigation 2026-09-08 */
@media (max-width: 1180px) {
  html:has(.mobile_nav.opened),
  body:has(.mobile_nav.opened) {
    overflow: hidden !important;
  }

  #main-header .logo_container {
    z-index: 10002;
  }

  #et-top-navigation {
    z-index: 10003;
  }

  #et_top_search {
    display: none !important;
  }

  .mobile_menu_bar {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 2px solid #0f0b16 !important;
    border-radius: 0 !important;
    background: #e7e136 !important;
    box-shadow: 4px 4px 0 #000 !important;
    cursor: pointer;
    z-index: 10005;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .mobile_menu_bar:hover {
    transform: translate(-1px,-1px);
    box-shadow: 5px 5px 0 #000 !important;
  }

  .mobile_menu_bar::before,
  .mobile_menu_bar::after {
    content: "" !important;
    position: absolute !important;
    left: 9px !important;
    width: 20px !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #0f0b16 !important;
    font-family: inherit !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transition: top .22s ease, transform .22s ease, box-shadow .22s ease, opacity .15s ease;
  }

  .mobile_menu_bar::before {
    top: 10px !important;
    box-shadow: 0 7px 0 #0f0b16, 0 14px 0 #0f0b16 !important;
  }

  .mobile_menu_bar::after {
    top: 17px !important;
    opacity: 0;
  }

  .mobile_nav.opened .mobile_menu_bar::before {
    top: 17px !important;
    transform: rotate(45deg);
    box-shadow: none !important;
  }

  .mobile_nav.opened .mobile_menu_bar::after {
    opacity: 1;
    transform: rotate(-45deg);
  }

  #mobile_menu.et_mobile_menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: calc(130px + var(--wp-admin--admin-bar--height, 0px)) 24px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 88% 78%, rgba(231,225,54,.17) 0 2px, transparent 3px) 0 0 / 18px 18px,
      linear-gradient(145deg, #171020 0%, #0f0b16 55%, #24102a 100%) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 10000 !important;
    animation: cs-menu-in .24s ease both;
  }

  #mobile_menu.et_mobile_menu::before {
    content: "KIES JE AVONTUUR" !important;
    display: block;
    width: min(100%, 460px);
    margin: 0 auto 13px;
    color: #e7e136;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .22em;
  }

  #mobile_menu.et_mobile_menu::after {
    content: "ALL ABOUT HEROES" !important;
    display: block;
    width: min(100%, 460px);
    margin: 22px auto 0;
    padding-top: 15px;
    border-top: 2px solid #e7e136;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .24em;
    text-align: right;
  }

  #mobile_menu.et_mobile_menu > li {
    width: min(100%, 460px);
    margin: 0 auto !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
  }

  #mobile_menu.et_mobile_menu > li:first-of-type {
    border-top: 3px solid #e7e136 !important;
  }

  #mobile_menu.et_mobile_menu > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 10px 34px 10px 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: clamp(19px, 5.5vw, 25px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: 1 !important;
  }

  #mobile_menu.et_mobile_menu > li > a::after {
    content: "→";
    position: absolute;
    right: 4px;
    color: #e7e136;
    font-size: 22px;
    transition: transform .18s ease;
  }

  #mobile_menu.et_mobile_menu > li > a:hover::after,
  #mobile_menu.et_mobile_menu > li.current-menu-item > a::after,
  #mobile_menu.et_mobile_menu > li.current-menu-ancestor > a::after {
    transform: translateX(4px);
  }

  #mobile_menu.et_mobile_menu > li > a:hover,
  #mobile_menu.et_mobile_menu > li.current-menu-item > a,
  #mobile_menu.et_mobile_menu > li.current-menu-ancestor > a {
    color: #e7e136 !important;
  }

  #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    font-weight: 900 !important;
  }

  #mobile_menu.et_mobile_menu .menu-item-has-children > a::after {
    content: "↘";
  }

  #mobile_menu.et_mobile_menu .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin: -1px 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #mobile_menu.et_mobile_menu .sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile_menu.et_mobile_menu .sub-menu a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 7px 5px !important;
    border: 2px solid rgba(231,225,54,.5) !important;
    background: rgba(231,225,54,.06) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    opacity: 1 !important;
  }

  #mobile_menu.et_mobile_menu .sub-menu a:hover,
  #mobile_menu.et_mobile_menu .sub-menu .current-menu-item > a {
    border-color: #e7e136 !important;
    background: #e7e136 !important;
    color: #0f0b16 !important;
  }

  @keyframes cs-menu-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }}

@media (max-width: 420px) {
  #mobile_menu.et_mobile_menu {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  #mobile_menu.et_mobile_menu > li > a {
    min-height: 45px;
    font-size: 19px !important;
  }}


/* Clean fullscreen menu close 2026-09-08 */
@media (max-width: 1180px) {
  #mobile_menu.et_mobile_menu {
    animation: none !important;
  }

  .mobile_nav.opened #mobile_menu.et_mobile_menu {
    display: block !important;
    animation: cs-menu-in .24s ease both !important;
  }

  .mobile_nav.closed #mobile_menu.et_mobile_menu {
    display: none !important;
    animation: none !important;
  }}


/* Mobile menu vertical alignment 2026-09-08 */
@media (max-width: 1180px) {
  #main-header #et-top-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 87px !important;
    padding-top: 0 !important;
  }

  #main-header #et_mobile_nav_menu,
  #main-header .mobile_nav {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    margin: 0 !important;
  }}


/* Persistent mobile header 2026-09-08 */
@media (max-width: 1180px) {

  body.et_fixed_nav #main-header,
  body.et_fixed_nav #main-header.et-fixed-header {
    position: fixed !important;
    inset-inline: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    transform: none !important;
  }

  body.et_fixed_nav #page-container {
    padding-top: 91px !important;
  }

  body.admin-bar.et_fixed_nav #main-header,
  body.admin-bar.et_fixed_nav #main-header.et-fixed-header {
    top: 32px !important;
  }}

@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar.et_fixed_nav #main-header,
  body.admin-bar.et_fixed_nav #main-header.et-fixed-header {
    top: 46px !important;
  }}

@media (max-width: 600px) {
  body.admin-bar.et_fixed_nav #main-header,
  body.admin-bar.et_fixed_nav #main-header.et-fixed-header {
    top: 0 !important;
  }}
/* One viewport-based header and overlay, including the WordPress toolbar. */
@media (max-width: 1180px) {
  body { --cs-header-height: 92px; --cs-admin-offset: 0px; }
  body.admin-bar { --cs-admin-offset: 32px; }
  html { scroll-padding-top: 150px; }

  body.et_fixed_nav #page-container { padding-top: var(--cs-header-height) !important; }
  body.et_fixed_nav #main-header,
  body.et_fixed_nav #main-header.et-fixed-header,
  body.admin-bar.et_fixed_nav #main-header,
  body.admin-bar.et_fixed_nav #main-header.et-fixed-header {
    position: fixed !important;
    top: var(--cs-admin-offset) !important;
    inset-inline: 0 !important;
    height: var(--cs-header-height) !important;
    min-height: var(--cs-header-height) !important;
    box-sizing: border-box;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
  }
  body #main-header .container.et_menu_container,
  body #main-header .logo_container,
  body #main-header #et-top-navigation {
    height: 87px !important;
    min-height: 0 !important;
  }
  body #main-header #et-top-navigation { padding: 0 !important; }
  body #main-header #top-menu-nav { display: none !important; }
  body #main-header .mobile_menu_bar { touch-action: manipulation; }
  body #main-header .mobile_menu_bar:focus-visible {
    outline: 3px solid white;
    outline-offset: 6px;
  }
  body #main-header #mobile_menu.et_mobile_menu {
    top: calc(var(--cs-admin-offset) + var(--cs-header-height)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 24px 24px calc(28px + env(safe-area-inset-bottom)) !important;
    animation: none !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
  }
  body #main-header .mobile_nav.opened #mobile_menu.et_mobile_menu {
    display: block !important;
    animation: none !important;
  }
  body #main-header .mobile_nav.closed #mobile_menu.et_mobile_menu {
    display: none !important;
  }
}
@media (max-width: 782px) {
  body.admin-bar { --cs-admin-offset: 46px; }
}
@media (max-width: 420px) {
  body #main-header #mobile_menu.et_mobile_menu { padding-inline: 18px !important; }
}

/* Only this file owns header geometry. Match the content offset to the border box. */
@media (min-width: 1181px) {
  body.et_fixed_nav #main-header { height: 100px !important; min-height: 100px !important; box-sizing: border-box; }
  body.et_fixed_nav #page-container { padding-top: 100px !important; }
}
@media (max-width: 1180px) {
  body #main-header #et_mobile_nav_menu { display: flex !important; }
}