/**
 * CleanWorld Restoration — Icon System
 * =====================================
 * All SVG icons use `currentColor` for stroke and fill.
 * Set color via parent element or .icon-* color utilities.
 *
 * USAGE EXAMPLES:
 * ---------------
 * <!-- Basic inline SVG usage: -->
 * <img src="/assets/icons/icon-phone.svg" class="icon-md" alt="Phone">
 *
 * <!-- Inline SVG with color class: -->
 * <svg class="icon-md icon-gold">...</svg>
 *
 * <!-- Icon in a button: -->
 * <button class="btn-primary">
 *   <svg class="icon-sm icon-white">...</svg>
 *   Call Now
 * </button>
 *
 * <!-- Logo usage: -->
 * <img src="/assets/logos/cleanworld-logo-horizontal-white.svg"
 *      class="logo-md" alt="CleanWorld Restoration">
 *
 * COLOR INHERITANCE:
 * ------------------
 * Icons inherit `color` from parent via `currentColor`.
 * Override directly with .icon-navy, .icon-white, .icon-gold.
 */


/* =============================================================
   ICON BASE
   ============================================================= */

svg[class*="icon-"],
img[class*="icon-"] {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Default color — Navy */
svg {
  color: #0B1D33;
}


/* =============================================================
   SIZE UTILITIES
   ============================================================= */

/* .icon-sm — 16×16px — suitable for inline text, small badges */
.icon-sm {
  width: 16px;
  height: 16px;
}

/* .icon-md — 24×24px — standard UI icon, nav, buttons, cards */
.icon-md {
  width: 24px;
  height: 24px;
}

/* .icon-lg — 32×32px — section headers, feature cards */
.icon-lg {
  width: 32px;
  height: 32px;
}

/* .icon-xl — 48×48px — hero icons, large feature highlights */
.icon-xl {
  width: 48px;
  height: 48px;
}


/* =============================================================
   COLOR UTILITIES
   ============================================================= */

/* .icon-navy — Deep Navy #0B1D33 — primary brand color */
.icon-navy {
  color: #0B1D33;
}

.icon-navy path,
.icon-navy line,
.icon-navy rect,
.icon-navy circle,
.icon-navy polygon,
.icon-navy polyline,
.icon-navy ellipse {
  stroke: #0B1D33;
}

.icon-navy path[fill]:not([fill="none"]),
.icon-navy rect[fill]:not([fill="none"]),
.icon-navy circle[fill]:not([fill="none"]),
.icon-navy polygon[fill]:not([fill="none"]) {
  fill: #0B1D33;
}


/* .icon-white — White #FFFFFF — for dark backgrounds */
.icon-white {
  color: #FFFFFF;
}

.icon-white path,
.icon-white line,
.icon-white rect,
.icon-white circle,
.icon-white polygon,
.icon-white polyline,
.icon-white ellipse {
  stroke: #FFFFFF;
}

.icon-white path[fill]:not([fill="none"]),
.icon-white rect[fill]:not([fill="none"]),
.icon-white circle[fill]:not([fill="none"]),
.icon-white polygon[fill]:not([fill="none"]) {
  fill: #FFFFFF;
}


/* .icon-gold — Premium Gold #C9A227 — accent & highlights */
.icon-gold {
  color: #C9A227;
}

.icon-gold path,
.icon-gold line,
.icon-gold rect,
.icon-gold circle,
.icon-gold polygon,
.icon-gold polyline,
.icon-gold ellipse {
  stroke: #C9A227;
}

.icon-gold path[fill]:not([fill="none"]),
.icon-gold rect[fill]:not([fill="none"]),
.icon-gold circle[fill]:not([fill="none"]),
.icon-gold polygon[fill]:not([fill="none"]) {
  fill: #C9A227;
}


/* =============================================================
   LOGO SIZE UTILITIES
   ============================================================= */

/* .logo-sm — compact header / mobile */
.logo-sm {
  height: 32px;
  width: auto;
}

/* .logo-md — standard desktop header */
.logo-md {
  height: 48px;
  width: auto;
}

/* .logo-lg — hero / marketing sections */
.logo-lg {
  height: 64px;
  width: auto;
}

/* .logo-xl — hero splash / print */
.logo-xl {
  height: 96px;
  width: auto;
}

/* Badge / icon mark sizing */
.badge-sm  { width: 32px;  height: 32px; }
.badge-md  { width: 48px;  height: 48px; }
.badge-lg  { width: 72px;  height: 72px; }
.badge-xl  { width: 100px; height: 100px; }


/* =============================================================
   INTERACTIVE STATES
   ============================================================= */

/* Smooth color transitions on interactive icons */
svg.icon-interactive,
img.icon-interactive {
  transition: color 0.2s ease, opacity 0.2s ease;
}

svg.icon-interactive:hover,
img.icon-interactive:hover {
  opacity: 0.75;
}


/* =============================================================
   UTILITY HELPERS
   ============================================================= */

/* Force no-shrink in flex containers */
.icon-no-shrink {
  flex-shrink: 0;
}

/* Spin animation for loading states */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.icon-spin {
  animation: icon-spin 1.2s linear infinite;
}