/* Shared text typography for Homepage, Client and Admin. Icon fonts stay independent. */
:root {
    --app-font-family: Arial;
    --font-theme: var(--app-font-family);
    --nencer-font: var(--app-font-family);
    --bs-font-sans-serif: var(--app-font-family);
    --bs-body-font-family: var(--app-font-family);
    --bs-font-monospace: var(--app-font-family);
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, span, a, strong, b, small, label, li, td, th,
button,
input,
select,
textarea,
optgroup,
.tooltip,
.popover {
    font-family: var(--app-font-family) !important;
}

/* Component and vendor UI text must not fall back to a separate heading/code font. */
.badge,
.btn,
.form-control,
.form-select,
.form-label,
.dropdown-menu,
.modal,
.table,
.alert,
code, kbd, pre, samp,
.font-monospace {
    font-family: var(--app-font-family) !important;
}

/* Arial 800/850/900 has a visibly different heavy face on some systems.
   Use the regular bold face, including nested <strong> and Bootstrap bolder. */
b, strong {
    font-weight: 700;
}
.fw-bolder {
    font-weight: 700 !important;
}

/* Editor chrome and source fields otherwise use their own vendor font defaults. */
.cke_reset_all,
.cke_reset_all :is(a, span, label, input, select, textarea, button),
.cke_source,
.note-editable,
.note-codable {
    font-family: var(--app-font-family) !important;
}

/* Video controls define Roboto independently of the page. Preserve their icon glyphs. */
.shaka-video-container,
.shaka-overflow-playback-rate-mark,
.shaka-overflow-quality-mark,
.shaka-tooltips-on > .shaka-tooltip-status::after,
.shaka-tooltips-on > .shaka-tooltip::after {
    font-family: var(--app-font-family) !important;
}

/* Old article HTML may contain inline font styles or legacy <font face> tags.
   Override only text elements in published content, never the icon classes. */
:is(.nencer-news-content, .nencer-static-content, .ticket-message, .note-editable, .cke_editable)
    :is(p, div, span, a, font, b, strong, em, i, u, s, small, li, td, th, blockquote, pre, code, h1, h2, h3, h4, h5, h6):not(.fa, .fas, .far, .fal, .fab, .fad, .bi, [class^="bi-"], [class*=" bi-"]) {
    font-family: var(--app-font-family) !important;
}

/* Ensure icon fonts and pseudo-elements are never overridden by general typography rules */
.fa, .fas {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
}
.far {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 400 !important;
}
.fal {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 300 !important;
}
.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
.fad {
    font-family: "Font Awesome 5 Duotone" !important;
    font-weight: 900 !important;
}
.bi, [class^="bi-"], [class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}

.fa::before, .fas::before, .far::before, .fal::before, .fad::before, .fab::before,
.fa::after, .fas::after, .far::after, .fal::after, .fad::after, .fab::after,
[class^="fa-"]::before, [class*=" fa-"]::before,
[class^="fa-"]::after, [class*=" fa-"]::after {
    font-family: inherit !important;
}

/* Accessible visually hidden utility for screen readers and SEO */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}