/**
 * MindGrow — force Latin digits in Arial across the entire site.
 *
 * Companion to /js/mg-numbers.js. The JS handles codepoint conversion
 * (Arabic-Indic → Latin) for typed input and dynamic content. This CSS
 * handles visual rendering: any Latin digit U+0030-U+0039 must render
 * using Arial (or the closest local sans-serif), never via the page's
 * Arabic font, so we never see locale-aware glyph substitution.
 *
 * The unicode-range trick keeps Arabic text rendering with GE SS Two
 * unchanged. Only digit/currency codepoints are pulled into the
 * MGNum family.
 *
 * Loaded after each layout's inline <style> so its declarations win.
 */

/* --------------------------------------------------------------------
 * MGNum — Arial-first font face limited to digits and common
 * monetary/punctuation codepoints. Three weights so headlines and
 * stats can stay bold without falling out of Arial.
 * ------------------------------------------------------------------ */
@font-face {
    font-family: 'MGNum';
    src: local('Arial'),
         local('Helvetica Neue'),
         local('Helvetica'),
         local('Liberation Sans'),
         local('DejaVu Sans');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039,  /* digits 0-9 */
                   U+002E,        /* period */
                   U+002C,        /* comma */
                   U+0025,        /* percent */
                   U+002B,        /* plus */
                   U+002D,        /* minus */
                   U+002F,        /* slash (dates, fractions) */
                   U+003A,        /* colon (times) */
                   U+0024,        /* dollar */
                   U+20AC,        /* euro */
                   U+00A3,        /* pound */
                   U+00A5,        /* yen */
                   U+0028-0029;   /* parentheses around numbers */
}

/* --------------------------------------------------------------------
 * Apply MGNum at the very front of the font-family stack everywhere.
 * The unicode-range trick means only the listed codepoints use MGNum
 * (Arial); the rest fall through to the page's normal font. This
 * declaration uses !important to win against Tailwind utility classes
 * and component CSS that pin their own font-family.
 * ------------------------------------------------------------------ */
html,
body,
body *,
input,
textarea,
select,
button,
option,
optgroup,
[contenteditable],
[contenteditable] *,
.num-en,
.mg-num {
    font-family: 'MGNum', 'NumFont', 'GE SS Two', 'Segoe UI', Tahoma, sans-serif !important;
}

/* --------------------------------------------------------------------
 * Defensive: force lining (standard) and tabular figures on every
 * place that takes numeric input. font-variant-numeric is the
 * standard CSS3 way to disable any font's locale-aware digit
 * substitution. This is safe across browsers (unlike forcing
 * `anum` 0 via font-feature-settings, which broke on some renderers
 * — see CLAUDE.md note from 2026-04-14).
 * ------------------------------------------------------------------ */
input,
textarea,
select,
.num-en,
.mg-num,
.stat-number,
.kpi-value,
.price,
.amount,
.tabular-nums,
td,
th {
    font-variant-numeric: lining-nums tabular-nums !important;
    font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

/* --------------------------------------------------------------------
 * Browser autofill (Chrome) renders inputs with its own font and
 * background. Force MGNum here too so autofilled phone numbers /
 * stored passwords stay Latin.
 * ------------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
    -webkit-text-fill-color: inherit !important;
    font-family: 'MGNum', 'NumFont', 'GE SS Two', sans-serif !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------------------------------------------------
 * Placeholder text in inputs/textareas — apply the same family so
 * placeholder example numbers also render in Arial.
 * ------------------------------------------------------------------ */
input::placeholder,
textarea::placeholder {
    font-family: 'MGNum', 'NumFont', 'GE SS Two', sans-serif !important;
}

/* --------------------------------------------------------------------
 * Common rich-text editors (Summernote, Quill, etc.) often set their
 * own font on the editing surface. Force MGNum there too.
 * ------------------------------------------------------------------ */
.note-editable,
.note-editable *,
.ql-editor,
.ql-editor * {
    font-family: 'MGNum', 'NumFont', 'GE SS Two', sans-serif !important;
}