/* ==========================================================================
   Apta Brand Guide — Header & Navigation Layout
   Source: brand-guide/Colors.pdf, Typography.pdf
   ========================================================================== */

/* ---------- Header ---------- */

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--apta-brand-black);
  border-bottom: 1px solid var(--apta-neutral-darker);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="slate"] .md-header__title {
  color: var(--apta-brand-white);
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-md-color-scheme="slate"] .md-header__topic {
  color: var(--apta-brand-white);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-header__topic + .md-header__topic {
  color: var(--apta-neutral-lighter);
  font-weight: 400;
}

/* Header logo */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* ---------- Tabs (top navigation bar) ---------- */

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--apta-neutral-darkest);
  border-bottom: 1px solid var(--apta-neutral-darker);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--apta-neutral-light);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--apta-brand-white);
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: var(--apta-brand-white);
  font-weight: 600;
}

/* ---------- Sidebar Navigation ---------- */

[data-md-color-scheme="slate"] .md-sidebar {
  background-color: var(--apta-neutral-darkest);
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--apta-neutral-light);
  font-size: 0.85rem;
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--apta-brand-white);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: var(--apta-brand-white);
  font-weight: 600;
}

/* Section titles in sidebar */
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link {
  color: var(--apta-neutral-lighter);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Nested nav indent indicator */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  border-left: 2px solid var(--apta-brand-white);
  padding-left: calc(0.6rem - 2px);
}

/* ---------- Search Bar ---------- */

[data-md-color-scheme="slate"] .md-search__form {
  background-color: var(--apta-neutral-darker);
  border-radius: 4px;
  transition: background-color 0.2s;
}

[data-md-color-scheme="slate"] .md-search__form:hover {
  background-color: var(--apta-neutral-dark);
}

[data-md-color-scheme="slate"] .md-search__input {
  background-color: transparent;
  color: var(--apta-neutral-lightest);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--apta-neutral-light);
}

/* Search results */
[data-md-color-scheme="slate"] .md-search-result {
  background-color: var(--apta-neutral-darkest);
}

[data-md-color-scheme="slate"] .md-search-result__item {
  border-bottom: 1px solid var(--apta-neutral-darker);
}

[data-md-color-scheme="slate"] .md-search-result__link:hover {
  background-color: var(--apta-neutral-darker);
}

[data-md-color-scheme="slate"] .md-search-result__meta {
  color: var(--apta-neutral-light);
}

/* ---------- Table of Contents (right sidebar) ---------- */

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: var(--apta-neutral-light);
  font-size: 0.8rem;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover {
  color: var(--apta-brand-white);
}

/* ---------- Mobile nav toggle ---------- */

[data-md-color-scheme="slate"] .md-header__button[for="__drawer"] {
  color: var(--apta-neutral-lighter);
}

[data-md-color-scheme="slate"] .md-header__button[for="__drawer"]:hover {
  color: var(--apta-brand-white);
}

/* ---------- Footer ---------- */

[data-md-color-scheme="slate"] .md-footer {
  background-color: var(--apta-brand-black);
  border-top: 1px solid var(--apta-neutral-darker);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: var(--apta-brand-black);
}

[data-md-color-scheme="slate"] .md-footer-meta__inner {
  color: var(--apta-neutral-light);
  font-size: 0.8rem;
}

/* Footer navigation (prev/next) */
[data-md-color-scheme="slate"] .md-footer__link {
  color: var(--apta-neutral-lighter);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-footer__link:hover {
  color: var(--apta-brand-white);
}

[data-md-color-scheme="slate"] .md-footer__title {
  color: var(--apta-neutral-lighter);
}

[data-md-color-scheme="slate"] .md-footer__direction {
  color: var(--apta-neutral-light);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

/* Footer social links */
[data-md-color-scheme="slate"] .md-social__link {
  color: var(--apta-neutral-light);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-social__link:hover {
  color: var(--apta-brand-white);
}

/* Footer copyright */
[data-md-color-scheme="slate"] .md-copyright {
  color: var(--apta-neutral-light);
  font-size: 0.75rem;
}

[data-md-color-scheme="slate"] .md-copyright a {
  color: var(--apta-neutral-light);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-copyright a:hover {
  color: var(--apta-brand-white);
}

/* ==========================================================================
   Tablet & Desktop Responsiveness (768px+)
   ========================================================================== */

/* ---------- Tablet (768px–1024px): smooth transition from mobile ---------- */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Slightly reduce sidebar width for more content space on tablet */
  [data-md-color-scheme="slate"] .md-sidebar {
    width: 11rem;
  }

  /* Ensure tabs don't overflow on narrow desktop/tablet */
  [data-md-color-scheme="slate"] .md-tabs__list {
    white-space: nowrap;
    overflow-x: auto;
  }
}

/* ---------- Wide desktop (1920px+): prevent excessively wide layouts ---------- */

@media screen and (min-width: 1920px) {
  /* Constrain content area for readability on ultra-wide screens */
  .md-grid {
    max-width: 75rem;
  }
}

/* ==========================================================================
   Mobile Responsiveness (320px–414px)
   ========================================================================== */

/* ---------- Content area: prevent horizontal overflow ---------- */

@media screen and (max-width: 768px) {
  .md-content {
    overflow-x: hidden;
  }

  .md-typeset {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ---------- Footer: stack prev/next links on mobile ---------- */

@media screen and (max-width: 414px) {
  [data-md-color-scheme="slate"] .md-footer__direction {
    font-size: 0.65rem;
  }

  [data-md-color-scheme="slate"] .md-footer__title {
    font-size: 0.85rem;
  }

  [data-md-color-scheme="slate"] .md-footer-meta__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}

/* ---------- Search: ensure full-width on mobile ---------- */

@media screen and (max-width: 414px) {
  [data-md-color-scheme="slate"] .md-search__form {
    border-radius: 0;
  }

  [data-md-color-scheme="slate"] .md-search-result__item {
    padding: 0.5rem 0.75rem;
  }
}