/* templates/blocks/header-mobile-menu/style.css — v2.7
   Floating trigger + side drawer menu
*/

.pf-mmenu-wrapper {
  --mmenu-trigger-icon-size: 24px;
  --mmenu-trigger-size: 48px;
  --mmenu-trigger-bg: #f6b800;
  --mmenu-trigger-radius: 14px;
  --mmenu-trigger-shadow: 0 8px 24px rgba(0,0,0,.18);
  --mmenu-float-top: 50%;
  --mmenu-float-bottom: 120px;
  --mmenu-float-offset-x: 16px;
  --mmenu-zindex: 10020;

  --mmenu-panel-bg: #ffffff;
  --mmenu-panel-w: 300px;
  --mmenu-panel-pad: 20px;

  --mmenu-header-bg: transparent;
  --mmenu-header-pad: 15px 20px;
  --mmenu-header-align: space-between;
  --mmenu-header-border-w: 1px;
  --mmenu-header-border-style: solid;
  --mmenu-header-border-color: #e0e0e0;
  --mmenu-header-text-color: inherit;
  --mmenu-header-font-family: inherit;
  --mmenu-header-font-size: 1.1em;
  --mmenu-header-font-weight: 600;
  --mmenu-header-text-transform: none;
  --mmenu-header-letter-spacing: normal;
  --mmenu-header-line-height: normal;

  --mmenu-main-item-pad: 10px 0;
  --mmenu-main-item-radius: 0px;
  --mmenu-main-item-text-color: #111827;
  --mmenu-main-item-text-color-hover: #111827;
  --mmenu-main-item-bg: transparent;
  --mmenu-main-item-bg-hover: transparent;
  --mmenu-main-item-shadow-hover: none;
  --mmenu-main-item-sep-w: 1px;
  --mmenu-main-item-sep-style: solid;
  --mmenu-main-item-sep-color: #eeeeee;
  --mmenu-main-line-h: 1px;
  --mmenu-main-line-color: currentColor;
  --mmenu-main-item-font-family: inherit;
  --mmenu-main-item-font-size: inherit;
  --mmenu-main-item-font-weight: inherit;
  --mmenu-main-item-text-transform: none;
  --mmenu-main-item-letter-spacing: normal;
  --mmenu-main-item-line-height: normal;

  --mmenu-sub-container-bg: #f8f8f8;
  --mmenu-sub-indicator-color: #333333;
  --mmenu-indent-step: 16px;
  --mmenu-sub-item-pad: 8px 0 8px 15px;
  --mmenu-sub-item-radius: 0px;
  --mmenu-sub-item-text-color: #333333;
  --mmenu-sub-item-text-color-hover: #333333;
  --mmenu-sub-item-bg: transparent;
  --mmenu-sub-item-bg-hover: transparent;
  --mmenu-sub-item-shadow-hover: none;
  --mmenu-sub-item-sep-w: 1px;
  --mmenu-sub-item-sep-style: solid;
  --mmenu-sub-item-sep-color: #e0e0e0;
  --mmenu-sub-line-h: 1px;
  --mmenu-sub-line-color: currentColor;
  --mmenu-sub-item-font-family: inherit;
  --mmenu-sub-item-font-size: inherit;
  --mmenu-sub-item-font-weight: inherit;
  --mmenu-sub-item-text-transform: none;
  --mmenu-sub-item-letter-spacing: normal;
  --mmenu-sub-item-line-height: normal;
}

.pf-mmenu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mmenu-trigger-size);
  height: var(--mmenu-trigger-size);
  background: var(--mmenu-trigger-bg);
  border: none;
  border-radius: var(--mmenu-trigger-radius);
  box-shadow: var(--mmenu-trigger-shadow);
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.pf-mmenu__trigger i,
.pf-mmenu__trigger svg,
.pf-mmenu__trigger img,
.pf-mmenu__trigger .pf-mmenu-svg-icon {
  width: var(--mmenu-trigger-icon-size);
  height: var(--mmenu-trigger-icon-size);
  display: block;
}
.pf-mmenu__trigger i { font-size: var(--mmenu-trigger-icon-size); }
.pf-mmenu__trigger svg { fill: currentColor; }
.pf-mmenu-svg-icon { display: inline-flex; align-items: center; justify-content: center; }

