/* <ad-disclosure-nav>: the toggle button and the collapsed state.
 * Everything here applies only once JavaScript has added data-enhanced,
 * and only below the breakpoint; otherwise the navigation is a plain list. */

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  min-block-size: var(--target-comfortable);
  padding-inline: var(--space-xs);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font-weight: 650;
}

.site-nav__toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.site-nav__toggle-icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.site-nav__toggle-icon line {
  transform-origin: center;
  transition:
    rotate var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon line:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon line:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon line:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

@media (width < 48em) {
  /* The element itself disappears from layout so that the toggle button sits
   * next to the logo and the panel takes a full row at the end of the header. */
  ad-disclosure-nav[data-enhanced] {
    display: contents;
  }

  ad-disclosure-nav[data-enhanced] .site-nav__toggle {
    display: inline-flex;
    order: 2;
    margin-inline-start: auto;
  }

  ad-disclosure-nav[data-enhanced] .site-nav__nav {
    order: 20;
    inline-size: 100%;
  }

  ad-disclosure-nav[data-enhanced]:not([data-open]) .site-nav__nav {
    display: none;
  }

  ad-disclosure-nav[data-enhanced] .site-nav__list {
    flex-direction: column;
    padding-block: var(--space-xs);
    border-block-start: 1px solid var(--border);
  }

  /* Room in front of every item so the current-page dot can sit before the
   * text without shifting the text of the current item. */
  ad-disclosure-nav[data-enhanced] .site-nav__link {
    inline-size: 100%;
    padding-block: var(--space-2xs);
    padding-inline-start: 1.75rem;
  }

  ad-disclosure-nav[data-enhanced] .site-nav__link[aria-current]::after {
    inset-inline: 0.65rem auto;
    inset-block: 50%;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    translate: 0 -50%;
    border-radius: 50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  ad-disclosure-nav[data-enhanced][data-open] .site-nav__nav {
    animation: nav-open var(--duration-base) var(--ease-out);
  }

  @keyframes nav-open {
    from {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }
}