/* Iconify Icon Styles - Previously inline in application.html.erb */

/* Base alignment for Iconify SVG elements */
iconify-icon svg,
.iconify-svg {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1;
}

/* Icon alignment within interactive elements */
a iconify-icon,
button iconify-icon,
.group iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Perfect alignment for icons with text */
.flex.items-center.gap-2 iconify-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  vertical-align: baseline !important;
}

/* Specific fix for hero badge element */
.fade-in-up.mx-auto.mb-8.flex.max-w-fit.items-center.justify-center.space-x-2 {
  gap: 0.75rem !important;
}

.fade-in-up.mx-auto.mb-8.flex.max-w-fit.items-center.justify-center.space-x-2 svg {
  vertical-align: baseline !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.25rem !important;
}

.fade-in-up.mx-auto.mb-8.flex.max-w-fit.items-center.justify-center.space-x-2 p {
  align-self: center !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0.25rem !important;
}

/* Prevent layout shift during icon loading */
iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
}

/* Navbar specific styles to prevent flash of unstyled content */
nav glass-panel {
  contain: layout style;
}

/* Smooth transitions for theme changes */
html.dark,
html.dark body {
  transition: background-color 0.3s ease, color 0.3s ease;
}