/* Ensure search icon is visible in dark mode */
html.dark-mode .search-toggle,
html.dark-mode .search-toggle svg,
html.dark-mode button[aria-label*="Search"],
html.dark-mode button[aria-label*="Search"] svg {
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important; /* outline magnifier */
}
/* If magnifier is a filled icon instead of outline, use this: */
html.dark-mode .search-toggle svg {
  fill: currentColor !important;
  stroke: none !important;
}
/* Dark mode palette aligned with Olivero base */
html.dark-mode {
  color-scheme: dark;
}

html.dark-mode body {
  background-color: #000;
  color: #f1f3f6;
}

/* Make all major surfaces black in dark mode */
html.dark-mode #page-wrapper,
html.dark-mode #page,
html.dark-mode .layout-main-wrapper,
html.dark-mode .layout-main,
html.dark-mode .main-content,
html.dark-mode .main-content__container,
html.dark-mode .region,
html.dark-mode .region--content,
html.dark-mode .site-header,
html.dark-mode .site-header__inner,
html.dark-mode .header-nav,
html.dark-mode .site-footer,
html.dark-mode .site-footer__inner,
html.dark-mode .block {
  background-color: #000 !important;
  color: #f1f3f6 !important;
}

html.dark-mode a {
  color: #9bb3ff;
}

/* Dark mode: menus and search UI */
html.dark-mode .primary-nav,
html.dark-mode .primary-nav__menu,
html.dark-mode .primary-nav__menu-item,
html.dark-mode .primary-nav__menu-link,
html.dark-mode .secondary-nav,
html.dark-mode .menu,
html.dark-mode .menu a,
html.dark-mode .header-nav,
html.dark-mode .header-nav-overlay,
html.dark-mode .header-nav__item,
html.dark-mode .header-nav .menu {
  background-color: #000 !important;
  color: #f1f3f6 !important;
}

html.dark-mode .primary-nav__menu-link,
html.dark-mode .menu a {
  color: #f1f3f6 !important;
}

html.dark-mode .primary-nav__menu-link.is-active,
html.dark-mode .primary-nav__menu-link:hover,
html.dark-mode .menu a:hover {
  color: #9bb3ff !important;
}

html.dark-mode .search-block-form,
html.dark-mode .search-form,
html.dark-mode .search-form__submit,
html.dark-mode .form-search,
html.dark-mode input[type="search"],
html.dark-mode .form-element--type-search {
  background-color: #000 !important;
  color: #f1f3f6 !important;
  border-color: #222 !important;
}

/* Target Olivero header search specifically */
html.dark-mode .header-nav .search-block-form,
html.dark-mode .header-nav .search-form,
html.dark-mode .header-nav .search-form__submit,
html.dark-mode .header-nav .form-search,
html.dark-mode .header-nav input[type="search"],
html.dark-mode .header-nav .form-element--type-search {
  background-color: #000 !important;
  color: #f1f3f6 !important;
  border: 1px solid #444 !important;
  box-shadow: none !important;
}

html.dark-mode .header-nav .search-form__submit,
html.dark-mode .header-nav .search-form__submit .icon--search,
html.dark-mode .header-nav .search-form__submit .icon--search::before,
html.dark-mode .header-nav .search-form__submit .icon--search::after {
  color: #222 !important;
  fill: #222 !important;
}

/* Remove thin outlines/rectangles in secondary menu and search toggle */
html.dark-mode .secondary-nav,
html.dark-mode .secondary-nav *,
html.dark-mode .header-nav,
html.dark-mode .header-nav *,
html.dark-mode .header-nav .block,
html.dark-mode .secondary-nav .block,
html.dark-mode .search-toggle,
html.dark-mode button[aria-label*="Search"] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: #000 !important;
}

