/* web/themes/techprosolutions/css/components/et-microinteractions.css */
/**
 * ET Micro-interactions — press states + hover polish for interactive
 * elements the base theme leaves flat.
 *
 * LAWS:
 *  - Standalone `scale` / `translate` only (compose with legacy transforms,
 *    and the rest state stays `none`, so no permanent containing block).
 *  - Press transitions are declared INSIDE :active only: press-in always
 *    animates; release uses the element's own transition if it has one.
 *    We never redeclare a base `transition` blind — that would silently
 *    disable whatever properties the legacy shorthand animated.
 *  - Scoped class selectors only, no bare element selectors.
 *  - All existing tuned hovers (retool cards, avatar cloud, spf button,
 *    persona tabs, faq trigger) are left untouched.
 */

/* ---- Press states ------------------------------------------------------ */

/* Buttons, tabs, small controls: a decisive 3% dip. */
.theme-btn-one:active,
.hero-cta-card__btn:active,
.spf-button:active,
.spf-tab:active,
.persona-slider__tab:active,
.faq-trigger:active,
.floating-card__cta a:active,
.latest-articles__view-all a:active {
  scale: 0.97;
  transition: scale var(--et-dur-press) var(--et-ease-swift);
}

/* Whole-surface cards (large hit areas): a barely-there 1% settle. */
.retool-card:active,
.hero-cta-card:active {
  scale: 0.99;
  transition: scale var(--et-dur-press) var(--et-ease-swift);
}

/* ---- Primary CTA (.theme-btn-one) hover polish -------------------------- */

/* The base theme only swaps the background on hover — no motion, no depth.
   Keep its colour behaviour; add lift + a specific-property transition
   (background-color stays animated, so nothing is lost). */
.theme-btn-one {
  transition:
    background-color var(--et-dur-hover) var(--et-ease-out),
    box-shadow var(--et-dur-hover) var(--et-ease-out),
    translate var(--et-dur-hover) var(--et-ease-out);
}

.theme-btn-one:hover {
  box-shadow: var(--et-shadow-lift);
  translate: 0 -2px;
}

/* Press cancels the lift so the dip reads from the resting position. */
.theme-btn-one:active {
  box-shadow: var(--et-shadow-press);
  translate: 0 0;
}

/* ---- Focus backstop ------------------------------------------------------
   Components already carry their own :focus-visible rings; the header CTA
   and nav links come from the base theme, which has none. */
.theme-btn-one:focus-visible,
.main-header a:focus-visible {
  outline: 2px solid var(--et-green);
  outline-offset: 2px;
}

/* ---- Top-level nav items ------------------------------------------------
   Animated underline growing from the left; li.current keeps it as
   wayfinding. NOTE: this header's top-level items are <span class="nav-title">
   (not anchors — the real links are inside the mega-menu), so the underline
   lives on the span. The caret is a separate sibling <span class="fas">.
   The pseudo has no descendants, so scaling it is side-effect free. */
.main-header .main-menu .navigation > li > .nav-title {
  position: relative;
  display: inline-block;
}

.main-header .main-menu .navigation > li > .nav-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;                       /* matches the mandated 2px focus ring */
  border-radius: var(--et-radius-pill);
  background: var(--et-green);
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--et-dur-hover) var(--et-ease-out);
}

.main-header .main-menu .navigation > li:hover > .nav-title::after,
.main-header .main-menu .navigation > li.current > .nav-title::after {
  scale: 1 1;
}

/* ---- Mega-menu keyboard operability --------------------------------------
   The top-level triggers are now real <button class="nav-title"> elements
   (menu--main.html.twig). Reset the UA button chrome so the swap from <span>
   is visually invisible, then mirror the base theme's li:hover open rules
   for :focus-within (tab focus) and .is-open (click/Escape via
   et-nav-a11y.js). */

.main-header .main-menu .navigation > li > button.nav-title {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.main-header .main-menu .navigation > li > button.nav-title:focus-visible {
  outline: 2px solid var(--et-green);
  outline-offset: 2px;
}

/* Open the panel exactly the way li:hover does (style.css ~1168). */
.main-menu .navigation > li.dropdown:focus-within > ul,
.main-menu .navigation > li.dropdown:focus-within > .megamenu,
.navigation > li.dropdown:focus-within > .product-menu,
.main-menu .navigation > li.dropdown.is-open > ul,
.main-menu .navigation > li.dropdown.is-open > .megamenu,
.navigation > li.dropdown.is-open > .product-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
  transform: rotateX(0);
}

/* Plain <ul> dropdowns stage their items in (style.css ~918) — mirror it. */
.main-menu .navigation > li:focus-within > ul > li,
.main-menu .navigation > li.is-open > ul > li {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The nav underline should acknowledge keyboard focus like hover. */
.main-header .main-menu .navigation > li:focus-within > .nav-title::after {
  scale: 1 1;
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* The nav underline keeps its scale states (0 = hidden, 1 = shown) and
     just snaps between them — scale:none here would pin it visible. */
  .main-header .main-menu .navigation > li > .nav-title::after {
    transition: none;
  }

  .theme-btn-one,
  .theme-btn-one:hover,
  .theme-btn-one:active,
  .hero-cta-card__btn:active,
  .spf-button:active,
  .spf-tab:active,
  .persona-slider__tab:active,
  .faq-trigger:active,
  .floating-card__cta a:active,
  .latest-articles__view-all a:active,
  .retool-card:active,
  .hero-cta-card:active {
    transition: none;
    scale: none;
    translate: none;
  }
}