/*
 * NHRL Icons — the portal's icon font.
 *
 * GENERATED by scripts/build-icon-font.py from
 * public/img/icon-font/icons.json. Do not hand-edit: the next build
 * overwrites it, and tests/Contract/IconFontTest.php fails the moment this
 * file stops matching the manifest.
 *
 * manifest-sha: 309286164755
 *
 * NOT IN THE KIT STACK. This sheet is not linked from _kit-head.twig; a
 * surface that wants the marks links it itself. Adding it to the stack is one
 * line there and one in tests/Rendering/BaseStylesheetOrderTest.php, and costs
 * every page a request for a font only a couple of surfaces load.
 *
 * THE FILENAME IS A CONTENT HASH, as it must be — .htaccess marks woff2
 * immutable for a year, so a cached copy is never revalidated and a stable
 * name across a content change would serve last month's icons forever.
 *
 * font-display: block, not swap. Swap paints the fallback face first, and for
 * an icon font the fallback for a Private Use codepoint is tofu — a literal
 * empty box where the icon goes. Block holds the space blank for ~3s instead,
 * which is the right failure for a 944-byte file.
 */

@font-face {
    font-family: 'NHRL Icons';
    src: url('/fonts/nhrl-icons/NHRLIcons-0c30ce18.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ── The base class ──────────────────────────────────────────────────────
   Mirrors .fa's shape so the two behave alike inline, minus FA7's
   `width: 1.25em`: an icon here may be a wide wordmark, and a fixed-width box
   would lie about its footprint. Width comes from the glyph's own advance.

   No vertical-align. The glyphs are cut into Font Awesome's box — one em tall,
   hung 12.5% of an em below the baseline — so an icon and an
   <i class="fa-solid"> at the same font-size already share a baseline. A nudge
   here would break the alignment it looks like it is fixing. */
.nhrl-icon {
    display: inline-block;
    font-family: 'NHRL Icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-synthesis: none;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: never;
}

/* ── The icons ───────────────────────────────────────────────────────────
   Private Use Area codepoints, so they collide with nothing. They also mean
   nothing: a screen reader handed U+E900 reads it as an unknown character or
   skips it. Every icon needs aria-hidden="true" and, where it carries meaning
   rather than decorating text that already says it, a .visually-hidden label
   beside it. */

.nhrl-icon-nhrl::before { content: "\e900"; }          /* The mark flattened to one colour. Takes currentColor. */
.nhrl-icon-nhrl-color::before { content: "\e904"; }    /* COLRv0. Letterforms follow color; the two wedges come from the font's palette. Falls back to the flat mark with no COLR support. */
.nhrl-icon-nhrl-body::before { content: "\e901"; }     /* layer 1 — the letterforms */
.nhrl-icon-nhrl-teal::before { content: "\e902"; }     /* layer 2 — the teal wedge */
.nhrl-icon-nhrl-magenta::before { content: "\e903"; }  /* layer 3 — the magenta wedge */
.nhrl-icon-sparky::before { content: "\e910"; }        /* Solid mark, one colour. The outline twin is these paths stroked at 1% of their height — a hairline at icon sizes, so it gets no glyph. */

/* ── Layer stacks ────────────────────────────────────────────────────────
   A `-color` class is one element and needs nothing here: it is a COLRv0
   glyph, and the renderer paints its layers itself. Layers marked `text` in
   the manifest are painted in palette index 0xFFFF — "the text colour" — so
   `color` still drives them; the rest come from the font's own palette and do
   not answer to CSS. A renderer with no COLR support falls back to the glyph's
   plain outline, which is the flattened icon.

   Where every layer colour must be themeable, stack the layer glyphs instead:

       <span class="nhrl-icon-stack" aria-hidden="true">
           <i class="nhrl-icon nhrl-icon-nhrl-body"></i>
           <i class="nhrl-icon nhrl-icon-nhrl-teal"></i>
           <i class="nhrl-icon nhrl-icon-nhrl-magenta"></i>
       </span>

   The layers all carry their icon's transform and advance, so they land on top
   of each other with no positioning beyond the corner. */
.nhrl-icon-stack {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.nhrl-icon-stack > .nhrl-icon + .nhrl-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.nhrl-icon-stack > .nhrl-icon-nhrl-teal { color: var(--nhrl-icon-nhrl-teal, #00DAD8); }
.nhrl-icon-stack > .nhrl-icon-nhrl-magenta { color: var(--nhrl-icon-nhrl-magenta, #CF23CA); }