/* ============================================================================
 * Ammann AG Icon Font
 * ============================================================================
 * Benutzerdefinierte Icon-Font für das Rocket Child Theme
 * 
 * Verfügbare Icons:
 * - arrow-right       (\f100)
 * - close             (\f101)
 * - phone             (\f102)
 * - collapse-arrow    (\f103)
 * - chevron           (\f104)
 * - right-arrow       (\f105)
 * - check             (\f106)
 * - arrow-left        (\f107)
 * - upload-document   (\f108)
 * - envelope          (\f109)
 *
 * Verwendung:
 * 
 * 1. Mit CSS-Klassen:
 *    <i class="ammann-icon ammann-icon-arrow-right"></i>
 * 
 * 2. Mit CSS-Variablen:
 *    .my-element::before {
 *        content: var(--ammann-icon-arrow-right);
 *        font-family: var(--ammann-font-family);
 *    }
 * 
 * 3. Mit data-Attribut:
 *    <i class="ammann-icon" data-ammann-icon="\f100"></i>
 * 
 * ========================================================================== */

/* ============================================================================
 * @font-face Definition
 * ========================================================================== */
@font-face {
  font-family: "Ammann Icons";
  src: url("../fonts/ammann-icons/Ammann AG.eot");
  src: url("../fonts/ammann-icons/Ammann AG.eot?#iefix") format("embedded-opentype"),
    url("../fonts/ammann-icons/Ammann AG.woff2") format("woff2"),
    url("../fonts/ammann-icons/Ammann AG.woff") format("woff"),
    url("../fonts/ammann-icons/Ammann AG.ttf") format("truetype"),
    url("../fonts/ammann-icons/Ammann AG.svg#font") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Webkit-spezifische Optimierung für SVG */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Ammann Icons";
    src: url("../fonts/ammann-icons/Ammann AG.svg#Ammann AG") format("svg");
    font-display: swap;
  }
}

/* ============================================================================
 * CSS Custom Properties (Variablen)
 * ========================================================================== */
:root {
  /* Font-Familie */
  --ammann-font-family: "Ammann Icons";

  /* Icon Unicode-Werte */
  --ammann-icon-arrow-right: "\f100";
  --ammann-icon-close: "\f101";
  --ammann-icon-phone: "\f102";
  --ammann-icon-collapse-arrow: "\f103";
  --ammann-icon-chevron: "\f104";
  --ammann-icon-right-arrow: "\f105";
  --ammann-icon-check: "\f106";
  --ammann-icon-arrow-left: "\f107";
  --ammann-icon-upload-document: "\f108";
  --ammann-icon-envelope: "\f109";

  /* Default Icon Größen */
  --ammann-icon-size-sm: 16px;
  --ammann-icon-size-md: 24px;
  --ammann-icon-size-lg: 36px;
  --ammann-icon-size-xl: 50px;
}

/* ============================================================================
 * Base Icon Class
 * ========================================================================== */
.ammann-icon,
[data-ammann-icon]::before {
  display: inline-block;
  font-family: var(--ammann-font-family);
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  /* Verhindere Text-Selektion bei Icons */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* data-Attribut Verwendung */
[data-ammann-icon]::before {
  content: attr(data-ammann-icon);
}

/* ============================================================================
 * Icon Klassen
 * ========================================================================== */
.ammann-icon-arrow-right::before {
  content: var(--ammann-icon-arrow-right);
}

.ammann-icon-close::before {
  content: var(--ammann-icon-close);
}

.ammann-icon-phone::before {
  content: var(--ammann-icon-phone);
}

.ammann-icon-collapse-arrow::before {
  content: var(--ammann-icon-collapse-arrow);
}

.ammann-icon-chevron::before {
  content: var(--ammann-icon-chevron);
}

.ammann-icon-right-arrow::before {
  content: var(--ammann-icon-right-arrow);
}

.ammann-icon-check::before {
  content: var(--ammann-icon-check);
}

.ammann-icon-arrow-left::before {
  content: var(--ammann-icon-arrow-left);
}

.ammann-icon-upload-document::before {
  content: var(--ammann-icon-upload-document);
}

.ammann-icon-envelope::before {
  content: var(--ammann-icon-envelope);
}

/* ============================================================================
 * Icon Größen Modifier
 * ========================================================================== */
.ammann-icon--sm {
  font-size: var(--ammann-icon-size-sm);
}

.ammann-icon--md {
  font-size: var(--ammann-icon-size-md);
}

.ammann-icon--lg {
  font-size: var(--ammann-icon-size-lg);
}

.ammann-icon--xl {
  font-size: var(--ammann-icon-size-xl);
}

/* ============================================================================
 * Icon Position Modifier
 * ========================================================================== */
.ammann-icon--inline {
  vertical-align: middle;
  margin: 0 0.25em;
}

.ammann-icon--left {
  margin-right: 0.5em;
}

.ammann-icon--right {
  margin-left: 0.5em;
}

/* ============================================================================
 * Icon Rotation & Flip Utilities
 * ========================================================================== */
.ammann-icon--rotate-90 {
  transform: rotate(90deg);
}

.ammann-icon--rotate-180 {
  transform: rotate(180deg);
}

.ammann-icon--rotate-270 {
  transform: rotate(270deg);
}

.ammann-icon--flip-horizontal {
  transform: scaleX(-1);
}

.ammann-icon--flip-vertical {
  transform: scaleY(-1);
}

/* ============================================================================
 * Animation Utilities
 * ========================================================================== */
.ammann-icon--spin {
  animation: ammann-icon-spin 2s linear infinite;
}

@keyframes ammann-icon-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ammann-icon--pulse {
  animation: ammann-icon-pulse 1s ease-in-out infinite;
}

@keyframes ammann-icon-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ============================================================================
 * WordPress Block Editor Compatibility
 * ========================================================================== */
.editor-styles-wrapper .ammann-icon,
.editor-styles-wrapper [data-ammann-icon]::before {
  font-family: var(--ammann-font-family);
}