/**
 * Buttons Component
 *
 * Enthält:
 * - Global Button System (Premium Edition)
 * - Primary, Secondary, Ghost, Outline Buttons
 * - Button Size Modifiers (Small, Large, Hero, Block)
 * - WordPress Block Support (.wp-block-button__link)
 * - Responsive & Accessibility
 * - Reduced Motion Support
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus components.css: Zeilen 14-506
 * Datei-Größe: ~492 Zeilen
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   GLOBAL BUTTON SYSTEM - PREMIUM EDITION
   ============================================ */

/**
 * BUTTON SYSTEM v2.0 - Hero-Style Global
 *
 * Basiert auf den Premium Hero-Button-Styles mit:
 * - Box-Shadow Glow-Effekten
 * - Scale + TranslateY Animationen
 * - Cubic-Bezier Transitions
 * - Glasmorphism (Backdrop-Blur)
 * - Responsive Sizing
 * - Accessibility Features
 *
 * VERWENDUNG:
 * - Primary: Haupt-CTA (Gelb/Orange Glow)
 * - Secondary: Zweit-CTA (Blau Glow)
 * - Ghost: Für dunkle Hintergründe (Glasmorphism)
 * - Outline: Transparente Variante
 *
 * KOMBINIERBAR mit Größen-Modifiern:
 * - .btn-small (kompakt)
 * - .btn-large (prominent)
 * - .btn-hero (extra prominent)
 * - .btn-block (full-width)
 */

/* ============================================
   BASE BUTTON - Shared Properties
   ============================================ */

/**
 * WordPress Block Button Wrapper - Reset
 *
 * WICHTIG: Der Wrapper (.wp-block-button) darf KEINE visuellen Styles haben!
 * Nur der innere Link (.wp-block-button__link) soll gestylt werden.
 *
 * Problem: WordPress Core CSS fügt standardmäßig Styles auf den Wrapper hinzu,
 * was zu einem "Button-im-Button"-Effekt führt.
 *
 * Lösung: Wrapper komplett zurücksetzen - transparent, kein padding, kein border.
 */
.wp-block-button,
.wp-block-button.is-style-outline {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  display: inline-block;
  box-shadow: none !important;
}

/**
 * Basis-Button-Styles
 * Werden von allen Button-Varianten geerbt
 *
 * WICHTIG:
 * - display: inline-flex (für Icons)
 * - gap: 10px (Abstand zwischen Text + Icon)
 * - cubic-bezier für smoothe Animationen
 * - will-change für GPU-Beschleunigung
 *
 * WORDPRESS BLOCK SUPPORT:
 * - .wp-block-button__link → Primary Button
 * - .is-style-outline .wp-block-button__link → Ghost Button
 */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Sizing */
  font-size: 18px;
  font-weight: 700;
  padding: 18px 40px;
  line-height: 1.4;

  /* Shape */
  border-radius: 999px;
  border: none;

  /* Interaktion */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  /* Performance */
  will-change: transform;
  transform: translateZ(0);
}

/* ============================================
   PRIMARY BUTTON - Gelb/Orange Glow
   ============================================ */

/**
 * Primary Button - Haupt-CTA
 *
 * Features:
 * - SLV Gelb (#FCBC5B) Hintergrund
 * - Doppelter Box-Shadow (Glow + Depth)
 * - Scale + Lift Animation
 * - Dunkler Text (#1A1A1A)
 *
 * Verwendung:
 * <a href="#" class="btn-primary">Transport anfragen</a>
 * <button class="btn-primary">Jetzt buchen</button>
 *
 * WordPress Block Support:
 * Standard WordPress Buttons (.wp-block-button__link) erhalten automatisch Primary-Style
 *
 * WICHTIG: .wp-element-button ist die WordPress 6.x Klasse für Block-Buttons.
 * Diese wird über theme.json gestylt und muss hier explizit überschrieben werden.
 */
