/**
 * In-Page Navigation Component
 *
 * Mobile: sticky bar at the top, one heading visible, tap to expand.
 * Desktop (≥ 1200 px): all links in one row.
 */

/* ── Root ── */
.in-page-navigation {
  --menu-item-gap: var(--spacing-500, 40px);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ambience-100, #f0f0f0);
  border-bottom: var(--border-width-regular, 2px) solid var(--ambience-500, #dbd4ce);
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
}

/* ── Nav wrapper ── */
.in-page-navigation__nav {
  position: relative;
}

/* ── Mobile toggle button ── */
.in-page-navigation__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-200) var(--spacing-300);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
  text-align: left;
  gap: var(--spacing-200, 16px);
}

.in-page-navigation__toggle:focus-visible {
  outline: 2px solid var(--trust, #550a2d);
  outline-offset: -2px;
}

.in-page-navigation__current {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chevron ── */
.in-page-navigation__chevron {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-page-navigation.is-expanded .in-page-navigation__chevron {
  transform: rotate(180deg);
}

/* ── Dropdown list (mobile) ── */
/* Accordion effect via CSS grid: the row track animates 0fr → 1fr. Grid
   resolves "fr" against the row's natural content height, so this grows
   to fit the list with no JS measuring.
   The element carrying padding (.list) can't be the grid item that
   collapses: a box's own padding is never trimmed by "overflow: hidden"
   or by shrinking its grid row — that only clips the box's *children*.
   A padded item therefore floors the "0fr" row at padding-height instead
   of 0. So .list-clip is the actual grid item (no padding of its own,
   just overflow: hidden) and .list nests inside it, free to keep its
   padding — the clip wrapper hides it completely when collapsed. */
.in-page-navigation__list-collapse {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-page-navigation.is-expanded .in-page-navigation__list-collapse {
  grid-template-rows: 1fr;
}

.in-page-navigation__list-clip {
  overflow: hidden;
  min-height: 0;
}

.in-page-navigation__list {
  margin: 0;
  padding: var(--spacing-200) var(--spacing-300);
  list-style: none;
  background: var(--ambience-100, #f0f0f0);
  border-bottom: 1px solid var(--ambience-300, #c8c8c8);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

.in-page-navigation__list-item {
  margin: 0;
}

.in-page-navigation__list-link {
  display: block;
  padding: var(--spacing-150, 12px) var(--spacing-300, 24px);
  color: inherit;
  text-decoration: none;
}


.in-page-navigation__list-link:focus-visible {
  outline: 2px solid var(--trust, #550a2d);
  outline-offset: -2px;
}

/*
.in-page-navigation__list-link.is-active {
  font-weight: var(--font-weight-bold, 700);
  color: var(--trust, #550a2d);
}
*/

/* ── Desktop layout ── */
@media (min-width: 1200px) {
  .in-page-navigation {
    position: static;
    padding: var(--spacing-100, 8px) var(--spacing-500, 40px);
    border-bottom: var(--border-width-regular, 2px) solid var(--ambience-500, #dbd4ce);
    background: transparent;

    .container & {
      padding-inline: 0;
    }
  }

  /* Nav takes full grid row when no links slot; with links, it shares */
  .in-page-navigation__nav {
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: var(--menu-item-gap);
  }

  /* Hide the mobile toggle */
  .in-page-navigation__toggle {
    display: none;
  }

  /* Unwrap the mobile accordion grid so the list flows normally */
  .in-page-navigation__list-collapse,
  .in-page-navigation__list-clip {
    display: contents;
  }

  /* List becomes a horizontal flex row, always visible */
  .in-page-navigation__list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    position: static;
    padding: 0;
    gap: var(--spacing-150) var(--menu-item-gap);
    background: transparent;
    box-shadow: none;
    border: none;
  }

  .in-page-navigation__list-link {
    display: flex;
    align-items: center;
    height: 32px;
    padding: var(--spacing-050, 4px) var(--spacing-025, 2px);
    font-size: var(--text-size-button-button-text-m, 22px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--trust, #550a2d);
    line-height: 1.1;
    letter-spacing: -0.264px;
    border-radius: var(--border-radius-s, 2px);
    position: relative;
  }

  /* Active indicator: bottom border */
  /*
  .in-page-navigation__list-link.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--trust, #550a2d);
    border-radius: 1px;
  }
  */


  /* Show the right-panel links slot */
  .in-page-navigation__links {
    display: flex;
    align-items: center;
    gap: var(--menu-item-gap);
    flex-shrink: 0;

    .surface--white &,
    .surface--white > .container__inner > & {

      .link {
        --lnk-color: var(--trust);
        &:hover {
          color: var(--attitude-500);
        }
      }
    }

    .canvas-preview & {
      min-width: 600px;
    }
  }
}

/* In-page navigation inside a container: no vertical padding */
.container-100:has(.in-page-navigation) {
  padding: 0;
  overflow: visible;
}