/* Icon design system — Lucide outline SVGs for cards */

:root {
  --icon-stroke: 2;
  --icon-card-stroke: 1.45;
  --icon-accent: #ed1458;
  /* Light: accent orange so Lucide cards stay visible on white */
  --icon-fg: var(--color-accent, #ed1458);
  --card-pad: 1.45rem 1.4rem 1.5rem;
  --card-radius: var(--radius-xl);
  --card-icon: 7.5rem;
}

html[data-theme="dark"] {
  --icon-fg: rgba(244, 244, 245, 0.72);
}

/* UI chrome still uses inline SVG */
.status__benefit svg,
.status__note svg,
.status__metric-icon svg,
.status__qr-icon svg,
.hero__trust-item svg,
.faq__icon svg,
.floating-actions__btn svg,
.modal__close svg,
.modal__success-icon svg,
.btn svg,
.navbar__toggle svg,
.contact__map-pin svg,
.contact__map-action svg,
.hero__scroll-hint svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card Lucide icons — size controlled by art containers */
.card-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-card-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  filter:
    var(--accent-icon-shadow, none)
    drop-shadow(0 1px 2px color-mix(in srgb, var(--color-accent) 40%, transparent))
    drop-shadow(0 4px 12px var(--color-accent-glow, rgba(237, 20, 88, 0.24)));
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    filter var(--duration-normal) var(--ease-out);
}

html[data-theme="dark"] .card-icon {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.svc__art,
.process__art,
.contact__item-art {
  color: var(--icon-fg);
}

/* Services — compact top icons (size set in services.css) */
.svc__art .card-icon {
  width: 100%;
  height: auto;
  filter: var(--accent-icon-shadow, none);
  opacity: 0.9;
}

.process__art {
  width: 5.85rem;
  max-width: 5.85rem;
  transform: translateY(0.55rem);
}

.process__top {
  align-items: flex-start;
  padding-top: 0.15rem;
}

.contact__item-art {
  width: 5.5rem;
  max-width: 5.5rem;
  top: 1.45rem;
  right: 0.85rem;
}

.contact__item-art .card-icon {
  width: 100%;
  height: auto;
  max-width: 5.5rem;
  transform: scale(0.85);
  transform-origin: top right;
  opacity: 0.72;
  filter: var(--accent-icon-shadow, none);
}

@media (max-width: 699px) {
  .contact__item-art {
    width: 4.5rem;
    max-width: 4.5rem;
    top: 1.15rem;
    right: 0.75rem;
  }

  .contact__item-art .card-icon {
    max-width: 4.5rem;
    transform: scale(0.9);
  }
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover .card-icon,
  .process__step:hover .card-icon {
    opacity: 1;
  }

  .svc:hover .card-icon {
    transform: translateY(-2px);
  }

  a.contact__item:hover .card-icon {
    opacity: 0.9;
    transform: scale(0.85) translateY(-2px);
  }

  .process__step:hover .process__art {
    transform: translateY(0.35rem);
  }
}