:root {
    --apg-navy: #1d3c6e;
    --apg-navy-dark: #16305a;
    --apg-green: #6cbe45;
    --apg-green-dark: #59a338;
    --apg-tan: #cbb583;
    --apg-bg: #f6f8f4;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-color: var(--apg-bg);
    color: #21262c;
    margin: 0;
}

/* Thin green accent strip across the very top, echoing the logo underline. */
body::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--apg-green) 0%, var(--apg-green) 70%, var(--apg-tan) 100%);
}

/* ---- Navbar ---- */
.navbar {
    background-color: #fff !important;
    border-bottom: 1px solid #e3e8df !important;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.navbar-brand img {
    height: 38px;
    width: auto;
}

/* Text wordmark fallback if the logo image isn't present. */
.brand-wordmark {
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--apg-navy);
    white-space: nowrap;
}
.brand-wordmark .brand-accent { color: var(--apg-green); }

.navbar .nav-link {
    color: var(--apg-navy) !important;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--apg-green-dark) !important;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
    color: var(--apg-navy);
}

/* ---- Links ---- */
a {
    color: var(--apg-navy);
}
a:hover {
    color: var(--apg-green-dark);
}

/* ---- Buttons ---- */
.btn-primary {
    color: #fff;
    background-color: var(--apg-green);
    border-color: var(--apg-green);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff;
    background-color: var(--apg-green-dark);
    border-color: var(--apg-green-dark);
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(108, 190, 69, 0.4);
}

.btn-outline-primary {
    color: var(--apg-navy);
    border-color: var(--apg-navy);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--apg-navy);
    border-color: var(--apg-navy);
}

.btn-outline-secondary {
    color: var(--apg-navy);
    border-color: #b9c2cc;
}
.btn-outline-secondary:hover {
    background-color: var(--apg-navy);
    border-color: var(--apg-navy);
    color: #fff;
}

/* ---- Tables ---- */
.table > thead {
    color: var(--apg-navy);
    border-bottom: 2px solid var(--apg-green);
}

/* ---- Alerts: tint to brand without losing semantics ---- */
.alert-success {
    background-color: #eaf6e2;
    border-color: var(--apg-green);
    color: #2f5d1f;
}
.alert-info {
    background-color: #eef3fa;
    border-color: var(--apg-navy);
    color: var(--apg-navy);
}

/* ---- Hero on the home page ---- */
.apg-hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}
.apg-hero h1 {
    color: var(--apg-navy);
    font-weight: 700;
}
.apg-hero .lead {
    color: #5a6570;
}
.apg-hero .apg-rule {
    width: 90px;
    height: 4px;
    background: var(--apg-green);
    border: 0;
    opacity: 1;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* ---- Footer: plain static block at the end of content, compact ----
   position/bottom forced to override the original template's absolute footer. */
.footer {
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    line-height: normal !important;
    background-color: #fff;
    border-top: 1px solid #e3e8df !important;
    color: #8a929b;
    padding: .6rem 0;
    margin-top: 2rem;
    font-size: .8rem;
}
.footer a {
    color: var(--apg-navy);
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--apg-green);
    box-shadow: 0 0 0 0.2rem rgba(108, 190, 69, 0.25);
}