/* ============================================
   Lazy Snark Icons v28 — Exakte Animationen (korrigiert)
   Datei: /wp-content/themes/astra-child/assets/css/lazy-snark-icons.css
   ============================================ */

/* Basis: Icon-Styling */
.ls-menu-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  color: inherit;
  flex-shrink: 0;
}

/* Flexbox für Menü-Items mit Icons */
.main-header-menu .menu-item[class*="icon-"] > a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* ============================================
   STARTWERTE für animierte Pfade (aus v28)
   ============================================ */

/* Alle Icons mit .animate Klasse */
.ls-menu-icon .animate {
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Gift Cards spezifisch */
.ls-menu-icon .animate-line,
.ls-menu-icon .animate-left,
.ls-menu-icon .animate-right {
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Account spezifisch */
.ls-account-icon .animate-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Account statischer Kopf */
.ls-account-icon .head-static {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* ============================================
   1. SHOP: Tür aus-/einblenden (v9)
   ============================================ */
.main-header-menu .icon-shop .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-shop a:hover .ls-menu-icon .animate {
  animation: doorSequence 0.8s ease forwards;
}
@keyframes doorSequence {
  0%   { stroke-width: 1.5; }
  30%  { stroke-width: 0; }
  50%  { stroke-width: 0; }
  100% { stroke-width: 1.5; }
}

/* ============================================
   2. SPECIAL OFFERS: Sequenz-Einblendung (v9)
   ============================================ */
.main-header-menu .icon-special-offers .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-special-offers a:hover .ls-menu-icon .animate {
  animation: specialSequence 1.4s ease forwards;
}
@keyframes specialSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  20%  { stroke-width: 0;  stroke-dashoffset: 100; }
  35%  { stroke-width: 0;  stroke-dashoffset: 100; }
  45%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  85%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   3. HIKING MEALS v10
   ============================================ */
.main-header-menu .icon-hiking-meals .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-hiking-meals a:hover .ls-menu-icon .animate {
  animation: hikingSequence 1.0s ease forwards;
}
@keyframes hikingSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  30%  { stroke-width: 0;  stroke-dashoffset: 100; }
  30%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  80%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  60%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   4. MEAT JERKY v11
   ============================================ */
.main-header-menu .icon-meat-jerky .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-meat-jerky a:hover .ls-menu-icon .animate {
  animation: jerkySequence 1.2s ease forwards;
}
@keyframes jerkySequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   5. GRANOLA v12
   ============================================ */
.main-header-menu .icon-granola .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-granola a:hover .ls-menu-icon .animate {
  animation: granolaSequence 1.2s ease forwards;
}
@keyframes granolaSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   6. DRIP COFFEE v13
   ============================================ */
.main-header-menu .icon-drip-coffee .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-drip-coffee a:hover .ls-menu-icon .animate {
  animation: coffeeSequence 1.2s ease forwards;
}
@keyframes coffeeSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   7. FRUIT CHIPS v15
   ============================================ */
.main-header-menu .icon-fruit-chips .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-fruit-chips a:hover .ls-menu-icon .animate {
  animation: fruitSequence 1.2s ease forwards;
}
@keyframes fruitSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   8. HOME DISHES v18 — Reversed (Dampf unten→oben)
   ============================================ */
.main-header-menu .icon-home-dish .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-home-dish a:hover .ls-menu-icon .animate {
  animation: homeReversedSequence 1.2s ease forwards;
}
@keyframes homeReversedSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   9. DOG TREATS v17
   ============================================ */
.main-header-menu .icon-dog-treats .menu-link:hover .ls-menu-icon .animate,
.main-header-menu .icon-dog-treats a:hover .ls-menu-icon .animate {
  animation: dogSequence 1.2s ease forwards;
}
@keyframes dogSequence {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  25%  { stroke-width: 0;  stroke-dashoffset: 100; }
  25%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   10. GIFT CARDS v19 — Nacheinander (korrigiert)
   ============================================ */

/* Linie zuerst */
.main-header-menu .icon-gift .menu-link:hover .ls-menu-icon .animate-line,
.main-header-menu .icon-gift a:hover .ls-menu-icon .animate-line {
  animation: giftLine 1.4s ease forwards;
}
@keyframes giftLine {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  20%  { stroke-width: 0;  stroke-dashoffset: 100; }
  20%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  55%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* Linke Schlaufe danach */
.main-header-menu .icon-gift .menu-link:hover .ls-menu-icon .animate-left,
.main-header-menu .icon-gift a:hover .ls-menu-icon .animate-left {
  animation: giftLeft 1.4s ease forwards;
}
@keyframes giftLeft {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  20%  { stroke-width: 0;  stroke-dashoffset: 100; }
  45%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  75%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  75%  { stroke-width: 1.5; stroke-dashoffset: 0; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* Rechte Schlaufe zuletzt */
.main-header-menu .icon-gift .menu-link:hover .ls-menu-icon .animate-right,
.main-header-menu .icon-gift a:hover .ls-menu-icon .animate-right {
  animation: giftRight 1.4s ease forwards;
}
@keyframes giftRight {
  0%   { stroke-width: 1.5; stroke-dashoffset: 0; }
  20%  { stroke-width: 0;  stroke-dashoffset: 100; }
  65%  { stroke-width: 1.5; stroke-dashoffset: 100; }
  100% { stroke-width: 1.5; stroke-dashoffset: 0; }
}

/* ============================================
   11. ACCOUNT v28 — Gesamte untere Hälfte
   ============================================ */

/* Hover: Körper ausblenden, dann von links nach rechts einzeichnen */
.ast-header-account-wrap:hover .ls-account-icon .animate-body,
.ast-header-account-wrap a:hover .ls-account-icon .animate-body {
  animation: bodyDraw 1.2s ease forwards;
}

@keyframes bodyDraw {
  0%   { stroke-dashoffset: 0; }
  25%  { stroke-dashoffset: 100; }
  30%  { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

/* ============================================
   FARBE AUF HOVER (Lazy Snark Orange)
   ============================================ */
.main-header-menu .menu-item[class*="icon-"]:hover .ls-menu-icon,
.ast-header-account-wrap:hover .ls-account-icon {
  color: #E07B39;
}

/* ============================================
   TOUCH-OPTIMIERUNG (Mobile/Tablet)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .main-header-menu .menu-item[class*="icon-"]:active .ls-menu-icon .animate,
  .main-header-menu .menu-item[class*="icon-"]:active .ls-menu-icon .animate-line,
  .main-header-menu .menu-item[class*="icon-"]:active .ls-menu-icon .animate-left,
  .main-header-menu .menu-item[class*="icon-"]:active .ls-menu-icon .animate-right,
  .ast-header-account-wrap:active .ls-account-icon .animate-body {
    animation-duration: 0.6s;
  }
}

/* ============================================
   ASTRA-SPEZIFISCHE ANPASSUNGEN
   ============================================ */
.ast-header-account-wrap .ls-account-icon {
  vertical-align: middle;
  display: inline-block;
}

@media (max-width: 921px) {
  .ast-mobile-header-wrap .ls-menu-icon {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   Lazy Snark Account Icon — Visuelle Größenanpassung
   ============================================================ */

/* 1. Astra-Container für Account-Icon neutralisieren */
.ast-header-account-wrap .ahfb-svg-iconset,
.ast-footer-account-wrap .ahfb-svg-iconset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* 2. Das SVG selbst exakt dimensionieren */
.ast-header-account-wrap .ahfb-svg-iconset svg,
.ast-footer-account-wrap .ahfb-svg-iconset svg,
.ls-account-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;        /* Verhindert inline-SVG-Descender-Probleme */
    flex-shrink: 0 !important;
}

/* 3. Falls Astra dem Link selbst Padding gibt, korrigieren */
.ast-header-account-wrap > a,
.ast-footer-account-wrap > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4em;                       /* Abstand Icon ↔ Text, falls vorhanden */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Account-Icon während JS-Ladezeit verstecken */
.ast-header-account-wrap .ahfb-svg-iconset svg {
    opacity: 0;
    transition: opacity 0.1s ease;
}

/* Nach JS-Manipulation wieder anzeigen */
.ast-header-account-wrap .ahfb-svg-iconset svg.ls-account-icon {
    opacity: 1;
}