/* The home page banner and the cards (overrides/home.html), and the icon cards on other pages. */

/* ---------- the brand's colours: royal blue and gold (mkdocs.yml: primary and accent "custom") ---------- */

[data-md-color-primary="custom"] {
  --md-primary-fg-color: #2346c8;
  --md-primary-fg-color--light: #4a72f0;
  --md-primary-fg-color--dark: #1a3394;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}
/* Gold on white is too faint for a hovered link, so the light scheme hovers in a darker gold (5.0:1). */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #9a6400;
  --md-accent-fg-color--transparent: #9a64001a;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #f5b92e;
  --md-accent-fg-color--transparent: #f5b92e1a;
}
/* Royal blue links are too dark on the slate ground; a lighter royal reads at 7.0:1. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #8fa6ff;
}

/* ---------- header ---------- */

/* Owner, 2026-10-02: a bigger mark and a taller bar, with the mark near the window's left edge and the GitHub box near
   its right edge. The bar's row is not held to the page's centred 61rem grid as the content is; it spans the window,
   0.8rem in from each side (the logo file is cropped to the shield, so that is the shield's own edge). Only where the
   logo shows; narrower screens keep Material's bar. */
@media screen and (min-width: 76.25em) {
  .md-header__inner { max-width: none; padding: 0 0.8rem; }
  .md-header__title { height: 3.2rem; font-size: 1rem; line-height: 3.2rem; }
  .md-header__button.md-logo { margin: 0; padding: 0.4rem 0; }
  .md-header__button.md-logo img { height: 2.4rem; }
  /* Material gives the GitHub box a fixed width with its text on the left, which left a gap at the right end. */
  .md-header__source { width: auto; max-width: none; }
  .md-header__source .md-source__repository { max-width: none; }
  /* Everything that sat under the 2.4rem bar sits under the 3.2rem one. */
  .md-sidebar { top: 3.2rem; }
  .md-typeset :target { --md-scroll-margin: 4.4rem; }
}

/* The project's links beside the GitHub box (overrides/partials/source.html). From 60em the header shows the box;
   it grows to fit the icons and its own text instead of Material's fixed 11.7rem. */
.rg-social { display: flex; align-items: center; gap: 0.9rem; }
.rg-social__link { display: block; color: inherit; opacity: 0.85; transition: opacity 0.25s; }
.rg-social__link:hover, .rg-social__link:focus { opacity: 1; }
.rg-social__link svg { display: block; width: 1.2rem; height: 1.2rem; fill: currentcolor; }
@media screen and (min-width: 60em) {
  .md-header__source { display: flex; align-items: center; gap: 1.2rem; width: auto; max-width: none; }
  .md-header__source .md-source__repository { max-width: none; }
}
/* In the mobile menu the links sit in a row above the GitHub box. */
.md-nav__source .rg-social { padding: 0.6rem 0.8rem 0; }

/* ---------- banner ---------- */

.rg-hero {
  position: relative;
  overflow: hidden;
  padding: 3.6rem 0 3.4rem;
  text-align: center;
  color: var(--md-primary-bg-color);
  /* The brand's royal blue; white text on it passes WCAG AA (7.6:1 at its lightest). */
  background: linear-gradient(160deg, #2346c8 0%, #142a85 100%);
}

/* Angled panels behind the title. */
.rg-hero__shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #fff;
}
.rg-hero__shape--a { opacity: 0.08; clip-path: polygon(0 0, 17% 0, 9% 100%, 0 100%); }
.rg-hero__shape--b { opacity: 0.10; clip-path: polygon(4% 0, 26% 0, 14% 100%, 0 100%, 0 70%); }
.rg-hero__shape--c { opacity: 0.09; clip-path: polygon(78% 0, 100% 0, 100% 100%, 88% 100%, 72% 35%); }

.rg-hero__inner {
  position: relative;
  padding: 0 1rem;
}

.rg-hero__mark {
  display: block;
  width: 7rem;
  height: auto;
  margin: 0 auto 0.4rem;
  filter: drop-shadow(0 6px 14px rgb(8 14 50 / 45%));
}

.rg-hero__title {
  margin: 0.2rem 0 0.4rem;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: inherit;
}

.rg-hero__tagline {
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  font-size: 1.15rem;
  line-height: 1.5;
}

.rg-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* The banner sits outside .md-typeset, where Material's own .md-button styles don't reach. */
.md-button.rg-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--md-primary-bg-color);
  border: 0.1rem solid currentcolor;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.md-button.rg-hero__button:hover,
.md-button.rg-hero__button:focus {
  color: #1a3394;
  background-color: var(--md-primary-bg-color);
  border-color: var(--md-primary-bg-color);
}
.md-button.rg-hero__button--solid {
  color: #1a3394;
  background-color: var(--md-primary-bg-color);
  border-color: var(--md-primary-bg-color);
}
.md-button.rg-hero__button--solid:hover,
.md-button.rg-hero__button--solid:focus {
  color: var(--md-primary-bg-color);
  background-color: transparent;
}
.rg-hero__button-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentcolor;
}

@media screen and (max-width: 44.9375em) {
  .rg-hero { padding: 2.4rem 0 2.2rem; }
  .rg-hero__title { font-size: 2.2rem; }
  .rg-hero__tagline { font-size: 1rem; }
}

/* ---------- cards ---------- */

.rg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 1.2rem 0 2rem;
}
.rg-cards--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.rg-cards--five { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }

.md-typeset a.rg-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem 1.3rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.md-typeset a.rg-card:hover,
.md-typeset a.rg-card:focus {
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-0.1rem);
}
.rg-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.rg-card__icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
  fill: var(--md-primary-fg-color);
}
[data-md-color-scheme="slate"] .rg-card__icon svg { fill: var(--md-primary-fg-color--light); }
.rg-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}
.rg-card__text {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

.md-typeset a.rg-card--small { padding: 1rem; gap: 0.5rem; }
.rg-card--small .rg-card__icon svg { width: 1.5rem; height: 1.5rem; }
.rg-card--small .rg-card__title { font-size: 0.85rem; }

/* The five packages: each card leads with the package's own mark (a square file, the shield filling its height). */
.rg-card__mark {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 0 0.1rem -0.3rem;
  filter: drop-shadow(0 3px 6px rgb(8 14 50 / 25%));
  transition: transform 0.2s;
}
.md-typeset a.rg-card--package:hover .rg-card__mark,
.md-typeset a.rg-card--package:focus .rg-card__mark { transform: scale(1.05); }

.md-typeset h2.rg-section { margin-top: 1.6rem; }
.rg-section__lead { color: var(--md-default-fg-color--light); }

.rg-footnote {
  margin-top: 2.4rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}


/* Material's grid cards (used on Introduction and Configuration Objects): the same lift on hover. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.md-typeset .grid.cards > ul > li:hover { transform: translateY(-0.1rem); }
.md-typeset .grid.cards .lg { width: 1.6rem; height: 1.6rem; }
.md-typeset .grid.cards svg { fill: var(--md-primary-fg-color); }
[data-md-color-scheme="slate"] .md-typeset .grid.cards svg { fill: var(--md-primary-fg-color--light); }

/* Read by screen readers and used by "Skip to content", but not shown. */
.md-typeset .rg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}