:root {
  --form-element-font-color: #000000;
  --form-element-bg-color: #5d5d5e;
  --form-element-border-color: rgb(230, 230, 230);
  --form-element-border-focus-color: #6ec1e4;
  --form-element-bg-font-color: #ffffff;
  --form-element-placeholder-color: #aaaaaa;
  --theme-color-1: #fff;
  --theme-color-1-contrast: #000;
  --theme-color-2: #f5f5f5;
  --theme-color-2-contrast: #000;
  --theme-color-3: #000;
  --theme-color-3-contrast: #fff;
  --theme-color-4: #f5f5f5;
  --theme-color-4-contrast: #000;
  --theme-color-5: #000;
  --theme-color-5-contrast: #fff;
}
main *:not(a.button, button, input, .fc-icon, .fc-h-event, div.notification-bar, th) {
  background-image: none !important;
  background-color: initial !important;
  color: #000;
}
/* Removes the default outline only in browsers that support :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}
/*
:focus-visible {
  outline: 2px dashed #282828;
  outline-offset: 0px;
}
*/
:focus-visible,
input:focus, 
textarea:focus, 
select:focus,
video:focus 
{
  /*
  background-color: var(--form-element-border-focus-color);
  color: #000;
  */
  outline: 3px solid var(--form-element-border-focus-color) !important;
  outline-offset: 0px;
  border-color: inherit;
}
h1,
h2,
h3,
h4,
h5,
label {
  color: #000;
}
ul li::marker {
  color: #000;
}
/* Content lists draw their bullets with ::before in var(--theme-color-1), which this mode sets to white. Inside
   coloured bands, "main .theme-color-N ul li::before" uses var(--theme-color-N-contrast) instead (also white for
   bands 3 and 5 here), so the second selector matches that rule's specificity and wins by loading later */
main ul li::before,
main [class*="theme-color-"] ul li::before {
  color: #000;
}
/* Submenu arrows are #999 on the white menu (2.85:1); selectors match common-styles.css so these win */
nav.main-menu ul li.parent::after,
nav.main-menu ul li ul li.parent::after {
  color: #000;
}

div.hero-container div.hero-text h1,
div.hero-container div.hero-text h2,
div.hero-container div.hero-text h3,
div.hero-container div.hero-text p,
div.hero-container div.call-to-action {
  background: #000b !important;
  color: #fff !important;
  width: fit-content; /* Backdrop hugs the text, while each element stays a block on its own line */
  margin-inline: 0;   /* Cancels the hero's "margin: 0.3em auto", which would centre the shrunken block */
  padding: 0.1em 0.25em;
}

/* Text overlaid on photos keeps the same black backdrop as the hero above. The reset at the top of this file
   removes these components' overlays and box backgrounds, but the <img> beneath still shows, so without this
   the text sits directly on the photo. Selectors start with "main" to outrank that reset. */
/* Cimatron's 2025 hero */
main div.hero-container-2025 div.hero-text h1,
main div.hero-container-2025 div.hero-text h2,
main div.hero-container-2025 div.hero-text h3,
main div.hero-container-2025 div.hero-text p,
main div.hero-container-2025 div.call-to-action,
/* Image cards */
main div.grid-card-image h3,
main div.grid-card-image p {
  background: #000b !important;
  color: #fff !important;
  width: fit-content; /* Backdrop hugs the text, while each element stays a block on its own line */
  padding: 0.1em 0.25em;
}
/* The 2025 hero also uses "margin: 0.3em auto", which would centre the shrunken block. Image cards are left as
   they are: their headings have no auto margins, and their "Learn more" button is centred by design */
