/**
 * Material Symbols — shared icon styles
 * Docs: https://developers.google.com/fonts/docs/material_symbols
 *
 * Load the Outlined font from Google Fonts in each page <head>, preferably
 * with &icon_names=...&display=block to keep the payload small.
 */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* A glyph's advance is exactly 1em, but its line box is slightly taller, so
     the icon is a centred 1em square with overflow left visible. That reserves
     stable space before the font loads without cropping the glyph. box-sizing
     and padding are pinned so a parent rule cannot squeeze the content box. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0;
  overflow: visible;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Card / meta pill icons. Fixed box so the glyph never gets cropped by a
   parent font-size or padding rule. */
.card-meta .material-symbols-outlined {
  color: #000000;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 1.1rem;
  max-width: none;
  overflow: visible;
  flex-shrink: 0;
}

[data-theme="dark"] .card-meta .material-symbols-outlined {
  color: #ffffff;
}

/* About / detail row icons */
.detail-icon.material-symbols-outlined {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--accent-primary, #052332);
  margin-top: 0;
}

/* Resume contact icons */
.contact-icon.material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--accent-primary, #052332);
}