/**
 * Renders the Saudi Riyal Sign (U+20C1) on the front-end with the dedicated
 * font, on any theme.
 *
 * The `filter_saudi_riyal` filter wraps the sign in `.saudi-riyal-sign`, so the
 * module controls the font for that one glyph only. The active theme's fonts
 * are never touched — there is no dependency on Bootstrap or any theme
 * variable, so this works on a custom theme with custom fonts.
 */
@font-face {
  font-family: 'SaudiRiyal';
  src: url('../fonts/saudi_riyal_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

.saudi-riyal-sign {
  font-family: 'SaudiRiyal', sans-serif;
}

/**
 * Text-only contexts.
 *
 * Some places render the sign as a bare character because they cannot carry
 * markup: the content model of <option> is text, and an <optgroup> label is an
 * attribute. There is no element to hang `.saudi-riyal-sign` on, so the font
 * has to go on the control itself — which would drag every other character in
 * the control into the Saudi Riyal font stack too.
 *
 * `unicode-range` solves that: this second face is only ever consulted for
 * U+20C1, so the browser keeps using the inherited font for all other
 * characters. That makes it safe to list first in the font stack.
 *
 * The rest of the stack is a variable, because the control's own font is the
 * theme's business, not this module's. `sans-serif` is only a floor; a theme
 * whose form controls use a custom face should set the variable to that face:
 *
 * @code
 * :root {
 *   --saudi-riyal-fallback-font: 'Jokker', 'Almarai', sans-serif;
 * }
 * @endcode
 */
@font-face {
  font-family: 'SaudiRiyalSign';
  src: url('../fonts/saudi_riyal_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+20C1;
}

.saudi-riyal-font,
.saudi-riyal-font option,
.saudi-riyal-font optgroup {
  font-family: 'SaudiRiyalSign', var(--saudi-riyal-fallback-font, sans-serif);
}