/*
 * Clone-specific overrides. Loaded AFTER webflow.css.
 *
 * Deliberately tiny. This is a pixel clone, so anything here has to earn its
 * place by fixing something Webflow's JavaScript used to do at runtime -- not
 * by restyling the design.
 */

/* ---------------------------------------------------------------------------
 * Single-slide slider on /contact-us
 *
 * webflow.css gives .w-slider a hard `height: 300px`, and the site overrides it
 * to `height: 100%`. Webflow's slider JS measured the slide and wrote an
 * explicit pixel height back onto the element. With that script gone, `100%`
 * resolves against a parent with no height and the contact form collapses.
 *
 * The slider holds exactly one slide and has data-disable-swipe="true", so it
 * is a static box. Letting it size to its content is what the running site
 * ended up rendering anyway.
 * ------------------------------------------------------------------------- */
.w-slider.is-single-slide,
.w-slider.is-single-slide .w-slider-mask,
.w-slider.is-single-slide .w-slide {
  height: auto;
}

.w-slider.is-single-slide .w-slider-mask {
  white-space: normal;
}

/* NOTHING is hidden here, deliberately.
 *
 * An earlier version of this file hid the slider arrows and dots on a
 * single-slide slider, with a comment asserting "Webflow's JS hid it". That
 * was an assumption written as a fact, and it was wrong: webflow.css already
 * carries `.left-arrow { display: block }` and `.right-arrow { display: none }`,
 * so on the live site the LEFT chevron renders over the blue illustration
 * panel at every viewport. Hiding it made /contact-us differ from the original
 * by ~11-17% of the page at all three breakpoints.
 *
 * Measured, not reasoned about: original computed display `block`, box
 * 80x908 at the left edge; the clone had `none`, 0x0. The right arrow and the
 * nav dots are genuinely hidden on the original, by the site's own stylesheet,
 * so they need no help from here either. */

/* ---------------------------------------------------------------------------
 * Burger -> X
 *
 * This is the site's ONE Webflow interaction (the single data-w-id in all 74
 * pages, on the navbar). Without it the burger stays three bars while the menu
 * is open, which is the most visible tell that the clone is not the original.
 *
 * Values are measured off the live site's computed transforms rather than
 * guessed:
 *     .b2-bar1           matrix(0.707107, -0.707107, 0.707107, 0.707107, 0, 4)
 *     .b2-bar3           matrix(0.707107,  0.707107, -0.707107, 0.707107, 0, -8)
 *     middle bars        translateX(-/+14px), opacity 0
 * A 0.707107 pair is cos/sin 45deg, and the third matrix column is a plain
 * translate in the parent's space -- hence translateY() BEFORE rotate() below.
 *
 * data-duration="400" and data-easing="ease" on the navbar give the timing.
 * ------------------------------------------------------------------------- */
/* Timings and easing come from the original's IX2 payload (action lists a-3
 * and a-4), not from taste: 500ms inOutQuint for the two long bars, 800ms for
 * the two middle halves. An earlier version used a flat 400ms ease for all
 * four and finished the whole gesture in 433ms against the original's 767ms.
 * inOutQuint is cubic-bezier(0.86, 0, 0.07, 1). */
.burger-icon .b2-bar1,
.burger-icon .b2-bar3 {
  transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
}

.burger-icon .b2-middle-bar-left,
.burger-icon .b2-middle-bar-right {
  transition: transform 800ms cubic-bezier(0.86, 0, 0.07, 1),
              opacity 800ms cubic-bezier(0.86, 0, 0.07, 1);
}

/* The RESTING state of the top bar is -180deg, not 0. That looks identical on
 * a symmetric horizontal bar, and it is what makes closing a 135deg spin
 * rather than a 45deg unwind -- which is what the original does. Measured on
 * the live site after a close: matrix(-1, 0, 0, -1, 0, 0), i.e. rotate(180deg). */
.burger-icon .b2-bar1 {
  transform: rotate(-180deg);
}

.w-nav-button.w--open .b2-bar1 {
  transform: translateY(4px) rotate(-45deg);
}

.w-nav-button.w--open .b2-bar3 {
  transform: translateY(-8px) rotate(45deg);
}

.w-nav-button.w--open .b2-middle-bar-left {
  opacity: 0;
  transform: translateX(-14px);
}

.w-nav-button.w--open .b2-middle-bar-right {
  opacity: 0;
  transform: translateX(14px);
}

@media (prefers-reduced-motion: reduce) {
  .burger-icon .b2-bar1,
  .burger-icon .b2-bar3,
  .burger-icon .b2-middle-bar-left,
  .burger-icon .b2-middle-bar-right,
  .w-nav-menu,
  .w-dropdown-list {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Focus visibility
 *
 * webflow.css sets `.w-nav-button:focus { outline: 0 }` and the burger is now a
 * real keyboard control, so it needs a focus ring that keyboard users can see.
 * ------------------------------------------------------------------------- */
.w-nav-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}