/*
==========================================================
Tuition Benefit Portal — External Landing Page

Used only by:
- Former employees
- Retirees
- Eligible dependents

Current faculty/staff are redirected directly to
employee-portal.html.

Vanilla CSS.
All classes are prefixed with "tb-".
==========================================================
*/


:root {

    --tb-navy: #1B365D;

    --tb-navy-dark: #12263f;

    --tb-gold: #A89968;

    --tb-cream: #F7F4EE;

    --tb-white: #ffffff;

    --tb-text: #1f2933;

    --tb-muted: #4a5563;

    --tb-border: #ddd6c8;

    --tb-radius: 10px;

    --tb-shadow:
        0 1px 2px rgba(27, 54, 93, .06),
        0 4px 16px rgba(27, 54, 93, .08);

    --tb-shadow-hover:
        0 2px 4px rgba(27, 54, 93, .08),
        0 12px 28px rgba(27, 54, 93, .16);

    --tb-heading:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --tb-body:
        "DM Sans",
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;

}


/*
==========================================================
BOX SIZING
==========================================================
*/

*,
*::before,
*::after {

    box-sizing: border-box;

}


/*
==========================================================
BODY
==========================================================
*/

body.tb {

    margin: 0;

    background:
        var(--tb-cream);

    color:
        var(--tb-text);

    font-family:
        var(--tb-body);

    font-size:
        1rem;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

}


/*
==========================================================
HEADINGS
==========================================================
*/

.tb h1,
.tb h2,
.tb h3 {

    font-family:
        var(--tb-heading);

    color:
        var(--tb-navy);

    line-height:
        1.25;

    margin:
        0 0 .5rem;

}


/*
==========================================================
LINKS
==========================================================
*/

.tb a {

    color:
        var(--tb-navy);

    text-underline-offset:
        3px;

}


.tb a:hover {

    color:
        var(--tb-navy-dark);

}


/*
==========================================================
FOCUS
==========================================================
*/

.tb a:focus-visible,
.tb button:focus-visible {

    outline:
        3px solid var(--tb-navy);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 6px var(--tb-gold);

    border-radius:
        4px;

}


/*
==========================================================
VISUALLY HIDDEN
==========================================================
*/

.tb-visually-hidden {

    position:
        absolute !important;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    white-space:
        nowrap;

    border:
        0;

}


/*
==========================================================
SKIP LINK
==========================================================
*/

.tb-skip-link {

    position:
        absolute;

    left:
        1rem;

    top:
        -100px;

    z-index:
        100;

    padding:
        .75rem 1rem;

    background:
        var(--tb-white);

    color:
        var(--tb-navy);

    font-weight:
        700;

    border-radius:
        0 0 6px 6px;

}


.tb-skip-link:focus {

    top:
        0;

}


/*
==========================================================
CONTAINER
==========================================================
*/

.tb-container {

    width:
        100%;

    max-width:
        1120px;

    margin:
        0 auto;

    padding:
        0 1rem;

}


/*
==========================================================
HERO
==========================================================
*/

.tb-hero {

    background:
        var(--tb-white);

    border-bottom:
        1px solid var(--tb-border);

    padding:
        2.25rem 0 2.5rem;

}


.tb-eyebrow {

    margin:
        0 0 .5rem;

    font-size:
        .8rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        var(--tb-muted);

}


.tb .tb-hero-title {

    font-size:
        clamp(
            1.75rem,
            3.5vw,
            2.4rem
        );

    margin-bottom:
        .6rem;

    padding-bottom:
        .5rem;

    border-bottom:
        3px solid var(--tb-gold);

    display:
        inline-block;

}


.tb-hero-lead {

    max-width:
        68ch;

    margin:
        0;

    font-size:
        1.1rem;

    color:
        var(--tb-muted);

}


/*
==========================================================
MAIN
==========================================================
*/

.tb-main {

    padding-top:
        2.5rem;

    padding-bottom:
        3rem;

}


.tb-section {

    margin-bottom:
        2.75rem;

}


/*
==========================================================
SECTION HEADERS
==========================================================
*/

.tb-section-head {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        .5rem 1rem;

    margin-bottom:
        1.25rem;

}


.tb .tb-section-title {

    font-size:
        1.5rem;

    margin:
        0;

    padding-bottom:
        .4rem;

    border-bottom:
        3px solid var(--tb-gold);

    display:
        inline-block;

}


#steps-heading {

    margin-bottom:
        1.25rem;

}


.tb-section-link {

    font-weight:
        500;

}


/*
==========================================================
STEPS
==========================================================
*/

.tb-steps {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        1rem;

}


