/*
 * Fullscreen presentation for Divi's native mobile menu.
 * No JS and no DOM moving: the menu still opens/closes with Divi's native classes.
 */

:root {
  --mobile-menu-bg: #2a4263;
  --mobile-menu-icon: #111111;
  --mobile-menu-close-icon: #9fbee2;
  --mobile-menu-link: #ffffff;
  --mobile-menu-link-hover: rgba(255, 255, 255, 0.72);
  --mobile-menu-logo: url("./medikapital-logo.svg");
  --mobile-menu-logo-width: 190px;
  --mobile-menu-logo-height: 64px;
  --mobile-menu-side-space: 24px;
  --mobile-menu-top-space: clamp(96px, 12vh, 132px);
  --mobile-menu-bottom-space: calc(40px + 88px);
}

@media (max-width: 980px) {
  .et-l--header,
  #main-header,
  .et_pb_menu,
  .et_pb_menu__wrap,
  .et_pb_menu__menu,
  .et_pb_menu__mobile_menu,
  .et_mobile_nav_menu,
  .mobile_nav,
  .mobile_nav.opened,
  #page-container .et_pb_sticky,
  #page-container .et_pb_sticky_module,
  #page-container .et_pb_section.et_pb_sticky,
  #page-container .et_pb_row.et_pb_sticky,
  #page-container .et_pb_column.et_pb_sticky,
  #page-container .et_pb_module.et_pb_sticky {
    overflow: visible !important;
    backface-visibility: visible !important;
  }

  .mobile_nav {
    position: relative !important;
  }

  .et_pb_menu__logo-wrap,
  .et_pb_menu__logo,
  .et_mobile_nav_menu,
  .mobile_nav,
  .mobile_menu_bar,
  .et_pb_sticky .et_pb_menu__logo-wrap,
  .et_pb_sticky .et_pb_menu__logo,
  .et_pb_sticky .et_mobile_nav_menu,
  .et_pb_sticky .mobile_nav,
  .et_pb_sticky .mobile_menu_bar {
    position: relative !important;
    z-index: 1002 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .et_pb_menu__logo-wrap,
  .et_pb_menu__logo,
  .mobile_menu_bar,
  .mobile_menu_bar:before,
  .mobile_menu_bar span,
  .et_pb_sticky .et_pb_menu__logo-wrap,
  .et_pb_sticky .et_pb_menu__logo,
  .et_pb_sticky .mobile_menu_bar,
  .et_pb_sticky .mobile_menu_bar:before,
  .et_pb_sticky .mobile_menu_bar span {
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
  }

  .et_pb_menu__logo-wrap img,
  .et_pb_menu__logo img,
  .et_pb_sticky .et_pb_menu__logo-wrap img,
  .et_pb_sticky .et_pb_menu__logo img {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile_menu_bar {
    position: relative;
    z-index: 1001;
  }

  .mobile_menu_bar:before {
    content: "a" !important;
    font-family: ETmodules !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: var(--mobile-menu-icon) !important;
    transition: color 0.2s ease;
  }

  .mobile_nav.opened .mobile_menu_bar:before,
  .mobile_nav.opened .mobile_menu_bar.mobile_menu_bar_toggle:before {
    content: "M" !important;
    color: var(--mobile-menu-close-icon) !important;
  }

  .mobile_nav .et_mobile_menu {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding:
      var(--mobile-menu-top-space)
      var(--mobile-menu-side-space)
      var(--mobile-menu-bottom-space)
      var(--mobile-menu-side-space) !important;
    border: 0 !important;
    background: var(--mobile-menu-bg) !important;
    list-style: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
    transition:
      opacity 0.24s ease,
      transform 0.24s ease,
      visibility 0s linear 0.24s !important;
    z-index: 1000 !important;
  }

  .mobile_nav.opened > .et_mobile_menu,
  .mobile_nav.opened .et_mobile_menu {
    display: flex !important;
    background-color: var(--mobile-menu-bg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    background: var(--mobile-menu-bg) !important;
    transition:
      opacity 0.24s ease,
      transform 0.24s ease,
      visibility 0s linear 0s !important;
  }

  .mobile_nav.opened,
  .mobile_nav.opened > .et_mobile_menu,
  .mobile_nav.opened .et_mobile_menu,
  .mobile_nav.opened ul.et_mobile_menu {
    background-color: var(--mobile-menu-bg) !important;
  }

  .mobile_nav .et_mobile_menu:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: var(--mobile-menu-logo-width);
    height: var(--mobile-menu-logo-height);
    transform: translateX(-50%);
    background-image: var(--mobile-menu-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
  }

  .mobile_nav .et_mobile_menu li,
  .mobile_nav .et_mobile_menu .menu-item {
    width: 100%;
    padding: 0 !important;
    text-align: center !important;
  }

  .mobile_nav .et_mobile_menu li a {
    display: block;
    width: 100%;
    padding: 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mobile-menu-link) !important;
    font-size: clamp(24px, 5vw, 34px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em;
    text-align: center !important;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .mobile_nav .et_mobile_menu li a:hover,
  .mobile_nav .et_mobile_menu li.current-menu-item > a,
  .mobile_nav .et_mobile_menu li.current_page_item > a {
    color: var(--mobile-menu-link-hover) !important;
    opacity: 1 !important;
  }

  .mobile_nav .et_mobile_menu .menu-item-has-children > a {
    padding-right: 0 !important;
  }

  .mobile_nav .et_mobile_menu .sub-menu {
    margin-top: 6px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .mobile_nav .et_mobile_menu .sub-menu li a {
    font-size: clamp(16px, 3.5vw, 20px) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }
}

@media (max-width: 767px) {
  .mobile_nav .et_mobile_menu {
    padding-top: 110px !important;
  }
}