/* ============================================================
High Contrast (Dark) / Light Mode
- High Contrast button styles apply in both modes.
- Every colour rule for high contrast is scoped to html[data-theme="dark"],
so the original light colours are untouched when it is off.
============================================================ */

/* High Contrast Button Start */
/* Font sizes use !important because xxl.css forces button font sizes with !important */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
/*min-height: 44px;*/
padding: 6px 5px;
margin: 0px;
flex-shrink: 0;
font-family: "worksans-bold";
font-size: 1rem !important;
line-height: 1.2;
white-space: nowrap;
color: #000000;
background-color: #FFFF00;
border: 2px solid #000000;
border-radius: 10px;
cursor: pointer;
}
.theme-toggle .theme-toggle-text {
font-family: "worksans-bold";
font-size: inherit !important;
}
.theme-toggle .bi {
font-size: 1.1rem !important;
line-height: 1;
}
.theme-toggle:hover {
color: #FFFF00;
background-color: #000000;
}
.theme-toggle:focus {
outline: none;
}
.theme-toggle:focus-visible {
outline: 3px solid #000000;
outline-offset: 3px;
}
/* Show "High Contrast" while it is off and "Standard View" while it is on */
.theme-toggle .theme-show-dark {
display: none;
}
html[data-theme="dark"] .theme-toggle .theme-show-light {
display: none;
}
html[data-theme="dark"] .theme-toggle .theme-show-dark {
display: inline;
}
/* Icon only buttons (mobile header and mobile fixed bar): text stays for screen readers */
.theme-toggle-mobile,
.theme-toggle-fixednav {
position: relative;
width: 40px;
height: 40px;
min-height: 40px;
padding: 0px;
gap: 0px;
border-radius: 50%;
}
.theme-toggle-mobile .bi,
.theme-toggle-fixednav .bi {
font-size: 1.25rem !important;
}
.theme-toggle-mobile .theme-toggle-text,
.theme-toggle-fixednav .theme-toggle-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0px;
}
/* Mobile header: sits at the top right, beside the logo (same height as the MENU button) */
header .theme-toggle-mobile {
width: 36px;
height: 36px;
min-height: 36px;
margin-left: auto;
margin-right: 5px;
}
/* Small phones: the logo fills the first row, so place the button at the right end of the
MENU row without taking part in the layout (the logo and MENU button do not move) */
@media screen and (max-width: 575px) {
header .theme-toggle-mobile {
position: absolute;
margin: 0px;
top: 10px;
right: 120px;
}
html[data-theme="dark"] header .theme-toggle-mobile {
    top: 10px;
    right: 140px;
}
html header.scrolled .theme-toggle-mobile {
top: 90px;
right: 0px;
}
.scrolled{
    height:auto;
    overflow:visible;
}
header .navbar-toggler {
padding-right: 0px;
}
}
/* Mobile fixed bar (shown while scrolling on phones): floats just below the bar on the right,
so the Home / Jobseekers / Recruiters items keep their original layout */
.fixedNav ul li.theme-toggle-li {
position: absolute;
top: 100%;
right: 8px;
height: auto;
background-color: transparent;
padding: 6px 0px !important;
}
/* The fixed bar is only used on mobile (see isMobile() in main.js) */
@media screen and (min-width: 769px) {
.fixedNav ul li.theme-toggle-li {
display: none;
}
}
/* Desktop: under the orange menu bar, on the right, so it also shows in the sticky header */
header .navbar-collapse .theme-toggle-desktop {
position: absolute;
top: -42px;
right: 15px;
z-index: 1002;
min-height: 35px;
padding: 4px 5px;
}
/* High Contrast Button End */

