/* v53 — 2026-10-02 — motion gaps (design-engineering review of v52.3).
   No new feature animation. Fills the places that still snapped open (desktop "What we do"
   dropdown, mobile menu; the results filter fade is in the two filter scripts) and stops the
   Hebrew hover nudges firing on touch screens. Every movement below is off under
   prefers-reduced-motion. */

/* ---------- 1. "What we do" dropdown (desktop): 160 ms in, 120 ms out, grows from the menu item ----------
   The panel is centred with transform: translateX(-50%), so the motion is written into the same
   transform (a separate scale property would scale the centring offset and slide the panel sideways). */
@media (prefers-reduced-motion: no-preference) {
  .dd__panel {
    transform-origin: top center;
    opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.97);
    transition: opacity .12s var(--ease-out), transform .12s var(--ease-out), display .12s allow-discrete;
  }
  .dd[data-open] .dd__panel { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); transition-duration: .16s; }
  @starting-style { .dd[data-open] .dd__panel { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.97); } }
  @media (hover: hover) and (min-width: 1300px) {
    .dd:hover .dd__panel { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); transition-duration: .16s; }
    @starting-style { .dd:hover .dd__panel { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.97); } }
  }
}

/* ---------- 2. Mobile menu: panel fades down in 220 ms, items follow 30 ms apart; closes in 140 ms ---------- */
@media (prefers-reduced-motion: no-preference) and (max-width: 1299.98px) {
  .nav__mobile {
    transition: opacity .2s var(--ease-out), translate .22s var(--ease-out), display .22s allow-discrete;
  }
  .nav__mobile[hidden] { opacity: 0; translate: 0 -8px; transition-duration: .14s; }
  @starting-style { .nav__mobile:not([hidden]) { opacity: 0; translate: 0 -8px; } }
  .nav__mobile-links > :not(.btn), .nav__mobile-lang {
    transition: opacity .2s var(--ease-out), translate .2s var(--ease-out);
  }
  @starting-style {
    .nav__mobile:not([hidden]) .nav__mobile-links > :not(.btn),
    .nav__mobile:not([hidden]) .nav__mobile-lang { opacity: 0; translate: 0 -4px; }
  }
  .nav__mobile-links > :nth-child(2):not(.btn) { transition-delay: 30ms; }
  .nav__mobile-links > :nth-child(3):not(.btn) { transition-delay: 60ms; }
  .nav__mobile-links > :nth-child(4):not(.btn) { transition-delay: 90ms; }
  .nav__mobile-links > :nth-child(5):not(.btn) { transition-delay: 120ms; }
  .nav__mobile-links > :nth-child(n+6):not(.btn), .nav__mobile-lang { transition-delay: 150ms; }
  /* The call-to-action button keeps its own press/hover timings undelayed; only its fade-in waits for the links. */
  .nav__mobile-links > .btn {
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out), opacity .2s var(--ease-out) 150ms;
  }
  @starting-style { .nav__mobile:not([hidden]) .nav__mobile-links > .btn { opacity: 0; } }
}

/* ---------- 3. Hebrew on touch screens: no arrow nudge that sticks after a tap ----------
   The English hover nudges are already gated to mouse devices; their RTL mirrors in he.css were not,
   so on a phone a tapped row kept its -4px shift and the capability chevron sat 6px off at rest.
   Press feedback (:active) is kept. The button lift was already gated and is not touched. */
@media (hover: none), (pointer: coarse) {
  html[dir="rtl"] .row__link:hover:not(:active) .row__arrow,
  html[dir="rtl"] .cap-detail__row:hover:not(:active) .cap-detail__name,
  html[dir="rtl"] .vouch__card:hover .vouch__more,
  html[dir="rtl"] .cap-detail__more:hover .cap-detail__more-arrow,
  html[dir="rtl"] .cap-detail__chev,
  html[dir="rtl"] .cap-detail__row:hover .cap-detail__chev { transform: none; }
}

/* ---- v54.3 colour system: deep blue #0A3A8C + petrol #0891B2 (replaces the indigo/violet brand colours) ---- */
:root{
  --brand-indigo:#0a3a8c;--brand-indigo-lt:#22D3EE;--brand-violet:#0891B2;--brand-violet-lt:#67E8F9;
  --brand-blue:#1f5fd1;--brand-blue-lt:#7DD3FC;--brand-cyan:#0891B2;--brand-cyan-lt:#22D3EE;
  --brand-emerald:#0891B2;--brand-emerald-lt:#22D3EE;
  --action:#0a3a8c;--action-hover:#072b6b;
  --aurora:linear-gradient(115deg,#0a3a8c 0%,#1f5fd1 50%,#0891B2 100%);
  --aurora-text:linear-gradient(115deg,#0a3a8c 0%,#1f5fd1 55%,#0891B2 100%);
  --aurora-lt:linear-gradient(115deg,#FFFFFF 0%,#A5F3FC 100%);
}
/* on dark surfaces the deep blue disappears, so buttons there use a brighter blue #1F5FD1 */
.nav .btn--primary,.section-dark .btn--primary,.phero .btn--primary{background:#1f5fd1;border-color:#1f5fd1}
.nav .btn--primary:hover,.section-dark .btn--primary:hover,.phero .btn--primary:hover{background:#0a3a8c;border-color:#0a3a8c}
/* the second colour has to show up somewhere: section kickers carry a petrol bar, section titles go deep blue (as on the workshops page) */
.sh__kicker{color:#0a3a8c}
.sh__kicker::after{content:"";display:block;width:32px;height:3px;background:#0891B2;margin-top:10px}
:not(.section-dark)>*>.sh .sh__title,.sh__title{color:#0a3a8c}
.section-dark .sh__title,.section-dark .sh__kicker{color:#FFFFFF}
.section-dark .sh__kicker::after{background:#22D3EE}
/* petrol is for bars and lines; where it carries small text on a light surface, use the darker petrol so it reads (WCAG AA) */
.cp-prin__n,.stop__reach{color:#0E7490}
/* one rule for section titles on light surfaces: deep blue */
.wwd-head__title,.wsh__title,.sub40__title{color:#0A3A8C}
.section-dark .wwd-head__title,.section-dark .wsh__title,.section-dark .sub40__title{color:#FFFFFF}