/* Smithsonian palette, from logo.si.edu/visual-styles/color */
:root {
  --si-yellow: #ffcd00;
  --si-blue: #009cde;          /* primary sky blue: accents on dark, hover; too light for text on white */
  --si-black: #101820;
  --si-navy: #002554;
  --si-dark-blue: #165c7d;
  --si-red: #f0515a;
  --si-grey-1: #efefef;
  --si-grey-2: #e2e8ec;
  --si-grey-3: #d0d7de;
  --si-grey-4: #75787b;
  --si-grey-5: #333f48;

  --md-primary-fg-color: var(--si-dark-blue);
  --md-primary-fg-color--light: var(--si-blue);
  --md-primary-fg-color--dark: var(--si-navy);
  --md-accent-fg-color: var(--si-blue);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--si-blue);
  --md-accent-fg-color: #74d1ea;
  --md-default-bg-color: var(--si-black);
  --si-surface: color-mix(in srgb, var(--si-black), var(--si-navy) 35%);
  --si-surface-hover: color-mix(in srgb, var(--si-black), var(--si-navy) 55%);
}

/* ------------------------------------------------------------------ */
/* Announcement bar: yellow bar with navy pill for maintenance and info,
   red bar for outages. Content comes from extra.announce in mkdocs.yml
   via overrides/main.html. */
[data-md-component="announce"] {
  background: var(--si-yellow);
  color: var(--si-black);
}
[data-md-component="announce"]:has(.hydra-announce--outage) {
  background: var(--si-red);
}
[data-md-component="announce"] .md-banner {
  background: transparent;
  color: inherit;
}
.hydra-announce {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit !important;
  font-size: 0.68rem;
  text-decoration: none !important;
}
.hydra-announce__label {
  flex: 0 0 auto;
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  background: var(--si-navy);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
}
.hydra-announce--outage .hydra-announce__label {
  background: var(--si-black);
  color: #fff;
}
.hydra-announce__action {
  flex: 0 0 auto;
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .hydra-announce__action { display: none; }
}

/* ------------------------------------------------------------------ */
/* Full-bleed landing page hero: navy band edge to edge under the tabs,
   the photo of the racks from the landing site behind a navy gradient
   that is nearly solid on the text half. The photo layer is "fixed", so it
   is sized and placed against the window as on the landing page, and the
   band shows the slice of it that lies behind,
   text kept on the 61rem page grid by .hero__inner. */
.md-typeset .hero {
  background:
    linear-gradient(90deg, rgba(0, 37, 84, .96) 0%, rgba(0, 37, 84, .88) 42%, rgba(0, 37, 84, .45) 100%),
    url("../assets/hero-adc.jpg") center center / cover no-repeat fixed,
    var(--si-navy);
  color: #fff;
  margin: -2.4rem calc(50% - 50vw) 1.5rem;
  padding: 1.8rem 0 2rem;
}
.md-typeset .hero__inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}
.md-typeset .hero__kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 0.2rem;
}
.md-typeset .hero h1 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  font-size: 1.8rem;
  margin: 0 0 0.9rem;
}
.md-typeset .hero h1 .headerlink {
  display: none;
}
.md-typeset .hero__name {
  position: relative;
}
.md-typeset .hero__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.6rem;
  height: 3px;
  background: var(--si-yellow);
}
.md-typeset .hero .hydra-status {
  margin-bottom: 0.7rem;
}
.md-typeset .hero p {
  max-width: 51rem;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}
@media screen and (max-width: 59.9em) {
  .md-typeset .hero {
    background: var(--md-primary-fg-color--dark);
  }
}
.md-content:has(.hero) .md-content__button {
  display: none;
}
.md-container {
  overflow-x: clip;
}

/* Cluster status pill beside the cluster name; state from extra.announce
   via the CSS variables set in overrides/main.html */
