/* ============================================
   AvS Button Hover – Gutenberg Buttons only
   - keine Animation auf Navigations-Submenu-Icons
   - Font wird NICHT verändert (keine font-* Regeln)
   - Hover-Füllung nutzt Akzentfarbe 1 (Global Styles)
   - Outline/Fokus Fixes (Firefox etc.)
   ============================================ */

:root{
  /* Global Styles (block themes): Akzentfarbe 1
     Fallback-Kette für ältere/andere Themes */
  --ajw-btn-hover: var(--wp--preset--color--accent-1,
                    var(--wp--preset--color--accent,
                    var(--wp--preset--color--primary,
                    var(--wp--preset--color--vivid-cyan-blue,
                    #E16036))));
}


/* ✅ Global Pointer-Fokus-Fixes (Mouse/Touch):
   Entfernt unerwünschte Fokus/Outline/Shadow-Ringe nach Klick/Tippen,
   ohne :focus-visible (Keyboard) zu beeinträchtigen.
   Robust gegen WP-Markup-Änderungen via :where() + breiten Selektoren. */
:where(
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .wp-element-button,
  .wp-block-button__link,
  .wp-block-navigation-item__content,
  .wp-block-navigation-submenu__toggle,
  .wp-block-navigation__submenu-icon,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close
){
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

:where(
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .wp-element-button,
  .wp-block-button__link,
  .wp-block-navigation-item__content,
  .wp-block-navigation-submenu__toggle,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close
):focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}

/* Fallback for browsers without :focus-visible support:
   only suppress focus when last interaction was pointer. */
html[data-avs-input="pointer"] :where(
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .wp-element-button,
  .wp-block-button__link,
  .wp-block-navigation-item__content,
  .wp-block-navigation-submenu__toggle,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close
):focus{
  outline: none !important;
  box-shadow: none !important;
}


/* ✅ NUR Buttons-Block (Gutenberg):
   Dadurch werden z.B. Navigation-Submenu-Buttons NICHT beeinflusst. */
.wp-block-button .wp-element-button,
.wp-block-button .wp-block-button__link{
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;

  /* Stabilisiert Rendering, damit Text beim Hover nicht "springt" */
  transform: translateZ(0);
  backface-visibility: hidden;

  transition: color 0.45s cubic-bezier(.2, .9, .2, 1);
}


/* ✅ Text-/Icon-Farbwechsel weich animieren (auch für Solid-Buttons) */
.wp-block-button .wp-element-button *,
.wp-block-button .wp-block-button__link *{
  transition: color 0.45s cubic-bezier(.2, .9, .2, 1),
              fill 0.45s cubic-bezier(.2, .9, .2, 1),
              stroke 0.45s cubic-bezier(.2, .9, .2, 1);
}

/* Fokus-Ring nach Maus-Klick entfernen (z.B. Firefox),
   aber Tastatur-Fokus weiterhin sichtbar lassen */
.wp-block-button .wp-element-button:focus:not(:focus-visible),
.wp-block-button .wp-block-button__link:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-button .wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hover-Füllung: läuft von links nach rechts "unter" dem Text */
.wp-block-button .wp-element-button::before,
.wp-block-button .wp-block-button__link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ajw-btn-hover);
  opacity: 0;
  transform: translateX(-101%);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s ease-out;
  z-index: -1;
  pointer-events: none;
}


/* ✅ Solid/gefüllte Buttons:
   Overlay muss ÜBER dem Button-Hintergrund liegen,
   aber UNTER dem Text (Text darf nie vom Overlay überdeckt werden).
   -> z-index bleibt negativ innerhalb des isolierten Stacking-Contexts. */
html body .wp-block-button:not(.is-style-outline) > .wp-element-button::before,
html body .wp-block-button:not(.is-style-outline) > .wp-block-button__link::before{
  z-index: -1;
}

.wp-block-button .wp-element-button:hover::before,
.wp-block-button .wp-block-button__link:hover::before{
  opacity: 1;
  transform: translateX(0);
}




/* ✅ Fix: Hover auf Wrapper soll immer auch die Füll-Animation auslösen (auch Kontur-Buttons) */
html body .wp-block-button:hover > .wp-element-button::before,
html body .wp-block-button:hover > .wp-block-button__link::before,
html body .wp-block-button.is-style-outline:hover > .wp-element-button::before,
html body .wp-block-button.is-style-outline:hover > .wp-block-button__link::before,
html body .wp-block-button:hover .wp-element-button.is-style-outline::before,
html body .wp-block-button:hover .wp-block-button__link.is-style-outline::before{
  opacity: 1;
  transform: translateX(0);
}
/* ✅ Neu: Auch gefüllte Buttons sollen beim Hover weiße Schrift (bessere Lesbarkeit) bekommen */
html body .wp-block-button .wp-element-button:hover,
html body .wp-block-button .wp-block-button__link:hover{
  color: #fff !important;
}

html body .wp-block-button .wp-element-button:hover *,
html body .wp-block-button .wp-block-button__link:hover *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* ✅ Solid/gefüllte Buttons: Wenn Hover am Wrapper ausgelöst wird, trotzdem Text/Icon auf Weiß setzen */
html body .wp-block-button:not(.is-style-outline):hover > .wp-element-button,
html body .wp-block-button:not(.is-style-outline):hover > .wp-block-button__link{
  color: #fff !important;
}
html body .wp-block-button:not(.is-style-outline):hover > .wp-element-button *,
html body .wp-block-button:not(.is-style-outline):hover > .wp-block-button__link *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}


/* ✅ Fix: Outline/Kontur-Buttons dürfen keine weiße Füllung bekommen */
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color: transparent !important;
}

/* ✅ Fix: Wenn Textfarbe z.B. weiß ist, soll die Kontur (Border) automatisch folgen */
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link{
  border-color: currentColor;



}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wp-block-button .wp-element-button::before,
  .wp-block-button .wp-block-button__link::before{
    transition: none;
    transform: translateX(0);
    opacity: 1;
  }
}

/* ✅ OUTLINE HOVER – hohe Spezifität (File-Version) */
html body .wp-block-button.is-style-outline:hover > .wp-element-button,
html body .wp-block-button.is-style-outline:hover > .wp-block-button__link,
html body .wp-block-button.is-style-outline .wp-element-button:hover,
html body .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .wp-block-button .wp-element-button.is-style-outline:hover,
html body .wp-block-button .wp-block-button__link.is-style-outline:hover{
  color: #fff !important;
  border-color: var(--ajw-btn-hover) !important;
  outline-color: var(--ajw-btn-hover) !important;
}

html body .wp-block-button.is-style-outline:hover > .wp-element-button *,
html body .wp-block-button.is-style-outline:hover > .wp-block-button__link *,
html body .wp-block-button.is-style-outline .wp-element-button:hover *,
html body .wp-block-button.is-style-outline .wp-block-button__link:hover *{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}