/* ============================================================
High Contrast Colours
============================================================ */
html[data-theme="dark"] {
--dm-bg: #151A22;
--dm-box: #242C38;
--dm-text: #FFFFFF;
--dm-muted: #CBD5E1;
--dm-link: #FFFF00;
--dm-btn: #087E94;
--dm-btn-hover: #066A7D;
--dm-btn-text: #FFFFFF;
--dm-border: #CBD5E1;
--dm-line: #3A4556;
--dm-error: #F87171;
--dm-success: #4ADE80;

/* Easy Read page variables */
--color-shadow: #000000;
--color-darkgray: #242C38;
--color-lightgray: #242C38;
--color-blue: #FFFF00;
--color-brown: #FFFF00;

/* Recruiters landing page variables */
--bg: #151A22;
--bg-deep: #242C38;
--ink: #FFFFFF;
--ink-muted: #CBD5E1;
--ink-light: #CBD5E1;
--accent-glow: #3A4556;
--accent-soft: #242C38;
--accent-cream: #242C38;
--blue: #FFFF00;
--blue-mid: #FFFF00;
--blue-light: #242C38;
--blue-soft: #242C38;
--blue-border: #3A4556;
--blue-deep: #FFFFFF;
--navy: #FFFFFF;
--navy-glow: #3A4556;
--danger: #F87171;
--danger-bg: #242C38;
--danger-border: #F87171;
--white: #151A22;
--border: #3A4556;
--border-warm: #3A4556;
--surface: #242C38;
--card-inner: #242C38;
--rule: #3A4556;
--green-light: #242C38;
--gold: #FFFF00;
--gold-bg: #242C38;
--accent: #FFFF00;
--accent-light: #FFFF00;
--teal: #5EEAD4;

color-scheme: dark;
background-color: var(--dm-bg);
}

/* High Contrast button while high contrast is on */
html[data-theme="dark"] .theme-toggle {
color: #000000;
background-color: #FFFF00;
border-color: #FFFF00;
}
html[data-theme="dark"] .theme-toggle:hover {
color: #FFFF00;
background-color: var(--dm-bg);
border-color: #FFFF00;
}

