/* =========================================================
   SELF-HOSTED FONTS
   Variable font files cover the full weight ranges, so a
   single .woff2 per family replaces the multiple weighted
   subset files Google Fonts would otherwise serve. Loading
   these locally avoids re-fetching Google's CSS each page
   navigation.

   Material Symbols Outlined is a subset containing only the
   icons actually used in app-site (see
   scripts/icon-audit/all-icons-union.txt). Re-subset the
   font when adding a new icon by running
   scripts/icon-audit/refresh-material-symbols.sh — it
   regenerates the woff2 AND bumps the ?v= cache-bust below
   so browsers re-fetch the new glyphs. See
   scripts/icon-audit/README.md.
   ========================================================= */

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

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/fonts/PublicSans-Variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/MaterialSymbols-Subset.woff2?v=20260723143738') format('woff2');
}

/* Wrapped in :where() so this rule's specificity is 0,0,0.
   That means any per-location selector — `.kw-nav-icon`,
   `.schedule-time-card__icon`, `.bubble-header .material-symbols-outlined`,
   inline `style="font-size:18px"`, etc. — overrides our defaults
   regardless of CSS-file load order. Without :where(), this
   stylesheet (loaded last) would beat earlier same-specificity
   rules and force every icon to 24px. */
:where(.material-symbols-outlined) {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    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';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   ICON HELPERS
   Replacements for the few Font Awesome icons that don't have
   a clean Material Symbols equivalent (brand logos) or that
   work better as a pure-CSS element (animated spinner).
   ========================================================= */

/* Inline animated spinner — use as <span class="kw-spinner"></span>.
   Sized via parent font-size; takes color from currentColor. */
.kw-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kw-spin 0.7s linear infinite;
}

@keyframes kw-spin {
    to { transform: rotate(360deg); }
}

/* Brand logos — simple inline-SVG via background-image so we
   don't need to ship a separate icon font for three icons.
   Use as <span class="brand-icon brand-icon-google"></span>. */
.brand-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.brand-icon-google {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/><path fill='%23FF3D00' d='m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/><path fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/><path fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/></svg>");
}

.brand-icon-microsoft,
.brand-icon-windows {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'><path fill='%23F35325' d='M1 1h10v10H1z'/><path fill='%2381BC06' d='M12 1h10v10H12z'/><path fill='%2305A6F0' d='M1 12h10v10H1z'/><path fill='%23FFBA08' d='M12 12h10v10H12z'/></svg>");
}