/*
  Performance BIM — Custom MkDocs Material Theme
  Update the color values below to match your brand.
  Primary brand color is used for headers, nav highlights, and links.
  Accent color is used for hover states and interactive elements.
*/

/* ─── Brand Colors ─────────────────────────────────────────────────────────── */
/* TODO: Replace these hex values with your actual brand colors from performancebim.com */

:root {
  --md-primary-fg-color:        #003a70;  /* Dark navy — update to your primary brand color */
  --md-primary-fg-color--light: #f3f5f8;  /* Lighter variant */
  --md-primary-fg-color--dark:  #1d2b36;  /* Darker variant */
  --md-accent-fg-color:         #5f8fb4;  /* Accent — update to your secondary/accent color */
  --md-accent-fg-color--transparent: #5f8fb420;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #2d5986;
  --md-accent-fg-color:         #e67e22;
  --md-default-bg-color:        #1a1f2e;
  --md-typeset-a-color:         #7ec8e3;  /* bright light blue for content links */
}

/* ─── Dark mode link contrast ───────────────────────────────────────────────── */

[data-md-color-scheme="slate"] .md-typeset a {
  color: #7ec8e3;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #aaddf0;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.85);
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(255, 255, 255, 0.75);
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: rgba(255, 255, 255, 0.65);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
  color: #7ec8e3;
}

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

.md-header {
  background-color: var(--md-primary-fg-color--dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.md-header__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-header__button.md-logo {
  padding: 0.3rem 0.4rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
}

/* ─── Navigation Tabs ───────────────────────────────────────────────────────── */

.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* ─── Sidebar ───────────────────────────────────────────────────────────────── */

.md-nav__title {
  font-weight: 600;
}

.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}

/* Subsection group headers (e.g. "Your Workspace", "Application Elements") */
.md-nav__item--section .md-nav__item--section > .md-nav__link {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.4em;
  opacity: 0.8;
}

/* ─── Dark mode bold text ───────────────────────────────────────────────────── */

[data-md-color-scheme="slate"] .md-typeset strong {
  color: #f0f4f8;
}

/* ─── Content ───────────────────────────────────────────────────────────────── */

.md-typeset h1 {
  font-weight: 700;
  color: var(--md-primary-fg-color--dark);
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--md-primary-fg-color--light);
}

.md-typeset h2 {
  font-weight: 600;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
}

/* ─── Admonition customization ──────────────────────────────────────────────── */

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: var(--md-primary-fg-color--transparent, #1a3a5c20);
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */

.md-footer {
  background-color: var(--md-primary-fg-color--dark);
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: white;
}

/* ─── Code blocks ───────────────────────────────────────────────────────────── */

.md-typeset code {
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-primary-fg-color--dark);
  border-radius: 3px;
  padding: 0.1em 0.3em;
}

[data-md-color-scheme="slate"] .md-typeset code {
  color: #e8b88a;
}