/************************
* SSSC Portal accessibility remediation
************************/

/************************
* ISSUE 7, 9, 13, 14, 19, 23, 25, 26, 29, 33, 35, 42, 46, 49, 57
* DESCRIPTION: Global focus indicator for interactive elements
************************/

a:focus, a:focus-visible, button:focus, button:focus-visible, a.btn:focus, a.btn:focus-visible, [role="button"]:focus, [role="button"]:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible, summary:focus, summary:focus-visible, [tabindex]:focus, [tabindex]:focus-visible { outline: 3px solid black !important; outline-offset: 1px !important; }

/************************
* ISSUE 19, 42
* DESCRIPTION: Focus indicator drawn inside the tile image overlay
************************/

.featured-image-card > a:focus .card-img-overlay, .featured-image-card > a:focus-visible .card-img-overlay { outline: 3px solid #000; outline-offset: -3px; }

/************************
* ISSUE 9
* DESCRIPTION: Focus indicator for the Five9 chat button
************************/

.five9-chat-button:focus, .five9-chat-button:focus-visible { outline: 3px solid #000; outline-offset: -3px; }

/************************
* ISSUE 3
* DESCRIPTION: Keep the 'Not you?' banner in document flow at high magnification
************************/

.not-you, .not-you-banner, [data-not-you], .banner-not-you { position: relative !important; top: auto !important; z-index: auto !important; }

/*************************
* ISSUE 8
* DESCRIPTION: Darken grey footer text to meet AA contrast
**************************/

footer { color:#6E6E6E !important; }

/*************************
* ISSUE 20, 43
* DESCRIPTION: Darken yellow tile overlay so white text meets AA contrast
**************************/

.card.featured-image-card-reveal.bg-warning .card-img-overlay, .card.featured-image-card-reveal.bg-yellow .card-img-overlay, .card.featured-image-card.bg-warning .card-img-overlay, .card.featured-image-card.bg-yellow .card-img-overlay { background-color:#A66908 !important; }

/*************************
* ISSUE 43
* DESCRIPTION: Darken teal tile overlay so white text meets AA contrast
**************************/

.card.featured-image-card.bg-teal .card-img-overlay, .card.featured-image-card-reveal.bg-teal .card-img-overlay { background-color:#005250 !important; }

/*************************
* ISSUE 54
* DESCRIPTION: Darken green text in success alerts and underline links inside them
**************************/

.alert-success { color:#255506; }
.alert.alert-success a { color:#255506 !important; text-decoration:underline; }
.alert.alert-success button { color:#255506 !important; text-decoration:underline; }

/*************************
* ISSUE 24, 45, 48, 58
* DESCRIPTION: Darken blue text in info alerts and underline links inside them
**************************/

.alert-info { color:#004970; }
.alert.alert-info a { color:#004970 !important; text-decoration:underline; }
.alert.alert-info button { color:#004970 !important; text-decoration:underline; }

/*************************
* ISSUE 37
* DESCRIPTION: Darken the teal default button so white text meets AA contrast
**************************/

.btn.btn-default { background:#00807D !important; }
/*
td .btn.btn-default, .entitylist-filter .btn.btn-default { background:#d4227e !important; border:0px; }
*/

/*************************
* ISSUE 64
* DESCRIPTION: Replace jumbotron image background with solid SSSC navy
**************************/

.jumbotron { background-image:none !important; background-color:rgb(0, 66, 137) !important; color:#ffffff !important; position:relative; }
/*
.jumbotron::before { content: ""; position: absolute; inset: 0; background: rgba(0, 66, 137, 0.9); z-index: 1; }
.jumbotron > * { position: relative; z-index: 2; }
*/

/*************************
* ISSUE 64
* DESCRIPTION: Underline jumbotron anchors and keep them white; trim h1 top margin
**************************/

.jumbotron a { text-decoration:underline; color:#ffffff; }
.jumbotron h1 { margin-top: 0px; }

/*************************
* ISSUE 45, 48, 58
* DESCRIPTION: Darken teal text in tables and underline contained links
**************************/

.table thead tr th, .table thead tr td { color:#00615F !important; }
.table thead tr th a, .table thead tr td a { color:#00615F !important; text-decoration:underline; }
.table tbody tr td a { color:#00615F !important; text-decoration:underline; }

/*************************
* ISSUE 18, 22, 40, 44, 52, 55, 61
* DESCRIPTION: Underline content links so they're not differentiated by colour alone
**************************/

main p a, main li a, main td a, main dd a, .page-content p a, .page-content li a, .page-content td a, .entity-form p a, .entity-form li a, article p a, article li a, .page-copy p a { text-decoration: underline !important; text-underline-offset: 2px; }
main a.btn, main a.tile, .page-content a.btn, .page-content a.tile, .entity-form a.btn { text-decoration: none !important; }

/*************************
* ISSUE 65
* DESCRIPTION: Change MySSSC homepage tile overlays to SSSC navy
**************************/

.bs4 .card .card-img-overlay, .bs4 .card.bg-yellow .card-img-overlay, .bs4 .card.bg-teal .card-img-overlay  { background-color:rgb(0, 66, 137) !important; }
.bs4 .card:focus-within .card-img-overlay, .bs4 .card.bg-yellow:focus-within .card-img-overlay, .bs4 .card.bg-teal:focus-within .card-img-overlay { background-color: rgb(0, 52, 110) !important; transition: background-color 0.2s ease; }

/*************************
* ISSUE 1
* DESCRIPTION: Make the menu appear directly under existing menu on key-press
**************************/

#navbarSupportedContent .navbar-nav .nav-item  { position:relative; }

/*************************
* ISSUE x
* DESCRIPTION: Fix button on tables which are inside editLinks div
**************************/

.table tbody tr .editLinks a { color:#ffffff }

/*************************
* ISSUE 65
* DESCRIPTION: Not you banner sitting ontop of the sticky primary navigation
**************************/
@media (max-width: 767.98px) {
    .notyou { position:fixed !important; top:0px; left:0px; right:0px; display:none !important; }
    .notyou .navbar-nav a { text-align:left !important; }
    .notyou .navbar-nav a small { display:inline !important; }
}

/*************************
* ISSUE | MOBILE
* DESCRIPTION: Visual fixes for mobile
**************************/

@media (max-width: 767.98px) {
    #navbarSupportedContent { margin-top:1rem !important; }
    #navbarSupportedContent .navbar-nav .nav-item  { margin-left:0px !important; margin-right:0px !important;  }
    #navbarSupportedContent .navbar-nav .nav-item .dropdown-menu  { display:block !important; width:100%;  }
    #navbarSupportedContent .navbar-nav .nav-item .dropdown-menu .dropdown-submenu  { border-bottom:0px !important;  }
    #navbarSupportedContent .navbar-nav .nav-item .dropdown-menu .dropdown-submenu a { background:none !important; color:#ffffff !important; }
}