:root {
    --md-primary-fg-color:        #db5f29;
    --md-primary-fg-color--light: #e4784a;
    --md-primary-fg-color--dark:  #c4521f;
    --md-accent-fg-color:         #5079a5;

    /* Search modal: dark backdrop instead of white for better contrast.
       These variables cascade into the Zensical search shadow DOM. */
    --color-backdrop: 0 0 0;
  }
  :root > * {
    --md-footer-bg-color: white;
    --md-footer-bg-color--dark: white;
  }

/* ── Header / Navbar ──────────────────────────────────────────── */

/* Zensical's modern theme uses --md-default-bg-color--light for the header
   (not --md-primary-fg-color like standard Material), so we override directly */
.md-header {
  background-color: #db5f29 !important;
  color: #ffffff !important;
}

/* Ensure all header text/icons are white on the orange background */
.md-header .md-header__title,
.md-header .md-header__topic,
.md-header .md-ellipsis,
.md-header .md-icon,
.md-header [data-md-component="header-title"] {
  color: #ffffff !important;
}

/* Search input on orange background */
.md-header .md-search__input {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}
.md-header .md-search__input::placeholder {
  color: #9ca3af !important;
}
.md-header .md-search__icon {
  color: #6b7280 !important;
}

/* Tighten the logo link so SVG + badge sit close together */
.md-header__button.md-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-right: 0.25rem;
}

/* Logo SVG sizing */
.md-header__button.md-logo svg {
  height: 2.25rem;
  width: auto;
  display: block;
}

/* Beta badge — mirrors the app navbar's bg-white/20 pill */
.af-beta-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Also style the sidebar logo link the same way */
.md-nav__button.md-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.md-nav__button.md-logo svg {
  height: 2rem;
  width: auto;
}

/* Subtle bottom border on header for depth */
.md-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Search bar — slightly rounded, clean */
.md-search__form {
  border-radius: 6px;
}