/* ===== Custom primary color ===== */
:root {
  /* Warm orange gradient brand — ties into EnergyPlus / building energy theme */
  --md-primary-fg-color: #e65100;
  --md-primary-fg-color--light: #ff6d00;
  --md-primary-fg-color--dark: #bf360c;
  --md-accent-fg-color: #ff6d00;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #ff6d00;
  --md-primary-fg-color--light: #ff9100;
  --md-primary-fg-color--dark: #e65100;
  --md-accent-fg-color: #ff9100;
}

/* ===== Hide edit/view actions on the landing page — they offset hero centering ===== */
.md-content__inner:has(> .hero) > .md-content__button {
  display: none;
}

/* ===== Hero section on landing page ===== */
.md-typeset .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem 3rem;
  margin-bottom: 2rem;
}

.md-typeset .hero h1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #e65100 0%, #ff6d00 50%, #ff9100 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.md-typeset .hero h1 .headerlink {
  display: none;
}

[data-md-color-scheme="slate"] .md-typeset .hero h1 {
  background: linear-gradient(135deg, #ff6d00 0%, #ff9100 50%, #ffab40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.md-typeset .hero .hero-tagline {
  font-size: 1.25rem;
  color: var(--md-default-fg-color--light);
  max-width: 40rem;
  margin-bottom: 1.5rem;
}

.md-typeset .hero .hero-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.md-typeset .hero .hero-buttons .md-button {
  font-weight: 600;
}

/* ===== Feature grid cards ===== */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ===== Badges row ===== */
.md-typeset .badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.md-typeset .badges img {
  height: 20px;
}

/* ===== Install command box ===== */
.md-typeset .install-cmd {
  max-width: 28rem;
  margin: 0 auto 2rem;
}

/* ===== Feature highlight chips ===== */
.md-typeset .feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.md-typeset .feature-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  border: 1px solid var(--md-accent-fg-color);
}

/* ===== Smoother code blocks ===== */
.md-typeset pre > code {
  border-radius: 0.5rem;
}

/* ===== Admonition styling tweaks ===== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.5rem;
}

/* ===== Tabs rounded ===== */
.md-typeset .tabbed-labels > label {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* ===== Footer social icons ===== */
.md-social__link svg {
  fill: currentcolor;
}