/*====================================================
    FastMust design system
    Loaded last in every layout. Unifies colours (#253352 ink palette),
    typography, icons and accessibility on top of the theme and Bootstrap.
    The font family (Manrope) is intentionally not changed here.
 ====================================================*/

:root {
    /* Ink palette based on #253352 (contrast on #fff: 12.5 / 7.3 / 5.7 / 4.5) */
    --ds-ink: #253352;          /* headings, key text, icons */
    --ds-ink-2: #4a5672;        /* body text, secondary text */
    --ds-ink-3: #5b6782;        /* captions, meta, hints (AA on white and light tints) */
    --ds-ink-placeholder: #6b7790;
    --ds-line: rgba(37, 51, 82, 0.12);
    --ds-line-strong: rgba(37, 51, 82, 0.2);
    --ds-focus: #287dfa;

    /* Type scale */
    --ds-fs-display: 44px;
    --ds-fs-h1: 36px;
    --ds-fs-h2: 28px;
    --ds-fs-h3: 22px;
    --ds-fs-h4: 18px;
    --ds-fs-h5: 16px;
    --ds-fs-lead: 18px;
    --ds-fs-body: 16px;
    --ds-fs-ui: 14px;
    --ds-fs-small: 13px;
    --ds-fs-caption: 12px;
}

/*---------------- base text ----------------*/
body {
    color: var(--ds-ink-2);
    font-size: var(--ds-fs-body);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ds-ink);
    font-weight: 700;
    line-height: 1.25;
}

h1, .h1 { font-size: var(--ds-fs-h1); letter-spacing: -0.02em; line-height: 1.15; }
h2, .h2 { font-size: var(--ds-fs-h2); letter-spacing: -0.015em; line-height: 1.2; }
h3, .h3 { font-size: var(--ds-fs-h3); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--ds-fs-h4); }
h5, .h5 { font-size: var(--ds-fs-h5); }
h6, .h6 { font-size: var(--ds-fs-ui); }

p {
    line-height: 1.65;
}

small, .small {
    font-size: var(--ds-fs-small);
    line-height: 1.5;
}

strong, b {
    font-weight: 700;
}

