@import url("/assets/css/fontawesome/fa6/css/all.min.css");
@import url("/assets/css/base.css");
@import url("/assets/css/background.css");
@import url("/assets/css/typography.css");
@import url("/assets/css/skiplinks.css");
@import url("/assets/css/header.css");
@import url("/assets/css/footer.css");
@import url("/assets/css/accordion.css");

button.accordion-button {
    outline: none;
}

body {
    max-width: 1000px;
    margin: auto auto;
}

#content {
    max-width: 1000px;
}

.banner-container {
    background-color: var(--dph-gray);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.dph-accordion {
    max-width: 100%;
}

.text-container {
    padding-left: 15px;
    padding-right: 15px;
    margin: auto auto;
}

/* Anchor Best Practice */
/* 1. Base / Unvisited State */
.text-container a:link,
.breadcrumb a:link {
    color: #0066cc;
    text-decoration: underline;
    text-underline-offset: 3px; /* Modern CSS: keeps underline from cutting through letters */
    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

/* 2. Visited State (Keep distinct or match base color) */
.text-container a:visited,
.breadcrumb a:visited {
    color: #551a8b;
}

/* 3. Hover State (Mouse user) */
.text-container a:hover,
.breadcrumb a:hover {
    color: #004499;
    text-decoration-color: #004499;
}

/* 4. Focus State (Keyboard user) */
.text-container a:focus-visible,
.breadcrumb a:focus-visible {
    outline: 3px solid #ffbf47; /* High contrast ring */
    outline-offset: 2px;
    background-color: rgba(255, 191, 71, 0.2);
}

/* 5. Active State (The click/tap moment) */
.text-container a:active,
.breadcrumb a:active {
    transform: translateY(1px); /* Subtle physical feedback */
}
/* END Anchor Best Practice */