/*
 * mk-theme.css
 *
 * Broad but deliberately conservative color adapter for legacy mk.bcgsc.ca
 * pages. It recolors ordinary document/UI surfaces while leaving image, SVG,
 * canvas and visualization pixel content untouched.
 */

html.mk-theme-active,
html.mk-theme-active body.mk-responsive {
  background: var(--mk-theme-page) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive #pagewrap-container,
html.mk-theme-active body.mk-responsive #page-content,
html.mk-theme-active body.mk-responsive #page-thoughts {
  background-color: var(--mk-theme-page);
  color: var(--mk-theme-text);
}

/* Ordinary textual content. Explicit data-visualization colors are not
 * targeted; most prose inherits from these common text elements. */
html.mk-theme-active body.mk-responsive :is(
  p, li, dt, dd, blockquote, address, legend, label,
  h1, h2, h3, h4, h5, h6,
  .sectiontitle, .caption, .pull, .pullmed, .pulllarge,
  .thought, .oneproject, .project, .projectfocus,
  #thoughts, #projects, #sidelinks
) {
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive :is(
  .small, .grey, .muted, .caption, .masthead-credit,
  #quotes, .crumb, .crumb a
) {
  color: var(--mk-theme-muted) !important;
}

/* Ordinary hyperlinks use the theme's authored blue/orange roles. */
html.mk-theme-active body.mk-responsive a:not(.mk-theme-preserve) {
  color: var(--mk-theme-link);
}

html.mk-theme-active body.mk-responsive a:not(.mk-theme-preserve):hover,
html.mk-theme-active body.mk-responsive a:not(.mk-theme-preserve):focus-visible {
  color: var(--mk-theme-link-hover);
}

/* Shared separators and legacy section rules. */
html.mk-theme-active body.mk-responsive :is(.bbot1, .btop1) {
  border-color: var(--mk-theme-line) !important;
}

html.mk-theme-active body.mk-responsive hr,
html.mk-theme-active body.mk-responsive .separator {
  border-color: var(--mk-theme-line) !important;
}

/* Preamble links and the debug theme status control. */
body.mk-responsive #preamble.mk-theme-status-enabled {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

body.mk-responsive #preamble.mk-theme-status-enabled .mk-preamble-links {
  grid-column: 2;
  justify-self: center;
  white-space: nowrap;
}

body.mk-responsive #preamble.mk-theme-status-enabled #mk-theme-status {
  grid-column: 3;
  justify-self: end;
}

#mk-theme-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: "Open Sans", helvetica, verdana, sans-serif;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

#mk-theme-status .mk-theme-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff200;
}

/* The original site is not a theme variant, so omit the theme swatch. */
html:not(.mk-theme-active) #mk-theme-status .mk-theme-swatch {
  display: none;
}

#mk-theme-status label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: inherit;
}

#mk-theme-status select,
#mk-theme-status button {
  box-sizing: border-box;
  height: 26px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  background: #eee;
  color: #333;
  font: 600 10px/1 "Open Sans", helvetica, verdana, sans-serif;
}

#mk-theme-status select {
  max-width: 190px;
  padding: 0 24px 0 7px;
}

#mk-theme-status button {
  padding: 0 7px;
  cursor: pointer;
  text-transform: uppercase;
}

html.mk-theme-active body.mk-responsive #preamble a,
html.mk-theme-active body.mk-responsive #mk-theme-status select,
html.mk-theme-active body.mk-responsive #mk-theme-status button {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-panel) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive #preamble a:hover,
html.mk-theme-active body.mk-responsive #preamble a:focus-visible,
html.mk-theme-active body.mk-responsive #mk-theme-status button:hover,
html.mk-theme-active body.mk-responsive #mk-theme-status button:focus-visible {
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
  text-decoration: none;
}

html.mk-theme-active body.mk-responsive #preamble a.piday {
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}

html.mk-theme-active body.mk-responsive #preamble a.piday:hover,
html.mk-theme-active body.mk-responsive #preamble a.piday:focus-visible {
  background: var(--mk-theme-link-hover) !important;
  color: var(--mk-theme-secondary-text) !important;
}

html.mk-theme-active body.mk-responsive #mk-theme-status {
  color: var(--mk-theme-muted);
}

