/* ========= AvS: Sanfter Hover-Unterstreichungseffekt für Textlinks ========= */

/*
  Akzentfarbe:
  - bevorzugt: Global Styles Preset "accent-1"
  - Fallbacks: "primary" oder Hex
*/
:root{
  --ajw-link-hover-accent: var(--wp--preset--color--accent-1, var(--wp--preset--color--primary, #F26430));

  /*
    Abstand der animierten Unterstreichung (nur Content-Links):
    - normal: wie Navigation (optisch etwas „luftiger“)
    - small: bleibt enger (für kleinere Schriftgrößen)
  */
  --ajw-link-hover-normal-shift: 0.12em;
  --ajw-link-hover-small-shift: 0em;
  --ajw-link-hover-underline-thickness: 3px;

  /* Reguläre Links (normale Schriftgröße): winzig mehr "Zeilenhöhe"/Luft, konstant (kein Hover-Shift) */
  --ajw-link-hover-normal-padding: 0.06em;

  /* Für große Schriftgrößen: etwas mehr Platz unter dem Text, damit die Linie nicht zu nah sitzt */
  --ajw-link-hover-large-padding: 0.08em;
}

/* =========================================================
   1) Normale Textlinks (Content)
   - Keine Buttons
   - Keine Navigation-Anker (die kommen unten separat)
   - Minimalinvasiv, aber mobile Theme-Overrides werden neutralisiert
   ========================================================= */

:where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button){
  text-decoration: none !important; /* verhindert mobile Theme-Overrides */
  color: inherit;
  display: inline-block;
  padding-bottom: var(--ajw-link-hover-normal-padding); /* Default: ein Müh mehr Luft, konstant */

  /* Standard: normale Schriftgröße -> Abstand wie Navigation (luftiger) */
  --ajw-link-underline-shift: var(--ajw-link-hover-normal-shift);

  /*
    Viele Themes setzen auf Mobilgeräten eine abweichende line-height nur für <a>.
    Da wir die Unterstreichung am unteren Rand zeichnen, wirkt sie sonst „näher“ am Text.
    -> Wir erzwingen daher die line-height vom umgebenden Text (nur Content-Links).
  */
  line-height: inherit !important;

  /*
    Unterstreichung als Background:
    - kein zusätzlicher Layout-/Reflow-Impact beim Einblenden (kein "Springen")
    - transparenter "Gap" + farbige Linie am Ende
  */
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - var(--ajw-link-hover-underline-thickness)),
    var(--ajw-link-hover-accent) calc(100% - var(--ajw-link-hover-underline-thickness)),
    var(--ajw-link-hover-accent) 100%
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% calc(var(--ajw-link-hover-underline-thickness) + var(--ajw-link-underline-shift));

  transition:
    color 0.25s cubic-bezier(.88,0,.5,.99),
    background-size 0.25s cubic-bezier(.88,0,.5,.99);
  will-change: background-size;
}

/* Kleine Schriftgrößen: Abstand enger lassen (wie vorher) */
:where(.has-small-font-size, .has-x-small-font-size, small)
  :where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button),
:where(a.has-small-font-size, a.has-x-small-font-size)
  :not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button){
  --ajw-link-underline-shift: var(--ajw-link-hover-small-shift);
  padding-bottom: 0 !important;
}

/* Große Schriftgrößen: etwas mehr Platz nach unten, damit die Linie optisch passt */
:where(.has-large-font-size, .has-x-large-font-size, .has-xx-large-font-size, .has-huge-font-size)
  :where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button),
:where(a.has-large-font-size, a.has-x-large-font-size, a.has-xx-large-font-size, a.has-huge-font-size)
  :not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button){
  padding-bottom: var(--ajw-link-hover-large-padding);
}

/* Ausschließen: Links, die Bilder oder SVGs enthalten */
a img,
a svg{
  pointer-events: none;
  text-decoration: none !important;
}

a:has(img),
a:has(svg){
  text-decoration: none !important;
  background-image: none !important;
  background-size: 0% 0% !important;
}


/* Hover/Fokus */
:where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button):hover,
:where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button):focus-visible{
  background-size: 100% calc(var(--ajw-link-hover-underline-thickness) + var(--ajw-link-underline-shift));
  color: var(--ajw-link-hover-accent);
}

