/* ---------- Defaults (on the wrap) ---------- */

.hamburgerx-wrap {
  /* Icon */
  --hx-size: 60px;
  --hx-stroke-width: 3;
  --hx-color: #ffffff;
  --hx-anim-speed: 800ms;
  --hx-icon-zoom: 1.6;
  /* Hover transforms (combined) */
  --hx-hover-scale: 1;
  --hx-hover-rotate: 0deg;
  --hx-hover-translate-y: 0px;
  --hx-hover-speed: 200ms;
  /* Active transforms */
  --hx-active-scale: 1;

  display: inline-block;
  box-sizing: border-box;
  line-height: 0;
  cursor: pointer;
  /* rgba(0,0,0,0) — not "transparent", so hover fades don't interpolate to opaque */
  background-color: rgba(0, 0, 0, 0);
  /* Same duration on pointer enter AND leave (vars + background animate out). */
  transition:
    background-color var(--hx-hover-speed) ease,
    border-color var(--hx-hover-speed) ease,
    border-radius var(--hx-hover-speed) ease,
    box-shadow var(--hx-hover-speed) ease,
    transform var(--hx-hover-speed) ease,
    --hx-color var(--hx-hover-speed) ease,
    --hx-stroke-width var(--hx-hover-speed) ease,
    --hx-hover-scale var(--hx-hover-speed) ease,
    --hx-hover-rotate var(--hx-hover-speed) ease,
    --hx-hover-translate-y var(--hx-hover-speed) ease;
}

/* ---------- Trigger ---------- */

.hamburgerx-trigger {
  display: block;
  position: relative;
  width: var(--hx-size);
  height: var(--hx-size);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline: none;
  background: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1);
}

/*
 * Off-Canvas mode uses <a> for elementor-action. Themes often paint a:hover
 * with their own background (e.g. accent/burgundy). Background belongs on
 * .hamburgerx-wrap only — set via Elementor Normal / Hover / Activo tabs.
 */
.hamburgerx-wrap .hamburgerx-trigger:hover,
.hamburgerx-wrap .hamburgerx-trigger:focus,
.hamburgerx-wrap .hamburgerx-trigger:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
  text-decoration: none;
}

.hamburgerx-trigger:focus-visible {
  outline: 2px solid var(--hx-color);
  outline-offset: 4px;
}

.hamburgerx-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: scale(var(--hx-icon-zoom));
  transform-origin: 50% 50%;
}

/* ---------- Shared base path styling ---------- */

