/* Local fonts.css
   - Define @font-face for Roboto (300/400/500/700) and Material Icons (Regular)
   - Place matching .woff2 files in ../fonts/ with the filenames documented in ../fonts/README.txt
   - font-display: swap ensures text remains visible during load.
*/

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Material Icons - minimal local replacement
   Use in markup like: <i class="material-icons" aria-hidden="true">home</i>
   Note: Material Icons uses ligatures; this setup supports ligatures by using
   the 'Material Icons' font family and setting proper font-feature-settings where supported.

   IMPORTANT: We use `font-display: block` for the icon font so browsers will
   briefly block text rendering for this font while the font downloads. That
   reduces the visual flash where the ligature word (e.g. "home") would be
   visible using a fallback font. This is a CSS-only mitigation — however,
   CSS alone cannot *reveal* the icon glyph only after load reliably in all
   browsers; for a perfect behavior a small JS font-detection snippet is
   required to toggle a class when the font is ready. If you want that,
   I can add a minimal separate JS file instead of modifying `app.js`.
*/
@font-face {
  font-family: 'Material Icons';
  /* Use the actual filename present in assets/fonts/ */
  src: url('../fonts/material-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  /* Use block to reduce FOUT of the ligature text; see comment above for tradeoffs */
  font-display: block;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* override as needed */
  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' 1;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga' 1;
  font-variant-ligatures: common-ligatures;

  /* Reserve exactly the icon slot and clip any overflow from fallback text
     - width in em follows font-size so inline overrides still work
     - centered content ensures the icon glyph sits in the middle of the slot
     - overflow:hidden prevents long ligature words from creating gaps
     - do NOT use text-indent here because that requires JS to reveal the glyph
  */
  width: 1em;
  height: 1em;
  line-height: 1; /* keep glyph vertically centered */
  text-align: center;
  overflow: hidden; /* clip fallback text beyond 1em */
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Global fallback stack recommendation - the project can keep using this stack */
:root {
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

body {
  font-family: var(--font-sans);
}