/* Base */
html[data-theme="dark"] body {
background-color: var(--dm-bg);
color: var(--dm-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
color: inherit;
}
html[data-theme="dark"] body a,
html[data-theme="dark"] a {
color: var(--dm-link);
}
html[data-theme="dark"] a:hover {
color: var(--dm-link);
}
html[data-theme="dark"] hr {
background-color: var(--dm-muted);
color: var(--dm-muted);
opacity: 1;
}
html[data-theme="dark"] *:focus-visible {
outline: 3px solid var(--dm-link) !important;
outline-offset: 2px;
}
html[data-theme="dark"] ::selection {
background-color: var(--dm-link);
color: var(--dm-bg);
}

/* Colour helpers */
html[data-theme="dark"] .orange,
html[data-theme="dark"] .blue,
html[data-theme="dark"] .purple,
html[data-theme="dark"] .brown,
html[data-theme="dark"] .green-text {
color: var(--dm-link) !important;
}
html[data-theme="dark"] .black {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .gray,
html[data-theme="dark"] .text-muted {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .bg-orange,
html[data-theme="dark"] .bg-gray,
html[data-theme="dark"] .bg-gray-light,
html[data-theme="dark"] .bg-lightgray,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
background-color: var(--dm-box) !important;
color: var(--dm-text);
}
html[data-theme="dark"] .text-dark {
color: var(--dm-text) !important;
}

/* Header */
html[data-theme="dark"] header,
html[data-theme="dark"] header.scrolled {
background-color: var(--dm-bg);
}
html[data-theme="dark"] header.scrolled {
box-shadow: 0px 5px 10px #000000;
}
html[data-theme="dark"] header .the-logo,
html[data-theme="dark"] footer .the-logo,
html[data-theme="dark"] nav .the-logo {
background-color: #FFFFFF;
padding: 6px 10px;
border-radius: 6px;
}
html[data-theme="dark"] .the-logo {
background-color: #FFFFFF;
}
html[data-theme="dark"] header .navbar .navbar-nav .nav-link {
color: var(--dm-text) !important;
}
html[data-theme="dark"] header .navbar .navbar-nav .nav-link:hover,
html[data-theme="dark"] header .navbar .navbar-nav .nav-link:focus {
color: var(--dm-link) !important;
}
html[data-theme="dark"] header .navbar-toggler {
color: var(--dm-text);
border-color: var(--dm-border);
}
html[data-theme="dark"] header .navbar .dropdown-menu {
background-color: var(--dm-box);
border-color: var(--dm-line);
}
html[data-theme="dark"] header .navbar .dropdown-menu a,
html[data-theme="dark"] .dropdown-item {
color: var(--dm-text);
}
html[data-theme="dark"] header .navbar .dropdown-menu a:hover,
html[data-theme="dark"] header .navbar .dropdown-menu a:focus,
html[data-theme="dark"] header .navbar .dropdown-menu a:active {
background-color: var(--dm-bg);
color: var(--dm-link);
}
@media screen and (min-width: 768px) {
html[data-theme="dark"] header .navbar .navbar-nav::after {
background-color: var(--dm-box);
}
html[data-theme="dark"] header .navbar .navbar-nav::before {
background-color: var(--dm-bg);
}
}
@media screen and (max-width: 767px) {
html[data-theme="dark"] header .navbar-nav .nav-item,
html[data-theme="dark"] header .navbar-nav .nav-item:nth-child(1),
html[data-theme="dark"] header .navbar-nav .nav-item:nth-child(2),
html[data-theme="dark"] header .navbar-nav .nav-item:nth-child(3) {
background-color: var(--dm-box);
border: 1px solid var(--dm-line);
}
}

/* Mobile fixed bar: dark tiles with the brand colour kept as a bottom line */
html[data-theme="dark"] .fixedNav ul li {
background-color: var(--dm-box);
}
html[data-theme="dark"] .fixedNav ul li.theme-toggle-li {
background-color: transparent;
}
html[data-theme="dark"] .fixedNav ul li:nth-child(1) {
background-color: var(--dm-box);
box-shadow: inset 0px -4px 0px #ed6b13;
}
html[data-theme="dark"] .fixedNav ul li:nth-child(2) {
background-color: var(--dm-box);
box-shadow: inset 0px -4px 0px #8c9195;
}
html[data-theme="dark"] .fixedNav ul li:nth-child(3) {
background-color: var(--dm-box);
box-shadow: inset 0px -4px 0px #00bef3;
}
html[data-theme="dark"] .fixedNav ul li a {
color: var(--dm-text);
}

/* Headings with the orange arrow tip */
html[data-theme="dark"] .arrow-heading {
background-image: none;
background-color: var(--dm-box);
color: var(--dm-link);
}
html[data-theme="dark"] .arrow-heading::before {
background-color: var(--dm-box);
}
html[data-theme="dark"] .border-bottom-heading {
border-bottom-color: var(--dm-muted);
}

/* Buttons */
html[data-theme="dark"] .the-button,
html[data-theme="dark"] .btn-orange,
html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .login-btn-container .the-button,
html[data-theme="dark"] .search-section .the-button,
html[data-theme="dark"] .jobs-section .jobs-container .the-button,
html[data-theme="dark"] .search-job-button,
html[data-theme="dark"] .apply-now-btn {
background-image: none !important;
background-color: var(--dm-btn) !important;
border-color: var(--dm-btn) !important;
color: var(--dm-btn-text) !important;
}
html[data-theme="dark"] .the-button span,
html[data-theme="dark"] .btn-orange span {
color: var(--dm-btn-text);
}
html[data-theme="dark"] .the-button:hover,
html[data-theme="dark"] .btn-orange:hover,
html[data-theme="dark"] .btn-blue:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .search-job-button:hover,
html[data-theme="dark"] .apply-now-btn:hover {
background-color: var(--dm-btn-hover) !important;
border-color: var(--dm-link) !important;
color: var(--dm-btn-text) !important;
opacity: 1;
}
html[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .the-input,
html[data-theme="dark"] .the-select,
html[data-theme="dark"] .the-textarea,
html[data-theme="dark"] .easyread-input,
html[data-theme="dark"] .job-apply-content-section .the-form .the-input,
html[data-theme="dark"] .job-apply-content-section .the-form .the-textarea {
background-color: var(--dm-box);
color: var(--dm-text);
border-color: var(--dm-border);
caret-color: var(--dm-text);
}
html[data-theme="dark"] .search-section .the-input {
border: 2px solid var(--dm-border);
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="range"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="image"] {
background-color: initial;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
accent-color: var(--dm-link);
}
html[data-theme="dark"] .form-check-input {
background-color: var(--dm-box);
border-color: var(--dm-border);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .the-input:focus {
background-color: var(--dm-box);
color: var(--dm-text);
border-color: var(--dm-link);
box-shadow: 0 0 0 3px rgba(255,255,0,0.4);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .the-input::placeholder,
html[data-theme="dark"] .form-control::placeholder {
color: var(--dm-muted);
opacity: 1;
}
html[data-theme="dark"] .the-select:invalid,
html[data-theme="dark"] .the-select option[disabled] {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--dm-text);
-webkit-box-shadow: 0 0 0 1000px var(--dm-box) inset;
}
html[data-theme="dark"] [style*="color:red"],
html[data-theme="dark"] [style*="color: red"],
html[data-theme="dark"] .password-container .invalid,
html[data-theme="dark"] #pass_message .invalid,
html[data-theme="dark"] .text-danger {
color: var(--dm-error) !important;
}
html[data-theme="dark"] [style*="color:green"],
html[data-theme="dark"] [style*="color: green"],
html[data-theme="dark"] .password-container .valid,
html[data-theme="dark"] #pass_message .valid,
html[data-theme="dark"] .text-success {
color: var(--dm-success) !important;
}
html[data-theme="dark"] .password-container #pass_message {
background-color: var(--dm-box);
color: var(--dm-text);
}
html[data-theme="dark"] .login-form-section .the-label,
html[data-theme="dark"] .login-form-section .forgot-lnk,
html[data-theme="dark"] .easyread-label {
color: var(--dm-link);
}

/* Light blue / white gradient sections */
html[data-theme="dark"] .white-lines-section,
html[data-theme="dark"] .white-lines-section.short,
html[data-theme="dark"] .login-form-section,
html[data-theme="dark"] .company-content-section,
html[data-theme="dark"] .interview-advice-content-section,
html[data-theme="dark"] .terms-content-section,
html[data-theme="dark"] .employers-content-section {
background: var(--dm-bg);
}
html[data-theme="dark"] .white-lines-section .lines-container hr {
background-color: var(--dm-line);
}

/* Search */
html[data-theme="dark"] .search-section {
box-shadow: inset 0px 0px 0px 100vmax rgba(21, 26, 34, 0.55);
}
html[data-theme="dark"] .search-section .search-more-opt {
color: var(--dm-text);
}
html[data-theme="dark"] .search-section .more-options-container {
background-color: var(--dm-box);
border-color: var(--dm-border);
color: var(--dm-text);
}

/* Boxes and cards */
html[data-theme="dark"] .box,
html[data-theme="dark"] .featured-employers-section .box-container .box {
box-shadow: none;
border: 1px solid var(--dm-line);
}
html[data-theme="dark"] .box .bottom-cell,
html[data-theme="dark"] .featured-employers-section .box-container .box .bottom-cell {
background-color: var(--dm-box);
color: var(--dm-text);
}
html[data-theme="dark"] .box .top-cell,
html[data-theme="dark"] .featured-employers-section .box-container .box .top-cell {
background-color: var(--dm-bg);
color: var(--dm-text);
}
html[data-theme="dark"] .featured-employers-section .box-container .box .top-cell a {
color: var(--dm-link);
}
html[data-theme="dark"] .blue-border-box {
background-color: var(--dm-box);
color: var(--dm-text);
box-shadow: none !important;
}
html[data-theme="dark"] .online-options-section .box .box-title {
color: var(--dm-link);
}
html[data-theme="dark"] .our-packages-container .the-box,
html[data-theme="dark"] .job-price-calculator .calculator-box,
html[data-theme="dark"] .job-apply-content-section .the-form {
background-color: var(--dm-box);
border-color: var(--dm-line);
box-shadow: none;
}
html[data-theme="dark"] .our-packages-container .the-box .box-sub-title {
color: var(--dm-muted);
}
html[data-theme="dark"] .job-price-calculator .calculator-box .title-container .sub-title {
background-color: var(--dm-bg);
border-color: var(--dm-line);
}
html[data-theme="dark"] .job-price-calculator .calculator-box .package-container .countdown {
color: var(--dm-error);
}
html[data-theme="dark"] .price-with-currency {
color: var(--dm-link);
}
html[data-theme="dark"] .price-with-currency::before {
color: var(--dm-text);
}
html[data-theme="dark"] .jobs-section .the-logo-text {
background-color: #FFFFFF;
color: #000000;
}
html[data-theme="dark"] .jd-bottom-container::before,
html[data-theme="dark"] .jd-bottom-container::after,
html[data-theme="dark"] .apply-online-container::before,
html[data-theme="dark"] .apply-online-container::after {
background-color: var(--dm-bg);
}
html[data-theme="dark"] .job-display-cotent-section .jd-description h1,
html[data-theme="dark"] .job-display-cotent-section .jd-description h2,
html[data-theme="dark"] .job-display-cotent-section .jd-description h3,
html[data-theme="dark"] .job-display-cotent-section .jd-description h4,
html[data-theme="dark"] .job-display-cotent-section .jd-description h5,
html[data-theme="dark"] .job-display-cotent-section .jd-description h6 {
color: var(--dm-link);
}
html[data-theme="dark"] .disability-confident-section .tile {
box-shadow: none;
border-left: 1px solid var(--dm-line);
border-right: 1px solid var(--dm-line);
border-bottom: 1px solid var(--dm-line);
}
html[data-theme="dark"] .disability-confident-section .tile::after {
background-color: var(--dm-bg);
}
html[data-theme="dark"] .c-profile-content-section .middle1-row .left-col .text-container,
html[data-theme="dark"] .c-profile-content-section .middle1-row .left-col .text-container::before {
background-color: var(--dm-box);
box-shadow: none;
}
html[data-theme="dark"] .our-clients-container .our-clients-slick .slide {
border-color: var(--dm-line);
box-shadow: none;
}
html[data-theme="dark"] .approved-emp {
background-color: #B91C1C;
}
html[data-theme="dark"] .home-blogs .read-more-a,
html[data-theme="dark"] .blog-content a {
color: var(--dm-link);
}
html[data-theme="dark"] .slick-dots li button {
background-color: var(--dm-muted);
}
html[data-theme="dark"] .slick-dots li.slick-active button {
background-color: var(--dm-link);
}

/* Easy Read pages */
html[data-theme="dark"] .easy-cover-section,
html[data-theme="dark"] .current-vacancies-section .lightgray-sub-section,
html[data-theme="dark"] .easyread-footer,
html[data-theme="dark"] .easyread-ia-content-section .heading-container,
html[data-theme="dark"] .how-apply-section {
background-color: var(--dm-box);
color: var(--dm-text);
}
html[data-theme="dark"] .easy-cover-section,
html[data-theme="dark"] .job-container,
html[data-theme="dark"] .apply-job-detail-section {
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .easyread-disability-champions .dc-scroll-container .slide-title {
color: var(--dm-link);
}
html[data-theme="dark"] .register-form-section .form-ul li::before {
color: var(--dm-text);
}
html[data-theme="dark"] .logo-img {
background-color: #FFFFFF;
box-shadow: none;
}

/* Recruiters landing page (for-recruiters.css) */
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] header .navbar .navbar-nav .nav-link.nav-cta {
background-color: #FFFF00 !important;
color: var(--dm-bg) !important;
border-radius: 6px;
}
html[data-theme="dark"] a.btn-accent,
html[data-theme="dark"] a.btn-accent:hover,
html[data-theme="dark"] a.price-btn.primary,
html[data-theme="dark"] a.price-btn.primary:hover {
color: var(--dm-bg) !important;
}
html[data-theme="dark"] .page .hero-title em,
html[data-theme="dark"] .page .live-badge,
html[data-theme="dark"] .page .ev-text,
html[data-theme="dark"] .page .ctag,
html[data-theme="dark"] [style*="color:#1c4a32"],
html[data-theme="dark"] [style*="color: #1c4a32"] {
color: var(--dm-success) !important;
}
html[data-theme="dark"] .page .cta-btn {
background: var(--dm-btn);
color: var(--dm-btn-text);
}
html[data-theme="dark"] .page .cta-btn:hover {
background: var(--dm-btn-hover);
}
html[data-theme="dark"] .feat-check {
background: var(--dm-box);
border-color: var(--dm-success);
color: var(--dm-success);
}
html[data-theme="dark"] .price-currency,
html[data-theme="dark"] .price-period {
color: var(--dm-muted);
}

/* Calendly "Request Consultation" badge (third-party widget) */
html[data-theme="dark"] .calendly-badge-content {
background-color: var(--dm-btn) !important;
color: var(--dm-btn-text) !important;
}

/* Footer */
html[data-theme="dark"] footer a {
color: var(--dm-text);
}
html[data-theme="dark"] footer a:hover {
color: var(--dm-link);
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item {
background-color: var(--dm-box);
border-color: var(--dm-line);
color: var(--dm-text);
}
html[data-theme="dark"] .table {
color: var(--dm-text);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--dm-text);
border-color: var(--dm-line);
}
html[data-theme="dark"] .smart-compaigns-section.bg-orange,html[data-theme="dark"] .box .top-cell.bg-orange,html[data-theme="dark"] .easyread-footer{
    background-color:#242c3859!important;
}