/* Brand palette from the logo: navy frame, teal faces, gold core. */
:root {
  --mr-navy: #143e69;
  --mr-teal: #22b2c4;
  --mr-teal-light: #a6f5ef;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0b6f86;
  --md-accent-fg-color: #08566a;
  --md-accent-fg-color--transparent: #08566a1a;
  --mr-heading-gradient: linear-gradient(120deg, var(--mr-navy) 10%, #0b6f86 90%);
  --mr-card-border: #0b6f8626;
  --mr-glow: #ffd25e55;
}

[data-md-color-scheme="slate"] {
  /* Text on the bright dark-mode teal, such as primary buttons, needs navy rather than white to stay readable. */
  --md-primary-fg-color: #4cc9d6;
  --md-primary-bg-color: #081a2e;
  --md-accent-fg-color: #7fe3ea;
  --md-accent-bg-color: #081a2e;
  --md-accent-fg-color--transparent: #7fe3ea1a;
  --md-typeset-a-color: #5fd3de;
  --mr-heading-gradient: linear-gradient(120deg, #ffffff 15%, var(--mr-teal-light) 55%, var(--mr-teal) 95%);
  --mr-card-border: #4cc9d626;
  --mr-glow: #ffd25e33;
}

/* Hero on the home page. */
.mr-hero {
  position: relative;
  padding: 1.5rem 0 1rem;
  text-align: center;
}

.mr-hero::before {
  position: absolute;
  top: -1rem;
  left: 50%;
  z-index: -1;
  width: min(22rem, 100%);
  height: 14rem;
  background: radial-gradient(closest-side, var(--mr-glow), transparent);
  transform: translateX(-50%);
  content: "";
}

.mr-hero img {
  filter: drop-shadow(0 0.6rem 1.4rem #081a2e40);
}

.md-typeset .mr-hero h1 {
  margin: 0.8rem 0 0.4rem;
  font-size: 2.8em;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--mr-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.md-typeset .mr-hero .mr-tagline {
  margin: 0 0 0.6rem;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.4;
}

.md-typeset .mr-hero .mr-lede {
  max-width: 40rem;
  margin: 0 auto 1.4rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .mr-hero .md-button {
  margin: 0.25rem 0.2rem;
}

/* The theme fades hovered and focused buttons, which makes their text hard to read, so they fill with the accent color instead. */
.md-typeset .md-button:is(:focus, :hover) {
  background-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  opacity: 1;
}

.md-typeset .mr-video {
  max-width: 52rem;
  margin: 1.5rem auto 2rem;
}

.md-typeset .mr-video video {
  display: block;
  border: 1px solid var(--mr-card-border);
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2rem #081a2e33;
}

/* Cards: a quiet brand-tinted border and icon. */
.md-typeset .grid.cards > ul > li {
  border-color: var(--mr-card-border);
}

.md-typeset .grid.cards .lg {
  color: var(--md-primary-fg-color);
}

/* The reasons to choose MindRoom are long, so they get two columns. */
.md-typeset .mr-why.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}