/*
 * Material Symbols — Self-Hosted version
 *
 * SETUP STEPS:
 *
 * Step 1 — Download font files
 * Visit: https://github.com/google/material-design-icons/tree/master/variablefont
 * Download file: MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
 * (and Rounded / Sharp if needed)
 *
 * Step 2 — Place font files in your app
 * Recommended location: public/fonts/ or src/assets/fonts/
 * Example: public/fonts/MaterialSymbolsOutlined.woff2
 *
 * Step 3 — Copy and adjust @font-face block below
 * Change src url() to point to the correct path in your project
 *
 * @deprecated New integrations should install `@bug-on/md3-fonts` and import
 * `@bug-on/md3-fonts/material-symbols.css`. This legacy export remains only
 * for backwards compatibility and will be removed in the next major version.
 *
 * Step 4 — Import this file:
 *   import '@bug-on/m3-expressive/material-symbols-self-hosted.css'
 *
 * PERFORMANCE NOTES:
 * - Self-hosting is better than CDN when using HTTP/2 CDN for static assets
 * - Without a CDN, Google Fonts CDN may be faster due to cache sharing
 * - Use font-display: block for icon fonts (see reasons in CDN file)
 * - WOFF2 is the only format needed (100% modern browser support, Brotli compression)
 * - WOFF fallback is no longer required
 *

 * SUBSETTING (IMPORTANT for reducing file size):
 * Full variable font ~295 KB. After subsetting ~1-2 KB for a few dozen icons.
 * Use tool: https://everythingfonts.com/subsetter
 * Or use Google Fonts text parameter to subset on CDN:
 *   ?family=Material+Symbols+Outlined&text=home%20search%20settings
 *
 * GDPR NOTE:
 * Self-hosting eliminates sending user IP addresses to Google servers,
 * resolving GDPR compliance requirements.
 */

@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	/* Declare full axis range so browser recognizes variable font */
	font-weight: 100 700;
	/* font-display: block is required for icon fonts:
   * - Prevents rendering raw text "arrow_forward" instead of icon
   * - Max 3s block, then icon appears
   * Reference: https://web.dev/articles/font-best-practices#icon_fonts */
	font-display: block;
	src: url("/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
		format("woff2");
	/* unicode-range: loads font only when page contains characters in range.
   * Material Symbols uses PUA (Private Use Area) for ligatures. */
}

/*
 * Rounded variants and Sharp variants are not included by default to save space.
 * You can declare them similarly if you download the respective woff2 files.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * BASE ICON STYLES
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * This class ensures that Material Symbols render correctly as ligatures
 * across all browsers and prevents common layout issues.
 */
.md-icon {
	font-family: inherit; /* Set dynamically by the Icon component */
	font-weight: normal;
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Enable ligature rendering support for modern browsers */
	font-feature-settings: "liga";

	/* Improved rendering quality */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}