/* ================================================
   CUSTOM-NEW.CSS - MERGED (main.css excluded)
   Combines: original custom.css + access.css
   Load after main.css in HTML head
   ================================================ */

html, body {
    overflow-x: hidden !important;
}

/* -----------------------------------------------
   1. BOOTSTRAP 3 OVERRIDE PRIORITY
   These must come early with proper specificity
   ----------------------------------------------- */

/* Navigation — match your original custom.css exactly */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:active {
    color: #000 !important;
    text-decoration: none;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:active {
    color: #580f8B !important;
    text-decoration: underline;
}

.navbar-nav > li > a:focus {
    color: #580f8B !important;
    text-decoration: underline;
}

/* Top navigation variant */
.topNav .navbar-nav > li > a {
    color: #fff !important;
    font-size: 13px;
}

/* Dropdown caret colors */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #000 !important;
    border-bottom-color: #000 !important;
}

.dropdown-menu > li > a,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    color: #000;
}

.fhmm .dropdown a,
.fhmm .dropdown-menu a {
    color: #000;
}

/* -----------------------------------------------
   2. ACCESS.CSS INTEGRATION (Preserve Exactly)
   These override your original styles as needed
   ----------------------------------------------- */

/* Program categories — your access.css emphasized purple */
.categories .program-aegd,
.categories .prg-aegd,
.categories .program-aegd:hover,
.categories .program-aegd:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

.categories .program-da,
.categories .prg-da,
.categories .program-da:hover,
.categories .program-da:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

.categories .program-endo,
.categories .prg-endo,
.categories .program-endo:hover,
.categories .program-endo:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

.categories .program-gp,
.categories .prg-gp,
.categories .program-gp:hover,
.categories .program-gp:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

.categories .program-orth,
.categories .prg-orth,
.categories .program-orth:hover,
.categories .program-orth:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

.categories .program-pd,
.categories .prg-pd,
.categories .program-pd:hover,
.categories .program-pd:focus {
    background-color: #580f8B !important;
    filter: none !important;
}

/* Mention cards */
.mention-link,
.mention-link:hover,
.mention-link:focus {
    text-decoration: none;
}

.mention-link:hover .mention-header {
    color: #FFFFFF;
    text-decoration: underline;
}

.mention-steel {
    background-color: #580f8B !important;
}

.mention-parks {
    background-color: #580f8B !important;
}

.mention {
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.mention:hover,
.mention:focus {
    filter: brightness(95%) !important;
}

.mention-header {
    font-weight: 700;
    font-size: 1.25em;
    margin: 0;
    color: #FFFFFF !important;
}

.mention-title {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding-bottom: 10px;
}

.mention-title a:hover {
    color: #FFFFFF;
}

.mention p {
    color: #FFFFFF !important;
}

/* Programs list links */
.programs-list a,
.programs-list a:hover,
.programs-list a:focus {
    color: #333;
}

/* -----------------------------------------------
   3. ACCESSIBILITY ENHANCEMENTS (New Additions)
   ----------------------------------------------- */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #580f8b;
    color: #fff !important;
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s;
    transform: translateY(-100%);
}

