/* ==========================================================================
   Design system: navigation components
   Header, Footer, Side Nav.
   Ported from the designer's export, same class names. Every selector is prefixed with :where(.ds): same specificity as the export, but no effect outside .ds containers.
   Not used yet: the site keeps its legacy header and footer for now.
   ========================================================================== */

/* ---- Header ----
   <header class="header"> · Status Guest (Login + Get started) or Connected (Account + Get started).
   Full-width content, spacing/lg margin. Dark: data-theme="dark". */
:where(.ds) .header {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  height: 72px;
  padding-inline: var(--spacing-lg);
  border-bottom: 1px solid var(--border-quaternary);
  background-color: var(--background-primary);
}

:where(.ds) .header__container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-width: 0;
}

:where(.ds) .header__left,
:where(.ds) .header__right {
  display: flex;
  align-items: center;
}
:where(.ds) .header__left {
  gap: var(--spacing-2xl);
}
:where(.ds) .header__right {
  gap: var(--spacing-md);
}

:where(.ds) .header__logo {
  display: block;
  flex-shrink: 0;
  color: var(--content-primary);
  border-radius: var(--radius-sm);
}

:where(.ds) .header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Nav Item: Default · Open (flipped chevron) · Inactive · Focus */
:where(.ds) .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--size-md);
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  color: var(--content-primary);
  font-size: var(--type-label-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
:where(.ds) .nav-item:not(:has(.icon)) {
  padding-right: var(--spacing-sm);
}
:where(.ds) .nav-item .icon {
  transition: transform var(--duration-base) var(--ease-standard);
}
:where(.ds) .nav-item[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}
:where(.ds) .nav-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
/* Current page / non-active section entry */
:where(.ds) .nav-item--inactive {
  color: var(--content-quaternary);
}

/* A menu is open: the other items become "inactive" (desktop) */
@media (min-width: 1120px) {
  :where(.ds) .header__nav:has(.nav-item[aria-expanded="true"]) .nav-item:not([aria-expanded="true"]) {
    color: var(--content-quaternary);
  }
}

/* Account: MD avatar only. Hover/Pressed = veil, Open = 345 px user menu */
:where(.ds) .account-button {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius-md);
  cursor: pointer;
}
:where(.ds) .account-button .avatar {
  display: flex;
}
:where(.ds) .account-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--background-scrim-light);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
:where(.ds) .account-button:is(:hover, :active, [aria-expanded="true"])::after {
  opacity: 1;
}
:where(.ds) .account-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 0;
}

:where(.ds) .header .dropdown > .menu--user {
  width: 345px;
}

/* Below 1120 px the navigation no longer fits next to the buttons: it moves behind a button */
:where(.ds) .header__menu-toggle {
  display: none;
}
@media (max-width: 1119px) {
  :where(.ds) .header {
    padding-inline: var(--grid-margin);
  }
  :where(.ds) .header__nav {
    display: none;
  }
  :where(.ds) .header__menu-toggle {
    display: inline-flex;
  }
  :where(.ds) .header__left {
    gap: var(--spacing-md);
  }
  :where(.ds) .header__nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-md) var(--grid-margin) var(--spacing-lg);
    border-bottom: 1px solid var(--border-quaternary);
    background-color: var(--background-primary);
  }
  :where(.ds) .header__nav.is-open .nav-item {
    height: var(--size-lg);
  }
  /* In the drawer, submenus open as an accordion rather than a floating panel */
  :where(.ds) .header__nav.is-open .dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  :where(.ds) .header__nav.is-open .dropdown > .menu {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }
  :where(.ds) .header__nav.is-open .dropdown > .menu .menu__item {
    padding-left: var(--spacing-xl);
  }
}
@media (max-width: 767px) {
  /* Label visually hidden but kept for screen readers */
  :where(.ds) .header__right .button .button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  :where(.ds) .header__right .button {
    padding-inline: var(--spacing-sm);
  }
}

/* ---- Footer ----
   <footer class="footer"> + <nav aria-label="Footer"> per column.
   Newsletter (Field + Button), social networks (Icon Button Ghost), separator, 6 Link Group columns. */
:where(.ds) .footer {
  padding: var(--spacing-3xl) var(--grid-margin) var(--spacing-section);
  background-color: var(--background-primary);
  color: var(--content-primary);
}

:where(.ds) .footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

:where(.ds) .footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl) 146px;
}

:where(.ds) .footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  flex: 0 1 586px;
  min-width: 0;
}

:where(.ds) .footer__title {
  font-size: var(--type-display-h6);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
}

:where(.ds) .footer__form {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-md);
}
:where(.ds) .footer__form .field {
  flex: 1;
  min-width: 0;
}

:where(.ds) .footer__social {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-lg);
}
:where(.ds) .footer__social-links {
  display: flex;
  gap: var(--spacing-sm);
}

:where(.ds) .footer__separator {
  height: 1px;
  border: 0;
  background-color: var(--border-tertiary);
}

:where(.ds) .footer__columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

:where(.ds) .footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

:where(.ds) .footer__column-title {
  font-size: var(--type-display-h6);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
}

/* Footer / Link Group: Overline + up to 8 Link S links */
:where(.ds) .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md); /* 16 in the Footer (the Link Group component alone uses 8) */
  list-style: none;
  padding: 0;
}
:where(.ds) .footer-links__overline {
  color: var(--content-quaternary);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  :where(.ds) .footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--spacing-2xl);
  }
  :where(.ds) .footer__top {
    gap: var(--spacing-2xl);
  }
  :where(.ds) .footer__newsletter {
    flex-basis: 100%;
  }
}
@media (max-width: 767px) {
  :where(.ds) .footer {
    padding-top: var(--spacing-2xl);
  }
  :where(.ds) .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(.ds) .footer__form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Side Nav ----
   .side-nav + .side-nav__item (--level-2). <nav> + links, aria-current="page" on the current page.
   Collapsible chapter: <button aria-expanded> + chevron. Full column width. */
:where(.ds) .side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  list-style: none;
  padding: 0;
}

:where(.ds) .side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: var(--size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--content-primary);
  font-size: var(--type-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .side-nav__label {
  flex: 1;
  min-width: 0;
}

:where(.ds) .side-nav__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-standard);
}
:where(.ds) .side-nav__item[aria-expanded="true"] .side-nav__chevron {
  transform: rotate(90deg);
}

:where(.ds) .side-nav__item:hover {
  background-color: var(--background-primary-hover);
}
:where(.ds) .side-nav__item[aria-current="page"] {
  background-color: var(--background-tertiary);
}
:where(.ds) .side-nav__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}

/* Level 2: indent, regular tertiary text */
:where(.ds) .side-nav__item--level-2 {
  padding-left: var(--spacing-xl);
  color: var(--content-tertiary);
  font-weight: var(--font-weight-regular);
}
:where(.ds) .side-nav__item--level-2:is(:hover, :focus-visible) {
  color: var(--content-primary);
}
:where(.ds) .side-nav__item--level-2[aria-current="page"] {
  color: var(--content-primary);
  font-weight: var(--font-weight-bold);
}

:where(.ds) .side-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
}
:where(.ds) .side-nav__group[hidden] {
  display: none;
}