/* =============================================================
 * Lingo4all Recruiter — brand override
 * USA flag palette: Old Glory Blue #3C3B6E + Old Glory Red #B22234
 * Loaded AFTER style.css/global.css to override SpotAxis defaults
 * ============================================================= */
:root {
    --l4a-blue: #3C3B6E;
    --l4a-blue-dark: #2a2950;
    --l4a-blue-soft: #e6e6f0;
    --l4a-red: #B22234;
    --l4a-red-dark: #8d1a29;
    --l4a-red-soft: #fbe8eb;
    --l4a-white: #ffffff;
    --l4a-ink: #0f172a;
}

/* Top accent bar — subtle USA-flag stripe (red/white/blue) */
body::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(
        to right,
        var(--l4a-red) 0%,
        var(--l4a-red) 33.33%,
        var(--l4a-white) 33.33%,
        var(--l4a-white) 66.66%,
        var(--l4a-blue) 66.66%,
        var(--l4a-blue) 100%
    );
    width: 100%;
    position: relative;
    z-index: 1100;
}

/* --- Links --- */
a,
em > a,
li > a {
    color: var(--l4a-blue);
}
a:hover,
a:focus,
em > a:hover,
li > a:hover {
    color: var(--l4a-red);
}

h1 a:focus, h1 a:hover,
h2 a:focus, h2 a:hover,
h3 a:focus, h3 a:hover,
h4 a:focus, h4 a:hover,
h5 a:focus, h5 a:hover,
h6 a:focus, h6 a:hover {
    color: var(--l4a-red);
}

/* --- Text selection --- */
::-moz-selection {
    color: var(--l4a-white);
    background: var(--l4a-red);
    text-shadow: none;
}
::selection {
    color: var(--l4a-white);
    background: var(--l4a-red);
    text-shadow: none;
}

/* --- Bootstrap-ish primary buttons --- */
.btn-primary,
.btn-info,
.s-btn--primary {
    background-color: var(--l4a-blue) !important;
    border-color: var(--l4a-blue) !important;
    color: var(--l4a-white) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.s-btn--primary:hover, .s-btn--primary:focus {
    background-color: var(--l4a-red) !important;
    border-color: var(--l4a-red) !important;
    color: var(--l4a-white) !important;
}

.btn-danger {
    background-color: var(--l4a-red) !important;
    border-color: var(--l4a-red) !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: var(--l4a-red-dark) !important;
    border-color: var(--l4a-red-dark) !important;
}

/* --- Outlined / "ACCESS" style buttons (login screen) --- */
.s-btn,
.s-btn--outline {
    border-color: var(--l4a-blue);
    color: var(--l4a-blue);
}
.s-btn:hover,
.s-btn:focus,
.s-btn--outline:hover {
    background-color: var(--l4a-blue);
    color: var(--l4a-white);
    border-color: var(--l4a-blue);
}

/* --- Form inputs underline / focus state --- */
.s-form-v4__input:focus,
.form-control:focus {
    border-color: var(--l4a-blue) !important;
    box-shadow: 0 1px 0 0 var(--l4a-blue) !important;
}

/* --- Badges, labels, tags --- */
.badge-primary,
.label-primary,
.tag-primary {
    background-color: var(--l4a-blue);
    color: var(--l4a-white);
}
.badge-danger,
.label-danger {
    background-color: var(--l4a-red);
    color: var(--l4a-white);
}

/* --- Headings underline / divider accents --- */
.s-heading::after,
.s-section-heading::after {
    background-color: var(--l4a-red);
}

/* --- Alert / error messages --- */
.alert-danger,
.errorlist {
    color: var(--l4a-red-dark);
    border-color: var(--l4a-red);
    background-color: var(--l4a-red-soft);
}
.alert-info,
.alert-primary {
    color: var(--l4a-blue-dark);
    border-color: var(--l4a-blue);
    background-color: var(--l4a-blue-soft);
}

/* --- Pagination active --- */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--l4a-blue) !important;
    border-color: var(--l4a-blue) !important;
    color: var(--l4a-white) !important;
}

/* --- Tabs / nav active state --- */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--l4a-blue);
    color: var(--l4a-white);
}

/* --- Background utilities --- */
.bg-primary { background-color: var(--l4a-blue) !important; color: var(--l4a-white); }
.bg-danger  { background-color: var(--l4a-red)  !important; color: var(--l4a-white); }

/* --- Text utilities --- */
.text-primary { color: var(--l4a-blue) !important; }
.text-danger  { color: var(--l4a-red)  !important; }