.md-typeset .hydra-status::after {
  content: var(--hydra-status-label);
  display: inline-block;
  padding: 0.14rem 0.6rem 0.14rem 1.05rem;
  border-radius: 1rem;
  background: var(--hydra-status-bg);
  background-image: radial-gradient(circle at 0.5rem 50%, var(--hydra-status-fg) 0.17rem, transparent 0.2rem);
  color: var(--hydra-status-fg);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Landing page cards: three columns, titles are the links, tight spacing */
.md-typeset .grid {
  gap: 0.6rem;
}
@media screen and (min-width: 60em) {
  .md-typeset .grid.cards { grid-template-columns: repeat(3, 1fr); }
}
.md-typeset .grid.cards .lg.middle {
  color: var(--md-primary-fg-color);
}
.md-typeset .grid.cards > ul > li,
.md-typeset .grid .card {
  padding: 0.7rem 0.9rem;
}
.md-typeset .grid.cards > ul > li hr {
  margin: 0.5rem 0;
}
.md-typeset .grid.cards > ul > li p,
.md-typeset .grid .card p,
.md-typeset .grid .card ul {
  margin: 0.35rem 0;
}
.md-typeset .grid.cards > ul > li > p:first-child {
  margin-top: 0;
}
.md-typeset .grid.cards > ul > li > p:first-child a {
  color: var(--md-default-fg-color);
  text-decoration: none;
  font-weight: 700;
}
.md-typeset .grid.cards > ul > li:hover > p:first-child a {
  color: var(--md-primary-fg-color);
}

/* Bottom row: help and news as tinted panels, set apart from the six cards */
.md-typeset .grid.meta {
  margin-top: 1.5rem;
}
.md-typeset .grid.meta .card {
  background: var(--si-grey-2);
  border: 0;
  border-radius: 0.4rem;
  padding: 0.9rem 1.1rem;
}
[data-md-color-scheme="slate"] .md-typeset .grid.meta .card {
  background: var(--si-surface);
}
.md-typeset .grid .card h2 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

/* Card with one link: the heading is the link, the whole card is the click target */
.md-typeset .grid .card--link {
  position: relative;
}
.md-typeset .grid .card--link h2 a:not(.headerlink) {
  color: inherit;
  text-decoration: none;
}
.md-typeset .grid .card--link h2 a:not(.headerlink)::after {
  content: "";
  position: absolute;
  inset: 0;
}
.md-typeset .grid .card h2 .headerlink {
  display: none;
}
.md-typeset .grid .card--link:hover {
  background: var(--si-grey-3);
}
[data-md-color-scheme="slate"] .md-typeset .grid .card--link:hover {
  background: var(--si-surface-hover);
}
/* News card: one line per entry, ellipsis if longer */
.md-typeset .grid .card--link p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* Content tabs: labels read as tabs; active tab white with a yellow top edge */
.md-typeset .tabbed-set {
  margin: 1.5rem 0;
}
.md-typeset .tabbed-labels {
  gap: 0.2rem;
  box-shadow: none;
  border-bottom: 1px solid var(--si-grey-3);
}
.md-typeset .tabbed-labels::before,
.md-typeset .tabbed-labels::after {
  display: none;                                  /* theme's sliding underline */
}
.md-typeset .tabbed-labels > label {
  padding: 0.4rem 0.9rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--si-grey-4);
  background: var(--si-grey-1);
  border: 1px solid var(--si-grey-3);
  border-bottom: none;
  border-radius: 0.3rem 0.3rem 0 0;
  margin-bottom: -1px;
  box-shadow: none;
}
.md-typeset .tabbed-labels > label:hover {
  color: var(--si-black);
  background: var(--si-grey-2);
}
/* Active label: the theme pairs input N with label N by position */
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  color: var(--si-black);
  background: #fff;
  border-bottom: 1px solid #fff;
  box-shadow: inset 0 3px 0 var(--si-yellow);
}
.md-typeset .tabbed-content {
  padding: 0.6rem 1.2rem 0.2rem;
  border: 1px solid var(--si-grey-3);
  border-top: none;
  border-radius: 0 0 0.3rem 0.3rem;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels { border-color: var(--si-grey-5); }
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label {
  color: #a3aab0; background: var(--si-surface); border-color: var(--si-grey-5);
}
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label:hover { color: #fff; background: var(--si-surface-hover); }
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
[data-md-color-scheme="slate"] .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  color: #fff; background: var(--si-black); border-bottom-color: var(--si-black);
}
[data-md-color-scheme="slate"] .md-typeset .tabbed-content { border-color: var(--si-grey-5); }

/* ------------------------------------------------------------------ */
/* Footer bar in Smithsonian black, both schemes, as on the landing site. */
.md-footer-meta {
  background: var(--si-black);
  --md-footer-fg-color: #fff;
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.8);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
}
.md-footer-meta .md-copyright,
.md-footer-meta .md-copyright__highlight {
  color: rgba(255, 255, 255, 0.6);
}
/* The theme colours footer links with
   html .md-footer-meta.md-typeset a:not(:focus, :hover), in a style block
   that loads after this file, so these selectors carry "body" to outrank it. */
html body .md-footer-meta.md-typeset a:not(:focus, :hover),
html body .md-footer-meta .md-social__link:not(:focus, :hover) {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
html body .md-footer-meta.md-typeset a:is(:focus, :hover),
html body .md-footer-meta .md-social__link:is(:focus, :hover) {
  color: #fff;
  text-decoration: underline;
}
html body .md-footer-meta .md-social__link svg {
  fill: currentcolor;
}