/* ==========================================================================
   Accessibility Styles for Bootstrap 5
   Enhanced with additional accessibility features
   ========================================================================== */

/* --- GIGW Compliance: Visible Text Labels Without CSS --- */
/* Text labels that are hidden when CSS is available but visible without CSS */
.btn-text-no-css {
    /* Hide text when CSS is available (GIGW compliance) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alternative approach: Use clip-path for better browser support */
@supports (clip-path: inset(50%)) {
    .btn-text-no-css {
        clip: auto;
        clip-path: inset(50%);
    }
}

/* --- Live Region for Screen Reader Announcements --- */
#a11y-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Focus Indicators --- */
/* Enhanced focus indicators for better visibility */
*:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Remove focus outline for mouse users (optional) */
*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Ensure focus is visible for keyboard users */
*:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* High contrast focus indicators */
body.high-contrast-mode *:focus,
body.high-contrast-mode *:focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
}

/* --- Base Font Size Setup --- */
/* Define a base font size using a CSS variable.
   Adjust '1rem' if your Bootstrap base font size is customized. */
   /* --body-font-size: inherit;
*/

body {
    /* Apply the base font size */
    font-size: inherit;
    /* Add a smooth transition for font size changes triggered by JS */
    transition: font-size 0.2s ease-in-out;
}


/* --- High Contrast Mode --- */
body.high-contrast-mode {
    background-color: #000 !important; /* Black background */
    color: #fff !important;           /* White text */
    border-color: #fff !important;     /* Ensure borders are visible */
}

/* High Contrast: Links */
body.high-contrast-mode a:not(.nav-link) {
    color: #0ff !important; /* Bright cyan for high visibility */
    text-decoration: underline !important; /* Ensure links are always underlined */
}
body.high-contrast-mode a:not(.nav-link):hover,
body.high-contrast-mode a:not(.nav-link):focus {
    color: #ff0 !important; /* Bright yellow on hover/focus */
    background-color: transparent !important; /* Prevent Bootstrap hover backgrounds */
}

/* High Contrast: Headings */
body.high-contrast-mode h1,
body.high-contrast-mode h2,
body.high-contrast-mode h3,
body.high-contrast-mode h4,
body.high-contrast-mode h5,
body.high-contrast-mode h6 {
    color: #fff !important;
}

/* High Contrast: Buttons */
/* Example for primary buttons, add others as needed (.btn-secondary, etc.) */
body.high-contrast-mode .btn {
    border-color: #fff !important; /* White border for most buttons */
    color: #fff !important;        /* White text */
}
body.high-contrast-mode .btn-primary {
    background-color: #0056b3 !important; /* Darker blue */
    border-color: #0ff !important;       /* Bright border */
    color: #fff !important;
}
body.high-contrast-mode .btn-primary:hover,
body.high-contrast-mode .btn-primary:focus {
    background-color: #003d80 !important; /* Even darker blue */
    border-color: #ff0 !important;       /* Yellow border on hover */
}
body.high-contrast-mode .btn-secondary {
    background-color: #444 !important;
    border-color: #ccc !important;
    color: #fff !important;
}
body.high-contrast-mode .btn-secondary:hover,
body.high-contrast-mode .btn-secondary:focus {
    background-color: #222 !important;
    border-color: #ff0 !important;
}
/* Outline buttons need text color override */
body.high-contrast-mode .btn-outline-secondary,
body.high-contrast-mode .btn-outline-primary /* Add other outlines */ {
    color: #fff !important;
    border-color: #fff !important;
}
body.high-contrast-mode .btn-outline-secondary:hover,
body.high-contrast-mode .btn-outline-secondary:focus,
body.high-contrast-mode .btn-outline-primary:hover,
body.high-contrast-mode .btn-outline-primary:focus {
    background-color: #333 !important; /* Dark background on hover */
    color: #ff0 !important; /* Yellow text on hover */
    border-color: #ff0 !important;
}


/* High Contrast: Dropdowns (including the accessibility menu itself) */
body.high-contrast-mode .dropdown-menu {
     background-color: #111 !important; /* Dark background */
     border: 1px solid #fff !important; /* White border */
     color: #fff !important;
}
body.high-contrast-mode .dropdown-item {
    color: #fff !important;
}
body.high-contrast-mode .dropdown-item:hover,
body.high-contrast-mode .dropdown-item:focus,
body.high-contrast-mode .dropdown-item.active {
    background-color: #333 !important; /* Darker gray background */
    color: #ff0 !important;           /* Yellow text */
}
body.high-contrast-mode .dropdown-header {
    color: #aaa !important; /* Lighter gray for headers */
}
body.high-contrast-mode .dropdown-divider {
    border-top-color: #555 !important; /* Visible divider */
}