main div.hero-container-2025 div.hero-text h1,
main div.hero-container-2025 div.hero-text h2,
main div.hero-container-2025 div.hero-text h3,
main div.hero-container-2025 div.hero-text p,
main div.hero-container-2025 div.call-to-action {
  margin-inline: 0;
}
main div.hero-container-2025 div.call-to-action a,
main div.hero-container-2025 div.call-to-action::after {
  color: #fff !important;
}
/* Testimonial carousel: the quote box itself becomes the black backdrop */
main div.quote-slide div.quote-slide-content {
  background-color: #000 !important;
}
main div.quote-slide div.quote-slide-content figure.quote blockquote,
main div.quote-slide div.quote-slide-content figure.quote blockquote::before,
main div.quote-slide div.quote-slide-content figure.quote figcaption {
  color: #fff !important;
}
/* Its black button would vanish into the black box, so invert it */
main div.quote-slide div.quote-slide-content a.button {
  background: #fff !important;
  color: #000 !important;
}

.fc-h-event {
  background: #000 !important;
  border: 1px solid #000 !important;
}
.fc-day-other {
  color: #000 !important;
}
/* FullCalendar fades adjacent-month days to 30% opacity, which defeats the black text above (2.1:1) */
.fc-day-other .fc-daygrid-day-top {
  opacity: 1 !important;
}

a {
  color: #000;
}
a:hover,
/* Coloured bands set link hover to var(--theme-color-N-contrast) (e.g. ".theme-color-3 a:hover"), which is white here */
main [class*="theme-color-"] a:hover {
  color: #000;
}

button,
input[type="button"],
input::file-selector-button,
input[type="reset"],
input[type="submit"],
a.button,
/* "main" versions match the site's own "main button { border: none }" rule, so content buttons (e.g. Save
   preferences) really get this border in both states and keep a visible edge on their white hover state */
main button,
main input[type="button"],
main input::file-selector-button,
main input[type="reset"],
main input[type="submit"],
/* Coloured bands restyle their buttons (".theme-color-3 button" in form-styles.css, ".theme-color-3 a.button" in
   common-styles.css), with hover colours that this mode turns into white on white; these outrank those rules */
main [class*="theme-color-"] button,
main [class*="theme-color-"] input[type="button"],
main [class*="theme-color-"] input::file-selector-button,
main [class*="theme-color-"] input[type="reset"],
main [class*="theme-color-"] input[type="submit"],
main [class*="theme-color-"] a.button {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

main [class*="theme-color-"] button:hover,
main [class*="theme-color-"] input[type="button"]:hover,
main [class*="theme-color-"] input::file-selector-button:hover,
main [class*="theme-color-"] input[type="reset"]:hover,
main [class*="theme-color-"] input[type="submit"]:hover,
main [class*="theme-color-"] a.button:hover,
main button:hover,
button:hover,
input[type="button"]:hover,
input::file-selector-button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover {
  color: #000;
  background: #fff;
  border-color: #000; /* Colour only: each button keeps its normal border width (many have none), so nothing resizes on hover */
}

/* Table header cells match the buttons: white on black. "th *" covers content inside a header cell (strong, links…),
   which the reset at the top of this file would otherwise set back to black */
div.notification-bar *,
table.styled thead tr,
th,
th * {
  color: #fff !important;
  background-color: #000 !important;
}

/* Content inside a button keeps the button's text colour. The reset at the top of this file sets color:#000 directly on
   every element in main, so e.g. <button><strong>Label</strong></button> would be black on the button's black background.
   ":is()" takes its most specific argument (a.button), matching the reset's specificity, so this wins by coming later */
main :is(a.button, button) * {
  color: inherit;
}

svg.icon {
  fill: none;
}
.svg-filter-color-theme-color-3 {
  filter: brightness(0) saturate(100%) invert(52%) sepia(13%) saturate(2302%)
    hue-rotate(168deg) brightness(92%) contrast(91%);
}
.svg-filter-color-theme-color-5 {
  filter: brightness(0) saturate(100%) invert(36%) sepia(7%) saturate(110%)
    hue-rotate(201deg) brightness(91%) contrast(91%);
}
section.theme-stripe-footer {
  background-color: #2d2d2d;
  color: #fff;
}
section.theme-footer {
  background-color: #151515;
  color: #fff;
}