.skip-link:focus {
    top: 0;
    transform: translateY(0);
    color: #fff !important;
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

/* Cookie banner button focus */
.cookies-link:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

/* Mobile menu toggle button focus */
.navbar-toggle:focus {
    outline: 3px solid #580f8b !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Navigation menu links focus */
.navbar-default .navbar-nav > li > a:focus {
    outline: 3px solid #580f8b !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Homepage program category links (div.program > a) */
.categories .program a:focus,
.program a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 6px;
    border-radius: 3px;
}

/* Sidebar category links focus — white on purple */
#sidebar .categories li a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 6px;
    border-radius: 3px;
}

/* Sidebar in-page navigation links */
.programs-list a:focus {
    outline: 3px solid #580f8b !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Card link focus — target the inner container */
.ann-link:focus .announcement-container {
    outline: 3px solid #580f8b !important;
    outline-offset: 4px;
    border-radius: 10px;
}

.newsbrief-link:focus .newsbrief {
    outline: 3px solid #580f8b !important;
    outline-offset: 4px;
    border-radius: 10px;
}

.mention-link:focus .mention {
    outline: 3px solid #580f8b !important;
    outline-offset: 4px;
    border-radius: 5px;
}

/* Footer social links focus — white with spacing */
.social-links a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 6px;
    border-radius: 50%;
}

/* All OTHER page content links — general rule for body text links */
#content a:focus,
.single a:focus {
    outline: 3px solid #580f8b !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Generic link focus override for any remaining links */
a:focus {
    outline: 3px solid #580f8b !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Cookie banner internal links focus — white on black */
.cookies-text a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Cookie banner Close button focus with rounded corners */
.cookies-link:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
    border-radius: 5px;
}

/* Logo link focus — white on purple topbar */
.topNav a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 4px;
    border-radius: 5px;
}

/* Prevent focus on the collapse container — only links inside should focus */
.navbar-collapse.collapse {
    outline: none;
}

.navbar-collapse.collapse.in {
    outline: none;
}

/* Visually hidden but available to screen readers */
.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;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------
   4. BASE TYPOGRAPHY (From original custom.css)
   ----------------------------------------------- */

body {
    font-family: benton-sans, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #333 !important;  /* Force dark text everywhere */
    line-height: 2.0;
}

/* Force text color on key containers */
.hero, .hp-title, .hp-subtitle,
.hp-ann, .hp-news, .announcement-container, .newsbrief,
.section-page-header h1 {
    color: #333 !important;
}

/* Headers inherit dark color */
h1, h2, h3, h4, h5, h6 {
    font-family: benton-sans, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #333 !important;
}

h3 {
    line-height: 36px;
}

p {
    color: #333 !important;
    line-height: 2;
}

/* -----------------------------------------------
   5. HERO SECTION TEXT COLOR FIX
   Your hero was appearing light — force dark
   ----------------------------------------------- */

.hp-titlearea {
    padding: 0;
}

.hp-title {
    text-align: center;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 5px 0;
    font-weight: 700;
    color: #333 !important;
}

.hp-subtitle {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    font-weight: 500;
    color: #333 !important;
}

/* -----------------------------------------------
   6. CALLOUT SECTIONS (White Text on Purple BG)
   These sit on colored backgrounds — text must be white
   ----------------------------------------------- */

.callout-title {
    text-align: center;
    font-size: 48px;
    line-height: 42px;
    margin: 0 0 30px 0;
    font-weight: 700;
    color: white !important;
}

.callout-small-title {
    text-align: center;
    font-weight: 400;
    font-size: 1.25em;
    color: white !important;
    margin: 0;
    padding: 0;
}

.callout-small-title span {
    font-weight: 700;
    color: white !important;
}

.callout-subtitle {
    font-weight: 700;
    font-size: 1.50em;
    color: white !important;
    text-align: center;
    margin-bottom: 15px;
}

.callout-text {
    color: white !important;
}

/* -----------------------------------------------
   7. ANNOUNCEMENT & NEWS STYLES (Original)
   ----------------------------------------------- */

.announcement-container {
    border-radius: 10px;
    border-color: #f7f7f7;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    padding: 20px;
}

.announcement-container p {
    margin: 0 20px;
}

.ann-link, .ann-link:hover, .ann-link:focus {
    text-decoration: none;
}

.ann-link:hover .hp-ann {
    color: #460b6f;
    text-decoration: underline;
}

.hp-ann-title {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding-bottom: 20px;
}

.hp-ann-title a:hover {
    color: #580f8b;
}

.hp-ann {
    font-weight: 700;
    font-size: 1.25em;
    margin: 0;
    padding-left: 20px;
}

/* News */
.newsbrief-link, .newsbrief-link:hover, .newsbrief-link:focus {
    text-decoration: none;
}

.newsbrief-link:hover .hp-news {
    color: #460b6f;
}

.newsbrief {
    margin-bottom: 50px;
    padding: 15px;
}

.hp-news-title {
    text-align: center;
    font-size: 48px;
    line-height: 42px;
    margin: 45px 0 65px 0;
    font-weight: 700;
}

.hp-newscat {
    font-size: 14px;
    color: #6f6f6f;
    margin-top: 20px;
    text-decoration: none;
}

.hp-news {
    font-weight: 700;
    font-size: 1.25em;
    margin-top: 10px;
}

/* -----------------------------------------------
   8. COOKIES BANNER (Your Original + Access Fix)
   ----------------------------------------------- */

.cookiesbar {
    background-color: #000;
    padding: 10px 0;
}

.cookies-text {
    color: white;
    font-size: 15px;
}

.cookies-link-div {
    text-align: right;
}

.cookies-link {
    /* Remove default button styling */
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    text-decoration: none;
    display: inline-block;
    
    /* Your custom styles */
    color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.cookies-link:hover {
    color: white;
    text-decoration: underline;
}

.cookies-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hide when dismissed */
.cookiesbar-hidden {
    display: none !important;
}

/* -----------------------------------------------
   9. HEADER & BANNER (Original)
   ----------------------------------------------- */

.bannerbar {
    padding: 0;
}

.banner-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    margin: 0;
    padding: 0;
}

.banner-text-container:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f05a";
    font-size: 2em;
    color: #333;
    margin-right: 10px;
    margin-left: 20px;
    align-self: center;
}