/* Modern navigation chips / historical tabs. */
html.mk-theme-active body.mk-responsive div.tabmenu a {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-panel) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive div.tabmenu a:hover,
html.mk-theme-active body.mk-responsive div.tabmenu a:focus-visible {
  border-color: var(--mk-theme-link) !important;
  background: var(--mk-theme-card) !important;
  color: var(--mk-theme-link) !important;
}

html.mk-theme-active body.mk-responsive div.tabmenu a.active,
html.mk-theme-active body.mk-responsive div.tabmenu a[aria-current="page"] {
  border-color: var(--mk-theme-link) !important;
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}

/* TOCs, sticky TOCs and heading anchors. */
html.mk-theme-active body.mk-responsive .mk-toc-shell,
html.mk-theme-active body.mk-responsive .mk-toc-shell .toc,
html.mk-theme-active body.mk-responsive .mk-toc-toggle {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-page) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive .mk-toc-toggle:hover,
html.mk-theme-active body.mk-responsive .mk-toc-toggle:focus-visible {
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}

html.mk-theme-active body.mk-responsive .toc a.mk-toc-current,
html.mk-theme-active body.mk-responsive .toc a[aria-current="location"] {
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive .toc a.mk-toc-current::before,
html.mk-theme-active body.mk-responsive .toc a[aria-current="location"]::before {
  color: var(--mk-theme-link) !important;
}

/* Breadcrumbs and back-to-top affordances. */
html.mk-theme-active body.mk-responsive a.crumb-in-trail,
html.mk-theme-active body.mk-responsive div.tocsection div.top,
html.mk-theme-active body.mk-responsive div#crumb-trail-inner div.top {
  background: var(--mk-theme-panel) !important;
  color: var(--mk-theme-muted) !important;
}

html.mk-theme-active body.mk-responsive div#crumb-trail-inner a.crumb0,
html.mk-theme-active body.mk-responsive div#crumb-trail-inner a.crumb1,
html.mk-theme-active body.mk-responsive div#crumb-trail-inner a.crumb2,
html.mk-theme-active body.mk-responsive div#crumb-trail-inner a.crumb3,
html.mk-theme-active body.mk-responsive div#crumb-trail-outer a {
  background: var(--mk-theme-panel) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive a.crumb-in-trail:hover,
html.mk-theme-active body.mk-responsive .top a:hover span {
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}

/* News/thoughts and update/event metadata. */
html.mk-theme-active body.mk-responsive #page-thoughts,
html.mk-theme-active body.mk-responsive div#thoughts {
  border-color: var(--mk-theme-line) !important;
}

html.mk-theme-active body.mk-responsive .events .updateitem {
  border-color: var(--mk-theme-line) !important;
}

html.mk-theme-active body.mk-responsive .events .date {
  color: var(--mk-theme-muted) !important;
}

html.mk-theme-active body.mk-responsive .events .tag {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-panel) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive .events-future .updateitem {
  border-left-color: var(--mk-theme-link) !important;
}

html.mk-theme-active body.mk-responsive .events-today .updateitem {
  border-left-color: var(--mk-theme-link-hover) !important;
  background: var(--mk-theme-panel) !important;
}

/* Common textual surfaces. */
html.mk-theme-active body.mk-responsive :is(pre, code, kbd, samp, .email, #newsflash) {
  border-color: var(--mk-theme-line) !important;
  background-color: var(--mk-theme-panel) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive table,
html.mk-theme-active body.mk-responsive th,
html.mk-theme-active body.mk-responsive td {
  border-color: var(--mk-theme-line) !important;
  color: var(--mk-theme-text);
}

html.mk-theme-active body.mk-responsive :is(input, select, textarea, button) {
  border-color: var(--mk-theme-line);
  background-color: var(--mk-theme-input);
  color: var(--mk-theme-text);
}

html.mk-theme-active body.mk-responsive ::selection {
  background: var(--mk-theme-link);
  color: var(--mk-theme-accent-text);
}

/* Preserve the black-text institutional logo assets on dark themes without
 * altering photographs, posters, figures, canvas or SVG content generally. */
html[data-mk-theme-appearance="dark"] body.mk-responsive #header img[src*="gsc-logo-black-text"],
html[data-mk-theme-appearance="dark"] body.mk-responsive #header img[src*="phsa-black"] {
  filter: invert(1) grayscale(1) brightness(1.8);
}

