/* ==========================================================================
   VBS 2027 "Level Up" design layer
   Loaded AFTER assets/css/theme.css so it wins on equal specificity.
   Do not edit theme.css / theme.min.css (purchased third-party theme) --
   every override below lives here instead.
   ========================================================================== */

:root {
    /* Palette sampled from assets/img/header-2027.jpg (the 2027 banner artwork).
       Teal (#1C8988, the theme's default --primary-2) is retired site-wide --
       it does not appear anywhere in the new banner. */
    --vbs-royal: #2F28D5;   /* deep royal blue -- headline lettering in the banner */
    --vbs-sky: #0F75F6;     /* sky blue -- secondary accent */
    --vbs-lime: #D2C530;    /* acid lime-yellow -- one hairline device only, see below */
    --vbs-green: #2B703B;   /* deep green -- SUCCESS rung of the deadline alert only */
    --vbs-orange-red: #D84E21; /* orange-red -- source hue the DANGER rung's text is
                                  darkened from; not applied directly (see below) */

    /* Quiet neutral ink for the lowest heading level -- deliberately NOT a brand
       color, so the h3 tier reads as calm supporting structure under h1/h2. */
    --vbs-ink: #17233d;

    /* Deadline-alert escalation ramp. This is the ONLY place on the site that
       uses green / amber / red -- that exclusivity is what keeps the ramp legible.
       Text colors are darkened relative to their "pure" swatch above where needed
       to clear 4.5:1 body-text contrast on their tint background (see rationale
       in each rung's comment). */
    --vbs-alert-success-bg: #E7F3EA;
    --vbs-alert-success-border: #9FCBAC;
    --vbs-alert-success-text: var(--vbs-green); /* brand green as-is: 5.3:1 on its bg */

    --vbs-alert-warning-bg: #FFF6E0;
    --vbs-alert-warning-border: #E8C077;
    --vbs-alert-warning-text: #8D6100;   /* amber, chosen to sit clearly between
                                            the green and red rungs and away from
                                            the brand blues; 5.1:1 on its bg */

    --vbs-alert-danger-bg: #FBEAE4;
    --vbs-alert-danger-border: #E8B7A4;
    --vbs-alert-danger-text: #B8421C;    /* darkened derivative of the brand
                                            orange-red #D84E21 -- the raw brand
                                            value only reaches ~3.6:1 on a light
                                            tint, so text uses this darker shade.
                                            NOTE: the border below is a soft peach
                                            tint, NOT #D84E21 -- the rung reads via
                                            text + background, not a red border. */
}

/* --------------------------------------------------------------------------
   Fonts
   Arvo was loaded by includes/header.php but applied to zero elements --
   dropped there. Oswald replaces the "Roboto Condensed" heading declaration,
   which the site specified but never loaded (silent fallback to generic
   sans on any machine without it installed). Oswald is a genuinely condensed
   display face, loads from the same Google Fonts request already in use, and
   pairs cleanly with the Open Sans body copy.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Oswald", sans-serif;
}

/* --------------------------------------------------------------------------
   Heading hierarchy
   Three visually distinct levels (size + weight + color), replacing the
   flat "everything is a 28px h3" pattern on the content pages.
   -------------------------------------------------------------------------- */
h1,
.h1 {
    color: var(--vbs-royal);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

h2,
.h2 {
    color: var(--vbs-sky);
    font-size: 1.85rem;
    font-weight: 700;
}

h3,
.h3 {
    color: var(--vbs-ink);
    font-size: 1.4rem;
    font-weight: 600;
}

h4,
.h4 {
    color: var(--vbs-ink);
    font-size: 1.15rem;
    font-weight: 600;
}

/* Card titles are h2 for a valid document outline, but must not render at
   full h2 display size inside a narrow card. */
.card h2,
.card .h2 {
    color: var(--vbs-royal);
    font-size: 1.35rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.5rem;
    }

    h3,
    .h3 {
        font-size: 1.15rem;
    }
}

/* --------------------------------------------------------------------------
   Links and primary UI -- royal blue everywhere text-sized (needs 4.5:1);
   sky blue is reserved for h2 and other large-text/UI-only uses, since white
   text at normal size on sky blue falls just short of 4.5:1 (it clears the
   3:1 large-text/UI-component minimum instead).
   -------------------------------------------------------------------------- */

/* Links keep the theme's own resting treatment (#000, weight 600). Underline
   on hover/focus only -- affordance without recoloring inline body text. */
a:hover,
a:focus {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Retire teal. These utility classes carry !important in theme.css, so the
   overrides below match that so they win at equal specificity/source order.
   -------------------------------------------------------------------------- */
.bg-primary-2 {
    background-color: var(--vbs-royal) !important;
}

a.bg-primary-2:hover,
a.bg-primary-2:focus,
button.bg-primary-2:hover,
button.bg-primary-2:focus {
    background-color: #211d96 !important;
}

.text-primary-2 {
    color: var(--vbs-royal) !important;
}

.btn-primary-2 {
    color: #fff;
    background-color: var(--vbs-royal);
    border-color: var(--vbs-royal);
}

.btn-primary-2:hover {
    color: #fff;
    background-color: #211d96;
    border-color: #211d96;
}

.btn-primary-2:focus,
.btn-primary-2.focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 40, 213, 0.5);
}

.btn-primary-2:not(:disabled):not(.disabled):active,
.btn-primary-2:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #211d96;
    border-color: #211d96;
}

/* --------------------------------------------------------------------------
   One lime hairline -- the single device the lime gets, reused identically
   (not repeated as a decorative motif) as a seam between the banner and the
   page content, echoing the banner's grass strip.
   -------------------------------------------------------------------------- */
section.p-0.bg-primary-2 {
    border-bottom: 4px solid var(--vbs-lime);
}

/* --------------------------------------------------------------------------
   Deadline alert -- the escalation ramp. Re-skinned in banner-derived colors
   but kept mutually distinguishable; this is the only place green/amber/red
   appear anywhere on the site.
   -------------------------------------------------------------------------- */
.alert-success {
    color: var(--vbs-alert-success-text);
    background-color: var(--vbs-alert-success-bg);
    border-color: var(--vbs-alert-success-border);
}

.alert-warning {
    color: var(--vbs-alert-warning-text);
    background-color: var(--vbs-alert-warning-bg);
    border-color: var(--vbs-alert-warning-border);
}

.alert-danger {
    color: var(--vbs-alert-danger-text);
    background-color: var(--vbs-alert-danger-bg);
    border-color: var(--vbs-alert-danger-border);
}

#deadline h2 {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Quality floor -- visible keyboard focus and reduced-motion for the
   transitions this stylesheet adds.
   -------------------------------------------------------------------------- */
.navbar-nav .nav-link,
.btn-primary-2,
.back-to-top {
    transition: color 0.15s ease, background-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link,
    .btn-primary-2,
    .back-to-top {
        transition: none;
    }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--vbs-sky);
    outline-offset: 2px;
}

/* On the royal navbar the sky outline only reaches 2.05:1 -- under the 3:1
   floor for non-text indicators (WCAG 1.4.11). White clears it at 8.8:1. */
.navbar a:focus-visible,
.navbar .nav-link:focus-visible,
.navbar-toggler:focus-visible,
.navbar-brand:focus-visible {
    outline-color: #fff;
}