.banner-text {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-align: center;
    color: #333;
}

.topbar {
    background: #580f8b;
}

.dm-social li a {
    color: #bdbdbd;
}

.header-wrapper {
    background: white;
}

.navbar {
    min-height: 45px;
}

.dropdown-menu {
    z-index: 20000;
}

.colon14 {
    background: white;
    padding-top: 10px;
}

.container .general {
    background: white;
}

.section-page-header {
    border-bottom: thin solid #ccc;
    padding-bottom: 10px;
}

.section-page-header h1 {
    font-family: benton-sans, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #333 !important;
    background-color: #fff;
    font-size: 42px;
    line-height: 50px;
}

/* -----------------------------------------------
   10. COPYRIGHT
   ----------------------------------------------- */

/* Copyright links focus — white with spacing */
.copyright-wrapper a,
.copyright-wrapper a:focus {
    color: #fff !important;
}

.copyright-wrapper a:focus {
    outline: 3px solid #fff !important;
    outline-offset: 6px;
    border-radius: 3px;
    color: #fff !important;
}

.copyright-wrapper p {
    color: #fff !important;
}

/* -----------------------------------------------
   11. SIDEBAR SEARCH & LINKS
   ----------------------------------------------- */

#sidebar #s {
    background: #580F87 url(../images/search.png) no-repeat scroll 94% center;
    height: 50px;
    color: #fff;
    font-weight: 600;
    border-radius: 7px !important;
    border: none;
    outline: none;
}

#sidebar #s::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Search input focus — white on purple */
#sidebar #s:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

#sidebar .categories li a:hover,
#sidebar .pages li a:hover {
    text-decoration: underline !important;
}

/* -----------------------------------------------
   12. FOOTER SOCIAL LINKS
   Moved from inline <style> to external stylesheet
   ----------------------------------------------- */

.site-footer {
    width: 100%;
    background-color: #002d72;
    color: #ffffff;
    padding: 40px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.social-links a {
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-links i {
    font-size: 2.5rem;
}

.social-links a:hover {
    color: #f5a623;
    transform: scale(1.2);
}

.footer-copy {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* -----------------------------------------------
   13. RESPONSIVE MEDIA QUERIES (Original)
   ----------------------------------------------- */

@media only screen and (max-width: 767px) {
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        color: #fff;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #000;
    }

    .hero {
        display: none;
    }

    .section-page-header h1, .hp-news-title {
        font-size: 36px;
        line-height: 42px;
    }

    .hp-title {
        font-size: 20px;
        line-height: 26px;
    }

    .hp-subtitle {
        font-size: 20px;
        line-height: 26px;
    }

    .newsbrief-item:hover .hp-news {
        text-decoration: underline;
    }
}

@media only screen and (min-width: 768px) {
    .choose-a-program {
        top: -40px;
        margin-bottom: -40px;
        border-color: #f7f7f7;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
    }

    .hp-title-container {
        padding: 20px 20px 0 20px;
    }

    .newsbrief-item:hover {
        border-radius: 10px;
        border-color: #f7f7f7;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
    }
}

@media only screen and (min-width: 1024px) {
    .choose-a-program {
        top: -80px;
        margin-bottom: -80px;
    }
}

@media (max-width: 767px) {
    /* Collapse container */
    .navbar-default .navbar-collapse {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Links get left/right padding so focus ring stays within viewport */
.navbar-default .navbar-nav > li > a {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-right: 15px !important;    /* ← Add this line only */
}

    /* Hover state — apply same as desktop */
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:active {
        color: #580f8B !important;
        text-decoration: underline !important;
    }

    /* Focus state — inset box-shadow + visible color change */
    .navbar-default .navbar-nav > li > a:focus {
        outline: none !important;
        color: #580f8B !important;
        text-decoration: underline !important;
        box-shadow: inset 0 0 0 2px #580f8b !important;
        border-radius: 3px;
    }
}