/* High Contrast: Forms */
body.high-contrast-mode .form-control,
body.high-contrast-mode .form-select {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
body.high-contrast-mode .form-control::placeholder {
    color: #aaa !important;
}
body.high-contrast-mode label {
    color: #fff !important;
}
body.high-contrast-mode .form-check-input {
    background-color: #333 !important;
    border-color: #fff !important;
}
body.high-contrast-mode .form-check-input:checked {
    background-color: #0ff !important; /* Bright color when checked */
    border-color: #0ff !important;
}
body.high-contrast-mode .form-check-label {
     color: #fff !important;
}

/* High Contrast: Cards */
body.high-contrast-mode .card {
    background-color: #1a1a1a !important; /* Slightly lighter than body */
    border: 1px solid #fff !important;
    color: #fff !important;
}
body.high-contrast-mode .card-header,
body.high-contrast-mode .card-footer {
    background-color: #222 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* High Contrast: Navbars & Navs */
body.high-contrast-mode .navbar {
    background-color: #111 !important;
    border-color: #444 !important;
    color: #fff !important;
}
body.high-contrast-mode .navbar .navbar-brand,
body.high-contrast-mode .navbar .nav-link {
    color: #fff !important;
}
body.high-contrast-mode .navbar .nav-link:hover,
body.high-contrast-mode .navbar .nav-link:focus,
body.high-contrast-mode .navbar .nav-link.active {
    color: #ff0 !important; /* Yellow on hover/focus/active */
}
body.high-contrast-mode .navbar-toggler {
    border-color: #fff !important;
}
body.high-contrast-mode .navbar-toggler-icon {
    /* You might need a filter or different background image for the toggler icon */
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* High Contrast: Tables */
body.high-contrast-mode .table {
    color: #fff !important;
    border-color: #444 !important;
}
body.high-contrast-mode .table th,
body.high-contrast-mode .table td,
body.high-contrast-mode .table thead th,
body.high-contrast-mode .table tbody + tbody {
    border-color: #444 !important;
}
body.high-contrast-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    /* Adjust striped table colors */
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}
body.high-contrast-mode .table-hover > tbody > tr:hover > * {
     /* Adjust hover colors */
    --bs-table-accent-bg: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* High Contrast: Alerts */
/* Basic alert text color */
body.high-contrast-mode .alert {
    color: #fff !important;
    border-width: 1px !important;
    border-style: solid !important;
}
/* Make links stand out more in alerts */
body.high-contrast-mode .alert .alert-link {
    color: #0ff !important; /* Use the standard bright link color */
    text-decoration: underline !important;
}
body.high-contrast-mode .alert .alert-link:hover,
body.high-contrast-mode .alert .alert-link:focus {
    color: #ff0 !important;
}
/* Specific alert backgrounds/borders */
body.high-contrast-mode .alert-primary { background-color: #003066 !important; border-color: #0056b3 !important; }
body.high-contrast-mode .alert-secondary { background-color: #333 !important; border-color: #555 !important; }
body.high-contrast-mode .alert-success { background-color: #004d00 !important; border-color: #008000 !important; }
body.high-contrast-mode .alert-danger { background-color: #660000 !important; border-color: #cc0000 !important; }
body.high-contrast-mode .alert-warning { background-color: #664d00 !important; border-color: #cc9900 !important; color: #000 !important; } /* Dark text on yellow */
body.high-contrast-mode .alert-warning .alert-link { color: #000 !important; } /* Dark link on yellow */
body.high-contrast-mode .alert-info { background-color: #004d66 !important; border-color: #0080b3 !important; }
body.high-contrast-mode .alert-light { background-color: #444 !important; border-color: #666 !important; color: #fff !important; }
body.high-contrast-mode .alert-dark { background-color: #111 !important; border-color: #333 !important; }


/* High Contrast: Other common elements */
body.high-contrast-mode hr,
body.high-contrast-mode .border,
body.high-contrast-mode .border-top,
body.high-contrast-mode .border-bottom,
body.high-contrast-mode .border-start,
body.high-contrast-mode .border-end {
    border-color: #555 !important; /* Make borders visible */
}
body.high-contrast-mode .text-muted {
    color: #aaa !important; /* Lighter gray for muted text */
}


/* --- Underline Links Mode --- */
body.underline-links-mode a:not(.nav-link) {
    text-decoration: underline !important;
}

/* Preserve sidebar nav styling even in accessibility modes */
body.underline-links-mode .sidebar .nav-link,
body.underline-links-mode .sidebar .nav-link:hover,
body.underline-links-mode .sidebar .nav-link:focus,
body.underline-links-mode .sidebar .nav-link:active,
body.underline-links-mode .sidebar .nav-link:visited,
body.underline-links-mode .sidebar .nav-link.active,
body.underline-links-mode .sidebar .nav-link[aria-current="page"],
body.high-contrast-mode .sidebar .nav-link,
body.high-contrast-mode .sidebar .nav-link:hover,
body.high-contrast-mode .sidebar .nav-link:focus,
body.high-contrast-mode .sidebar .nav-link:active,
body.high-contrast-mode .sidebar .nav-link:visited,
body.high-contrast-mode .sidebar .nav-link.active,
body.high-contrast-mode .sidebar .nav-link[aria-current="page"],
body.highlight-links .sidebar .nav-link,
body.highlight-links .sidebar .nav-link:hover,
body.highlight-links .sidebar .nav-link:focus,
body.highlight-links .sidebar .nav-link:active,
body.highlight-links .sidebar .nav-link:visited,
body.highlight-links .sidebar .nav-link.active,
body.highlight-links .sidebar .nav-link[aria-current="page"] {
    text-decoration: none !important;
}

/* --- High Contrast Sidebar Styles --- */

body.high-contrast-mode .sidebar {
    background-color: black !important; /* Or your desired contrast background */
    color: yellow !important;           /* Or your desired contrast text */
    border-color: yellow !important;    /* Make borders visible */
}

/* Sidebar Navigation Links */
body.high-contrast-mode .sidebar .nav-link {
    color: yellow !important;
    background-color: black !important;
    border-color: transparent !important; /* Remove default borders if needed */
}

/* Active Sidebar Navigation Link */
body.high-contrast-mode .sidebar .nav-link.active {
    color: black !important;
    background-color: yellow !important;
    border: 1px solid yellow !important; /* Ensure active state is clear */
}

/* Sidebar Icons within links */
body.high-contrast-mode .sidebar .nav-link i {
    color: yellow !important; /* Or white, depending on desired contrast */
}
body.high-contrast-mode .sidebar .nav-link.active i {
    color: black !important;
}

/* Sidebar Headers (e.g., "Main Menu") */
body.high-contrast-mode .sidebar .nav-item-header .text-uppercase {
    color: white !important; /* Make header text visible */
    opacity: 1 !important;   /* Override default opacity */
}
body.high-contrast-mode .sidebar .nav-item-header i { /* Header dots icon */
     color: white !important;
}

/* Sidebar Section Borders (if applicable) */
body.high-contrast-mode .sidebar .sidebar-section-body,
body.high-contrast-mode .sidebar .sidebar-section-header {
    border-color: yellow !important;
}

/* --- High Contrast List Group Items (Used in Sidebar) --- */
body.high-contrast-mode .list-group-item {
     background-color: black !important;
     color: yellow !important;
     border-color: yellow !important;
}
/* Optional: Style bold items (like headers) differently */
 body.high-contrast-mode .sidebar .list-group-item.fw-bold {
     color: white !important; /* Make heading stand out */
 }
 /* Optional: Adjust muted text within list items */
 body.high-contrast-mode .sidebar .list-group-item .text-muted {
     color: lightgray !important; /* Adjust muted text */
 }

/* Add more specific rules as needed based on inspecting the sidebar HTML */



/* Optional: main content focus visibility when navigated via skip */
#mainContent:focus,
#mainContent:focus-visible,
[role="main"]:focus,
[role="main"]:focus-visible {
    outline: 3px solid rgba(0, 123, 255, 0.8);
    outline-offset: 2px;
}
body.high-contrast-mode #mainContent:focus,
body.high-contrast-mode #mainContent:focus-visible,
body.high-contrast-mode [role="main"]:focus,
body.high-contrast-mode [role="main"]:focus-visible {
    outline: 3px solid #ff0 !important;
}

/* --- Additional Accessibility Features --- */

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

/* --- Print Styles for Accessibility --- */
@media print {
    .skip-link,
    .navbar,
    .sidebar,
    .dropdown-menu,
    .btn-group,
    .form-check {
        display: none !important;
    }
    
    body {
        font-size: inherit;
        line-height: 1.4 !important;
        color: #000 !important;
        background: #fff !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
    }
}

/* (moved to all.scss) Form focus and validation states */

/* (moved to all.scss) Button focus/disabled */

/* (moved to all.scss) Table heading/caption styling */

/* (moved to all.scss) Global image sizing */

/* (moved to all.scss) Mail/Phone icons */

/* (moved to all.scss) Loading helper */

/* --- Skip Link Styles - DBIM WCAG Compliant --- */
a.skip-link,
.visually-hidden-focusable.skip-link {
    /* Override Bootstrap visually-hidden-focusable rules */
    position: fixed !important;
    top: -50px !important;
    left: 10px !important;
    width: auto !important;
    height: auto !important;
    padding: 16px 24px !important; /* Larger padding for better visibility */
    margin: 0 !important;
    /* Enhanced visibility with bright colors */
    background: #0073e6 !important; /* Bright blue background */
    background-color: #0073e6 !important;
    color: #ffffff !important; /* White text for maximum contrast */
    text-decoration: none !important;
    border-radius: 0 0 12px 12px !important; /* More rounded corners */
    z-index: 99999 !important; /* Highest z-index */
    font-size: inherit; /* Larger font for better visibility */
    font-weight: 600 !important; /* Bolder text */
    line-height: 1.4 !important;
    transition: all 0.3s ease-in-out !important; /* Smooth transition */
    border: 3px solid #ffffff !important; /* White border for definition */
    box-shadow: 0 4px 12px rgba(0, 115, 230, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.2) !important; /* Enhanced shadow */
    min-height: 48px !important; /* Larger touch target */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Left align for icon + text */
    gap: 8px !important; /* Space between icon and text */
    /* Ensure maximum visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Icon styling */
    white-space: nowrap !important;
}

a.skip-link:focus,
.visually-hidden-focusable.skip-link:focus {
    top: 0 !important;
    /* Enhanced focus state with bright colors */
    background: #0052cc !important; /* Darker blue on focus */
    background-color: #0052cc !important;
    color: #ffffff !important;
    border: 3px solid #ffff00 !important; /* Bright yellow border for focus */
    outline: 4px solid #ffff00 !important; /* Thick yellow outline */
    outline-offset: 2px !important;
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.6), 0 0 0 6px rgba(255, 255, 0, 0.3) !important; /* Enhanced glow effect */
    /* Ensure maximum visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    /* Icon should be visible */
    transform: none !important; /* Slight scale effect */
}

a.skip-link:hover,
.visually-hidden-focusable.skip-link:hover {
    /* Enhanced hover state */
    background: #0066e6 !important; /* Slightly lighter blue on hover */
    background-color: #0066e6 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 102, 230, 0.5), 0 0 0 5px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important; /* Lift effect on hover */
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* High contrast mode support for skip link - WCAG AAA compliant */
@media (prefers-contrast: more) {
    a.skip-link,
    .visually-hidden-focusable.skip-link {
        background: #000000 !important; /* Pure black for maximum contrast */
        color: #ffffff !important; /* Pure white for maximum contrast */
        border: 2px solid #ffffff !important; /* High contrast border */
        font-weight: 600 !important; /* Bolder text for better readability */
    }
    
    a.skip-link:focus,
    .visually-hidden-focusable.skip-link:focus {
        background: #000000 !important;
        outline: 3px solid #ffff00 !important; /* High contrast yellow outline */
        outline-offset: 2px !important;
        box-shadow: 0 0 0 5px rgba(255, 255, 0, 0.5) !important; /* Yellow glow */
    }
    
    a.skip-link:hover,
    .visually-hidden-focusable.skip-link:hover {
        background: #333333 !important; /* Slightly lighter on hover */
    }
}

/* Reduced motion support for skip link */
@media (prefers-reduced-motion: reduce) {
    a.skip-link,
    .visually-hidden-focusable.skip-link {
        transition: none !important;
    }
}

/* Removed unnecessary [style] selectors - not needed for current implementation */

/* Dark theme support for skip link */
[data-color-theme=dark] a.skip-link,
[data-color-theme=dark] .visually-hidden-focusable.skip-link,
html[data-color-theme=dark] a.skip-link,
html[data-color-theme=dark] .visually-hidden-focusable.skip-link {
    background: #ffff00 !important; /* Bright yellow background for dark theme */
    background-color: #ffff00 !important;
    color: #000000 !important; /* Black text for maximum contrast */
    border: 1px solid #000000 !important; /* Thinner black border for better look */
    box-shadow: 0 4px 12px rgba(255, 255, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.2) !important; /* Reduced glow */
    /* Override any transparent backgrounds */
    opacity: 1 !important;
    /* Ensure visibility */
    visibility: visible !important;
    display: flex !important;
    /* Enhanced styling for dark theme */
    font-weight: 700 !important; /* Extra bold for dark theme */
    text-shadow: none !important; /* Remove any text shadows */
}

[data-color-theme=dark] a.skip-link:focus,
[data-color-theme=dark] .visually-hidden-focusable.skip-link:focus,
html[data-color-theme=dark] a.skip-link:focus,
html[data-color-theme=dark] .visually-hidden-focusable.skip-link:focus {
    top: 0 !important; /* Ensure it's visible when focused */
    background: #ffeb3b !important; /* Brighter yellow on focus */
    background-color: #ffeb3b !important;
    color: #000000 !important;
    border: 1px solid #000000 !important; /* Thinner border */
    outline: 2px solid #ffffff !important; /* Thinner white outline */
    outline-offset: 1px !important;
    box-shadow: 0 6px 20px rgba(255, 235, 59, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.3) !important; /* Reduced glow */
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    transform: none !important; /* Scale effect on focus */
}

[data-color-theme=dark] a.skip-link:hover,
[data-color-theme=dark] .visually-hidden-focusable.skip-link:hover,
html[data-color-theme=dark] a.skip-link:hover,
html[data-color-theme=dark] .visually-hidden-focusable.skip-link:hover {
    background: #fff176 !important; /* Slightly different yellow on hover */
    background-color: #fff176 !important;
    color: #000000 !important;
    border: 1px solid #000000 !important; /* Thinner border */
    box-shadow: 0 5px 15px rgba(255, 241, 118, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.3) !important; /* Reduced glow */
    transform: translateY(-2px) !important; /* Lift effect on hover */
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Removed unnecessary dark theme [style] selectors - not needed for current implementation */

/* Skip link in topbar - always visible on desktop, hidden on mobile */
.topbar a.skip-link,
.topbar-info a.skip-link,
.topbar .skip-link {
    /* Override default hidden positioning for topbar context */
    position: static !important;
    top: auto !important;
    left: auto !important;
    /* Remove fixed positioning styles */
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    /* Display as inline element like other topbar links */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    /* Use theme-aware text color */
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
    transform: none !important;
}

/* Mobile skip-link: keep it available for keyboard users (off-screen until focus) */
@media (max-width: 767.98px) {
    .topbar a.skip-link,
    .topbar-info a.skip-link,
    .topbar .skip-link {
        position: fixed !important;
        left: -9999px !important;
        top: 0 !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10001 !important;
    }

    .topbar a.skip-link:focus,
    .topbar-info a.skip-link:focus,
    .topbar .skip-link:focus {
        left: 0.5rem !important;
        top: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        border-radius: 0.25rem !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
}

.topbar a.skip-link:focus,
.topbar-info a.skip-link:focus,
.topbar .skip-link:focus {
    /* Keep focus visible but without dramatic positioning changes */
    top: auto !important;
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.topbar a.skip-link:hover,
.topbar-info a.skip-link:hover,
.topbar .skip-link:hover {
    /* Match other topbar link hover behavior (no underline) */
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 0.12rem rgba(255, 255, 255, 0.12) !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Re-assert mobile skip-link focus styles after generic topbar focus rules */
@media (max-width: 767.98px) {
    .topbar a.skip-link:focus,
    .topbar-info a.skip-link:focus,
    .topbar .skip-link:focus {
        left: 0.5rem !important;
        top: 0.5rem !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
}

/* Dark theme support for skip link in topbar */
[data-color-theme=dark] .topbar a.skip-link,
[data-color-theme=dark] .topbar-info a.skip-link,
[data-color-theme=dark] .topbar .skip-link,
html[data-color-theme=dark] .topbar a.skip-link,
html[data-color-theme=dark] .topbar-info a.skip-link,
html[data-color-theme=dark] .topbar .skip-link {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: inherit !important;
    text-shadow: none !important;
}

[data-color-theme=dark] .topbar a.skip-link:focus,
[data-color-theme=dark] .topbar-info a.skip-link:focus,
[data-color-theme=dark] .topbar .skip-link:focus,
html[data-color-theme=dark] .topbar a.skip-link:focus,
html[data-color-theme=dark] .topbar-info a.skip-link:focus,
html[data-color-theme=dark] .topbar .skip-link:focus {
    top: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Topbar dropdown menu z-index fix - ensure dropdowns appear above navbar */
.topbar .dropdown-menu,
.topbar-controls .dropdown-menu,
.topbar-dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
    width: fit-content !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Ensure dropdown items in topbar don't wrap and maintain compact width */
.topbar-dropdown-menu .dropdown-item {
    white-space: nowrap !important;
}

/* Ensure topbar dropdown container has proper stacking context */
.topbar .dropdown,
.topbar-controls .dropdown,
.topbar-dropdown {
    position: relative !important;
    z-index: 9999 !important;
}

footer .btn-outline-white.btn-icon:hover,
footer .btn-outline-white.btn-icon:focus-visible {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

footer .btn-outline-white.btn-icon:hover svg,
footer .btn-outline-white.btn-icon:hover svg path,
footer .btn-outline-white.btn-icon:hover svg circle,
footer .btn-outline-white.btn-icon:hover svg rect,
footer .btn-outline-white.btn-icon:hover svg polygon,
footer .btn-outline-white.btn-icon:hover .dbim-icon svg,
footer .btn-outline-white.btn-icon:hover .dbim-icon svg path,
footer .btn-outline-white.btn-icon:hover .dbim-icon svg circle,
footer .btn-outline-white.btn-icon:hover .dbim-icon svg rect,
footer .btn-outline-white.btn-icon:hover .dbim-icon svg polygon,
footer .btn-outline-white.btn-icon:focus-visible svg,
footer .btn-outline-white.btn-icon:focus-visible svg path,
footer .btn-outline-white.btn-icon:focus-visible svg circle,
footer .btn-outline-white.btn-icon:focus-visible svg rect,
footer .btn-outline-white.btn-icon:focus-visible svg polygon,
footer .btn-outline-white.btn-icon:focus-visible .dbim-icon svg,
footer .btn-outline-white.btn-icon:focus-visible .dbim-icon svg path,
footer .btn-outline-white.btn-icon:focus-visible .dbim-icon svg circle,
footer .btn-outline-white.btn-icon:focus-visible .dbim-icon svg rect,
footer .btn-outline-white.btn-icon:focus-visible .dbim-icon svg polygon {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* Ensure icons are visible on focus with proper contrast */
footer .btn-outline-white.btn-icon:focus,
footer .btn-outline-white.btn-icon:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

footer .btn-outline-white.btn-icon:focus:hover svg,
footer .btn-outline-white.btn-icon:focus:hover svg path,
footer .btn-outline-white.btn-icon:focus:hover svg circle,
footer .btn-outline-white.btn-icon:focus:hover svg rect,
footer .btn-outline-white.btn-icon:focus:hover svg polygon,
footer .btn-outline-white.btn-icon:focus:hover .dbim-icon svg,
footer .btn-outline-white.btn-icon:focus:hover .dbim-icon svg path,
footer .btn-outline-white.btn-icon:focus:hover .dbim-icon svg circle,
footer .btn-outline-white.btn-icon:focus:hover .dbim-icon svg rect,
footer .btn-outline-white.btn-icon:focus:hover .dbim-icon svg polygon {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

/* --- DBIM Footer Logos - Responsive Sizing --- */
/* Desktop: keep original size (height="90") */
.footerbox .img-fluid {
    height: 90px;
    width: auto;
}

/* Mobile: reduce size for smaller screens */
@media (max-width: 767.98px) {
    .footerbox .img-fluid {
        height: 90px !important;
        width: auto;
        max-width: 45%;
    }
    
    /* Ensure the container wraps properly on mobile */
    .footerbox .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
}

/* --- End Accessibility Styles --- */