/*
 * Reset, self-hosted faces and element defaults. Loaded by every page (§21.4).
 *
 * The fonts are served from wwwroot/fonts — never from a CDN (§21.1). font-display: swap
 * means text paints in the fallback immediately rather than sitting invisible, which
 * matters most on exactly the slow connections the self-hosting is for.
 */

/* --- Vazirmatn ------------------------------------------------------------- */
/* Only the weights the site actually uses. Adding a weight means adding a file. */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/vazirmatn-400.woff2?v=1') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/vazirmatn-600.woff2?v=1') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/vazirmatn-700.woff2?v=1') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/vazirmatn-800.woff2?v=1') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/vazirmatn-900.woff2?v=1') format('woff2');
}

/* --- icons ----------------------------------------------------------------- */
/*
 * Subset to the glyphs the site names; the full face is megabytes for a few dozen icons.
 *
 * The ?v= is load-bearing. asp-append-version fingerprints the <link> to this stylesheet but
 * not the URLs inside it, so without a version a returning visitor keeps the previous subset
 * and every new icon renders as its own name in text. BUMP IT whenever the file is rebuilt
 * (§21.1).
 */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    font-display: block; /* an icon that swaps in as a word is worse than a brief gap */
    src: url('../fonts/material-symbols-rounded.woff2?v=4') format('woff2');
}

/* --- reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

body {
    font-family: var(--zs-font);
    color: var(--zs-text);
    background: var(--zs-canvas);
}

a {
    color: inherit;
    text-decoration: none;
}

input,
button,
select,
textarea {
    font-family: inherit;
}

input:focus {
    outline: none;
}

img {
    max-width: 100%;
}

/* --- the icon element ------------------------------------------------------ */
/*
 * <span class="zs-icon" aria-hidden="true">recycling</span>
 * The ligature name is the text content, so it must stay aria-hidden — a screen reader
 * would otherwise announce the literal word "recycling".
 */
.zs-icon {
    font-family: var(--zs-font-icon);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* --- accessibility --------------------------------------------------------- */
.zs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}