/* Accessibility Styles */

/* Ensure focus is visible only for keyboard users */
:focus-visible {
    outline: 2px solid var(--main-nav-blue);
    outline-offset: 0px;
    border-radius: 2px;
}

/* Button and link focus styles for keyboard users */
body button:focus-visible, 
body a.button:focus-visible {
    outline: 2px solid var(--main-nav-blue);
    /* border: 2px solid var(--color-brand-blue-classic); */
    box-shadow: none;
    color: var(--color-brand-blue-classic);
    background: transparent;
}

/* Ensure focus outline is removed for mouse-clicked elements */
:focus:not(:focus-visible) {
    outline: none; /* No outline for mouse-clicked elements */
}

/* Screen reader-only class */
.screen-reader-only {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border: 0;
}

/* Visible during focus for keyboard users */
.screen-reader-only:focus {
    position: static; 
    width: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    clip: auto; 
    white-space: normal; 
}

/* Skip link styles */
a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
    color: #fff;
    background-color: var(--text-bright-blue);
    width: 30%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 7px;
    border-radius: 2px;
    text-align: center;
    font-size: 1.2em;
}
a.skip-main:focus,
a.skip-main:active {
    left: auto;
    top: auto;
    z-index: 999;
}
a.skip-main:focus-visible{
    outline: 2px solid var(--main-nav-blue); 
}


/* Accessible table styles */
table {
    border-collapse: collapse;
    width: 100%;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* High contrast for disabled buttons */
button:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

/* Prevent animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Main Theme Overrides */

/* Post result items focus style */

a.post-result-item:focus-visible {
    outline: 2px solid var(--main-nav-blue) !important;
    /* outline-offset: 0px !important; */
    display: inline-block;
    border-radius: 2px; 
}

/* For download kit on Press Hub Page */
.wp-caption:has(.download-button:focus) {
    outline: 2px solid var(--main-nav-blue); 
    /* TODO need to confirm offset for this item */
    outline-offset: 4px; 
    border-radius: 2px; 
    padding-bottom: 17px; 
}

/* Focus styles */
.top-navigation :focus-visible, 
.share-menu.open a:focus-visible, 
footer :focus-visible, 
.post-content :focus-visible, 
.widgtet-alert-link:focus-visible 
{
    outline: 2px solid var(--main-nav-blue); 
    outline-offset: 0px;
    border-radius: 2px;  
}
#customPagination a:focus-visible, button.listToggle:focus-visible
{
    outline: 2px solid var(--main-nav-blue); 
    outline-offset: 2px;
    border-radius: 2px;  
}
.pre-footer :focus-visible, a.knockout:focus-visible{
    outline: 2px solid #fff; 
}
button.arrow:focus-visible 
{
    outline: 2px solid var(--main-nav-blue); 
    outline-offset: 4px;
    border-radius: 2px;  
}
/* Necessary overrides to main theme */
.submenu li a:focus-visible {
    transform: translateX(-2px); /* Shift the item left by 2px to account for the outline border to the right that overflows */
    outline: 2px solid var(--main-nav-blue); 
}
.submenu ul{
    padding: 2px 0;
}

/* Target Windows High Contrast Mode for ALERT BAR WIDGET See: wp-content/themes/genesis-child-theme/widgets/alert-widget.php for this specific widget */
@media (forced-colors: active) {
    #alertBar {
        outline: 2px solid WindowText; 
        background-color: transparent; 
        color: WindowText; 
    }

    #alertBar a {
        text-decoration: underline; 
        color: LinkText; 
    }
}

/* Legacy Microsoft browsers (optional) Let's see if it's working :) */
@media (-ms-high-contrast: active) {
    #alertBar {
        outline: 2px solid WindowText;
        background-color: transparent;
        color: WindowText;
    }

    #alertBar a {
        text-decoration: underline;
        color: LinkText;
    }
}

/* Styles when keyboard is used .keyboard-active */

.keyboard-active button.listToggle{
    margin: 0 2px;
}

a.post-result-item,
.social-sidebar .tb_nc_post_in,
.entry-content .tb_nc_post_in {
    transition: padding 0.9s;
}

.keyboard-active a.post-result-item,
.keyboard-active .social-sidebar .tb_nc_post_in,
.keyboard-active .entry-content .tb_nc_post_in {
    padding: 4px;
    outline-offset: -2px !important;
}