/* Fokus-Rahmen nach Klick/Tap unterbinden (ohne Tastatur-Fokus zu zerstören)
   - Theme/Browser setzen oft outline/box-shadow auf :focus.
   - Wir entfernen das nur beim "nicht focus-visible" Fall (Pointer-Klick),
     damit Tab-Navigation weiterhin eine sichtbare Fokus-Info haben kann.
*/
:where(a):focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}

@supports not selector(:focus-visible){
  /* Fallback: wenn focus-visible nicht unterstützt wird, entfernen wir den Fokus-Rahmen generell */
  :where(a):focus{
    outline: none !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   2) Gutenberg Navigation (Unterstreichung nur unter dem Label)
   ========================================================= */

.wp-block-navigation .wp-block-navigation-item__content{
  text-decoration: none !important;
  color: inherit;
  transition: color 0.25s cubic-bezier(.88,0,.5,.99);
}

.wp-block-navigation .wp-block-navigation-item__label{
  position: relative;
  display: inline-block;
  text-decoration: none !important;
}

.wp-block-navigation .wp-block-navigation-item__label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0 !important;       /* <- verhindert mobile Abstands-Exceptions */
  transform: none !important;
  width: 0%;
  height: 3px;
  background-color: var(--ajw-link-hover-accent);
  transition: width 0.25s cubic-bezier(.88,0,.5,.99);
}

.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after{
  width: 100%;
}

.wp-block-navigation .wp-block-navigation-item__content:hover{
  color: var(--ajw-link-hover-accent);
}

/* Bewegungsarme Nutzer */

/* Bewegungsarme Nutzer */
@media (prefers-reduced-motion: reduce){
  :where(a):not(.wp-block-navigation__link):not(.wp-block-navigation-item__content):not(.wp-block-button__link):not(.wp-element-button):not(.button){
    transition: none;
    background-size: 100% calc(var(--ajw-link-hover-underline-thickness) + var(--ajw-link-underline-shift));
  }
  .wp-block-navigation .wp-block-navigation-item__label::after{
    transition: none;
    width: 100%;
  }
}

/* ========= Fix: Fokus-/Outline-Ringe robust entfernen (ohne A11y zu brechen) =========
   Ziel:
   - Pointer-Klick/Tap: keine "Ringe" (outline/box-shadow/border focus styles)
   - Keyboard (Tab): :focus-visible MUSS sichtbar bleiben
   Warum diese Struktur?
   - Gutenberg/Theme-Markup ändert sich gerne. Daher kombinieren wir:
     * Kontext-Scope (.wp-block-navigation) +
     * generische Interactables (a, button, [role="button"]) +
     * bekannte Navigation-Parts (item__content, submenu toggles, submenu icon)
   - Zusätzlich ein "Pointer-Mode" per Body-Klasse (.avs-lh-pointer), gesetzt via JS.
*/

/* 1) Standard: Entferne Focus-Ringe nur dann, wenn es NICHT focus-visible ist (Pointer-Klick). */
.wp-block-navigation :where(a, button, [role="button"], .wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle, .wp-block-navigation__submenu-icon):focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* 2) Fallback/Hardening: Manche Themes nutzen :focus-within oder setzen Ringe auf Wrapper.
      -> Nur im Pointer-Mode ausknipsen, damit Tastatur-Navigation nicht leidet. */
body.avs-lh-pointer .wp-block-navigation :where(a, button, [role="button"], .wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle, .wp-block-navigation__submenu-icon):focus{
  outline: none !important;
  box-shadow: none !important;
}

body.avs-lh-pointer .wp-block-navigation :where(li, .wp-block-navigation-item):focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* 3) A11y: Stelle einen klaren Keyboard-Fokus sicher (nur Navigation-Kontext).
      Das überschreibt notfalls Theme-Null-Styles, bleibt aber scoped. */
.wp-block-navigation :where(a, button, [role="button"], .wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle, .wp-block-navigation__submenu-icon):focus-visible{
  outline: 2px solid var(--ajw-link-hover-accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* 4) iOS/Safari Tap-Highlight in der Navigation entfernen (rein optisch, keine A11y-Auswirkung). */
.wp-block-navigation :where(a, button, [role="button"]){
  -webkit-tap-highlight-color: transparent;
}

/* 5) Optional: Global Buttons/Block-Buttons – nur Pointer-Fokus entstören (kein Scope auf Formulare nötig). */
.wp-block-button__link:focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible),
a.button:focus:not(:focus-visible),
.button:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}