.pf-mmenu--display-floating .pf-mmenu__trigger {
  position: fixed;
  z-index: var(--mmenu-zindex);
}
.pf-mmenu--display-floating.pf-mmenu--float-right .pf-mmenu__trigger { right: var(--mmenu-float-offset-x); }
.pf-mmenu--display-floating.pf-mmenu--float-left .pf-mmenu__trigger { left: var(--mmenu-float-offset-x); }
.pf-mmenu--display-floating.pf-mmenu--use-top .pf-mmenu__trigger {
  top: var(--mmenu-float-top);
  transform: translateY(-50%);
}
.pf-mmenu--display-floating.pf-mmenu--use-bottom .pf-mmenu__trigger { bottom: var(--mmenu-float-bottom); }

.pf-mmenu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(92vw, var(--mmenu-panel-w));
  background: var(--mmenu-panel-bg);
  z-index: calc(var(--mmenu-zindex) - 1);
  transition: transform .3s cubic-bezier(.77,0,.175,1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(0,0,0,.15);
}
.pf-mmenu--from-left .pf-mmenu__panel { left: 0; transform: translateX(-100%); }
.pf-mmenu--from-right .pf-mmenu__panel { right: 0; transform: translateX(100%); }

.pf-mmenu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: calc(var(--mmenu-zindex) - 2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  cursor: pointer;
}

.pf-mmenu-wrapper.is-open .pf-mmenu__panel { transform: translateX(0); }
.pf-mmenu-wrapper.is-open .pf-mmenu__overlay { opacity: 1; visibility: visible; }

.pf-mmenu__header {
  display: flex;
  justify-content: var(--mmenu-header-align);
  align-items: center;
  flex-shrink: 0;
  background-color: var(--mmenu-header-bg);
  padding: var(--mmenu-header-pad);
  border-bottom-width: var(--mmenu-header-border-w);
  border-bottom-style: var(--mmenu-header-border-style);
  border-bottom-color: var(--mmenu-header-border-color);
}
.pf-mmenu__header > span {
  flex-grow: 1;
  text-align: left;
  color: var(--mmenu-header-text-color);
  font-family: var(--mmenu-header-font-family);
  font-size: var(--mmenu-header-font-size);
  font-weight: var(--mmenu-header-font-weight);
  text-transform: var(--mmenu-header-text-transform);
  letter-spacing: var(--mmenu-header-letter-spacing);
  line-height: var(--mmenu-header-line-height);
}
.pf-mmenu__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  color: #888;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
.pf-mmenu__close:hover { color: #000; }
.pf-mmenu__body { flex-grow: 1; overflow-y: auto; padding: 0; }

.pf-mmenu__list,
.pf-mmenu__submenu { list-style: none; margin: 0; padding: 0; }

.pf-mmenu__item > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pf-mmenu--sub-click .pf-mmenu__item.has-sub > a { cursor: pointer; }

.pf-mmenu__list > .pf-mmenu__item {
  border-bottom-width: var(--mmenu-main-item-sep-w);
  border-bottom-style: var(--mmenu-main-item-sep-style);
  border-bottom-color: var(--mmenu-main-item-sep-color);
}
.pf-mmenu__list > .pf-mmenu__item:last-child { border-bottom: none; }

.pf-mmenu__list > .pf-mmenu__item > a {
  padding: var(--mmenu-main-item-pad);
  padding-left: var(--mmenu-panel-pad);
  padding-right: var(--mmenu-panel-pad);
  color: var(--mmenu-main-item-text-color);
  background-color: var(--mmenu-main-item-bg);
  border-radius: var(--mmenu-main-item-radius);
  font-family: var(--mmenu-main-item-font-family);
  font-size: var(--mmenu-main-item-font-size);
  font-weight: var(--mmenu-main-item-font-weight);
  text-transform: var(--mmenu-main-item-text-transform);
  letter-spacing: var(--mmenu-main-item-letter-spacing);
  line-height: var(--mmenu-main-item-line-height);
}
.pf-mmenu__list > .pf-mmenu__item > a:hover {
  color: var(--mmenu-main-item-text-color-hover);
  background-color: var(--mmenu-main-item-bg-hover);
  box-shadow: var(--mmenu-main-item-shadow-hover);
}
.pf-mmenu__list > .pf-mmenu__item > a::after,
.pf-mmenu__submenu .pf-mmenu__item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transition: transform .3s ease;
}
.pf-mmenu__list > .pf-mmenu__item > a::after {
  height: var(--mmenu-main-line-h);
  background-color: var(--mmenu-main-line-color);
}
.pf-mmenu__submenu .pf-mmenu__item > a::after {
  height: var(--mmenu-sub-line-h);
  background-color: var(--mmenu-sub-line-color);
}
.pf-mmenu--mainstyle-underline .pf-mmenu__list > .pf-mmenu__item > a:hover::after { transform: scaleX(1); }

