/* Select independent device values at the same breakpoint as menu visibility. */
body li.menu-item {
  --kiml-menu-color: var(--kiml-menu-desktop-color);
  --kiml-menu-text: var(--kiml-menu-desktop-text);
}

@media (min-width: 1361px) {
  /* Only top-level items receive these classes. The fill belongs to the li. */
  body li.menu-item.kiml-menu-desktop-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) {
    background-color: var(--kiml-menu-color) !important;
  }

  /* Keep the direct link transparent so the item's full background is visible. */
  body li.menu-item.kiml-menu-desktop-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a {
    background-color: transparent !important;
    opacity: 1 !important;
  }

  /* The optional text color affects the direct link, in the same states.
     Divi's root-list active selector needs the stronger menu-module scope. */
  body li.menu-item.kiml-menu-desktop-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a,
  body :is(.et_pb_menu .et-menu, .et_pb_fullwidth_menu .fullwidth-menu) > li.menu-item.kiml-menu-desktop-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a,
  body #top-menu > li.menu-item.kiml-menu-desktop-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a {
    color: var(--kiml-menu-text) !important;
    opacity: 1 !important;
  }

  /* Each dropdown keeps the color of its own main item, including nested lists. */
  body .nav li.menu-item.kiml-menu-desktop-colored ul,
  body .et-menu li.menu-item.kiml-menu-desktop-colored ul {
    border-color: var(--kiml-menu-color) !important;
  }

  /* Optional descendant fill follows the main item's active/hover/focus state. */
  body :is(.nav, .et-menu, .fullwidth-menu) li.menu-item.kiml-menu-desktop-subitems.kiml-menu-desktop-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) ul,
  body :is(.nav, .et-menu, .fullwidth-menu) li.menu-item.kiml-menu-desktop-subitems.kiml-menu-desktop-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) ul li,
  body :is(.nav, .et-menu, .fullwidth-menu) li.menu-item.kiml-menu-desktop-subitems.kiml-menu-desktop-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) ul li > a {
    background-color: var(--kiml-menu-color) !important;
  }

  body :is(.nav, .et-menu, .fullwidth-menu) li.menu-item.kiml-menu-desktop-subitems.kiml-menu-desktop-text-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) ul a {
    color: var(--kiml-menu-text) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1360px) {
  body li.menu-item {
    --kiml-menu-color: var(--kiml-menu-mobile-color);
    --kiml-menu-text: var(--kiml-menu-mobile-text);
  }

  /* Only top-level items receive these classes. The fill belongs to the li. */
  body li.menu-item.kiml-menu-mobile-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) {
    background-color: var(--kiml-menu-color) !important;
  }

  /* Keep the direct link transparent so the item's full background is visible. */
  body li.menu-item.kiml-menu-mobile-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a {
    background-color: transparent !important;
    opacity: 1 !important;
  }

  /* The optional text color affects the direct link, in the same states.
     Divi's root-list active selector needs the stronger menu-module scope. */
  body li.menu-item.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a,
  body :is(.et_pb_menu .et-menu, .et_pb_fullwidth_menu .fullwidth-menu) > li.menu-item.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a,
  body #top-menu > li.menu-item.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > a {
    color: var(--kiml-menu-text) !important;
    opacity: 1 !important;
  }

  /* Preserve the parent link color even when descendant colors are disabled. */
  body .et_mobile_menu li.menu-item.menu-item-has-children.kiml-menu-mobile-text-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) > a {
    color: var(--kiml-menu-text) !important;
    opacity: 1 !important;
  }

  /* Mobile links share their main item's fill, so they must also use its
     optional text color while that fill is active, at every submenu level.
     Desktop dropdowns have their own background and keep the theme text color. */
  body .et_mobile_menu li.menu-item.menu-item-has-children.kiml-menu-mobile-subitems.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) a {
    color: var(--kiml-menu-text) !important;
    opacity: 1 !important;
  }

  /* RITTWEGER's toggle is a sibling of the link and its glyph has its own
     important color. Match both while the main item's shared fill is active. */
  body :is(.et_mobile_menu, #main-header #mobile_menu.et_mobile_menu) li.menu-item.menu-item-has-children.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > .sub-menu-toggle,
  body :is(.et_mobile_menu, #main-header #mobile_menu.et_mobile_menu) li.menu-item.menu-item-has-children.kiml-menu-mobile-text-colored:is(
    .current-menu-item,
    .current-menu-parent,
    .current-menu-ancestor,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor,
    :hover,
    :focus-within,
    :active
  ) > .sub-menu-toggle::before {
    color: var(--kiml-menu-text) !important;
  }

  /* Each dropdown keeps the color of its own main item, including nested lists. */
  body .nav li.menu-item.kiml-menu-mobile-colored ul,
  body .et-menu li.menu-item.kiml-menu-mobile-colored ul {
    border-color: var(--kiml-menu-color) !important;
  }

  body :is(.et_mobile_menu, #main-header #mobile_menu.et_mobile_menu) li.menu-item.menu-item-has-children.kiml-menu-mobile-subitems.kiml-menu-mobile-text-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) .sub-menu-toggle,
  body :is(.et_mobile_menu, #main-header #mobile_menu.et_mobile_menu) li.menu-item.menu-item-has-children.kiml-menu-mobile-subitems.kiml-menu-mobile-text-colored:is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) .sub-menu-toggle::before {
    color: var(--kiml-menu-text) !important;
  }

  /* Keep the parent colored without painting the submenu container behind it. */
  body .et_mobile_menu li.menu-item.kiml-menu-mobile-colored:not(.kiml-menu-mobile-subitems):is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) {
    background-color: transparent !important;
  }

  body .et_mobile_menu li.menu-item.kiml-menu-mobile-colored:not(.kiml-menu-mobile-subitems):is(.current-menu-item,.current-menu-parent,.current-menu-ancestor,.current_page_item,.current_page_parent,.current_page_ancestor,:hover,:focus-within,:active) > a {
    background-color: var(--kiml-menu-color) !important;
  }
}