@media (min-width: 760px) {

    .tb-steps {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


.tb-steps li {

    display:
        flex;

    gap:
        .9rem;

    align-items:
        flex-start;

    background:
        var(--tb-white);

    border:
        1px solid var(--tb-border);

    border-radius:
        var(--tb-radius);

    padding:
        1.1rem 1.25rem;

}


.tb-steps strong {

    display:
        block;

    color:
        var(--tb-navy);

}


.tb-steps span:not(.tb-step-num) {

    color:
        var(--tb-muted);

    font-size:
        .95rem;

}


.tb-step-num {

    flex:
        0 0 2.1rem;

    height:
        2.1rem;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--tb-navy);

    color:
        var(--tb-white);

    font-weight:
        700;

    box-shadow:
        0 0 0 3px var(--tb-gold);

}


/*
==========================================================
BENEFIT CARDS
==========================================================
*/

.tb-cards {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        1.5rem;

}


@media (min-width: 640px) {

    .tb-cards {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (min-width: 960px) {

    .tb-cards {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


.tb-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--tb-white);

    border:
        1px solid var(--tb-border);

    border-radius:
        var(--tb-radius);

    overflow:
        hidden;

    box-shadow:
        var(--tb-shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.tb-card:hover,
.tb-card:focus-within {

    transform:
        translateY(-3px);

    box-shadow:
        var(--tb-shadow-hover);

}


.tb-card img {

    display:
        block;

    width:
        100%;

    height:
        190px;

    object-fit:
        cover;

    border-bottom:
        4px solid var(--tb-gold);

}


.tb-card-body {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        1.35rem 1.4rem 1.5rem;

}


.tb .tb-card-title {

    font-size:
        1.3rem;

    margin-bottom:
        .4rem;

}


.tb-card-link {

    text-decoration:
        none;

    color:
        var(--tb-navy);

}


/*
Whole card clickable.
*/

.tb-card-link::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

}


/*
Move keyboard focus indicator
from title to full card.
*/

.tb .tb-card-link:focus-visible {

    outline:
        none;

    box-shadow:
        none;

}


.tb-card:focus-within {

    outline:
        3px solid var(--tb-navy);

    outline-offset:
        2px;

    box-shadow:
        0 0 0 7px var(--tb-gold),
        var(--tb-shadow-hover);

}


.tb-card-desc {

    margin:
        0 0 1.25rem;

    color:
        var(--tb-muted);

    flex:
        1;

}


.tb-card-cta {

    font-weight:
        700;

    color:
        var(--tb-navy);

    font-size:
        .95rem;

}


.tb-card:hover .tb-card-cta {

    text-decoration:
        underline;

    text-underline-offset:
        3px;

}


/*
==========================================================
GENERAL PANEL
==========================================================
*/

.tb-panel {

    background:
        var(--tb-white);

    border:
        1px solid var(--tb-border);

    border-radius:
        var(--tb-radius);

    box-shadow:
        var(--tb-shadow);

    padding:
        1.75rem;

}


.tb-panel h2 {

    font-size:
        1.35rem;

}


.tb-panel p {

    margin:
        0 0 1rem;

    color:
        var(--tb-muted);

}


.tb-panel p:last-child {

    margin-bottom:
        0;

}


/*
==========================================================
CONTACT BAND
==========================================================
*/

.tb-contact-band {

    display:
        grid;

    gap:
        1rem 2rem;

    border-left:
        5px solid var(--tb-gold);

}


@media (min-width: 760px) {

    .tb-contact-band {

        grid-template-columns:
            1fr auto;

        align-items:
            center;

    }

}


.tb-contact {

    color:
        var(--tb-text) !important;

    line-height:
        1.5;

}


/*
==========================================================
FOOTER
==========================================================
*/

.tb-footer {

    background:
        var(--tb-navy-dark);

    color:
        #cfd8e3;

    font-size:
        .85rem;

    padding:
        1.25rem 0;

}


/*
==========================================================
MOBILE
==========================================================
*/

@media (max-width: 639px) {

    .tb-hero {

        padding:
            1.75rem 0 2rem;

    }


    .tb-main {

        padding-top:
            1.75rem;

        padding-bottom:
            2rem;

    }


    .tb-card img {

        height:
            175px;

    }

}


/*
==========================================================
REDUCED MOTION
==========================================================
*/

@media (prefers-reduced-motion: reduce) {

    .tb *,
    .tb *::before,
    .tb *::after {

        transition:
            none !important;

    }


    .tb-card:hover,
    .tb-card:focus-within {

        transform:
            none;

    }

}