.btn-primary,
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-element-button,
a.wp-element-button,
.wp-block-button__link.wp-element-button {
  background-color: #FCBC5B !important;
  color: #1A1A1A !important;
  box-shadow:
    0 4px 15px rgba(252, 188, 91, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   OUTLINE BUTTON - Kontextabhängige Styles
   ============================================ */

/**
 * Outline Button auf HELLEM Hintergrund (Standard)
 *
 * Features:
 * - Transparenter Hintergrund
 * - SLV Blau (#5CB8E9) für Text und Rand
 * - Hover: Gefüllter blauer Hintergrund
 *
 * Verwendung: Außerhalb von .wp-block-cover, auf normalen Sektionen
 */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button,
.is-style-outline .wp-block-button__link,
.is-style-outline .wp-element-button {
  background-color: transparent !important;
  color: #5CB8E9 !important;
  border: 2px solid #5CB8E9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hover-State für Outline auf hellem Hintergrund */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-element-button:hover {
  background-color: #5CB8E9 !important;
  color: #FFFFFF !important;
  border-color: #5CB8E9 !important;
  transform: scale(1.03) translateY(-1px);
  box-shadow:
    0 4px 15px rgba(92, 184, 233, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.15);
}

/**
 * Ghost Button auf DUNKLEM Hintergrund (in .wp-block-cover)
 *
 * Features:
 * - Glasmorphism-Effekt
 * - Weiße Schrift und Rand
 * - Backdrop-blur
 *
 * Verwendung: Im Hero-Bereich, Banner, Cover-Blöcke
 */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-element-button,
.wp-block-cover .is-style-outline .wp-block-button__link,
.wp-block-cover .is-style-outline .wp-element-button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Hover-State für Ghost auf dunklem Hintergrund */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-cover .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .is-style-outline .wp-element-button:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #5CB8E9 !important;
  border-color: #FFFFFF !important;
  transform: scale(1.03) translateY(-1px);
  box-shadow:
    0 4px 20px rgba(255, 255, 255, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
  background-color: #D99A44 !important;
  transform: scale(1.05) translateY(-2px);
  box-shadow:
    0 6px 25px rgba(252, 188, 91, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* ============================================
   SECONDARY BUTTON - Blau Glow
   ============================================ */

/**
 * Secondary Button - Zweit-CTA
 *
 * Features:
 * - SLV Blau (#5CB8E9) Hintergrund
 * - Doppelter Box-Shadow (Glow + Depth)
 * - Scale + Lift Animation
 * - Weißer Text
 *
 * Verwendung:
 * <a href="#" class="btn-secondary">Mehr erfahren</a>
 */
.btn-secondary {
  background-color: #5CB8E9;
  color: #FFFFFF;
  box-shadow:
    0 4px 15px rgba(92, 184, 233, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #1177A0;
  transform: scale(1.05) translateY(-2px);
  box-shadow:
    0 6px 25px rgba(92, 184, 233, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
  text-decoration: none;
}

/* ============================================
   GHOST BUTTON - Glasmorphism (Dunkle Hintergründe)
   ============================================ */

/**
 * Ghost Button - Für dunkle Hintergründe (Hero, Banner)
 *
 * Features:
 * - Glasmorphism mit backdrop-filter
 * - Transparenter Hintergrund (rgba(255,255,255,0.15))
 * - 2px weißer Border
 * - Hover: Weiße Füllung mit blauem Text
 * - Subtilere Animation (scale 1.03 statt 1.05)
 *
 * WICHTIG: Nur auf dunklen Hintergründen verwenden!
 *
 * Verwendung:
 * <a href="#" class="btn-ghost">Leistungen ansehen</a>
 *
 * WordPress Block Support:
 * WordPress Outline Buttons (.is-style-outline) erhalten automatisch Ghost-Style
 */
.btn-ghost,
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-block-button__link {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  padding: 16px 36px; /* Etwas kleiner als Primary */
  font-weight: 600; /* Etwas leichter */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-ghost:hover,
.btn-ghost:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
  background-color: rgba(255, 255, 255, 0.95);
  color: #5CB8E9;
  border-color: #FFFFFF;
  transform: scale(1.03) translateY(-1px);
  box-shadow:
    0 4px 20px rgba(255, 255, 255, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* ============================================
   OUTLINE BUTTON - Transparente Variante
   ============================================ */

/**
 * Outline Button - Transparente Variante
 *
 * Features:
 * - Transparenter Hintergrund
 * - Blauer Border (2px)
 * - Hover: Gefüllter blauer Hintergrund
 * - Leichtere Animation
 *
 * Verwendung:
 * <a href="#" class="btn-outline">Kontaktieren</a>
 */
.btn-outline {
  background-color: transparent;
  color: #5CB8E9;
  border: 2px solid #5CB8E9;
  padding: 16px 38px; /* Kompensiert Border (18px - 2px) */
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: #5CB8E9;
  color: #FFFFFF;
  border-color: #5CB8E9;
  transform: scale(1.03) translateY(-1px);
  box-shadow:
    0 4px 15px rgba(92, 184, 233, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* ============================================
   BUTTON GRÖSZEN-MODIFIERS
   ============================================ */

/**
 * Small Button - Kompakte Variante
 *
 * Verwendung: .btn-primary.btn-small
 */
.btn-small {
  font-size: 16px;
  padding: 12px 28px;
  font-weight: 600;
}

.btn-ghost.btn-small,
.btn-outline.btn-small {
  padding: 10px 26px; /* Kompensiert Border */
}

/**
 * Large Button - Prominente Variante
 *
 * Verwendung: .btn-primary.btn-large
 */
.btn-large {
  font-size: 20px;
  padding: 22px 50px;
  font-weight: 700;
}

.btn-ghost.btn-large,
.btn-outline.btn-large {
  padding: 20px 48px; /* Kompensiert Border */
}

/**
 * Hero Button - Extra Prominente Variante
 *
 * Features:
 * - Noch stärkere Box-Shadows
 * - Größere Scale-Animation (1.08 statt 1.05)
 * - Größerer translateY-Effekt (-3px statt -2px)
 *
 * Verwendung: .btn-primary.btn-hero
 */
.btn-hero {
  font-size: 18px;
  padding: 20px 45px;
  font-weight: 700;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn-primary.btn-hero {
  box-shadow:
    0 6px 20px rgba(252, 188, 91, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.2);
}

.btn-secondary.btn-hero {
  box-shadow:
    0 6px 20px rgba(92, 184, 233, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.2);
}

.btn-hero:hover,
.btn-hero:focus {
  transform: scale(1.08) translateY(-3px);
}

.btn-primary.btn-hero:hover,
.btn-primary.btn-hero:focus {
  box-shadow:
    0 8px 30px rgba(252, 188, 91, 0.8),
    0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-secondary.btn-hero:hover,
.btn-secondary.btn-hero:focus {
  box-shadow:
    0 8px 30px rgba(92, 184, 233, 0.8),
    0 5px 15px rgba(0, 0, 0, 0.3);
}

/**
 * Block Button - Full-Width (Mobile)
 *
 * Verwendung: .btn-primary.btn-block
 */
.btn-block {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

/* ============================================
   ACCESSIBILITY - FOCUS STATES
   ============================================ */

/**
 * Focus-Visible States für Keyboard-Navigation
 * WCAG 2.1 konform
 */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible {
  outline: 3px solid #FCBC5B;
  outline-offset: 3px;
}

/* ============================================
   RESPONSIVE - MOBILE OPTIMIERUNGEN
   ============================================ */

/**
 * Mobile (< 768px)
 * - Kleinere Font-Sizes
 * - Reduziertes Padding
 * - Optional: Full-Width Buttons
 */
@media (max-width: 767px) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .wp-block-button__link,
  .wp-block-button .wp-block-button__link {
    font-size: 16px;
    padding: 16px 32px;
  }

  .btn-ghost,
  .btn-outline,
  .wp-block-button.is-style-outline .wp-block-button__link,
  .is-style-outline .wp-block-button__link {
    padding: 14px 30px; /* Kompensiert Border */
  }

  .btn-small {
    font-size: 14px;
    padding: 10px 24px;
  }

  .btn-large {
    font-size: 18px;
    padding: 18px 40px;
  }

  .btn-hero {
    font-size: 17px;
    padding: 18px 38px;
  }
}

/**
 * Tablet (768px - 1023px)
 * - Moderate Sizes
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .wp-block-button__link,
  .wp-block-button .wp-block-button__link {
    font-size: 17px;
    padding: 17px 38px;
  }

  .btn-ghost,
  .btn-outline,
  .wp-block-button.is-style-outline .wp-block-button__link,
  .is-style-outline .wp-block-button__link {
    padding: 15px 36px; /* Kompensiert Border */
  }
}

/**
 * Desktop (1024px+)
 * - Optimierte Hover-Effekte
 * - Nur auf Hover-fähigen Geräten (nicht Touch)
 */
@media (min-width: 1024px) {
  @media (hover: hover) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .wp-block-button__link:not(.is-style-outline .wp-block-button__link):hover {
      transform: scale(1.08) translateY(-3px);
    }

    .btn-hero:hover {
      transform: scale(1.1) translateY(-4px);
    }
  }
}

/* ============================================
   BUTTON PRESS EFFECT - Taktiles Feedback
   ============================================ */

/**
 * Active/Press State für alle Buttons
 * Macht Klicks "fühlbarer" durch:
 * - Leichte Verkleinerung (scale 0.97)
 * - Minimaler translateY nach unten (1px)
 * - Schnellere Transition (0.1s)
 *
 * UX-Effekt: Button "drückt sich ein" beim Klick
 * Verbessert wahrgenommene Responsivität
 *
 * @since 1.1.0 - Animation Enhancement Phase 1
 */
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-ghost:active,
.wp-block-button__link:active {
  transform: scale(0.97) translateY(1px);
  transition-duration: 0.1s;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Hero Buttons: Stärkerer Press-Effect */
.btn-hero:active {
  transform: scale(0.96) translateY(2px);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

/**
 * Accessibility: Deaktiviert Animationen
 * Für Nutzer mit prefers-reduced-motion
 * Wichtig für Motion-Sensitivity und Epilepsie
 */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .wp-block-button__link,
  .wp-block-button .wp-block-button__link {
    transition: none;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-ghost:hover,
  .btn-hero:hover,
  .wp-block-button__link:hover,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active,
  .btn-ghost:active,
  .btn-hero:active,
  .wp-block-button__link:active {
    transform: none;
  }
}

/* ============================================
   CTA ATTENTION PULSE - Hero Button Animation
   ============================================ */

/**
 * Attention Pulse Animation
 *
 * Subtiler, pulsierender Glow-Effekt um die Aufmerksamkeit
 * auf den primären Call-to-Action zu lenken.
 *
 * Features:
 * - Expandierender Ring-Effekt (von 0 auf 10px)
 * - Nutzt Brand-Farbe (Blau für Primary)
 * - 2.5s Zyklus (langsam, nicht störend)
 * - Stoppt bei Hover (User interagiert)
 *
 * Anwendung:
 * - Nur im Hero-Bereich (.wp-block-cover)
 * - Nur für Primary Buttons
 *
 * @since 1.2.0 - Animation Enhancement Phase 3
 */
@keyframes cta-attention-pulse {
  0%, 100% {
    box-shadow:
      0 4px 15px rgba(252, 188, 91, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.2),
      0 0 0 0 rgba(92, 184, 233, 0.4);
  }
  50% {
    box-shadow:
      0 4px 15px rgba(252, 188, 91, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.2),
      0 0 0 10px rgba(92, 184, 233, 0);
  }
}

/**
 * Pulse auf Hero CTA anwenden
 * Selektoren für WordPress Cover Block Buttons
 */
.wp-block-cover .wp-block-button__link,
.hero-section .btn-primary,
.hero-cta .btn-primary {
  animation: cta-attention-pulse 2.5s ease-in-out infinite;
}

/**
 * Animation bei Hover stoppen
 * User interagiert → keine Ablenkung nötig
 */
.wp-block-cover .wp-block-button__link:hover,
.hero-section .btn-primary:hover,
.hero-cta .btn-primary:hover {
  animation: none;
}

/**
 * Animation bei Focus stoppen
 * Keyboard-Navigation → klare Focus-States wichtiger
 */
.wp-block-cover .wp-block-button__link:focus,
.hero-section .btn-primary:focus,
.hero-cta .btn-primary:focus {
  animation: none;
}

/**
 * Accessibility: Deaktivieren bei reduced-motion
 */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover .wp-block-button__link,
  .hero-section .btn-primary,
  .hero-cta .btn-primary {
    animation: none;
  }
}