/* ==========================================================================================================
   READABILITY  (loaded after blazestack.ui.css and theme-overrides.css in Components/App.razor)

   blazestack.ui.css, the template this site started from, sets the page text, buttons and form fields to .825rem (about 13px), which readers
   found too small. This file raises them to the browser's normal size (1rem = 16px) and keeps the small variants (btn-sm, text-sm, ...) in
   proportion, and makes the placeholder text of every input gray and italic so it cannot be mistaken for something typed.

   TO GO BACK: remove the <link> to this file in Components/App.razor. The original value of every size is in blazestack.ui.css.
   ========================================================================================================== */

body {
    font-size: 1rem;                 /* was .825rem */
}

.btn {
    font-size: 1rem;                 /* was .825rem */
}

.btn-group-sm > .btn, .btn-sm {
    font-size: .875rem;              /* was .75rem */
}

.btn-group-lg > .btn, .btn-lg {
    font-size: 1.125rem;             /* was .95rem */
}

.form-control, .custom-select, .input-group-text {
    font-size: 1rem;                 /* was .825rem */
}

.form-control, .custom-select {
    height: calc(2.2rem + 2px);      /* was calc(1.84062rem + 2px): room for the larger text */
}

textarea.form-control {
    height: auto;
}

.input-group-sm > .custom-select, .input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
    font-size: .875rem;              /* was .75rem */
}

.input-group-sm > .custom-select, .input-group-sm > .form-control:not(textarea) {
    height: calc(1.9rem + 2px);      /* was calc(1.51875rem + 2px) */
}

.input-group-lg > .custom-select, .input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn,
.input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-prepend > .input-group-text {
    font-size: 1.125rem;             /* was .95rem */
}

.card .card-header .card-title, .tab-content h4, .text-lg {
    font-size: 1.125rem;             /* was .95rem */
}

h6 {
    font-size: 1rem;                 /* was .825rem */
}

.text-sm {
    font-size: .875rem;              /* was .75rem */
}

/* The text people type in is dark; the placeholder is gray and italic so the two never look alike. #767676 is the lightest gray that still reads
   on white (WCAG AA). !important because Bootstrap, Blazorise and the date and search boxes each set their own placeholder color. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: #767676 !important;
    font-style: italic !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #767676 !important;
    font-style: italic !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #767676 !important;
    font-style: italic !important;
    opacity: 1 !important;
}