.hamburgerx-wrap path {
  fill: none;
  stroke: var(--hx-color);
  stroke-width: var(--hx-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke var(--hx-hover-speed) ease,
    stroke-width var(--hx-hover-speed) ease;
}

/* =============================================================
   ANIMATION 1 — Bars (McButton)
   Straight horizontal bars that fold to an X with a 135° flourish.
   Reference timing: lines slide to center (200ms), then line 3
   rotates 90° and the whole trigger rotates 135° (800ms + delay).
   We approximate with different durations; line--1 slides fast,
   line--3 + trigger take the full anim speed for the rotary part.
============================================================= */

.hamburgerx-wrap--bars path {
  transform-box: view-box;
  transition:
    transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke var(--hx-hover-speed) ease,
    stroke-width var(--hx-hover-speed) ease;
}

.hamburgerx-wrap--bars .line--1 {
  transform-origin: 50px 40px;
  transition-duration: calc(var(--hx-anim-speed) * 0.3);
}

.hamburgerx-wrap--bars .line--2 {
  transform-origin: 50px 50px;
}

.hamburgerx-wrap--bars .line--3 {
  transform-origin: 50px 60px;
}

.hamburgerx-wrap--bars.is-active .line--1 {
  transform: translateY(10px);
}

.hamburgerx-wrap--bars.is-active .line--3 {
  transform: translateY(-10px) rotate(90deg);
}

.hamburgerx-wrap--bars.is-active .hamburgerx-trigger {
  transform: rotate(135deg);
}

/* =============================================================
   ANIMATION 2 — Arrow (menu--1)
   Curved paths that morph via stroke-dasharray into a left arrow.
============================================================= */

.hamburgerx-wrap--arrow path {
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition:
    stroke-dasharray var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke-dashoffset var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke var(--hx-hover-speed) ease,
    stroke-width var(--hx-hover-speed) ease;
}

.hamburgerx-wrap--arrow .line--1,
.hamburgerx-wrap--arrow .line--3 {
  --total-length: 126.64183044433594;
}

.hamburgerx-wrap--arrow .line--2 {
  --total-length: 70;
}

.hamburgerx-wrap--arrow.is-active .line--1,
.hamburgerx-wrap--arrow.is-active .line--3 {
  --length: 22.627416998;
  --offset: -94.1149185097;
}

.hamburgerx-wrap--arrow.is-active .line--2 {
  --length: 0;
  --offset: -50;
}

/* =============================================================
   ANIMATION 3 — Cross (menu--2)
   Curved paths that slide right and fold into an X at center.
============================================================= */

.hamburgerx-wrap--cross path {
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition:
    stroke-dasharray var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke-dashoffset var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke var(--hx-hover-speed) ease,
    stroke-width var(--hx-hover-speed) ease;
}

.hamburgerx-wrap--cross .line--1,
.hamburgerx-wrap--cross .line--3 {
  --total-length: 111.22813415527344;
  --offset: -50.22813415527344;
}

.hamburgerx-wrap--cross .line--2 {
  --total-length: 99;
}

.hamburgerx-wrap--cross.is-active path {
  transform: translateX(30px);
}

.hamburgerx-wrap--cross.is-active .line--1,
.hamburgerx-wrap--cross.is-active .line--3 {
  --length: 22.627416998;
  --offset: -16.9705627485;
}

.hamburgerx-wrap--cross.is-active .line--2 {
  --length: 0;
  --offset: -20;
}

/* =============================================================
   Ham 1–8 — jonsuh-style hamburger morph set
   Reference: https://jonsuh.com/hamburgers/ (and related CodePens).
   All use stroke-dasharray/offset for path morph. ham1/4/7/8 rotate
   the SVG 45°; ham5 rotates the SVG 180° (jonsuh hamRotate / hamRotate180).
============================================================= */

.hamburgerx-wrap--ham1 path,
.hamburgerx-wrap--ham2 path,
.hamburgerx-wrap--ham3 path,
.hamburgerx-wrap--ham4 path,
.hamburgerx-wrap--ham5 path,
.hamburgerx-wrap--ham6 path,
.hamburgerx-wrap--ham7 path,
.hamburgerx-wrap--ham8 path {
  transition:
    stroke-dasharray var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke-dashoffset var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke var(--hx-hover-speed) ease,
    stroke-width var(--hx-hover-speed) ease;
}

/* ---- ham1 (hamRotate 45°) ---- */
.hamburgerx-wrap--ham1 .line--1 { stroke-dasharray: 40 139; }
.hamburgerx-wrap--ham1 .line--3 { stroke-dasharray: 40 180; }
.hamburgerx-wrap--ham1.is-active .line--1 { stroke-dashoffset: -98px; }
.hamburgerx-wrap--ham1.is-active .line--3 { stroke-dashoffset: -138px; }

/* ---- ham2 ---- */
.hamburgerx-wrap--ham2 .line--1 { stroke-dasharray: 40 121; }
.hamburgerx-wrap--ham2 .line--3 { stroke-dasharray: 40 121; }
.hamburgerx-wrap--ham2.is-active .line--1 { stroke-dashoffset: -102px; }
.hamburgerx-wrap--ham2.is-active .line--3 { stroke-dashoffset: -102px; }

/* ---- ham3 ---- */
.hamburgerx-wrap--ham3 .line--1 { stroke-dasharray: 40 130; }
.hamburgerx-wrap--ham3 .line--2 { stroke-dasharray: 40 140; }
.hamburgerx-wrap--ham3 .line--3 { stroke-dasharray: 40 205; }
.hamburgerx-wrap--ham3.is-active .line--1 {
  stroke-dasharray: 75 130;
  stroke-dashoffset: -63px;
}
.hamburgerx-wrap--ham3.is-active .line--2 { stroke-dashoffset: -102px; }
.hamburgerx-wrap--ham3.is-active .line--3 {
  stroke-dasharray: 110 205;
  stroke-dashoffset: -86px;
}

/* ---- ham4 (hamRotate 45°) ---- */
.hamburgerx-wrap--ham4 .line--1 { stroke-dasharray: 40 121; }
.hamburgerx-wrap--ham4 .line--3 { stroke-dasharray: 40 121; }
.hamburgerx-wrap--ham4.is-active .line--1 { stroke-dashoffset: -68px; }
.hamburgerx-wrap--ham4.is-active .line--3 { stroke-dashoffset: -68px; }

/* ---- ham5 (hamRotate180 180°) — only top/bottom dashed; middle stays full path ---- */
.hamburgerx-wrap--ham5 .line--1 { stroke-dasharray: 40 82; }
.hamburgerx-wrap--ham5 .line--3 { stroke-dasharray: 40 82; }
.hamburgerx-wrap--ham5.is-active .line--1 {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}
.hamburgerx-wrap--ham5.is-active .line--3 {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}

/* ---- ham6 ---- */
.hamburgerx-wrap--ham6 .line--1 { stroke-dasharray: 40 172; }
.hamburgerx-wrap--ham6 .line--2 { stroke-dasharray: 40 111; }
.hamburgerx-wrap--ham6 .line--3 { stroke-dasharray: 40 172; }
.hamburgerx-wrap--ham6.is-active .line--1 { stroke-dashoffset: -132px; }
.hamburgerx-wrap--ham6.is-active .line--2 { stroke-dashoffset: -71px; }
.hamburgerx-wrap--ham6.is-active .line--3 { stroke-dashoffset: -132px; }

/* ---- ham7 (hamRotate 45°) ---- */
.hamburgerx-wrap--ham7 .line--1 { stroke-dasharray: 40 82; }
.hamburgerx-wrap--ham7 .line--2 { stroke-dasharray: 40 111; }
.hamburgerx-wrap--ham7 .line--3 { stroke-dasharray: 40 161; }
.hamburgerx-wrap--ham7.is-active .line--1 {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.hamburgerx-wrap--ham7.is-active .line--2 { stroke-dashoffset: 23px; }
.hamburgerx-wrap--ham7.is-active .line--3 { stroke-dashoffset: -83px; }

/* ---- ham8 (hamRotate 45°, middle rotates 90° into a plus) ---- */
.hamburgerx-wrap--ham8 .line--1 { stroke-dasharray: 40 160; }
.hamburgerx-wrap--ham8 .line--2 {
  stroke-dasharray: 40 142;
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1);
}
.hamburgerx-wrap--ham8 .line--3 {
  stroke-dasharray: 40 85;
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition:
    transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1),
    stroke-dashoffset var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1);
}
.hamburgerx-wrap--ham8.is-active .line--1 { stroke-dashoffset: -64px; }
.hamburgerx-wrap--ham8.is-active .line--2 { transform: rotate(90deg); }
.hamburgerx-wrap--ham8.is-active .line--3 { stroke-dashoffset: -64px; }

