/* VSMA Child Theme: Local Material Symbols (Outlined) */
/* Place the font file at: /assets/fonts/material-symbols-outlined.woff2 */

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../fonts/material-symbols-v17-latin-regular.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block; /* avoid icon FOUT */
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  display: inline-block;
  line-height: 1;
  font-size: inherit;           /* <-- wichtig: erbt Divi-Textgröße */
  font-optical-sizing: auto;    /* nutzt die passende opsz automatisch */
  font-variation-settings:
    'FILL' var(--ms-fill, 0),
    'wght' var(--ms-wght, 400),
    'GRAD' var(--ms-grad, 0);
  /* keine feste 'opsz' mehr, damit die Größe frei skalieren kann */
}

/* Helpers to tweak variations without inline styles */
.ms-fill-1 { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms-wght-200 { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.ms-wght-500 { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.ms-grad-200 { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 200, 'opsz' 24; }

/* Size + optical size pairs */
.ms-20 { font-size:20px; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20; }
.ms-24 { font-size:24px; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.ms-36 { font-size:36px; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 36; }
.ms-48 { font-size:48px; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48; }

/* Utility alias for consistency with Divi modules */
.vsma-icon { display:inline-flex; align-items:center; gap:.35em; }