/**
 * Material Symbols Rounded - Self-Hosted
 * 
 * This CSS defines the @font-face rules for self-hosted Material Symbols Rounded.
 * Place the font file in /fonts/material-symbols/ directory.
 * 
 * Material Symbols is Google's modern icon system with variable font support.
 * 
 * Note: Google only provides TTF format for download. WOFF2 is only available via their CDN.
 * TTF works perfectly for all modern browsers and supports the full variable font spec.
 * 
 * Version: Latest (self-hosted)
 * License: Apache License 2.0
 * Source: https://github.com/google/material-design-icons
 */

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap; /* Ensures text remains visible during font load */
    src: url('/fonts/material-symbols/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype-variations');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  
  /* Default variable font settings */
  font-variation-settings:
    'FILL' 0,    /* 0 for outlined, 1 for filled */
    'wght' 400,  /* Weight: 100-700 */
    'GRAD' 0,    /* Gradient: -25 to 200 */
    'opsz' 24;   /* Optical size: 20-48 */
}

/* Size variants */
.material-symbols-rounded.md-18 { 
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-rounded.md-20 { 
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-rounded.md-24 { 
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.md-36 { 
  font-size: 36px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}
.material-symbols-rounded.md-48 { 
  font-size: 48px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* Fill variants */
.material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Weight variants */
.material-symbols-rounded.light {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.bold {
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* Color variants */
.material-symbols-rounded.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-symbols-rounded.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-symbols-rounded.md-light { color: rgba(255, 255, 255, 1); }
.material-symbols-rounded.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }