@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}


:root, [data-bs-theme="light"] {

    /* --- PRIMARY (Red Accent) --- */
    --bs-primary: #eb0022;
    --bs-primary-rgb: 235, 0, 34;

    /* --- SECONDARY (Muted Gray for Labels/Metadata) --- */
    --bs-secondary: #767676;
    --bs-secondary-rgb: 118, 118, 118;
    --bs-secondary-color: #767676; /* Overrides default muted text utilities */

    /* --- TERTIARY & BODY (Dark Gray for Body Copy) --- */
    --bs-tertiary: #3d3d3d;
    --bs-tertiary-rgb: 61, 61, 61;
    --bs-tertiary-bg: #e9ecef;
    --bs-tertiary-bg-rgb: 233, 236, 239; /* Keeps alpha/opacity utilities in sync */


    --bs-body-color: #3d3d3d; /* Explicitly sets the default text color */
    --bs-body-color-rgb: 61, 61, 61;

    /* --- LIGHT (Off-White for Backgrounds) --- */
    --bs-light: #F1F1F1;
    --bs-light-rgb: 241, 241, 241;
    /*--bs-body-bg: #F1F1F1; !* Optional: Sets default page background *!*/

    /* --- DARK & HEADINGS (Off-Black for Hero, Nav, Footer, Headings) --- */
    --bs-dark: #111111;
    --bs-dark-rgb: 17, 17, 17;
    --bs-heading-color: #111111; /* Forces all standard <h1>-<h6> tags to use off-black */

    /* typography */
    --bs-font-sans-serif: 'InterVariable', system-ui, sans-serif;
    /* --bs-body-font-family: uses the -bs-font-sans-serif variable */
    --bs-body-font-size: 1.0625rem; /* a bit larger for easy reading */
    --bs-body-line-height: 1.47;
    /*--bs-body-color: var(--bs-secondary-color);*/

    /* borders on components should be square */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;

}

@supports (font-variation-settings: normal) {
    :root {
        font-optical-sizing: auto; /* just add the optical sizing enhancement */
    }
}


/* ================================================================= */
/* ===============**===== Bootstrap Overrides ======**============== */
/* =============================================*=================== */


body {
    /*font-weight: 375;*/
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-dark);
}

/* Shift h1 down to match h2, h2 to h3, etc. */
h1, .h1 {
    font-size: var(--bs-h2-font-size, 2rem);
}

h2, .h2 {
    font-size: var(--bs-h3-font-size, 1.75rem);
}

h3, .h3 {
    font-size: var(--bs-h4-font-size, 1.5rem);
}

h4, .h4 {
    font-size: var(--bs-h5-font-size, 1.25rem);
}

h5, .h5 {
    font-size: var(--bs-h6-font-size, 1rem);
}

h6, .h6 {
    font-size: 0.875rem;
}


a {
    color: #1f4f82;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
    text-decoration-color: rgba(31, 79, 130, .4);

    transition: color .15s ease,
    text-decoration-color .15s ease;
}

a:hover {
    color: #17375E;
    text-decoration-color: currentColor;
}


/* ============== Badges with branding ============== */


.badge {
    font-weight: 500;
}


/* ============== breadcrumb styles ============== */

.breadcrumb {

    --bs-breadcrumb-divider-color: var(--bs-secondary);
    --bs-breadcrumb-item-active-color: var(--bs-secondary);

    color: var(--bs-secondary);

    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;


}

.tal-hero .breadcrumb {
    --bs-breadcrumb-divider-color: #8E8E8E;
    --bs-breadcrumb-item-active-color: #8E8E8E;
    color: #8E8E8E;
}

.breadcrumb a,
.tal-hero .breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus,
.tal-hero .breadcrumb a:hover,
.tal-hero .breadcrumb a:focus {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

nav ul.breadcrumb > li.breadcrumb-item {
    display: none;
}

/* only display the last two breadcrumb items on mobile to avoid long wraps of items */
@media (max-width: 576px) {
    nav ul.breadcrumb > li.breadcrumb-item:nth-last-child(-n+2) {
        display: inline;
    }

    nav ul.breadcrumb > li.breadcrumb-item:nth-last-child(2)::before {
        content: "";
    }

}

@media (min-width: 576px) {
    nav ul.breadcrumb > li.breadcrumb-item {
        display: inline;
    }
}

/* ============== buttons ============== */


/* ensure native Bootstrap components like buttons adjust text contrast */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c4001c; /* Slightly darker red for hover state */
    --bs-btn-hover-border-color: #c4001c;
}

/* primary button states (#eb0022) */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    /* Hover: Slightly darker red */
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c5001c;
    --bs-btn-hover-border-color: #b8001a;

    /* Active/Pressed: Even darker red */
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #a20017;
    --bs-btn-active-border-color: #950015;

    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* dark button states (#111111)  */
.btn-dark {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);

    /* Hover: Soft charcoal */
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #292929;
    --bs-btn-hover-border-color: #222222;

    /* Active/Pressed: Slate black */
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
}


/* ============== container padding and spacing ============== */


.container-xl {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

@media (min-width: 1200px) {
    .container-xl {
        /* Fluidly fills the screen until it hits the 1400px ceiling */
        max-width: 100%;
    }
}

@media (min-width: 1320px) {
    /* 1480px content + some padding room */
    .container-xl {
        max-width: 1200px;
    }
}

/* news container has narrower max width for reading */
@media (min-width: 1200px) {
    .container-tal-news {
        /* Fluidly fills the screen until it hits the max width */
        max-width: 960px;
    }
}

footer.bg-dark {
    color: var(--bs-light);
}

footer.bg-dark a {
    color: var(--bs-light);
    text-decoration: none;
}

footer.bg-dark a:hover,
footer.bg-dark a:focus {
    color: var(--bs-white);
    text-decoration: underline;
}


/* ================================================================= */
/* ===============**===== Bootstrap Extensions ======**============= */
/* =============================================*=================== */


/* ============== Buttons =============== */

.btn-tal-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 2rem;
    border: 2px solid #ffffff;
    transition: all 0.2s ease;
}

.btn-tal-light:hover {
    background-color: transparent;
    color: var(--bs-light);
}

.btn-tal-light-outline {
    background-color: transparent;
    color: var(--bs-light);
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 2rem;
    border: 2px solid var(--bs-light);
    transition: all 0.2s ease;
}

.btn-tal-light-outline:hover {
    background-color: var(--bs-light);
    color: var(--bs-dark);
}


/* ============== Cards ============== */


/* Base card appearance */
.card-tal {
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Outline card */
.card-tal-outline {
    border: 1px solid var(--bs-border-color);
}

/* a subtle hover effect */
.card-tal-outline:hover,
.card-tal-outline:focus-within {
    border-color: var(--bs-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.02);
}

/* simple underline on hover as link affordance card */
.card-tal-underline {
    border: 0;
    border-bottom: 3px solid transparent;
}

.card-tal-underline:hover,
.card-tal-underline:focus-within {
    border-bottom-color: var(--bs-primary);
}

.card-tal.card-tal-underline a {
    text-decoration: none;
}


/*!* reduce link text for links with arrows in cards *!*/
.card-tal .link-tal-arr.link-tal-rarr {
    font-size: .875rem;
    font-weight: 600;
}

/*!* increase arrow size since link text has been reduced *!*/
.card-tal .link-tal-arr.link-tal-rarr::before {
    font-size: 1rem;
}


/* ============== Link styles ============== */

/* base link arrow */
.link-tal-arr {
    color: var(--bs-dark);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
}

.link-tal-arr::before {
    color: var(--bs-primary);
    transition: transform .2s ease;
}

/* right arrow */
.link-tal-rarr::before {
    content: "\f138";
    font-family: 'bootstrap-icons', sans-serif !important;
    font-size: 1rem;
    font-weight: 300;
    margin-left: .5rem;
    order: 2;
}

.link-tal-rarr:hover::before {
    transform: translateX(.2rem);
}

/* left arrow on left side */
.link-tal-larr::before {
    content: "\f12f";
    font-family: 'bootstrap-icons', sans-serif !important;
    font-size: 1rem;
    font-weight: 300;
    margin-right: .5rem;
    order: 0;
}

.link-tal-larr:hover::before {
    transform: translateX(-0.2rem);
}


/* ============== Text styles ============== */


.text-tal-metadata {
    font-size: 0.875rem; /* Sharp 14px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
}



/* ================================================================= */
/* ======================== Custom Styles ========================== */
/* =============================================*=================== */


/* used for photo or initials for quotes */
.tal-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0a1628;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--bs-white);
    flex-shrink: 0;
}

/* min height for pages with minimal content  */
.tal-h-md {
    min-height: 400px;
}

@media (min-width: 576px) {
    .tal-h-md {
        min-height: 600px;
    }
}

/* heading with left vertical brand accent */
.tal-heading {
    border-left: .165em solid var(--bs-primary);
    padding-left: .25em;
    font-weight: 600;
}


/* ===== hero banners and headings ===== */

.tal-hero {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    margin-bottom: 3rem;
    min-height: 240px;
    padding: 1rem 0;
}

.tal-hero.tal-hero-bg-img {
    background-image: linear-gradient(to bottom right, rgba(17, 17, 17, 0.9) 25%, rgba(17, 17, 17, 0.4) 100%), var(--tal-hero-bg-img);
    background-position: center;
    background-size: cover;
    min-height: 280px; /* increase to accommodate background image */
}

@media (min-width: 768px) {
    .tal-hero.tal-hero-bg-img {
        background-image: linear-gradient(to right, rgba(17, 17, 17, 0.9) 25%, rgba(17, 17, 17, 0.3) 100%), var(--tal-hero-bg-img);
    }
}

.tal-hero.tal-hero-posting {
    padding-bottom: 3rem;
}

.tal-hero h1 {
    color: var(--bs-light);
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1;
}

.tal-hero .lead {
    max-width: 720px;
}

/* ========== search ========== */

.tal-nav-search {
    width: 260px;
}

.tal-nav-search .input-group {
    flex-wrap: nowrap;
}

.tal-nav-search .input-group-text,
.tal-nav-search .form-control {
    background: transparent;
    border: 0;
    color: #ffffff;
}

.tal-nav-search .input-group {
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 2px;
}

.tal-nav-search .input-group:focus-within {
    border-bottom-color: var(--bs-primary);
}

.tal-nav-search .form-control {
    box-shadow: none !important;
    padding-left: 0;
}

.tal-nav-search .form-control::placeholder {
    color: rgba(255, 255, 255, .65);
}


/* bullet list items styled as a block */
.tal-pill-block {
    background-color: var(--bs-light);
    font-size: 1.05rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    color: var(--bs-dark);
    border-left: 3px solid var(--bs-dark);
}

.tal-section {
    margin-bottom: 3rem;
}


/* ======================================================================== */
/* ========================= Page Specific Styles ========================= */
/* ======================================================================== */

/* --- style terms in search results snippets as bold, rather than italic, for emphasis element, even though default is italic --- */
#job-posting-search-result em {
    font-style: normal;
    font-weight: 700;
}