/* Accessibility.css */

/*
  Fixing low contrast issues based on your theme color.
  The theme color #5E7D9E has poor contrast with both light and dark backgrounds.
  A darker color is needed to meet WCAG AA guidelines.
  We'll define a new, darker theme color that is more accessible.
*/
:root {
  --accessible-theme-color: #2b3a4a; /* A darker shade of your original theme color */
}

/* Update theme color-related classes */
.color-theme,
.list-style-theme li:before {
  color: var(--accessible-theme-color) !important;
}

.theme-bg,
.btn-primary,
.m-btn,
.list-style-tag li a,
.accordion-04 .mrig-heading,
.accordion-05 .mrig-heading,
.accordion-06 .mrig-heading,
.accordion-07 .mrig-heading,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination li a:focus,
.pagination li a:hover,
.pagination li span:focus,
.pagination li span:hover,
.page-item.active .page-link {
  background-color: var(--accessible-theme-color) !important;
}

.btn-primary,
.m-btn,
.list-style-4.list-style-color li,
.border-theme,
.border-theme-b,
.border-theme-t,
.border-theme-l,
.border-theme-r {
  border-color: var(--accessible-theme-color) !important;
}

/*
  Fixing the missing focus outline.
  The rule `outline: none;` makes the site unusable for keyboard users.
  This code re-introduces a clear focus indicator.
*/
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--accessible-theme-color) !important; /* A clear, visible outline */
  outline-offset: 2px; /* Adds a bit of space between the element and the outline */
}

/*
  Ensure links are distinguishable from regular text without relying on color alone.
*/
a {
  text-decoration: underline !important;
  color: var(--accessible-theme-color) !important;
}

a:hover,
a:focus {
  text-decoration: none !important;
  color: #2b3a4a !important;
}

/*
  This ensures that buttons with the m-btn-white class remain white,
  while other buttons receive the new accessible theme color.
*/
.m-btn.m-btn-white {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Correct the text color for all buttons to be white */
.m-btn, .m-btn b {
  color: #fff !important;
}

/* But keep the white button's text dark */
.m-btn-white,
.m-btn-white b {
    color: #232323 !important;
}

/* Also fix the hover state for the white button to have white text on a dark background */
.m-btn.m-btn-white:hover,
.m-btn.m-btn-white:focus {
  background: #232323 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Custom Hero Image Overlay for readability */
.hero-overlay {
    position: relative; /* This is essential for the pseudo-element to work */
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Adjust the last number (0.6) to change the darkness */
    z-index: 1;
}

/* Ensure content is above the overlay */
.hero-overlay .container {
    position: relative;
    z-index: 2;
}

/* Ensure that links inside buttons don't have an underline and have the correct color */
.m-btn a,
.m-btn a:hover {
  text-decoration: none !important;
  color: #fff !important;
}

/* Fix for the white button on hover */
.m-btn.m-btn-white:hover {
  background-color: #232323 !important; /* A very dark gray background */
  border-color: #232323 !important;
}

.m-btn.m-btn-white:hover b,
.m-btn.m-btn-white:hover a {
  color: #fff !important; /* White text on hover */
}

/* Custom Hero Image Overlay for readability */
.hero-overlay {
    position: relative;
    /* Use a solid dark background color as the base */
    background-color: rgba(0, 0, 0, 1);
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use the original background image with a blend mode to darken it */
    background-image: url(static/img/gcodetutor-cnc-programming-header.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    mix-blend-mode: multiply; /* This darkens the image by multiplying it with the black background */
    z-index: 1;
}

/* Ensure content is above the overlay */
.hero-overlay .container {
    position: relative;
    z-index: 2;
}

/* Fix for menu sub-menus */
.m-dropdown-menu, 
.m-dropdown-multilevel .m-dropdown-menu ul {
  background: #ffffff !important;
}

/* Fix for menu text color to be dark on a white background */
.m-dropdown-menu li a {
  color: #232323 !important;
}

/* Restores dark background for sub-menus and keeps text white */
.m-dropdown-menu,
.m-dropdown-multilevel .m-dropdown-menu ul {
    background-color: #232323 !important; /* A dark color for the sub-menu background */
}

/* Ensures text inside sub-menus is white and readable */
.m-dropdown-multilevel .m-dropdown-menu li a,
.mm-column li a {
    color: #fff !important;
}

/* Keeps the text white on hover for sub-menus */
.m-dropdown-multilevel .m-dropdown-menu > li:hover > a,
.m-dropdown-multilevel .m-dropdown-menu > li > ul > li:hover > a,
.m-dropdown-multilevel .m-dropdown-menu > li > ul > li > ul > li:hover > a,
.mm-column li:hover a {
    color: #fff !important;
}

/* Fix for the transparent white button on hover */
.m-btn.m-btn-t-white:hover, 
.m-btn.m-btn-t-white:focus {
    background-color: #ffffff !important; /* White background on hover */
    border-color: #ffffff !important; /* White border on hover */
    color: #232323 !important; /* Dark text on hover */
}

/* Fix for FAQ accordion headings */
.accordion-06 .mrig-heading {
    color: #fff !important;
}

/* Fixes for dark buttons on hover */
.m-btn:hover,
.m-btn:focus,
.m-btn-t-white:hover,
.m-btn-t-white:focus {
    color: #fff !important;
}

/* Ensures the text inside the button, specifically the <b> tag, remains white */
.m-btn:hover b,
.m-btn:focus b {
    color: #fff !important;
}

/* Fix for mobile menu text color */
@media (max-width: 991px) {
    .header .top-menu .nav-link {
        color: #fff !important;
    }
}