/*
 * hamRotate / hamRotate180: original rotates the <svg>, not the trigger.
 * Compose with icon zoom already on .hamburgerx-wrap--hamN svg below.
 */
.hamburgerx-wrap--ham1.is-active .hamburgerx-trigger,
.hamburgerx-wrap--ham4.is-active .hamburgerx-trigger,
.hamburgerx-wrap--ham5.is-active .hamburgerx-trigger,
.hamburgerx-wrap--ham7.is-active .hamburgerx-trigger,
.hamburgerx-wrap--ham8.is-active .hamburgerx-trigger {
  transform: none;
}

.hamburgerx-wrap--ham1.is-active svg,
.hamburgerx-wrap--ham4.is-active svg,
.hamburgerx-wrap--ham7.is-active svg,
.hamburgerx-wrap--ham8.is-active svg {
  transform: rotate(45deg) scale(calc(var(--hx-icon-zoom) * 0.65));
}

.hamburgerx-wrap--ham5.is-active svg {
  transform: rotate(180deg) scale(calc(var(--hx-icon-zoom) * 0.65));
}

/* =============================================================
   Wrap-level transforms (hover + active scale)
============================================================= */

/*
 * Transform always reads hover vars (defaults = identity). Elementor updates
 * vars on :hover / keyboard :focus-visible so enter/leave use --hx-hover-speed.
 */
.hamburgerx-wrap.hx-hover-enabled {
  transform:
    translateY(var(--hx-hover-translate-y))
    rotate(var(--hx-hover-rotate))
    scale(var(--hx-hover-scale));
}

.hamburgerx-wrap.hx-hover-enabled.is-active {
  transform: scale(var(--hx-active-scale));
}

.hamburgerx-wrap.hx-hover-enabled.is-active:hover,
.hamburgerx-wrap.hx-hover-enabled.is-active:has(.hamburgerx-trigger:focus-visible) {
  transform:
    translateY(var(--hx-hover-translate-y))
    rotate(var(--hx-hover-rotate))
    scale(calc(var(--hx-active-scale) * var(--hx-hover-scale)));
}

/* =============================================================
   Ham 1–8 — counter-scale so the default zoom looks right
   The jonsuh-style glyphs fill more of the 0 0 100 100 viewBox
   than the bars/arrow/cross set, so we multiply the user's zoom
   by 0.65 for these animations. User-supplied zoom still wins as
   a multiplier (zoom 2 → effective 1.3 on ham, which is plenty).
============================================================= */

.hamburgerx-wrap--ham1 svg,
.hamburgerx-wrap--ham2 svg,
.hamburgerx-wrap--ham3 svg,
.hamburgerx-wrap--ham4 svg,
.hamburgerx-wrap--ham5 svg,
.hamburgerx-wrap--ham6 svg,
.hamburgerx-wrap--ham7 svg,
.hamburgerx-wrap--ham8 svg {
  transform: scale(calc(var(--hx-icon-zoom) * 0.65));
  transition: transform var(--hx-anim-speed) cubic-bezier(.645, .045, .355, 1);
}

/* ---------- Editor placeholder ---------- */

.hamburgerx-wrap--placeholder {
  padding: 12px;
  border: 1px dashed currentColor;
  opacity: 0.6;
  line-height: 1.4;
}

/* ---------- Accessibility: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hamburgerx-wrap,
  .hamburgerx-trigger,
  .hamburgerx-wrap svg,
  .hamburgerx-wrap path {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Hide native toggle when HamburgerX replaces it ---------- */

.hx-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Print ---------- */

@media print {
  .hamburgerx-wrap {
    display: none !important;
  }
}

/* ---------- Editor: empty-target notices (shown by hamburgerx-editor.js) ---------- */

.elementor-editor-active .elementor-control-type-raw_html.hamburgerx-targets-empty-notice {
  display: none;
}