/*
 * JHB Interaction System
 * Zentrale Interaktionssprache für klickbare Controls und Karten.
 * Statische Karten werden bewusst nicht animiert.
 */

/* Buttons / CTAs: nur echte interaktive Elemente. */
:where(
  a.jhb-interactive-control,
  button.jhb-interactive-control,
  a.wp-element-button,
  button.wp-element-button,
  input[type="submit"],
  input[type="button"],
  a[class$="-btn"],
  a[class*="-btn "],
  a[class*="-btn--"],
  a[class*="__btn"],
  button[class$="-btn"],
  button[class*="-btn "],
  button[class*="-btn--"],
  button[class*="__btn"],
  a[class="btn"],
  button[class="btn"],
  a[class^="btn-"],
  button[class^="btn-"],
  a[class*=" btn-"],
  button[class*=" btn-"],
  a[class$="-button"],
  a[class*="-button "],
  a[class*="__button"],
  button[class$="-button"],
  button[class*="-button "],
  button[class*="__button"],
  a[class$="-cta"],
  a[class*="-cta "],
  a[class*="__cta"],
  button[class$="-cta"],
  button[class*="-cta "],
  button[class*="__cta"]
) {
  transition:
    translate var(--jhb-motion-base) var(--jhb-motion-ease),
    scale var(--jhb-motion-fast) var(--jhb-motion-ease),
    box-shadow var(--jhb-motion-base) var(--jhb-motion-ease),
    border-color var(--jhb-motion-fast) ease,
    background-color var(--jhb-motion-fast) ease,
    color var(--jhb-motion-fast) ease,
    opacity var(--jhb-motion-fast) ease;
}

/* Klickbare Karten: nur Anchor/Button-Karten heben sich an. */
:where(
  a.jhb-interactive-card,
  button.jhb-interactive-card,
  a[class$="-card"],
  a[class*="-card "],
  a[class$="__card"],
  a[class*="__card "],
  a[class*="card-link"],
  button[class$="-card"],
  button[class*="-card "],
  button[class$="__card"],
  button[class*="__card "]
) {
  transition:
    translate var(--jhb-motion-base) var(--jhb-motion-ease),
    scale var(--jhb-motion-fast) var(--jhb-motion-ease),
    box-shadow var(--jhb-motion-base) var(--jhb-motion-ease),
    border-color var(--jhb-motion-fast) ease,
    background-color var(--jhb-motion-fast) ease;
}

/* Pfeile/Chevrons reagieren nur innerhalb echter Controls. */
:where(a, button, summary) :where(
  .jhb-motion-arrow,
  [class$="-arrow"],
  [class*="-arrow "],
  [class*="__arrow"],
  [class$="-chevron"],
  [class*="-chevron "],
  [class*="__chevron"]
) {
  transition:
    translate var(--jhb-motion-base) var(--jhb-motion-ease),
    rotate var(--jhb-motion-base) var(--jhb-motion-ease);
}

/* Akkordeons: keine Lift-Illusion, sondern ruhige Zustandsänderung. */
details > summary {
  transition:
    background-color var(--jhb-motion-fast) ease,
    border-color var(--jhb-motion-fast) ease,
    color var(--jhb-motion-fast) ease,
    box-shadow var(--jhb-motion-base) var(--jhb-motion-ease);
}

details[open] > summary :where(
  [class$="-chevron"],
  [class*="-chevron "],
  [class*="__chevron"]
) {
  rotate: 180deg;
}

/* Einheitlicher Tastaturfokus ohne Maus-/Touch-Ring. */
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--jhb-focus-ring);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    a.jhb-interactive-control,
    button.jhb-interactive-control,
    a.wp-element-button,
    button.wp-element-button,
    input[type="submit"],
    input[type="button"],
    a[class$="-btn"],
    a[class*="-btn "],
    a[class*="-btn--"],
    a[class*="__btn"],
    button[class$="-btn"],
    button[class*="-btn "],
    button[class*="-btn--"],
    button[class*="__btn"],
    a[class="btn"],
    button[class="btn"],
    a[class^="btn-"],
    button[class^="btn-"],
    a[class*=" btn-"],
    button[class*=" btn-"],
    a[class$="-button"],
    a[class*="-button "],
    a[class*="__button"],
    button[class$="-button"],
    button[class*="-button "],
    button[class*="__button"],
    a[class$="-cta"],
    a[class*="-cta "],
    a[class*="__cta"],
    button[class$="-cta"],
    button[class*="-cta "],
    button[class*="__cta"]
  ):hover {
    translate: 0 var(--jhb-motion-lift-control);
  }

  :where(
    a.jhb-interactive-card,
    button.jhb-interactive-card,
    a[class$="-card"],
    a[class*="-card "],
    a[class$="__card"],
    a[class*="__card "],
    a[class*="card-link"],
    button[class$="-card"],
    button[class*="-card "],
    button[class$="__card"],
    button[class*="__card "]
  ):hover {
    translate: 0 var(--jhb-motion-lift-card);
    box-shadow: var(--jhb-shadow-interactive);
  }

  :where(a, button):hover :where(
    .jhb-motion-arrow,
    [class$="-arrow"],
    [class*="-arrow "],
    [class*="__arrow"]
  ) {
    translate: var(--jhb-motion-arrow-shift) 0;
  }
}

/* Touch/Click: kurzes, physisches Feedback statt simuliertem Hover. */
:where(
  a.jhb-interactive-control,
  button.jhb-interactive-control,
  a.jhb-interactive-card,
  button.jhb-interactive-card,
  a.wp-element-button,
  button.wp-element-button,
  input[type="submit"],
  input[type="button"],
  a[class$="-btn"],
  a[class*="-btn "],
  a[class*="-btn--"],
  a[class*="__btn"],
  button[class$="-btn"],
  button[class*="-btn "],
  button[class*="-btn--"],
  button[class*="__btn"],
  a[class$="-button"],
  a[class*="-button "],
  a[class*="__button"],
  button[class$="-button"],
  button[class*="-button "],
  button[class*="__button"],
  a[class$="-card"],
  a[class*="-card "],
  a[class$="__card"],
  a[class*="__card "],
  a[class*="card-link"]
):active {
  translate: 0 0;
  scale: var(--jhb-motion-press-scale);
}

@media (hover: none) {
  :where(
    .jhb-startseite,
    .jhb-ambulant-page,
    .jhb-berlin-angebot,
    .jhb-standort-master,
    .jhb-leistungen-hub,
    .jhb-stationaer-page,
    .jhb-wegweiser-v4,
    .jhb-ansprechpartner,
    #angebot-layout,
    .jhb-jobs-v2
  ) :where(a, button) {
    -webkit-tap-highlight-color: rgba(233, 98, 11, .08);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    a, button, input, summary,
    .jhb-interactive-control,
    .jhb-interactive-card
  ) {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  :where(
    a.jhb-interactive-control,
    button.jhb-interactive-control,
    a.jhb-interactive-card,
    button.jhb-interactive-card,
    a[class$="-btn"],
    a[class*="-btn "],
    a[class*="-btn--"],
    a[class*="__btn"],
    button[class$="-btn"],
    button[class*="-btn "],
    button[class*="-btn--"],
    button[class*="__btn"],
    a[class$="-card"],
    a[class*="-card "],
    a[class$="__card"],
    a[class*="__card "],
    a[class*="card-link"]
  ) {
    translate: none;
    scale: none;
  }
}