/* ============================================================
   ESMAP / EPM  —  Option B: Slate + Gold
   Header : #1b3a5c  |  Tabs : #152f4e  |  Content : #fafaf8
   Accent : #C8952C  |  Text  : #1e293b
   ============================================================ */

/* ---------- Color tokens ---------- */
:root {
  --md-primary-fg-color:              #1b3a5c;
  --md-primary-fg-color--light:       #2c4f8a;
  --md-primary-fg-color--dark:        #122840;
  --md-primary-bg-color:              #ffffff;
  --md-accent-fg-color:               #C8952C;
  --md-accent-fg-color--transparent:  rgba(200, 149, 44, 0.12);
  --esmap-gold:                       #C8952C;
  --esmap-navy:                       #002F6C;
  --tab-blue:                         #152f4e;
  --header-bg:                        #1b3a5c;
  --content-bg:                       #fafaf8;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:              #2c4f8a;
  --md-accent-fg-color:               #E8A800;
  --md-default-bg-color:              #111827;
  --md-code-bg-color:                 #1e2a3a;
}

/* ---------- Page background ---------- */
.md-main {
  background-color: var(--content-bg);
}

.md-content {
  background-color: var(--content-bg);
}

/* ---------- Body text ---------- */
.md-typeset {
  color: #1e293b;
}

.md-typeset h1 {
  color: #1b3a5c;
  font-weight: 700;
}

.md-typeset p,
.md-typeset li,
.md-typeset td {
  color: #1e293b;
}

/* ---------- Header — dark slate ---------- */
.md-header {
  background-color: var(--header-bg);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Header icons (search, menu) */
.md-header__button {
  color: rgba(255, 255, 255, 0.85) !important;
}

.md-header__button:hover {
  color: #ffffff !important;
}

/* Logo */
.md-header__button.md-logo {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
}

.md-header__button.md-logo img {
  height: 42px;
  width: auto;
  display: block;
}

/* Site name */
.md-header__topic .md-ellipsis {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* Search bar */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #ffffff;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.md-search__icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Nav tabs — slightly darker than header ---------- */
.md-tabs {
  background-color: var(--tab-blue);
  border-bottom: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.md-tabs__link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.md-tabs__link:hover {
  color: #ffffff;
}

.md-tabs__link--active {
  color: #ffffff !important;
  font-weight: 700;
  border-bottom: 2px solid var(--esmap-gold);
}

/* ---------- Sidebar ---------- */
.md-sidebar {
  background-color: var(--content-bg);
}

.md-sidebar__scrollwrap::after {
  display: none;
}

.md-sidebar--primary .md-nav__title,
.md-sidebar--secondary .md-nav__title {
  --md-primary-fg-color: transparent;
  --md-primary-bg-color: transparent;
  background:       transparent !important;
  background-color: transparent !important;
  color:            #64748b !important;
  box-shadow:       none !important;
  border-bottom:    1px solid #d1dce8 !important;
  font-size:        0.68rem !important;
  font-weight:      700 !important;
  letter-spacing:   0.1em !important;
  text-transform:   uppercase !important;
  padding:          0.7rem 0.6rem 0.4rem !important;
}

.md-nav__link {
  color: #334155;
}

.md-nav__link:hover {
  color: #1b3a5c;
}

.md-nav__link--active {
  color: #1b3a5c !important;
  font-weight: 600;
  border-left: 3px solid #1b3a5c;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #93c5fd !important;
  border-left-color: #93c5fd;
}

/* ---------- Content ---------- */
.md-content__inner {
  max-width: 880px;
}

.md-typeset h2 {
  border-left: 3px solid var(--esmap-gold);
  padding-left: 0.65rem;
  margin-left: -0.8rem;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) th {
  background-color: #1b3a5c;
  color: #ffffff;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(27, 58, 92, 0.05);
}

/* ---------- Code blocks ---------- */
.md-typeset .highlight {
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Admonitions — clean, visible ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
  border-width: 0 0 0 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* Title bar */
.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Neutral types — navy border, light navy background */
.md-typeset .note,
.md-typeset .info,
.md-typeset .abstract,
.md-typeset .summary,
.md-typeset .tip,
.md-typeset .hint,
.md-typeset .success,
.md-typeset .check,
.md-typeset .question,
.md-typeset .help,
.md-typeset .example,
.md-typeset details {
  border-color: #1b3a5c !important;
  background-color: rgba(27, 58, 92, 0.05) !important;
}

.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title,
.md-typeset .example > .admonition-title,
.md-typeset details > summary {
  background-color: rgba(27, 58, 92, 0.08) !important;
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .example > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: #1b3a5c !important;
}

/* Warning types — gold border, light gold background */
.md-typeset .warning,
.md-typeset .caution,
.md-typeset .attention {
  border-color: #C8952C !important;
  background-color: rgba(200, 149, 44, 0.05) !important;
}

.md-typeset .warning > .admonition-title,
.md-typeset .caution > .admonition-title,
.md-typeset .attention > .admonition-title {
  background-color: rgba(200, 149, 44, 0.1) !important;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .attention > .admonition-title::before {
  background-color: #C8952C !important;
}

/* Danger types — muted red border, light red background */
.md-typeset .danger,
.md-typeset .error,
.md-typeset .failure,
.md-typeset .bug {
  border-color: #b03a2e !important;
  background-color: rgba(176, 58, 46, 0.05) !important;
}

.md-typeset .danger > .admonition-title,
.md-typeset .error > .admonition-title,
.md-typeset .failure > .admonition-title,
.md-typeset .bug > .admonition-title {
  background-color: rgba(176, 58, 46, 0.08) !important;
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .error > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .bug > .admonition-title::before {
  background-color: #b03a2e !important;
}

/* ---------- Footer ---------- */
.md-footer {
  background-color: var(--esmap-navy);
}

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

.footer-wb-logo {
  height: 24px;
  width: auto;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.md-footer-copyright {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}


/* ---------- Compact Mermaid diagrams ---------- */
.compact-diagram .mermaid,
.compact-diagram .mermaid svg {
  transform: scale(0.68);
  transform-origin: top center;
  display: block;
  margin-bottom: -43%;
}

.compact-diagram {
  margin-bottom: -40%;
}

/* ---------- Wide scrollable tables (technology parameter guide) ---------- */
.scrollable-table {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 1em;
}

table.tech-table {
  border-collapse: collapse;
  font-size: 0.82em;
  width: max-content;
  min-width: 100%;
}

table.tech-table th,
table.tech-table td {
  border: 1px solid #d1dce8;
  padding: 5px 9px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

table.tech-table th {
  background-color: #1b3a5c;
  color: #ffffff;
  font-weight: 600;
}

/* ---------- World Bank logo in header ---------- */
.wb-logo-wrapper {
  display: flex;
  align-items: center;
  padding: 0 0.8rem 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 0.5rem;
}

.wb-header-logo {
  height: 26px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  filter: none;
}

.wb-header-logo:hover {
  opacity: 1;
}