/* Shared page borders use the active main item's color. */
html.kiml-menu-page-colored .et-search-form,
html.kiml-menu-page-colored .nav li ul,
html.kiml-menu-page-colored .et_mobile_menu,
html.kiml-menu-page-colored .footer-widget li::before,
html.kiml-menu-page-colored .et_pb_pricing li::before,
html.kiml-menu-page-colored blockquote {
  border-color: var(--kiml-menu-page-color) !important;
}

/* Keep the normal appearance and hit area; do not disable pointer events. */
body li.menu-item.kiml-menu-disabled,
body li.menu-item > a.kiml-menu-disabled-link,
body li.menu-item > a.kiml-menu-disabled-link * {
  cursor: not-allowed !important;
}

body li.menu-item.kiml-menu-disabled > ul {
  cursor: auto;
}

/* A disabled parent remains focusable so its dropdown can be reached by keyboard. */
body .nav li.menu-item.kiml-menu-disabled:focus-within > ul.sub-menu {
  visibility: visible;
  opacity: 1;
}

/* The label is inside the existing toggle, so text and icon share its action. */
body .mobile_menu_bar.kiml-mobile-labeled {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

body .mobile_menu_bar > .kiml-mobile-label {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

:root{--kiml-submenu-width:370px;}/* Global width for Divi desktop dropdowns only. */
@media (min-width: 1361px) {
  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li ul {
    width: var(--kiml-submenu-width) !important;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
  }

  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li ul li,
  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li ul li > a {
    width: 100% !important;
    box-sizing: border-box;
  }

  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li ul li > a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li li ul {
    left: 100% !important;
    right: auto !important;
  }

  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li.et-reverse-direction-nav:is([data-reverse-reason="nested"], [data-reverse-reason="both"]) li ul,
  body.kiml-menu-custom-width :is(#top-menu, .et-menu, .fullwidth-menu) li li.et-reverse-direction-nav > ul {
    left: auto !important;
    right: 100% !important;
  }
}
:root{--kiml-menu-mobile-max:1360;}/* Default values are replaced with the saved breakpoint before output. */
@media (max-width: 1360px) {
  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_pb_menu__menu,
  body.kiml-menu-custom-breakpoint .et_pb_fullwidth_menu .et_pb_row > nav,
  body.kiml-menu-custom-breakpoint:is(.et_header_style_left, .et_header_style_centered, .et_header_style_split) #top-menu-nav {
    display: none !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_mobile_nav_menu {
    display: flex !important;
    align-items: center;
    float: none;
  }

  body.kiml-menu-custom-breakpoint:is(.et_header_style_left, .et_header_style_centered, .et_header_style_split) #et_mobile_nav_menu {
    display: block !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_pb_menu__wrap {
    /* Divi 5's et_flex_module otherwise shrinks this to the hamburger width.
       Its tablet-only row reversal then moves the icon to the opposite edge. */
    flex: 1 1 auto !important;
    min-width: 0;
    justify-content: flex-end !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu--style-left_aligned, .et_pb_fullwidth_menu--style-left_aligned) :is(.et_pb_menu_inner_container, .et_pb_row) {
    align-items: center;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_mobile_menu {
    top: 100%;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_pb_mobile_menu_upwards .et_mobile_menu {
    top: auto;
    bottom: 100%;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu--style-inline_centered_logo, .et_pb_fullwidth_menu--style-inline_centered_logo) :is(.et_pb_menu_inner_container, .et_pb_row) > .et_pb_menu__logo-wrap {
    display: flex !important;
  }
}

@media (min-width: 1361px) {
  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_pb_menu__menu,
  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et-menu {
    display: flex !important;
  }

  body.kiml-menu-custom-breakpoint .et_pb_fullwidth_menu .et_pb_row > nav,
  body.kiml-menu-custom-breakpoint .et_pb_fullwidth_menu .fullwidth-menu,
  body.kiml-menu-custom-breakpoint:is(.et_header_style_left, .et_header_style_centered, .et_header_style_split) :is(#top-menu-nav, #top-menu) {
    display: block !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_mobile_nav_menu,
  body.kiml-menu-custom-breakpoint:is(.et_header_style_left, .et_header_style_centered, .et_header_style_split) #et_mobile_nav_menu {
    display: none !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu--style-inline_centered_logo, .et_pb_fullwidth_menu--style-inline_centered_logo) :is(.et_pb_menu_inner_container, .et_pb_row) > .et_pb_menu__logo-wrap {
    display: none !important;
  }

  body.kiml-menu-custom-breakpoint :is(.et_pb_menu, .et_pb_fullwidth_menu) .et_pb_menu__logo-slot {
    display: flex !important;
  }
}