/*
 * ===========================================
 * Pelagos Documentation - Custom Styles
 * ===========================================
 *
 * Table of Contents:
 * 1. Global heading styles
 * 2. Navigation sidebar
 *    2.1 Section titles
 *    2.2 Active links
 *    2.3 Section spacing
 *    2.4 Section headings
 *    2.5 Emoji styles (commented)
 * 3. Mobile navigation
 * ===========================================
 */

/* ------------------------------------------
   1. GLOBAL HEADING STYLES
   ------------------------------------------ */

/* Header: full logotype, hide MkDocs site title */
[data-md-color-primary="indigo"] .md-header {
  background-color: #303f9f;
  color: #fff;
}

.md-header__button,
.md-header__topic,
.md-header__option .md-icon {
  color: inherit;
}

.md-header__inner {
  display: flex;
  align-items: center;
}

.md-header__button.md-logo {
  flex: 0 1 8.5rem;
  width: auto;
  max-width: min(8.5rem, 40vw);
  padding: 0;
  margin: 0 0.4rem 0 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

/* Keep layout space, hide "Pelagos Documentation" text */
.md-header__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.md-header__title .md-header__ellipsis,
.md-header__title .md-header__topic {
  display: none;
}

.md-header__inner > label.md-header__button[for="__drawer"] {
  margin-left: 0;
  flex-shrink: 0;
}

.md-header__inner > .md-header__option,
.md-header__inner > label.md-header__button[for="__search"] {
  flex-shrink: 0;
}

/* Increase the boldness of all headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900 !important;  /* Can use 700, 800, or 900 for different boldness levels */
}

/* Optional class for extra-bold headers (commented out)
 * .bold-header {
 *     font-weight: 900 !important;
 * }
 */

/* ------------------------------------------
   2. NAVIGATION SIDEBAR
   ------------------------------------------ */

/* 2.1 Navigation section titles */
.md-nav__title {
    font-weight: 200;
    font-size: 1.1rem;
    /* color: var(--md-primary-fg-color); */  /* Theme color - currently disabled */
}

/* 2.2 Active links (for emoji sections) */
.md-nav__link--active {
    font-weight: 600;
}

/* 2.3 Spacing between sidebar sections */
.md-nav__item--section {
    margin-top: 1.0em;
}

/* 2.4 Section headings in sidebar */
.md-nav__item--section > .md-nav__link {
    font-weight: 700;
    font-size: 0.75rem;          /* 12px if base is 16px */
    color: var(--md-primary-fg-color);
    border-bottom: 2px solid var(--md-primary-fg-color);  /* Underline the title */
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}

/* 2.5 Emoji styles in navigation (commented out)
 * .md-nav__link .emojione,
 * .md-nav__link .twemoji {
 *     margin-right: 0.7rem;
 * }
 */

.md-nav__item .md-nav__list {
    margin-left: 16px !important;
}

/* ------------------------------------------
   3. MOBILE NAV (assets/javascripts/extra.js)
   ------------------------------------------ */

@media screen and (max-width: 76.234375em) {

  /* Drawer header: full logotype only, hide site_name text */
  .md-nav--primary > .md-nav__title[for="__drawer"] {
    font-size: 0;
    line-height: 0;
    height: auto;
    min-height: 3.6rem;
    padding: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
  }

  .md-nav--primary > .md-nav__title[for="__drawer"] img {
    height: 2rem;
    width: auto;
    max-width: min(8.5rem, 40vw);
    object-fit: contain;
    object-position: left center;
    display: inline-block;
    vertical-align: middle;
    filter: none !important;
  }

  html.nabu-nav-root-intro .md-sidebar--primary .md-nav--primary > .md-nav__list {
    transform: none !important;
  }

  html.nabu-nav-root-intro .md-sidebar--primary .md-nav--primary .md-nav__item--section > .md-nav,
  html.nabu-nav-root-intro .md-sidebar--primary .md-nav--primary .md-nav__item--active > .md-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html.nabu-nav-picking .md-sidebar--primary .md-nav--primary .md-nav__item--section > .md-nav {
    display: none !important;
    visibility: hidden !important;
  }

  html.nabu-nav-picking .md-sidebar--primary .md-nav--primary .md-nav__item--section.nabu-nav-pick > .md-nav {
    display: block !important;
    visibility: visible !important;
  }
}