/**
 * Custom Icons CSS - Boxicons Optimization
 * Optymalizacja Boxicons dla 2steel.pl
 * 
 * ANALIZA UŻYTYCH IKON:
 * - bx-chevron-down: Używana w menu mobilnym (header.php)
 * - bx-search: Używana w pasku nawigacji (header.php)
 * - bx-cart: Używana w koszyku (header.php)
 * 
 * ZMIANY OPTYMALIZACYJNE:
 * 1. Usunięto ponad 700 nieużywanych reguł CSS dla ikon
 * 2. Pozostawiono tylko 3 używane ikony
 * 3. Dodano font-display: swap dla szybszego ładowania
 * 4. Zoptymalizowano media queries
 * 5. Dodano preload dla woff2 (najnowszy format)
 */

@font-face {
  font-family: 'boxicons';
  src: url('./assets/fonts/boxicons.eot');
  src: url('./assets/fonts/boxicons.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/boxicons.woff2') format('woff2'),
       url('./assets/fonts/boxicons.woff') format('woff'),
       url('./assets/fonts/boxicons.ttf') format('truetype'),
       url('./assets/fonts/boxicons.svg#boxicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   KLASA BAZOWA DLA WSZYSTKICH IKON
   ============================================ */
.bx {
  font-family: 'boxicons' !important;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ROZMIARY IKON
   ============================================ */
.bx-xs { font-size: 0.75rem; }
.bx-sm { font-size: 1rem; }
.bx { font-size: 1.5rem; }
.bx-lg { font-size: 2rem; }
.bx-xl { font-size: 3rem; }

/* ============================================
   TRANSFORMACJE IKON
   ============================================ */
.bx-spin { animation: bx-spin 2s linear infinite; }
.bx-rotate-90 { transform: rotate(90deg); }
.bx-rotate-180 { transform: rotate(180deg); }
.bx-rotate-270 { transform: rotate(270deg); }
.bx-flip-horizontal { transform: scaleX(-1); }
.bx-flip-vertical { transform: scaleY(-1); }

@keyframes bx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

/* ============================================
   STYLE OBRAMOWANIA
   ============================================ */
.bx-border { border: 1px solid currentColor; border-radius: 0.25rem; padding: 0.25em; }
.bx-border-circle { border: 1px solid currentColor; border-radius: 50%; padding: 0.25em; }
.bx-fw { text-align: center; width: 1.25em; }

/* ============================================
   ZOPTYMALIZOWANE IKONY - TYLKO UŻYWANE
   ============================================ */

/* Chevron Down - używana w menu mobilnym */
.bx-chevron-down::before { content: '\\f259'; }

/* Search - używana w pasku nawigacji */
.bx-search::before { content: '\\f2a4'; }

/* Shopping Cart - używana w koszyku */
.bx-cart::before { content: '\\f2a8'; }

/* ============================================
   RESPONSYWNE ROZMIARY IKON
   ============================================ */
@media (max-width: 768px) {
  .bx { font-size: 1.25rem; }
  .bx-lg { font-size: 1.75rem; }
  .bx-xl { font-size: 2.5rem; }
}

/* ============================================
   STYLE DLA KOMPONENTÓW
   ============================================ */
.btn .bx, .btn-group .bx { margin-right: 0.5rem; }
.nav-link .bx { margin-right: 0.5rem; }
.dropdown-item .bx { margin-right: 0.75rem; }

.woocommerce .bx { display: inline-block; vertical-align: middle; }
.product-item .bx { margin-right: 0.5rem; }
.woocommerce-message .bx, .woocommerce-error .bx, .woocommerce-info .bx { margin-right: 0.5rem; }

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  .bx { color: inherit; }
}

/* ============================================
   OPTYMALIZACJA ŁADOWANIA
   ============================================ */
/* 
   Aby jeszcze bardziej zoptymalizować ładowanie CSS:
   
   1. DEFER LOADING (w functions.php):
      Dodaj do wp_enqueue_style():
      wp_enqueue_style('boxicons-custom', ..., array(), '1.0.0', 'all');
      // Następnie dodaj atrybut 'defer' poprzez filter:
      add_filter('style_loader_tag', function($tag, $handle) {
        if ($handle === 'boxicons-custom') {
          return str_replace("media='all'", "media='print' onload=\"this.media='all'\"", $tag);
        }
        return $tag;
      }, 10, 2);
   
   2. PRELOAD WOFF2 (w header.php):
      <link rel="preload" as="font" type="font/woff2" 
            href="/wp-content/themes/2steel-child/assets/fonts/boxicons.woff2" 
            crossorigin>
   
   3. FONT-DISPLAY SWAP:
      ✓ Już zaimplementowany w @font-face
      Zapewnia szybkie wyświetlenie tekstu fallback, a następnie wymianę na ikonę
*/