.pf-mmenu--sub-click .pf-mmenu__submenu,
.pf-mmenu--sub-hover .pf-mmenu__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease-in-out;
}
.pf-mmenu--sub-expanded .pf-mmenu__submenu { max-height: 10000px; }
.pf-mmenu__submenu { background: var(--mmenu-sub-container-bg); }
.pf-mmenu__submenu .pf-mmenu__item {
  border-bottom-width: var(--mmenu-sub-item-sep-w);
  border-bottom-style: var(--mmenu-sub-item-sep-style);
  border-bottom-color: var(--mmenu-sub-item-sep-color);
}
.pf-mmenu__submenu .pf-mmenu__item:last-child { border-bottom: none; }

.pf-mmenu__submenu .pf-mmenu__item > a {
  padding: var(--mmenu-sub-item-pad);
  padding-right: var(--mmenu-panel-pad);
  color: var(--mmenu-sub-item-text-color);
  background-color: var(--mmenu-sub-item-bg);
  border-radius: var(--mmenu-sub-item-radius);
  font-family: var(--mmenu-sub-item-font-family);
  font-size: var(--mmenu-sub-item-font-size);
  font-weight: var(--mmenu-sub-item-font-weight);
  text-transform: var(--mmenu-sub-item-text-transform);
  letter-spacing: var(--mmenu-sub-item-letter-spacing);
  line-height: var(--mmenu-sub-item-line-height);
}
.pf-mmenu__submenu[data-depth="2"] .pf-mmenu__item > a { padding-left: calc(var(--mmenu-panel-pad) + 1 * var(--mmenu-indent-step)); }
.pf-mmenu__submenu[data-depth="3"] .pf-mmenu__item > a { padding-left: calc(var(--mmenu-panel-pad) + 2 * var(--mmenu-indent-step)); }
.pf-mmenu__submenu[data-depth="4"] .pf-mmenu__item > a { padding-left: calc(var(--mmenu-panel-pad) + 3 * var(--mmenu-indent-step)); }
.pf-mmenu__submenu[data-depth="5"] .pf-mmenu__item > a { padding-left: calc(var(--mmenu-panel-pad) + 4 * var(--mmenu-indent-step)); }

.pf-mmenu__submenu .pf-mmenu__item > a:hover {
  color: var(--mmenu-sub-item-text-color-hover);
  background-color: var(--mmenu-sub-item-bg-hover);
  box-shadow: var(--mmenu-sub-item-shadow-hover);
}
.pf-mmenu--substyle-underline .pf-mmenu__submenu .pf-mmenu__item > a:hover::after { transform: scaleX(1); }

.pf-mmenu__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-right: -6px;
  color: var(--mmenu-sub-indicator-color);
  position: relative;
  flex: 0 0 auto;
}
.pf-mmenu__accordion-toggle::before,
.pf-mmenu__accordion-toggle::after {
  content: '';
  display: block;
  transition: transform .3s ease, border-color .3s ease;
  background-color: transparent;
}
.pf-mmenu-wrapper[class*="--indicator-triangle"] .pf-mmenu__accordion-toggle::before,
.pf-mmenu-wrapper:not([class*="--indicator-"]) .pf-mmenu__accordion-toggle::before {
  width: 7px;
  height: 7px;
  border-style: solid;
  border-color: var(--mmenu-sub-indicator-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pf-mmenu-wrapper[class*="--indicator-triangle"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before,
.pf-mmenu-wrapper:not([class*="--indicator-"]) .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before {
  transform: rotate(-135deg);
}
.pf-mmenu-wrapper[class*="--indicator-chevron"] .pf-mmenu__accordion-toggle::before {
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: var(--mmenu-sub-indicator-color);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.pf-mmenu-wrapper[class*="--indicator-chevron"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before {
  transform: translateY(0) rotate(-135deg);
}
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::before,
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background-color: var(--mmenu-sub-indicator-color);
}
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::before { transform: translate(-50%, -50%) rotate(0deg); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::after { transform: translate(-50%, -50%) rotate(180deg); }

.pf-mmenu--sub-hover .pf-mmenu__item.has-sub:hover > .pf-mmenu__submenu { max-height: 1000px; }

@media (max-width: 767px) {
  .pf-mmenu--display-floating .pf-mmenu__trigger {
    width: max(42px, var(--mmenu-trigger-size));
    height: max(42px, var(--mmenu-trigger-size));
  }
}