/*CSS Variables and Global Styles*/
:root{
    /* Primary Colors */
    --primary-color: #094989;
    --primary-color-dark: #063a6d;
    --primary-color-light: #a0bde1;
    /*accent colors */
    --accent-color: #6AADE4;
    --accent-color-dark: #4A8FCC;
    --accent-color-light: #A3D1F5;
    /*Other colors*/
    --white: #ffffff;
    --off-white: #fafafa;
    --light-gray: #f5f5f5;
    --mid-gray: #5c636a;
    --dark-gray: #333333;
    --border-gray: #e9ecef;
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

/*Base Typography*/
body{
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--white);
}

h1 { font-size: 3rem; color:var(--primary-color) }
h2 { font-size: 2.5rem; color:var(--primary-color)}
h3 { font-size: 2rem; color:var(--primary-color)}
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

a {
    color: var(--primary-color);
    transition: color var(--transition-normal);
}

/* Scoped to bare prose links only. `a:hover` is specificity (0,1,1), which beats
   every single-class button rule (0,1,0) regardless of load order — so an
   unscoped version repainted the text of any button whose :hover changed only
   the background, giving dark-blue-on-dark-blue. `:not([class])` matches
   anchors with no class attribute at all, so every classed component is free to
   own its own hover color. Do not un-scope this. */
a:not([class]):hover {
    color: var(--primary-color-dark);
}

ul, ol {
    list-style: disc;
    margin-left: 1rem;
}

/*Media style*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}
#nav-placeholder {
    position: sticky;
    top: 0;
    z-index: 1030;
}
/*Button Styles Shared across Site*/
.btn-wrapper{
    margin: 1rem;
}
.primary-btn {
    background-color: var(--primary-color);
    color: var(--white) !important;
    border: 2px solid var(--primary-color-dark);
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none !important;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    /* Separates a leading icon from the label. Markup whitespace can't do this
       job — flex collapses it into the anonymous text item. */
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-normal);
    box-sizing: border-box;
}

/* Icons follow the button's text color through every state. */
.primary-btn i {
    color: inherit;
}
.primary-btn:hover, .primary-btn:focus {
    background-color: var(--primary-color-dark);
    color: var(--white) !important;
}
/* Inline variant. .primary-btn is display:flex/width:100% so it always fills its
   container; this is for buttons that should size to their own label.
   max-width keeps a long label from pushing past its container on narrow
   screens -- width:auto sizes to content, which would otherwise overflow. */
.primary-btn--inline {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}
/*Layout Helpers*/
main {
    min-height: calc(100vh - 80px);  
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fallback keyboard-focus indicator for anything without a component-specific
   focus style (low specificity on purpose — component rules override it). */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* main.js makes an overflowing .table-responsive focusable so it can be scrolled
   from the keyboard. Inset the ring rather than using the global +2px offset: these
   wrappers sit inside cards that clip, and an outset ring would be cut off. */
.table-responsive[tabindex="0"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}
/* Skip to Main Content Link */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    color: var(--white);
}

/* Keeps the label legible when hovered while focused (the only state in which
   this link is on screen). */
.skip-to-main:hover {
    color: var(--white);
}
/* ============================================
   ALERT BANNER (refreshed 2026-07-10; admin preview mirrors this — keep
   admin/app/globals.css .ab-preview in sync)
   ============================================ */
.alert-banner {
    display: block;
    text-decoration: none;
    padding: 0.85rem 0;
    transition: background-color var(--transition-fast);
    animation: alert-banner-in 0.25s ease-out;
}

@keyframes alert-banner-in {
    from { transform: translateY(-0.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .alert-banner { animation: none; }
}

.alert-banner:hover {
    text-decoration: none;
}

/* Keyboard focus: the banner is a link — the ring must be visible on every tier. */
.alert-banner:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: -5px;
}

.alert-banner .container {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Icon sits in a tinted block so the bar reads structured, not floating text. */
.alert-banner-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alert-banner-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

.alert-banner-content {
    display: flex;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Tier label — pairs with the icon + color so meaning never relies on color
   alone (WCAG 1.4.1). Dark chip on every tier: the old white-tint chip was
   4.38:1 on the Urgent red (sub-AA); dark chips measure 8.6:1 / 15:1 / 5.4:1. */
.alert-banner-label {
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.14rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

.alert-banner-heading {
    font-weight: 700;
    font-size: 1.2rem;
}

.alert-banner-description {
    font-size: 0.92rem;
}

/* "Details" cue so the bar visibly reads as clickable. */
.alert-banner-cta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.05rem;
    white-space: nowrap;
}

.alert-banner-cta svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

.alert-banner:hover .alert-banner-cta {
    border-bottom-width: 2px;
}

/* Notice (info) — high-contrast dark bar (13.4:1) */
.alert-banner-info {
    background-color: #24303f;
    color: var(--white);
    border-bottom: 3px solid #12181f;
}
.alert-banner-info:hover {
    background-color: #1a232f;
    color: var(--white);
}

/* Advisory (warning) — brand gold with near-black text (7.3:1) */
.alert-banner-warning {
    background-color: #f79a00;
    color: #2a2000;
    border-bottom: 3px solid #c47a00;
}
.alert-banner-warning:hover {
    background-color: #e08a00;
    color: #2a2000;
}
.alert-banner-warning .alert-banner-label,
.alert-banner-warning .alert-banner-icon {
    background: rgba(0, 0, 0, 0.14);
}
.alert-banner-warning:focus-visible {
    outline-color: #2a2000;
}

/* Urgent (critical) — deep red (6.5:1) */
.alert-banner-critical {
    background-color: #b3261e;
    color: var(--white);
    border-bottom: 3px solid #7f1a14;
}
.alert-banner-critical:hover {
    background-color: #991f18;
    color: var(--white);
}

@media (max-width: 767.98px) {
    .alert-banner-content {
        flex-direction: column;
        gap: 0.1rem;
        align-items: flex-start;
    }
    .alert-banner-cta {
        display: none; /* small screens: the whole bar is the tap target */
    }
}