/* Global Styles */

/* Base font overrides for headings */
h1, h2, h3, 
.font-display-hero, 
.font-headline-xl, 
.font-headline-lg, 
.font-headline-md { 
    font-family: 'Oswald', sans-serif !important; 
    letter-spacing: -0.01em; 
}

/* Specific highlight animation for editor/demo purposes */
@keyframes stitch-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(113,105,237,0.8), 0 0 12px 4px rgba(113,105,237,0.3); }
  50%      { box-shadow: 0 0 0 3px rgba(113,105,237,0.4), 0 0 6px 2px rgba(113,105,237,0.15); }
}

.stitch-highlight-element {
  outline: 3px solid rgba(113,105,237,0.8) !important;
  outline-offset: 2px !important;
  animation: stitch-highlight-pulse 1.5s ease-in-out infinite !important;
  border-radius: inherit;
}

/* ==========================================================================
   Material Symbols Anti-FOIT (Flash of Unstyled Text) & Shimmer / Loading Solution
   Prevents raw text (e.g. "account_circle", "menu", "search") from showing
   before the webfont completes loading.
   ========================================================================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: normal;
}

/* When the web font is not loaded yet, hide raw ligature text and show a sleek icon placeholder */
html:not(.fonts-loaded) .material-symbols-outlined {
  color: transparent !important;
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* Elegant micro shimmer placeholder while font is downloading */
html:not(.fonts-loaded) .material-symbols-outlined::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.18;
  animation: iconPulsePlaceholder 1.2s ease-in-out infinite alternate;
}

@keyframes iconPulsePlaceholder {
  0% { opacity: 0.12; transform: scale(0.92); }
  100% { opacity: 0.28; transform: scale(1.02); }
}

/* Once fonts are loaded or as soon as font loads, smoothly reveal */
html.fonts-loaded .material-symbols-outlined {
  color: inherit;
  transition: opacity 0.2s ease;
}