/* =============================================================
   construo.css — Custom theme overrides for Construo Docs
   ============================================================= */

/* ── Brand tokens ─────────────────────────────────────────────── */
:root {
  --construo-bronze:    #9C6B2E;
  --construo-bronze-l:  #C4883C;
  --construo-slate-900: #1C2430;
  --construo-slate-800: #253040;
  --construo-stone:     #F7F4EF;
  --construo-green:     #3A6644;
}

/* ── Light mode ───────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  /* Primary colour drives header, tabs, and some nav elements.
     Keep it dark so header text stays white by default. */
  --md-primary-fg-color:        #1C2430;
  --md-primary-fg-color--light: #253040;
  --md-primary-fg-color--dark:  #111820;
  --md-primary-bg-color:        #ffffff;

  --md-accent-fg-color:         #9C6B2E;
  --md-accent-fg-color--light:  #C4883C;

  --md-typeset-a-color:         #9C6B2E;

  --md-code-bg-color:           #EDE8DF;
  --md-code-fg-color:           #1C2430;

  /* Sidebar — explicit light background with dark text */
  --md-nav-background:          #f5f5f5;
}

/* ── Dark mode ────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #C4883C;
  --md-primary-fg-color--light: #D4A060;
  --md-primary-fg-color--dark:  #9C6B2E;
  --md-primary-bg-color:        #1C2430;

  --md-accent-fg-color:         #C4883C;
  --md-typeset-a-color:         #C4883C;

  --md-default-bg-color:        #1C2430;
  --md-default-fg-color:        #EDE8DF;
}

/* ── Header — dark background, white text ─────────────────────── */
.md-header {
  background-color: var(--construo-slate-900);
  box-shadow: 0 1px 0 rgba(156, 107, 46, 0.3);
}

/* Ensure all header text and icons are white */
.md-header__title,
.md-header__button,
.md-header__button .md-icon {
  color: #ffffff;
}

/* ── Tabs — slightly lighter than header ──────────────────────── */
.md-tabs {
  background-color: var(--construo-slate-800);
}

/* Tab text white by default, bronze when active/hovered */
.md-tabs__link {
  color: rgba(255, 255, 255, 0.75);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--construo-bronze-l);
}

/* ── Sidebar navigation — light background, readable text ────── */
.md-nav {
  background-color: transparent;
}

/* Top-level sidebar background */
.md-sidebar__inner {
  background-color: #f5f5f5;
}

/* All nav links: dark text, readable */
.md-nav__link {
  color: #2a2a2a;
}

.md-nav__link:hover {
  color: var(--construo-bronze);
}

/* Active link: bronze */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--construo-bronze) !important;
  font-weight: 600;
}

/* Section titles in sidebar */
.md-nav__title {
  color: #1C2430;
  font-weight: 700;
}

/* ── Tables ───────────────────────────────────────────────────── */
.md-typeset table:not([class]) th {
  background-color: var(--construo-slate-900);
  color: #fff;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(156, 107, 46, 0.25);
  color: #fff;
}

/* ── Code ─────────────────────────────────────────────────────── */
.md-typeset code {
  border-radius: 4px;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: 28px;
  filter: brightness(0) invert(1);
}

/* ── Header title font ────────────────────────────────────────── */
.md-header__title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Footer ───────────────────────────────────────────────────── */
.md-footer {
  background-color: var(--construo-slate-900);
}

.md-footer-meta {
  background-color: #111820;
}