/* SVG Icon System - Replacing Font Awesome */

/* Base icon class */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  /* Use CSS mask for proper color inheritance */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
}


/* Search icon - magnifying glass */
.icon-search {
  -webkit-mask-image: url('../img/icons/magnifying-glass-solid.svg');
  mask-image: url('../img/icons/magnifying-glass-solid.svg');
}

/* Globe icon */
.icon-globe {
  -webkit-mask-image: url('../img/icons/globe-solid.svg');
  mask-image: url('../img/icons/globe-solid.svg');
}

/* Sun icon */
.icon-sun {
  -webkit-mask-image: url('../img/icons/sun-solid.svg');
  mask-image: url('../img/icons/sun-solid.svg');
}

/* Moon icon */
.icon-moon {
  -webkit-mask-image: url('../img/icons/moon-solid.svg');
  mask-image: url('../img/icons/moon-solid.svg');
}


/* Rotate left / reset icon */
.icon-rotate-left {
  -webkit-mask-image: url('../img/icons/rotate-left-solid.svg');
  mask-image: url('../img/icons/rotate-left-solid.svg');
}

/* Dice icon - random plate */
.icon-dice {
  -webkit-mask-image: url('../img/icons/dice-solid.svg');
  mask-image: url('../img/icons/dice-solid.svg');
}

/* External link icon - marks links that leave the site */
.icon-external {
  -webkit-mask-image: url('../img/icons/external-link-solid.svg');
  mask-image: url('../img/icons/external-link-solid.svg');
}

/* Theme toggle specific styling */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Default state (light theme): show sun icon */
.theme-toggle .icon-sun {
  display: inline-block;
}

.theme-toggle .icon-moon {
  display: none;
}

/* Dark theme: show moon icon */
[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: inline-block;
}

/* Icons for dark backgrounds */
.language-bar .icon,
.footer .icon,
.theme-toggle .icon {
  color: var(--white-90);
}

[data-theme="dark"] .language-bar .icon,
[data-theme="dark"] .footer .icon,
[data-theme="dark"] .theme-toggle .icon {
  color: var(--text-primary);
}

.language-selector .icon-globe {
  color: var(--white-90);
}

[data-theme="dark"] .language-selector .icon-globe {
  color: var(--text-primary);
}

/* Responsive icon sizes */
@media (max-width: 768px) {
  .icon {
    width: 1.1em;
    height: 1.1em;
  }
  
  .theme-toggle .icon-sun,
  .theme-toggle .icon-moon {
    width: 1.2rem;
    height: 1.2rem;
  }
}