/* Match outline styling for search in dark mode */
html.dark-mode .search-block-form,
html.dark-mode .search-form,
html.dark-mode .search-form__submit,
html.dark-mode .form-search,
html.dark-mode input[type="search"],
html.dark-mode .form-element--type-search,
html.dark-mode button[aria-label*="Search"] {
  border: 1px solid #222 !important;
  outline: none !important;
}

/* Invert the existing search icon to white in dark mode */
html.dark-mode .icon--search,
html.dark-mode .icon--search::before,
html.dark-mode .icon--search::after,
html.dark-mode .search-form__submit {
  filter: none !important;
}

/* Make the SVG follow text color */
.header-search svg,
.search-toggle svg,
button[aria-label*="Search"] svg {
  stroke: currentColor !important;
  fill: none !important; /* keep outline style */
}

/* In dark mode, set the button text color to white */
html.dark-mode .header-search,
html.dark-mode .search-toggle,
html.dark-mode button[aria-label*="Search"] {
  color: #222 !important;
}

/* Remove focus outline on search toggle */
.search-toggle:focus,
.search-toggle:focus-visible {
  outline: none;
}

/* DARK MODE: remove search button outline / block box */
html.dark-mode .search-toggle,
html.dark-mode .search-toggle:focus,
html.dark-mode .search-toggle:focus-visible,
html.dark-mode .search-toggle:hover {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
}

/* Remove block/menu outlines in dark mode */
html.dark-mode .secondary-nav,
html.dark-mode .secondary-nav *,
html.dark-mode .primary-nav__menu-item,
html.dark-mode .primary-nav__button,
html.dark-mode .block {
  box-shadow: none !important;
  outline: none !important;
}

/* If icon is filled (not outline), use: */
.header-search svg {
  fill: currentColor !important;
  stroke: none !important;
}

html.dark-mode .search-block-form .form-search,
html.dark-mode .search-block-form input[type="search"],
html.dark-mode .search-block-form .form-element--type-search {
  background-color: #000 !important;
  color: #f1f3f6 !important;
  border: 1px solid #444 !important;
}

html.dark-mode .search-form__submit,
html.dark-mode .search-form__submit .icon--search,
html.dark-mode .search-form__submit .icon--search::before,
html.dark-mode .search-form__submit .icon--search::after {
  color: #222 !important;
  fill: #222 !important;
}

html.dark-mode .form-search::placeholder {
  color: #9aa4b2 !important;
}

html.dark-mode .linear-book-toggle {
  background-color: #1f242e;
  border-color: #3a4250;
  color: #e5e7eb;
}

html.dark-mode .linear-book-toggle:hover {
  background-color: #2a313d;
}

html.dark-mode .linear-book-back-to-top {
  background-color: #1f242e;
  border-color: #3a4250;
  color: #e5e7eb;
}

/* Dark mode: force MathJax logo text to white */
html.dark-mode .site-logo-mathjax,
html.dark-mode .site-logo-mathjax__tex,
html.dark-mode .site-logo-math {
  color: #ffffff !important;
}

/* =========================
   DARK MODE BASELINE FIX
   ========================= */

html.dark-mode body {
  background: #0b0d10 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Headings: ensure readability */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Links */
html.dark-mode a {
  color: #9cc2ff !important;
}
html.dark-mode a:hover {
  color: #c7dcff !important;
}

/* Remove white container backgrounds */
html.dark-mode .layout-container,
html.dark-mode .page,
html.dark-mode .page__content,
html.dark-mode main,
html.dark-mode .region,
html.dark-mode .region-content,
html.dark-mode .region-sidebar,
html.dark-mode .sidebar,
html.dark-mode .content-above,
html.dark-mode .content-below {
  background: transparent !important;
}

/* If the white strip is specifically an ASIDE/sidebar */
html.dark-mode aside {
  background: transparent !important;
}

/* Cards/blocks with white backgrounds */
html.dark-mode .block,
html.dark-mode .card,
html.dark-mode .views-row,
html.dark-mode .node,
html.dark-mode .content {
  background: transparent !important;
}

/* Forms/search inputs */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}