/*!
 * Mech-Tech — liquid navbar (Dynamic Island–style collapse)
 * Vintesh · child theme asset, loaded from functions.php (see MT_LIQUID_NAV there).
 *
 * The JS builds this header from the real Elementor header (logo, menu, phone, CTA),
 * then hides the original with visibility (its space stays reserved, so nothing jumps).
 * If the JS doesn't run, none of this applies and the original header shows as before.
 */

/* hide the original pill only once ours is built */
html.mtl-on #masthead .mtl-src{visibility:hidden !important}
/* the original can wrap onto two lines on narrow screens (FL); keep its reserved space at one line */
html.mtl-on #masthead .mtl-src{height:83px !important; min-height:0 !important; overflow:hidden !important}
@media (max-width:1024px){ html.mtl-on #masthead .mtl-src{height:82px !important} }

/* defensive resets: the theme styles a, button, nav and header globally */
.mtl, .mtl *, .mtl *::before, .mtl *::after{box-sizing:border-box}
.mtl a, .mtl a:hover, .mtl a:focus{text-decoration:none; box-shadow:none}
.mtl button{font:inherit; letter-spacing:normal; text-transform:none; min-height:0; min-width:0; line-height:1}
.mtl img{max-width:none; border:0; box-shadow:none}
.mtl{--mt-red:#CF0103; --mt-red-hover:#870000}

/* ───────────────── Liquid nav ─────────────────
   Two springs, run in sequence:
     --p  shape: 0 = full header, 1 = island size. Shrinks in place on the header's own line.
     --q  lift:  0 = on the header's line, 1 = up in the island's spot. Starts only once --p has landed.
   Expanding runs it backwards: drop down first, then grow. JS writes both once per frame; every position,
   size, radius and fade below is derived from it, so nothing drifts out of sync.
   --sq is the squash (px) from the spring's speed: the shape gets a touch
   taller while it contracts and thinner while it stretches, like a drop. */
.mtl{
  --p:0; --q:0; --sq:0px;
  /* rest rect (the live pill) */
  --rx:30px; --ry:30px; --rw:1380px; --rh:83px; --rr:41.5px;
  /* island rect (filled in by JS) */
  --cx:530px; --cy:16px; --cw:380px; --ch:64px; --cr:32px;
  position:fixed; left:0; top:calc(env(safe-area-inset-top,0px) + var(--mtl-ab,0px)); width:100%; height:0;
  z-index:1000; pointer-events:none;
}
.mtl-shape,.mtl-hit{
  position:absolute;
  left:calc(var(--rx) + (var(--cx) - var(--rx)) * var(--p));
  width:calc(var(--rw) + (var(--cw) - var(--rw)) * var(--p));
  /* top edge stays pinned while it shrinks (nothing ever dips down); it only moves with the lift */
  top:calc(var(--ry) + (var(--cy) - var(--ry)) * var(--q));
  height:calc(var(--rh) + (var(--ch) - var(--rh)) * var(--p) + var(--sq));
  border-radius:calc(var(--rr) + (var(--cr) - var(--rr)) * var(--p));
}
.mtl-shape{
  background:rgba(0,0,0,calc(.78 + .22 * var(--p)));
  /* faint hairline only as it becomes the island, so it reads over the black sections */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.11 * var(--p)));
}
.mtl-hit{pointer-events:auto}

/* content row sits at the rest rect; items move by transform only */
.mtl-row{
  position:absolute; left:var(--rx); top:var(--ry); width:var(--rw); height:var(--rh);
  display:flex; align-items:center; padding:0 15px 0 30px;
  pointer-events:none;
}
.mtl-row > *{pointer-events:auto}

.mtl-logo{
  flex:none; position:relative; display:flex; align-items:center; align-self:stretch;
  padding-right:24px; transform-origin:0 50%;
  transform:translate(calc(var(--lx) * var(--p)), calc(var(--vp) * var(--p) + var(--vq) * var(--q))) scale(calc(1 + (var(--ls) - 1) * var(--p)));
  will-change:transform;
}
.mtl-logo img{display:block;width:var(--lw,250px);height:auto}