/* theme headings */
.section-heading .sec__title {
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-heading .sec__desc {
    color: var(--ds-ink-2);
    line-height: 1.6;
}

.title {
    color: var(--ds-ink);
    font-weight: 700;
    line-height: 1.35;
}

.label-text {
    color: var(--ds-ink);
    font-size: var(--ds-fs-ui);
    font-weight: 600;
    line-height: 1.4;
}

/*---------------- logo ----------------*/
.site-logo-text,
.auth-showcase__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo-text img,
.auth-showcase__brand img {
    display: block;
    width: auto;
    height: 28px;
    max-width: 100%;
}

@media (max-width: 991px) {
    .header-menu-wrapper .site-logo-text img {
        height: 24px;
    }
}

/* same width as the former text logo, so the header stays on one line */
@media (max-width: 575px) {
    .header-menu-wrapper .site-logo-text img {
        height: 19px;
    }
}

@media (max-width: 575px) {
    .auth-showcase__brand img {
        height: 24px;
    }
}

/*---------------- colour utilities ----------------*/
.text-black,
.text-dark,
.text-body {
    color: var(--ds-ink) !important;
}

.text-gray,
.text-secondary {
    color: var(--ds-ink-2) !important;
}

.text-muted {
    color: var(--ds-ink-3) !important;
}

/*---------------- lines, borders ----------------*/
hr {
    border-top-color: var(--ds-line);
}

.border, .border-top, .border-right, .border-bottom, .border-left,
.table td, .table th, .table thead th {
    border-color: var(--ds-line) !important;
}

.table {
    color: var(--ds-ink-2);
}

.table thead th {
    color: var(--ds-ink);
    font-size: var(--ds-fs-ui);
    font-weight: 700;
}

/*---------------- forms ----------------*/
.form-control,
.custom-select {
    color: var(--ds-ink);
}

.contact-form-action .form-control {
    font-size: var(--ds-fs-ui);
}

.form-control::placeholder {
    color: var(--ds-ink-placeholder);
    opacity: 1;
}

.dropdown-item,
.dropdown-menu {
    color: var(--ds-ink);
}

.invalid-feedback {
    font-size: var(--ds-fs-small);
}

.close {
    color: var(--ds-ink);
}

/*---------------- buttons ----------------*/
.theme-btn {
    font-weight: 600;
    letter-spacing: 0.005em;
}

.badge {
    font-size: var(--ds-fs-caption);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/*---------------- icons ----------------*/
/* One icon system: icons inherit text colour and size and keep a line-height of 1,
   so they line up with the text next to them instead of stretching the line. */
.la, .las, .lar, .lab,
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    line-height: 1;
}

/* Inline icons inside text and buttons sit on the optical centre of the text */
p > .la, li > .la, label > .la, span > .la, a > .la, button > .la,
h1 > .la, h2 > .la, h3 > .la, h4 > .la, h5 > .la, h6 > .la,
p > .fa-solid, li > .fa-solid, span > .fa-solid, a > .fa-solid, button > .fa-solid,
p > .fa-regular, li > .fa-regular, span > .fa-regular, a > .fa-regular, button > .fa-regular,
p > .fa-brands, li > .fa-brands, span > .fa-brands, a > .fa-brands, button > .fa-brands {
    vertical-align: -0.125em;
}

/* Section headings in forms and cards: the icon is a little larger than the text and spaced evenly */
.form-title-wrap .title > .la,
.form-title-wrap .title > .lar {
    font-size: 1.15em;
    color: var(--ds-ink-3) !important;
}

/* Dashboard sidebar: one icon colour instead of a different colour per item */
.sidebar-nav .sidebar-menu > li > a > .la,
.sidebar-nav .sidebar-menu > li > a > .lar {
    color: var(--ds-ink-3) !important;
    font-size: 1.25em;
    width: 1.25em;
    text-align: center;
}

.sidebar-nav .sidebar-menu > li.page-active > a > .la,
.sidebar-nav .sidebar-menu > li > a:hover > .la {
    color: inherit !important;
}

/*---------------- accessibility ----------------*/
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.theme-btn:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ds-focus);
    outline-offset: 2px;
}

/* Form fields already show focus with their own border, no extra ring */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*---------------- responsive type ----------------*/
@media (max-width: 991px) {
    :root {
        --ds-fs-display: 36px;
        --ds-fs-h1: 32px;
        --ds-fs-h2: 24px;
        --ds-fs-h3: 20px;
    }
}

@media (max-width: 575px) {
    :root {
        --ds-fs-display: 32px;
        --ds-fs-h1: 28px;
        --ds-fs-h2: 22px;
        --ds-fs-h3: 18px;
        --ds-fs-lead: 16px;
    }

    .section-heading .sec__title {
        font-size: 28px;
    }

    .section-heading .sec__desc {
        font-size: var(--ds-fs-body);
    }

    /* 16px inputs keep mobile browsers from zooming in on focus */
    .form-control,
    .contact-form-action .form-control {
        font-size: 16px;
    }
}

/* Touch screens: interactive elements get at least a 40px target */
@media (pointer: coarse) {
    .theme-btn-small,
    .btn-sm {
        min-height: 40px;
        min-width: 40px;
    }
}

/* Checkbox tick centred in its box: the tick (label:after) gets the same size and position
   as the box (label:before, style.css) instead of a fixed offset that depends on the label line-height */
.custom-checkbox input[type=checkbox]:not(:checked) + label:after,
.custom-checkbox input[type=checkbox]:checked + label:after {
    top: 5px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

/* bootstrap-select search box: the same look everywhere (was only inside .select-contain, style.css).
   The plugin measures the menu on a temporary element outside .select-contain; with the bigger search box
   styled only there it under-measured the box and cut off the last item of long lists. */
.bootstrap-select .dropdown-menu .bs-searchbox {
    display: block;
    padding: 10px;
    border-bottom: 1px solid rgba(37, 51, 82, 0.12);
    background-color: #f9f9f9;
}

.bootstrap-select .dropdown-menu .bs-searchbox input {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(37, 51, 82, 0.12);
    border-radius: 4px;
}