/* Custom Brand Colors */
:root {
    --brand-navy: #000080;
    --brand-red: #FF0000;
    --brand-yellow: #FFFFCC;
}

body {
    background-color: #ffffff;
    color: #333333;
}

/* Typography Utilities */
.text-navy {
    color: var(--brand-navy) !important;
}

.text-red {
    color: #e80000;
}

/* Custom Callout Banner */
.highlight-banner {
    background-color: var(--brand-yellow);
    border: 1px solid #dee2e6;
    border-radius: 0.375rem; /* Matches Bootstrap rounded */
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* Custom Alerts Section (Replaces double-bordered tables) */
.alerts-section {
    background-color: var(--brand-yellow);
    border: 4px double var(--brand-navy);
    border-radius: 0.375rem;
    margin-bottom: 2.5rem;
}

.alert-item {
    padding: 1.25rem;
    border-bottom: 1px solid var(--brand-navy);
    color: var(--brand-navy);
}

.alert-item:last-child {
    border-bottom: none;
}

/* Hit Counter Formatting */
.hit-counter-container {
    color: #800000;
    font-family: Arial, sans-serif;
}

/* ADA Compliance: Accessible Focus States for Links */
a.custom-link {
    color: var(--brand-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.text-red.custom-link {
    color: var(--brand-red);
}

a.custom-link:hover, 
a.custom-link:focus {
    text-decoration: none;
    outline: 3px solid var(--brand-navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- Agency Top Navigation Header --- */

:root {
    --nav-bg: #006666; /* Dark Teal */
    --nav-border: #800000; /* Maroon */
    --nav-text-white: #FFFFFF;
    --nav-text-yellow: #FFFFCC;
}

.agency-top-nav {
    background-color: var(--nav-bg);
    border: 1px solid var(--nav-border);
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 0; /* Ensures it sits flush if needed */
}

.agency-top-nav a {
    text-decoration: none; /* Removes default underline to match your original design */
}

/* ADA Compliance: Distinct hover and keyboard focus states */
.agency-top-nav a:hover,
.agency-top-nav a:focus {
    text-decoration: underline;
    outline: 2px solid var(--nav-text-yellow);
    outline-offset: 3px;
    border-radius: 2px;
}

.nav-link-white {
    color: var(--nav-text-white);
}

.nav-link-yellow {
    color: var(--nav-text-yellow);
}

/* Hides the hyphens from screen readers while maintaining visual separation */
.nav-separator {
    color: var(--nav-text-white);
    margin: 0 0.25rem;
}
/* --- Main Site Navigation (leftnav.html) --- */
.main-nav-link {
    color: var(--brand-navy) !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    transition: all 0.2s ease-in-out;
}

.main-nav-link:hover,
.main-nav-link:focus {
    background-color: var(--brand-yellow);
    color: var(--brand-navy) !important;
    border-radius: 0.375rem;
    outline: 2px solid var(--brand-navy);
    outline-offset: -2px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-yellow);
    color: var(--brand-navy);
    outline: 2px solid var(--brand-navy);
    outline-offset: -2px;
}
/* --- Footer Navigation (bottom.html) --- */
.footer-link {
    color: #008080; /* Original Teal */
    text-decoration: none;
    padding: 0.2rem;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--brand-navy);
    text-decoration: underline;
    outline: 2px solid #008080;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Ensure pipes match the navy text */
.text-navy {
    color: var(--brand-navy) !important;
}

.skip-link {
  position: absolute;
  top: -40px; /* Moves it off-screen */
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

/* Show the link when a user tabs to it */
.skip-link:focus {
  top: 0;
}