.mtl-mid{
  flex:1 1 auto; min-width:0; align-self:stretch;
  clip-path:inset(-120px 0 -120px 0);   /* clip sideways only, so the phone tooltip can drop below */
  display:flex; align-items:center; justify-content:space-between; white-space:nowrap;
  /* dissolves before the logo reaches it, and only returns at the very end of the expand of the expand */
  opacity:clamp(0, 1 - var(--p) * 9, 1);
  transform:translateX(calc(var(--p) * 40px)) scale(calc(1 - var(--p) * .12));
  transform-origin:50% 50%;
}
.mtl.is-past .mtl-mid{pointer-events:none}
.mtl.is-past .mtl-mid.is-live{pointer-events:auto}
.mtl-mid{justify-content:flex-start}
/* the menu sits in its own quiet track instead of behind a divider line */
.mtl-nav{
  position:relative; display:flex; align-items:center; align-self:center;
  height:52px; padding:0 6px; margin:0 auto 0 0;   /* flush left, right next to the logo */
  border-radius:26px; background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.mtl-nav a{
  position:relative; z-index:1; display:flex; align-items:center; height:40px; padding:0 16px;
  border-radius:20px; color:rgba(255,255,255,.86); text-decoration:none;
  font:600 16px/1 "Switzer",sans-serif; transition:color .2s linear;
}
.mtl-nav a:hover,.mtl-nav a.is-current{color:#fff}
/* one highlight that glides to whatever you point at (and rests on the current page) */
.mtl-glide{
  position:absolute; z-index:0; left:0; top:6px; height:40px; width:0; border-radius:20px;
  background:rgba(255,255,255,.11); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.25,.8,.25,1), width .32s cubic-bezier(.25,.8,.25,1), opacity .2s linear;
}
.mtl-glide.is-on{opacity:1}
/* phone: speaks the same pill language as the menu. Hover forms a pill around it,
   the icon disc fills red and sends out one soft "calling" ring. */
.mtl-phone{
  flex:none; display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 16px 0 6px; margin:0 14px 0 12px; border-radius:22px;
  color:#fff; text-decoration:none; font:600 16px/1 "Switzer",sans-serif;
  background:rgba(255,255,255,0); transition:background-color .25s linear;
}
.mtl-phone-ic{
  position:relative; flex:none; width:32px; height:32px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.9);   /* neutral at rest: only Solicita is red until you point at it */
  transition:background-color .25s linear, color .25s linear;
}
.mtl-phone-ic svg{width:15px;height:15px;display:block}
.mtl-phone-ic::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 1.5px var(--mt-red); opacity:0; pointer-events:none;
}
.mtl-phone-num{letter-spacing:.01em}
.mtl-phone:hover,.mtl-phone:focus-visible{background:rgba(255,255,255,.11)}
.mtl-phone:hover .mtl-phone-ic,.mtl-phone:focus-visible .mtl-phone-ic{background:var(--mt-red);color:#fff}
.mtl-phone:hover .mtl-phone-ic::after,.mtl-phone:focus-visible .mtl-phone-ic::after{animation:mtl-ring 1.1s cubic-bezier(.2,.7,.3,1) .05s}
@keyframes mtl-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@media (prefers-reduced-motion:reduce){.mtl-phone-ic::after{animation:none!important}}

.mtl-cta{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 30px; border-radius:30px;
  background:var(--mt-red); color:#fff; text-decoration:none; white-space:nowrap;
  font:700 14px/1 "Involve","Helvetica Neue",Arial,sans-serif;
  transform:translate(calc(var(--bx) * var(--p)), calc(var(--vp) * var(--p) + var(--vq) * var(--q)));
  transition:background-color .2s linear;
  will-change:transform;
}
.mtl-cta:hover{background:var(--mt-red-hover)}
.mtl-cta .short{display:none}

.mtl-burger{
  display:none; flex:none; position:relative; margin-left:auto;
  width:43px; height:41px; border:0; padding:0; cursor:pointer;
  border-radius:calc(10px + 11px * var(--p));
  background:rgba(255,255,255,.12); color:#fff; isolation:isolate;
  align-items:center; justify-content:center;
  transform:translate(calc(var(--gx) * var(--p)), calc(var(--vp) * var(--p) + var(--vq) * var(--q)));
  will-change:transform;
}
/* red at rest, fades to a quiet grey as the red button takes over */
.mtl-burger::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mt-red);opacity:clamp(0, 1 - var(--p) * 1.4, 1);z-index:-1}
.mtl-burger svg{width:20px;height:20px}

.mtl a:focus-visible,.mtl button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:30px}
.mtl-nav a:focus-visible{outline-offset:-10px;border-radius:12px}

/* tablet + mobile: hamburger instead of inline nav; Solicita appears only on the island */
/* Compact-header layout (hamburger instead of inline nav). Driven by a class, not a
   media query, so JS can also switch to it on desktop widths where the menu doesn't fit. */
.mtl.is-m .mtl-row{padding:0 20px 0 24px}
.mtl.is-m .mtl-mid{display:none}
.mtl.is-m .mtl-logo{padding-right:0}
.mtl.is-m .mtl-logo img{width:var(--lw,250px)}
.mtl.is-m .mtl-burger{display:inline-flex}
.mtl.is-m .mtl-cta{
  position:absolute; left:var(--bl); top:var(--bt);
  height:44px; padding:0 18px;
  /* grows out from the hamburger */
  transform-origin:100% 50%;
  transform:translate(calc(26px * (1 - var(--p))), calc(var(--vp) * var(--p) + var(--vq) * var(--q))) scale(calc(.55 + .45 * var(--p)));
  opacity:clamp(0, (var(--p) - .5) * 2.6, 1);
}
.mtl.is-m:not(.is-past) .mtl-cta{pointer-events:none}

/* Narrow desktops: tighten the menu first, then drop the phone, then fall back to the hamburger. */
.mtl.fit-tight .mtl-nav a{padding:0 12px}
.mtl.fit-tight .mtl-logo{padding-right:16px}
.mtl.fit-tight .mtl-phone{margin:0 10px 0 8px;padding-right:12px}
.mtl.fit-nophone .mtl-phone{display:none}
/* phone as icon only; the number drops in as a small label under it on hover */
.mtl.fit-phoneicon .mtl-phone{position:relative;padding:0 6px;gap:0}
.mtl.fit-phoneicon .mtl-phone-num{
  position:absolute; right:0; top:calc(100% + 12px);   /* opens leftward, inside the header's width */
  padding:9px 14px; border-radius:16px; white-space:nowrap;
  background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
  font-size:14px; opacity:0; pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .2s linear, transform .25s cubic-bezier(.25,.8,.25,1);
}
.mtl.fit-phoneicon .mtl-phone:hover .mtl-phone-num,
.mtl.fit-phoneicon .mtl-phone:focus-visible .mtl-phone-num{opacity:1;transform:translateY(0)}
@media (max-width:379px){
  .mtl-cta .long{display:none}
  .mtl-cta .short{display:inline}
}