@media (max-width: 700px) {
  body.mk-responsive #preamble.mk-theme-status-enabled {
    grid-template-columns: 1fr auto;
    row-gap: 7px;
  }

  body.mk-responsive #preamble.mk-theme-status-enabled .mk-preamble-links {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.mk-responsive #preamble.mk-theme-status-enabled #mk-theme-status {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
 * Legacy component contrast adapters
 * -------------------------------------------------------------------------- */

/* Project-focus captions carry an explicit #333 in the historical stylesheet. */
html.mk-theme-active body.mk-responsive div.projectfocus div {
  border-color: var(--mk-theme-line) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive div.projectfocus div :is(span, small, strong, em) {
  color: inherit !important;
}

/* Icon buttons and breadcrumb chips should use the theme's authored control
 * fill rather than disappearing into a dark panel. --mk-theme-fill-text is
 * calculated by mk-theme.js for contrast against that fill. */
html.mk-theme-active body.mk-responsive :is(
  #crumb-trail-outer a.crumb-in-trail,
  #crumb-trail-inner a.crumb-in-trail,
  div.tocsection div.top,
  div#crumb-trail-inner div.top
) {
  background: var(--mk-theme-fill) !important;
  color: var(--mk-theme-fill-text) !important;
}

html.mk-theme-active body.mk-responsive :is(
  #crumb-trail-outer a.crumb-in-trail,
  #crumb-trail-inner a.crumb-in-trail,
  div.tocsection div.top,
  div#crumb-trail-inner div.top
) .material-icons-round {
  color: inherit !important;
}

html.mk-theme-active body.mk-responsive .crumb-in-trail-delim {
  color: var(--mk-theme-muted) !important;
}

html.mk-theme-active body.mk-responsive :is(
  #crumb-trail-outer a.crumb-in-trail,
  #crumb-trail-inner a.crumb-in-trail,
  div.tocsection div.top a
):hover,
html.mk-theme-active body.mk-responsive :is(
  #crumb-trail-outer a.crumb-in-trail,
  #crumb-trail-inner a.crumb-in-trail,
  div.tocsection div.top a
):focus-visible {
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}

/* Update metadata may contain nested spans/anchors with historical light
 * backgrounds or inherited themed link colors. Theme the whole passive chip. */
html.mk-theme-active body.mk-responsive .events .tag,
html.mk-theme-active body.mk-responsive .events .tag :is(a, span, strong, em) {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-card) !important;
  color: var(--mk-theme-text) !important;
  text-decoration: none !important;
}

html.mk-theme-active body.mk-responsive .events .tag a:hover,
html.mk-theme-active body.mk-responsive .events .tag a:focus-visible {
  background: var(--mk-theme-fill) !important;
  color: var(--mk-theme-fill-text) !important;
}

/* --------------------------------------------------------------------------
 * Masthead theme adapter
 * -------------------------------------------------------------------------- */

/* The dependency-free masthead intentionally ships with light fallback
 * surfaces. Once a site theme is active, those surfaces and textual controls
 * should follow the selected palette while the masthead artwork itself remains
 * untouched. */
html.mk-theme-active body.mk-responsive .mk-masthead-stage,
html.mk-theme-active body.mk-responsive .mk-masthead-slide {
  background-color: var(--mk-theme-page) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead-caption {
  background: var(--mk-theme-page) !important;
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead :is(
  .masthead-title, .masthead-desc
) {
  color: var(--mk-theme-text) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead .masthead-title a {
  color: var(--mk-theme-link) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead .masthead-credit,
html.mk-theme-active body.mk-responsive .mk-masthead-pagination {
  color: var(--mk-theme-muted) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead-dot {
  background: var(--mk-theme-line) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead-dot.is-active,
html.mk-theme-active body.mk-responsive .mk-masthead-dot[aria-current="true"] {
  background: var(--mk-theme-link) !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead a.image-purchase.mk-masthead-see-all {
  border-color: var(--mk-theme-line) !important;
  background: var(--mk-theme-fill) !important;
  color: var(--mk-theme-fill-text) !important;
  text-decoration: none !important;
}

html.mk-theme-active body.mk-responsive .mk-masthead a.image-purchase.mk-masthead-see-all:hover,
html.mk-theme-active body.mk-responsive .mk-masthead a.image-purchase.mk-masthead-see-all:focus-visible {
  border-color: var(--mk-theme-link) !important;
  background: var(--mk-theme-link) !important;
  color: var(--mk-theme-accent-text) !important;
}