/* ================================================================
   EV BMS Blog — Custom Theme
   Calm, minimal, engineering-focused.
   Sections marked with where they override Material defaults.
   ================================================================ */


/* ── 1. Global CSS variable overrides ──────────────────────── */
/*    Overrides Material's bright indigo accent and link color. */

:root {
  --md-typeset-a-color:               #2563eb;
  --md-accent-fg-color:               #2563eb;
  --md-accent-fg-color--transparent:  rgba(37, 99, 235, 0.1);
}


/* ── 2. Header — white, no shadow, thin border ─────────────── */
/*    Material default: 4px coloured box-shadow.               */

.md-header {
  box-shadow:    none;
  border-bottom: 1px solid #e5e7eb;
}

/* Search bar — give a faint grey tint so it reads as an input  */
.md-search__form {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius:    4px;
}


/* ── 3. Left sidebar — light grey bg, compact, muted ───────── */
/*    Material default: white bg, 0.5rem vertical padding on   */
/*    each nav item, 0.7rem font, bright primary on active.    */

.md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: #f8f8f8;
}

/* Tighten vertical density */
.md-nav__link {
  padding-top:    0.28rem;
  padding-bottom: 0.28rem;
}

/* Top-level section labels (Battery, BMS Concepts, …) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-size:   0.72rem;
  font-weight: 600;
  color:       #2a2a2a;
}

/* Second-level page links inside sections */
.md-nav--primary .md-nav__item .md-nav__item .md-nav__link {
  font-size: 0.68rem;
  color:     #555555;
}

/* Active page — muted blue, no background block */
.md-nav__link--active {
  color:       #2563eb !important;
  font-weight: 500;
}

/* Hover — colour shift only, no background */
.md-nav__link:hover {
  color:      #111111;
  background: transparent;
}

/* Expand/collapse arrow — subtler grey */
.md-nav__icon {
  color: #aaaaaa;
}

/* Site title inside the nav sidebar — keep it quiet */
.md-nav--primary .md-nav__title {
  font-size:   0.65rem;
  font-weight: 700;
  color:       #999999;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
}


/* ── 4. Content area — wider readable column ───────────────── */
/*    Material default grid: max-width 61rem (1220px).         */
/*    At 20px base + 12.1rem sidebars each = 736px content.   */
/*    70rem grid gives ~916px content — hits 850-1000px goal.  */

@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 70rem;
  }
}


/* ── 5. Typography — comfortable spacing, clear hierarchy ───── */
/*    Material default line-height: 1.6. Headings lack margin.  */

.md-typeset {
  line-height: 1.75;
  color:       #1f2937;
}

.md-typeset h1 {
  color:         #111827;
  font-weight:   600;
  margin-bottom: 1.4rem;
}

.md-typeset h2 {
  color:          #111827;
  font-weight:    600;
  margin-top:     2.5rem;
  margin-bottom:  0.8rem;
  padding-bottom: 0.35rem;
  border-bottom:  1px solid #e5e7eb;
}

.md-typeset h3 {
  color:       #1f2937;
  font-weight: 600;
  margin-top:  1.8rem;
}

.md-typeset h4 {
  color:       #374151;
  font-weight: 600;
  margin-top:  1.4rem;
}

/* Links — muted blue, underline only on hover */
.md-typeset a {
  color:           #2563eb;
  text-decoration: none;
}

.md-typeset a:hover {
  color:           #1d4ed8;
  text-decoration: underline;
}


/* ── 6. Tables — remove heavy shadow, soften borders ───────── */

.md-typeset table:not([class]) {
  box-shadow: none;
  border:     none;
}

.md-typeset table:not([class]) th {
  background-color: #f3f4f6;
  color:            #111827;
  font-weight:      600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: #e5e7eb;
}


/* ── 7. Admonitions — remove Material's heavy drop-shadow ───── */
/*    Preserves the coloured left border per admonition type.   */

.md-typeset .admonition,
.md-typeset details {
  box-shadow:    none;
  border-radius: 4px;
}


/* ── 8. Footer ─────────────────────────────────────────────── */
/*    With primary: white Material may render footer as white.  */

.md-footer {
  background-color: #f8f8f8;
  border-top:       1px solid #e5e7eb;
}

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


/* ── 9. Right sidebar — TOC visual style ───────────────────── */
/*    Collapsed by default via JS; when open, keep it minimal.  */

.md-nav--secondary .md-nav__link {
  font-size: 0.65rem;
  color:     #6b7280;
}

.md-nav--secondary .md-nav__link--active {
  color:       #2563eb;
  font-weight: 500;
}


/* ================================================================
   Sidebar toggle buttons — desktop only (76.25em ≈ 1220px)
   Fixed buttons at each sidebar's inner edge; JS positions them.
   ================================================================ */

.sidebar-toggle {
  display: none;
}

@media screen and (min-width: 76.25em) {

  /* ── Toggle button ─────────────────────────────────────────── */

  .sidebar-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    top:             50vh;
    transform:       translateY(-50%);
    z-index:         200;
    width:           1.1rem;
    height:          3rem;
    padding:         0;
    border:          1px solid #e5e7eb;
    border-radius:   0.2rem;
    background:      #ffffff;
    color:           #aaaaaa;
    font-size:       0.6rem;
    line-height:     1;
    cursor:          pointer;
    box-shadow:      0 1px 4px rgba(0, 0, 0, 0.08);
    transition:      color 0.15s ease, border-color 0.15s ease;
  }

  .sidebar-toggle:hover {
    color:        #2563eb;
    border-color: #2563eb;
  }

  /* ── Sidebar transitions (enabled after JS sets .transitions-ready) */

  .transitions-ready .md-sidebar--primary,
  .transitions-ready .md-sidebar--secondary {
    transition: width 0.2s ease;
  }

  .transitions-ready .md-sidebar--primary .md-sidebar__scrollwrap,
  .transitions-ready .md-sidebar--secondary .md-sidebar__scrollwrap {
    transition: opacity 0.15s ease;
  }

  /* ── Nav (left) sidebar — collapsed ────────────────────────── */

  .nav-collapsed .md-sidebar--primary {
    width:     0 !important;
    min-width: 0 !important;
    overflow:  hidden;
  }

  .nav-collapsed .md-sidebar--primary .md-sidebar__scrollwrap {
    opacity:        0;
    pointer-events: none;
  }

  /* ── TOC (right) sidebar — collapsed ───────────────────────── */

  .toc-collapsed .md-sidebar--secondary {
    width:     0 !important;
    min-width: 0 !important;
    overflow:  hidden;
  }

  .toc-collapsed .md-sidebar--secondary .md-sidebar__scrollwrap {
    opacity:        0;
    pointer-events: none;
  }
}