/*
 * VarsityForce page-family system.
 * Keep this file structural and token-driven; template-local CSS can still own
 * specialized interactions.
 */
:root {
    --vf-system-ink: #071426;
    --vf-system-navy: #0A192F;
    --vf-system-gold: #FFB81C;
    --vf-system-mint: #8FE3DA;
    --vf-system-coral: #FF7A59;
    --vf-system-paper: #F7F8F1;
    --vf-system-line: rgba(10, 25, 47, 0.16);
    --vf-system-muted: rgba(10, 25, 47, 0.62);
    --vf-page-accent: var(--vf-system-gold);
    --vf-page-accent-2: var(--vf-system-mint);
    --vf-page-bg: var(--vf-system-paper);
}

.vf-page {
    background-color: var(--vf-page-bg);
    color: var(--vf-system-navy);
}

.vf-page * {
    box-sizing: border-box;
}

.vf-page a,
.vf-page button,
.vf-page input,
.vf-page select,
.vf-page textarea {
    letter-spacing: 0;
}

.vf-page--intake {
    --vf-page-accent: #8FE3DA;
    --vf-page-accent-2: #FFB81C;
    --vf-page-bg: #f3fbf9;
}

.vf-page--browse {
    --vf-page-accent: #FFB81C;
    --vf-page-accent-2: #8FE3DA;
    --vf-page-bg: #f6f7f9;
}

.vf-page--service {
    --vf-page-accent: #2fbf71;
    --vf-page-accent-2: #FFB81C;
    --vf-page-bg: #f3faf4;
}

.vf-page--account {
    --vf-page-accent: #8FE3DA;
    --vf-page-accent-2: #FF7A59;
    --vf-page-bg: #f6fbfa;
}

.vf-page--military {
    --vf-page-accent: #8aa05a;
    --vf-page-accent-2: #FFB81C;
    --vf-page-bg: #f7f4e8;
}

.vf-page--majors,
.vf-page--major-detail {
    --vf-page-accent: #6fb8ff;
    --vf-page-accent-2: #8FE3DA;
    --vf-page-bg: #f6f7ef;
}

.vf-page--pathways {
    --vf-page-accent: #7c3aed;
    --vf-page-accent-2: #8FE3DA;
    --vf-page-bg: #f6f7ef;
}

.vf-page--region {
    --vf-page-accent: #FFB81C;
    --vf-page-accent-2: #7fbf8f;
    --vf-page-bg: #f6f7f9;
}

.vf-page--hubs {
    --vf-page-accent: #FFB81C;
    --vf-page-accent-2: #8FE3DA;
    --vf-page-bg: #f7f8fb;
}

.vf-page--about,
.vf-page--privacy {
    --vf-page-accent: #FFB81C;
    --vf-page-accent-2: #8FE3DA;
    --vf-page-bg: #f8f9ff;
}

.vf-page--review,
.vf-page--triage {
    --vf-page-accent: #FDB827;
    --vf-page-accent-2: #a5b4fc;
    --vf-page-bg: #f8fafc;
}

.vj-page {
    --vj-system-ink: #241332;
    --vj-system-accent: #D7F75B;
    --vj-system-mint: #B6F3D4;
    --vj-system-paper: #FFF9E8;
}

.vf-family-strip {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    margin-block: 0.75rem 1rem;
}

.vf-family-pill {
    align-items: center;
    background: color-mix(in srgb, var(--vf-page-accent) 13%, #fff);
    border: 2px solid color-mix(in srgb, var(--vf-page-accent) 44%, var(--vf-system-line));
    color: var(--vf-system-navy);
    display: flex;
    font-size: 0.68rem;
    font-weight: 900;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.55rem 0.7rem;
    text-align: center;
    text-transform: uppercase;
}

.vf-page .hero,
.vf-page .vf-page-hero,
.vf-page .vf-hero,
.vf-page .vf-region-hero,
.vf-page .vf-ops-hero {
    position: relative;
}

.vf-page .hero::after,
.vf-page .vf-page-hero::after,
.vf-page .vf-hero::after,
.vf-page .vf-region-hero::after,
.vf-page .vf-ops-hero::after {
    background: linear-gradient(90deg, var(--vf-page-accent), var(--vf-page-accent-2));
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
}

.vf-page .site-header,
.vf-page .vf-topbar,
.vf-page .vf-account-topbar,
.vf-page .vf-region-topbar {
    border-color: color-mix(in srgb, var(--vf-page-accent) 70%, transparent) !important;
}

.vf-page .action.active,
.vf-page .chip.active,
.vf-page .qf-filter.active,
.vf-page .stage-pill.active {
    border-color: var(--vf-page-accent) !important;
}

.vf-page .panel,
.vf-page .account-section,
.vf-page .opportunity-card,
.vf-page .major-row,
.vf-page .path-row,
.vf-page .path-card,
.vf-page .review-card,
.vf-page .triage-card {
    border-color: color-mix(in srgb, var(--vf-page-accent) 22%, var(--vf-system-line));
}

.vf-page .filter-input,
.vf-page .search-input,
.vf-page .select-control,
.vf-page select,
.vf-page input[type="search"] {
    max-width: 100%;
}

.vf-page .vf-page-intent {
    color: var(--vf-system-muted);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.45;
    max-width: 52rem;
}

.vf-guide-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.vf-guide-nav .action,
.vf-guide-nav a {
    min-width: 7rem;
}

@media (max-width: 720px) {
    .vf-page .brand-title,
    .vf-page .vf-page-title {
        overflow-wrap: anywhere;
    }

    .vf-family-strip {
        grid-template-columns: 1fr 1fr;
    }

    .vf-guide-nav {
        justify-content: stretch;
        width: 100%;
    }

    .vf-guide-nav .action,
    .vf-guide-nav a {
        flex: 1 1 9rem;
    }
}


/* Back-to-home affordance: styled left-arrow to the right of the VarsityForce
   wordmark on deep pages (Majors/Military/Grad/detail). */
.vf-home-arrow {
    color: #FFB81C;
    display: inline-block;
    font-size: 0.92em;
    line-height: 1;
    margin-left: 0.12rem;
    transition: transform 0.18s ease;
}
a:hover .vf-home-arrow,
a:focus-visible .vf-home-arrow,
.site-brand:hover .vf-home-arrow {
    transform: translateX(-0.32rem);
}