/* Hapo mobile off-canvas menu (Flatsome #main-menu). Mobile request 2026-10-20. */
.off-canvas-left .mfp-content:has(#main-menu),
.off-canvas-right .mfp-content:has(#main-menu) {
  --drawer-width: min(340px, 88vw);
  --hapo-mm-green: #00c14a;
  --hapo-mm-green-dark: #00955b;
  --hapo-mm-text: #09090b;
  --hapo-mm-muted: #737373;
  --hapo-mm-line: #ececec;
  width: var(--drawer-width);
  background:
    radial-gradient(120% 60% at 0% 0%, rgb(28 202 103 / 10%) 0%, transparent 60%),
    #fff;
  box-shadow: 0 0 40px rgb(9 9 11 / 22%);
  color: var(--hapo-mm-text);
  font-family: Manrope, Arial, sans-serif;
}

.off-canvas-left .mfp-content:has(#main-menu) { border-radius: 0 20px 20px 0; }
.off-canvas-right .mfp-content:has(#main-menu) { border-radius: 20px 0 0 20px; }

.mfp-bg.off-canvas:not(.off-canvas-center) {
  background: rgb(9 9 11 / 72%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#main-menu { min-height: 100%; display: flex; flex-direction: column; }
#main-menu .sidebar-menu { flex: 1 0 auto; padding: 8px 0 16px; }

/* Brand header */
.hapo-mm-brand {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px 64px 16px 20px;
  border-bottom: 1px solid var(--hapo-mm-line);
}
.hapo-mm-brand a { display: inline-flex; align-items: center; }
.hapo-mm-brand img { display: block; width: auto; max-width: 168px; height: 36px; object-fit: contain; }
.hapo-mm-brand__name { color: var(--hapo-mm-text); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* Close button: round chip inside the drawer */
.off-canvas:not(.off-canvas-center) .mfp-close {
  position: fixed;
  top: 16px !important;
  left: calc(var(--drawer-width, 340px) - 56px);
  right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4f6f5;
  color: var(--hapo-mm-text, #09090b) !important;
  mix-blend-mode: normal;
  opacity: 1 !important;
  transition: background-color .2s ease, transform .2s ease;
}
.off-canvas-left:not(.off-canvas-center) .mfp-close { left: calc(min(340px, 88vw) - 56px); }
.off-canvas-right:not(.off-canvas-center) .mfp-close { left: auto; right: calc(min(340px, 88vw) - 56px); }
.off-canvas:not(.off-canvas-center) .mfp-close svg { width: 20px; height: 20px; }
.off-canvas:not(.off-canvas-center) .mfp-close:hover { background: #e7f8ee; color: #00955b !important; }
.off-canvas:not(.off-canvas-center) .mfp-close:focus-visible { outline: 2px solid #00c14a; outline-offset: 2px; }

/* Search */
#main-menu .sidebar-menu .search-form { padding: 0; }
#main-menu .nav-sidebar > li.header-search-form { padding: 12px 0 10px !important; border: 0 !important; background: none !important; }
#main-menu .nav-sidebar > li.header-search-form + li::before { display: none; }
#main-menu .searchform .flex-row { position: relative; }
#main-menu .searchform .search-field {
  height: 48px;
  margin: 0;
  padding: 0 56px 0 18px;
  border: 1px solid #e3e6e4;
  border-radius: 999px;
  background: #f7f8f7;
  box-shadow: none;
  color: var(--hapo-mm-text);
  font: 500 15px/1 Manrope, Arial, sans-serif;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#main-menu .searchform .search-field::placeholder { color: #9a9a9a; }
#main-menu .searchform .search-field:focus {
  border-color: var(--hapo-mm-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgb(0 193 74 / 12%);
}
#main-menu .searchform .flex-col:last-child { position: absolute; top: 4px; right: 4px; }
#main-menu .searchform .ux-search-submit,
#main-menu .searchform .submit-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50% !important;
  background: linear-gradient(110deg, #00c989, #00955b) !important;
  color: #fff;
  line-height: 40px;
}

/* Top-level items */
#main-menu .nav-sidebar.nav-vertical { padding: 4px 12px; }
#main-menu .nav-sidebar.nav-vertical > li { position: relative; margin: 2px 0; border: 0 !important; border-radius: 12px; background: none; transition: background-color .2s ease; }
#main-menu .nav-sidebar.nav-vertical > li + li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--hapo-mm-line);
}
#main-menu .nav-sidebar.nav-vertical > li:hover::before,
#main-menu .nav-sidebar.nav-vertical > li:hover + li::before,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item::before,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item + li::before { opacity: 0; }

#main-menu .nav-sidebar.nav-vertical > li > a {
  min-height: 52px;
  padding: 14px 12px !important;
  color: var(--hapo-mm-text);
  font: 700 15px/1.35 Manrope, Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .2s ease, padding .25s cubic-bezier(.16, 1, .3, 1);
}
#main-menu .nav-sidebar.nav-vertical > li:not(.has-child):not(.html) > a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: .28;
  transform: rotate(45deg);
  transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover,
#main-menu .nav-sidebar.nav-vertical > li.menu-item.active { background: #f3faf6; }
#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover > a { color: var(--hapo-mm-green-dark); padding-left: 16px !important; }
#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover > a::after { opacity: .9; transform: translateX(2px) rotate(45deg); }

/* Current page */
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor { background: linear-gradient(90deg, #e7f8ee, #f5fcf8); }
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item > a,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor > a { color: var(--hapo-mm-green-dark); padding-left: 20px !important; }
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item::after,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--hapo-mm-green);
}

#main-menu .nav-sidebar.nav-vertical > li > a:focus-visible { outline: 2px solid var(--hapo-mm-green); outline-offset: -2px; border-radius: 12px; }

/* Sub-menus (accordion mode) */
#main-menu .nav-sidebar .toggle {
  width: 40px;
  height: 40px;
  margin: 6px 4px 6px 0;
  border-radius: 50%;
  color: var(--hapo-mm-text);
  opacity: .55;
  transition: transform .25s ease, background-color .2s ease, opacity .2s ease;
}
#main-menu .nav-sidebar .toggle:hover { background: #fff; opacity: 1; }
#main-menu .nav-sidebar .active > .toggle { color: var(--hapo-mm-green-dark); opacity: 1; }
#main-menu .nav-sidebar.nav-vertical > li > ul {
  margin: 0 0 10px;
  padding: 0 12px 0 22px;
  border-left: 0;
}
#main-menu .nav-sidebar.nav-vertical > li > ul li a {
  min-height: 40px;
  padding: 9px 10px !important;
  border-radius: 8px;
  color: #4a4a4a;
  font: 500 14.5px/1.4 Manrope, Arial, sans-serif;
  text-transform: none;
}
#main-menu .nav-sidebar.nav-vertical > li > ul li a:hover,
#main-menu .nav-sidebar.nav-vertical > li > ul li.current-menu-item > a { background: #fff; color: var(--hapo-mm-green-dark); }

/* Contact CTA */
.hapo-mm-cta {
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hapo-mm-line);
}
.hapo-mm-cta__label { margin: 0 0 10px; color: var(--hapo-mm-muted); font-size: 13px; line-height: 1.45; }
.hapo-mm-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(110deg, #00c989, #00955b);
  box-shadow: 0 10px 22px rgb(0 149 91 / 24%);
  color: #fff !important;
  font: 700 15px/1.3 Manrope, Arial, sans-serif;
  text-decoration: none !important;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.hapo-mm-cta__button svg { flex: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.hapo-mm-cta__button:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgb(0 149 91 / 30%); }
.hapo-mm-cta__button:hover svg { transform: translateX(3px); }
.hapo-mm-cta__button:focus-visible { outline: 2px solid var(--hapo-mm-green); outline-offset: 3px; }

/* Staggered reveal when the drawer opens */
@media (prefers-reduced-motion: no-preference) {
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li {
    animation: hapo-mm-in .42s cubic-bezier(.16, 1, .3, 1) both;
  }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(2) { animation-delay: .03s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(3) { animation-delay: .06s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(4) { animation-delay: .09s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(5) { animation-delay: .12s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(6) { animation-delay: .15s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(7) { animation-delay: .18s; }
  .off-canvas.mfp-ready #main-menu .nav-sidebar.nav-vertical > li:nth-child(n+8) { animation-delay: .21s; }
}
@keyframes hapo-mm-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #main-menu *,
  .off-canvas .mfp-close { transition: none !important; animation: none !important; }
}