/* ============================================================
   CUSTOM SVG ICON SYSTEM — Kemah Trunk or Treat and Eats Branding
   Colors: Navy (#0f1b2d) / Orange (#e8922a) / Gold (#fbbf24)
   ============================================================ */

:root {
  --icon-primary: #e8922a;
  --icon-secondary: #f5a623;
  --icon-accent: #fbbf24;
  --icon-purple: #6b21a8;
  --icon-green: #22c55e;
}

/* ── Base Icon Container ── */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  vertical-align: middle;
}

.svg-icon svg,
.svg-icon use {
  width: 100%;
  height: 100%;
}

/* ── Feature card icons ── */
.feature-icon .svg-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.5rem;
}

/* ── Section tag icons ── */
.section-tag .svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Award badge icon sizing ── */
.award-icon .svg-icon {
  width: 22px;
  height: 22px;
}

/* ── Ticket feature icons (check / x) ── */
.ticket-features .svg-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}

/* ── Info card icons (location section) ── */
.info-icon .svg-icon {
  width: 36px;
  height: 36px;
}

/* ── CTA button icons ── */
.btn .svg-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Default orange for icons using currentColor */
.svg-icon {
  color: #e8922a;
}

/* Force white icon inside primary (orange) buttons */
.btn-primary .svg-icon,
.btn-primary .svg-icon svg,
.btn-primary .svg-icon use,
.btn-primary .svg-icon path,
.btn-primary .svg-icon circle,
.btn-primary .svg-icon rect,
.btn-primary .svg-icon line,
.btn-primary .svg-icon polyline,
.btn-primary .svg-icon polygon {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
}

.btn-primary .svg-icon svg circle[fill],
.btn-primary .svg-icon svg rect[fill],
.btn-primary .svg-icon svg path[fill],
.btn-primary .svg-icon circle[fill] {
  fill: rgba(255, 255, 255, 0.5) !important;
  stroke: none !important;
}

/* Ensure buttons show icons inline */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Timeline icons ── */
.timeline-content h4 .svg-icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

/* ── Halloween section icons ── */
.halloween-icon-large .svg-icon {
  width: 40px;
  height: 40px;
}

.halloween-features .svg-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}

/* ── Hayride placeholder emoji replacements ── */
.hayride-placeholder .svg-icon {
  width: 48px;
  height: 48px;
}

/* ── Hero date icons ── */
.date-icon .svg-icon {
  width: 18px;
  height: 18px;
}

/* ── Preloader icon ── */
.preloader-icon .svg-icon {
  width: 64px;
  height: 64px;
}

/* ── Artist card avatars ── */
.artist-avatar .svg-icon {
  width: 40px;
  height: 40px;
}

/* ── Ticket family icon ── */
.ticket-family-icon .svg-icon {
  width: 48px;
  height: 48px;
}

/* ── Hover glow effect for feature icons ── */
.feature-card:hover .svg-icon {
  filter: drop-shadow(0 0 8px rgba(232, 146, 42, 0.6));
  transition: filter 0.3s ease;
}

/* ── Hover glow for award icons ── */
.award-badge:hover .svg-icon {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
  transition: filter 0.3s ease;
}

/* ── SVG icon transitions ── */
.svg-icon {
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ── Social link icons ── */
.social-link .svg-icon {
  width: 20px;
  height: 20px;
}

.social-link:hover .svg-icon svg {
  fill: var(--icon-primary);
  transition: fill 0.3s ease;
}