/* ==========================================
   ICON FALLBACK STYLES - EMERGENCY BACKUP
   ==========================================
   These styles ensure icons are always visible
   even if JavaScript fails to load them.
   ========================================== */

[data-acorn-icon] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 18px !important;
  min-height: 18px !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure SVG icons within data-acorn-icon elements are visible */
[data-acorn-icon] svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* Force visibility for navigation menu icons */
#nav [data-acorn-icon],
#nav .icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Emergency fallback for common icon positions */
.menu-link [data-acorn-icon],
.menu-link .icon {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* Ensure icons don't break layout when not loaded */
[data-acorn-icon]:empty::before {
  content: "⬜";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}