/* Presago Design System — Landing
 * Stili della pagina di showcase (NON del DS).
 * Consuma solo token --presago-*. */

/* ─── Skip link ─────────────────────────────────────── */
.presago-skip-link {
  position: absolute;
  top: var(--presago-spacing-100);
  left: var(--presago-spacing-100);
  padding: var(--presago-spacing-100) var(--presago-spacing-200);
  background-color: var(--presago-color-item-primary-idle);
  color: var(--presago-color-text-on-primary);
  font-size: var(--presago-font-size-body-sm);
  font-weight: var(--presago-font-weight-semibold);
  border-radius: var(--presago-radius-md);
  transform: translateY(-200%);
  transition: transform var(--presago-motion-duration-base) var(--presago-motion-easing-emphasized);
  z-index: 100;
  text-decoration: none;
}

.presago-skip-link:focus-visible {
  transform: translateY(0);
}

/* ─── Screen-reader only ────────────────────────────── */
.presago-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.presago-token-tooltip {
  position: fixed;
  max-width: calc(var(--presago-spacing-1000) * 4);
  padding: var(--presago-spacing-150);
  background-color: var(--presago-color-background-overlay);
  color: var(--presago-color-text-default);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-md);
  box-shadow: var(--presago-shadow-lg);
  font-size: var(--presago-font-size-body-xs);
  line-height: var(--presago-line-height-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--presago-spacing-050));
  transition: opacity var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
  z-index: 200;
}

.presago-token-tooltip[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.presago-token-tooltip__title,
.presago-token-toast__title {
  display: block;
  margin-bottom: var(--presago-spacing-050);
  font-weight: var(--presago-font-weight-semibold);
}

.presago-token-tooltip__description,
.presago-token-toast__description {
  display: block;
  margin-bottom: var(--presago-spacing-150);
  color: var(--presago-color-text-subtle);
}

.presago-token-tooltip__list,
.presago-token-toast__list {
  display: grid;
  gap: var(--presago-spacing-075);
  margin: 0;
  padding: 0;
  list-style: none;
}

.presago-token-toast__list {
  margin-bottom: var(--presago-spacing-150);
}

.presago-token-tooltip__list li,
.presago-token-toast__list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--presago-spacing-050) var(--presago-spacing-100);
  align-items: baseline;
}

.presago-token-tooltip__list span,
.presago-token-toast__list span {
  color: var(--presago-color-text-subtle);
}

.presago-token-tooltip__list li > span:last-child,
.presago-token-toast__list li > span:last-child {
  grid-column: 2;
  font-family: var(--presago-font-family-code);
}

.presago-token-tooltip__list code,
.presago-token-toast__list code {
  font-family: var(--presago-font-family-code);
  color: var(--presago-color-text-default);
  word-break: break-word;
}

.presago-token-toast {
  position: fixed;
  right: var(--presago-spacing-300);
  bottom: var(--presago-spacing-300);
  width: min(calc(var(--presago-spacing-1000) * 4), calc(100vw - var(--presago-spacing-600)));
  padding: var(--presago-spacing-150);
  background-color: var(--presago-color-background-overlay);
  color: var(--presago-color-text-default);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-md);
  box-shadow: var(--presago-shadow-lg);
  font-size: var(--presago-font-size-body-xs);
  line-height: var(--presago-line-height-sm);
  opacity: 0;
  transform: translateY(var(--presago-spacing-100));
  transition: opacity var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
  z-index: 210;
}

.presago-token-toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.presago-token-toast__timer {
  height: var(--presago-spacing-025);
  overflow: hidden;
  background-color: var(--presago-color-background-ui);
  border-radius: var(--presago-radius-full);
}

.presago-token-toast__timer-bar {
  width: 100%;
  height: 100%;
  background-color: var(--presago-color-item-primary-idle);
  transform-origin: left center;
}

/* ─── Header ────────────────────────────────────────── */
.presago-landing__header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in srgb, var(--presago-color-background-page) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

.presago-landing__header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--presago-spacing-150) var(--presago-spacing-300);
  display: flex;
  align-items: center;
  gap: var(--presago-spacing-300);
}

.presago-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--presago-spacing-100);
  color: var(--presago-color-text-default);
  font-weight: var(--presago-font-weight-bold);
  font-size: var(--presago-font-size-body-md);
  text-decoration: none;
  letter-spacing: var(--presago-letter-spacing-tight);
}

.presago-landing__brand-mark {
  color: var(--presago-color-text-subtle);
  font-weight: var(--presago-font-weight-regular);
}

.presago-landing__nav {
  display: flex;
  gap: var(--presago-spacing-200);
  margin-inline-start: auto;
}

.presago-landing__nav a:not([href]) {
  cursor: default;
  pointer-events: none;
}

/* ─── Theme toggle ──────────────────────────────────── */
.presago-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: transparent;
  color: var(--presago-color-icon-default);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-md);
  cursor: pointer;
  transition: background-color var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), border-color var(--presago-motion-duration-fast) var(--presago-motion-easing-standard);
}

.presago-theme-toggle:hover {
  background-color: var(--presago-color-background-ui);
}

.presago-theme-toggle__icon {
  transition: opacity var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
}

.presago-theme-toggle__icon--moon {
  position: absolute;
  opacity: 0;
  transform: rotate(-45deg) scale(0.8);
}

.presago-theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

:root[data-theme="dark"] .presago-theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
}

:root[data-theme="dark"] .presago-theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ─── Layout sezioni ────────────────────────────────── */
.presago-landing__main {
  min-height: 60vh;
  animation: presago-page-enter var(--presago-motion-duration-slow) var(--presago-motion-easing-standard);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--presago-motion-duration-slow);
  animation-timing-function: var(--presago-motion-easing-standard);
}

:root[data-page-transition="leaving"] .presago-landing__main {
  opacity: 0;
  transform: translateY(var(--presago-spacing-100));
  transition: opacity var(--presago-motion-duration-base) var(--presago-motion-easing-standard), transform var(--presago-motion-duration-base) var(--presago-motion-easing-standard);
}

@keyframes presago-page-enter {
  from {
    opacity: 0;
    transform: translateY(var(--presago-spacing-100));
  }
}

@media (prefers-reduced-motion: reduce) {
  .presago-landing__main {
    animation: none;
  }

  :root[data-page-transition="leaving"] .presago-landing__main {
    opacity: 1;
    transform: none;
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

.presago-section,
.presago-a11y-banner {
  padding: var(--presago-spacing-800) 0;
  border-bottom: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

.presago-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--presago-spacing-300);
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-400);
}

.presago-section__inner > h3.presago-heading {
  margin-top: var(--presago-spacing-400);
}

.presago-page-heading {
  margin: 0 0 var(--presago-spacing-300);
  padding-inline: var(--presago-spacing-100);
}

.presago-page-heading .presago-heading[data-level="1"] {
  font-size: var(--presago-font-size-heading-h4);
  line-height: var(--presago-line-height-heading-h4);
}

.presago-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--presago-spacing-200);
}

.presago-overview-card {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-100);
  padding: var(--presago-spacing-300);
  background-color: var(--presago-color-background-page);
  color: var(--presago-color-text-subtle);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-lg);
  box-shadow: var(--presago-shadow-xs);
  text-decoration: none;
  transition: border-color var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), box-shadow var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
}

.presago-overview-card:hover {
  border-color: var(--presago-color-border-selected);
  box-shadow: var(--presago-shadow-sm);
  transform: translateY(calc(var(--presago-spacing-025) * -1));
}

.presago-overview-card strong {
  color: var(--presago-color-text-default);
  font-size: var(--presago-font-size-body-xl);
}

.presago-overview-card__kicker {
  color: var(--presago-color-text-brand);
  font-size: var(--presago-font-size-body-xs);
  font-weight: var(--presago-font-weight-semibold);
  letter-spacing: var(--presago-letter-spacing-wide);
  text-transform: uppercase;
}

/* ─── Principles ─────────────────────────────────────── */
.presago-principles {
  background-color: var(--presago-color-background-page);
}

.presago-principles__header {
  max-width: 760px;
}

.presago-principles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--presago-spacing-200);
}

.presago-principle-card,
.presago-do-dont {
  background-color: var(--presago-color-background-ui);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-lg);
  box-shadow: var(--presago-shadow-xs);
}

.presago-principle-card {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-100);
  padding: var(--presago-spacing-300);
}

.presago-do-dont {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
  gap: var(--presago-spacing-300);
  padding: var(--presago-spacing-300);
}

.presago-do-dont__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--presago-spacing-200);
}

.presago-do-dont__column {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-150);
  min-width: 0;
}

.presago-do-dont__label {
  width: fit-content;
  padding: var(--presago-spacing-050) var(--presago-spacing-100);
  border-radius: var(--presago-radius-full);
  font-size: var(--presago-font-size-body-xs);
  font-weight: var(--presago-font-weight-semibold);
  letter-spacing: var(--presago-letter-spacing-wide);
  text-transform: uppercase;
}

.presago-do-dont__label--do {
  background-color: var(--presago-color-item-success-idle);
  color: var(--presago-color-text-on-success);
}

.presago-do-dont__label--dont {
  background-color: var(--presago-color-item-danger-idle);
  color: var(--presago-color-text-on-danger);
}

.presago-do-dont__list {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-150);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--presago-color-text-subtle);
  font-size: var(--presago-font-size-body-sm);
  line-height: var(--presago-line-height-md);
}

.presago-do-dont__list li {
  padding-inline-start: var(--presago-spacing-200);
  border-inline-start: var(--presago-border-width-thick) solid var(--presago-color-border-default);
}

.presago-do-dont__list strong {
  color: var(--presago-color-text-default);
  font-weight: var(--presago-font-weight-semibold);
}

/* ─── A11y banner ───────────────────────────────────── */
.presago-a11y-banner {
  background-color: var(--presago-color-background-ui);
}

.presago-a11y-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--presago-spacing-200);
}

.presago-a11y-item {
  background-color: var(--presago-color-background-page);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-lg);
  padding: var(--presago-spacing-200);
  box-shadow: var(--presago-shadow-xs);
}

.presago-a11y-item > summary {
  display: flex;
  align-items: center;
  gap: var(--presago-spacing-150);
  cursor: pointer;
  list-style: none;
  font-weight: var(--presago-font-weight-semibold);
  color: var(--presago-color-text-default);
}

.presago-a11y-item > summary::-webkit-details-marker { display: none; }

.presago-a11y-item > summary::after {
  content: "▸";
  margin-inline-start: auto;
  color: var(--presago-color-text-subtle);
  transition: transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
}

.presago-a11y-item[open] > summary::after {
  transform: rotate(90deg);
}

.presago-a11y-item__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  background-color: var(--presago-color-item-success-idle);
  color: var(--presago-color-text-on-success);
  border-radius: var(--presago-radius-full);
  font-size: var(--presago-font-size-body-xs);
  font-weight: var(--presago-font-weight-bold);
}

.presago-a11y-list {
  margin: var(--presago-spacing-150) 0 0 0;
  padding-inline-start: var(--presago-spacing-300);
  color: var(--presago-color-text-subtle);
  font-size: var(--presago-font-size-body-sm);
  line-height: var(--presago-line-height-md);
}

.presago-a11y-list li + li {
  margin-top: var(--presago-spacing-075);
}

.presago-a11y-list code {
  font-family: var(--presago-font-family-code);
  font-size: 0.9em;
  background-color: var(--presago-color-background-ui);
  padding: 0 var(--presago-spacing-050);
  border-radius: var(--presago-radius-xs);
  color: var(--presago-color-text-default);
}

/* ─── Swatch grid ───────────────────────────────────── */
.presago-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--presago-spacing-150);
}

.presago-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-075);
  padding: var(--presago-spacing-150);
  background-color: var(--presago-color-background-page);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-md);
}

.presago-swatch__chip {
  width: 100%;
  height: 48px;
  border-radius: var(--presago-radius-sm);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

.presago-swatch__name {
  font-family: var(--presago-font-family-code);
  font-size: var(--presago-font-size-body-xs);
  color: var(--presago-color-text-default);
  word-break: break-all;
}

.presago-swatch__hex {
  font-family: var(--presago-font-family-code);
  font-size: var(--presago-font-size-body-xs);
  color: var(--presago-color-text-subtle);
  text-transform: uppercase;
}

/* ─── Token table ───────────────────────────────────── */
.presago-token-table {
  overflow-x: auto;
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-lg);
}

.presago-token-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--presago-font-size-body-sm);
}

.presago-token-table th,
.presago-token-table td {
  padding: var(--presago-spacing-150);
  text-align: start;
  border-bottom: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

.presago-token-table th {
  background-color: var(--presago-color-background-ui);
  font-weight: var(--presago-font-weight-semibold);
  color: var(--presago-color-text-default);
}

.presago-token-table tr:last-child td {
  border-bottom: 0;
}

/* ─── Typography showcase ───────────────────────────── */
.presago-type-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-150);
  padding: var(--presago-spacing-300);
  background-color: var(--presago-color-background-ui);
  border-radius: var(--presago-radius-lg);
}

.presago-type-weights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--presago-spacing-300);
  margin-top: var(--presago-spacing-150);
  padding-top: var(--presago-spacing-150);
  border-top: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

/* ─── Spacing showcase ──────────────────────────────── */
.presago-spacing-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-075);
  padding: var(--presago-spacing-300);
  background-color: var(--presago-color-background-ui);
  border-radius: var(--presago-radius-lg);
}

.presago-spacing-row {
  display: grid;
  grid-template-columns: 120px 60px 1fr;
  align-items: center;
  gap: var(--presago-spacing-150);
  font-family: var(--presago-font-family-code);
  font-size: var(--presago-font-size-body-xs);
}

.presago-spacing-row__bar {
  height: 12px;
  background-color: var(--presago-color-item-primary-idle);
  border-radius: var(--presago-radius-xs);
}

.presago-spacing-row__px {
  color: var(--presago-color-text-subtle);
}

/* ─── Misc (radius/shadow/border) ───────────────────── */
.presago-misc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--presago-spacing-300);
}

.presago-misc-col {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-150);
}

.presago-misc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--presago-spacing-150);
}

.presago-misc-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 64px;
  padding: var(--presago-spacing-100);
  background-color: var(--presago-color-background-page);
  color: var(--presago-color-text-subtle);
  font-family: var(--presago-font-family-code);
  font-size: var(--presago-font-size-body-xs);
}

/* ─── Demo cards (sandbox componenti) ───────────────── */
.presago-demo {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-200);
  padding: var(--presago-spacing-300);
  background-color: var(--presago-color-background-page);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-lg);
  box-shadow: var(--presago-shadow-xs);
}

.presago-demo__head {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-050);
}

.presago-demo__head code {
  font-family: var(--presago-font-family-code);
  font-size: 0.9em;
  background-color: var(--presago-color-background-ui);
  padding: 0 var(--presago-spacing-050);
  border-radius: var(--presago-radius-xs);
}

.presago-demo__preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--presago-spacing-200);
  align-items: center;
  padding: var(--presago-spacing-300);
  background-color: var(--presago-color-background-ui);
  border-radius: var(--presago-radius-md);
  min-height: 80px;
}

.presago-demo__filler {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 40px;
  padding: var(--presago-spacing-100) var(--presago-spacing-200);
  background-color: var(--presago-color-item-primary-idle);
  color: var(--presago-color-text-on-primary);
  border-radius: var(--presago-radius-sm);
  font-size: var(--presago-font-size-body-sm);
  font-weight: var(--presago-font-weight-medium);
}

.presago-demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--presago-spacing-200);
  align-items: flex-end;
  padding-bottom: var(--presago-spacing-200);
  border-bottom: var(--presago-border-width-thin) dashed var(--presago-color-border-default);
}

.presago-demo__controls .presago-field__label {
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-050);
  min-width: 140px;
}

/* ─── Code snippet ──────────────────────────────────── */
.presago-code {
  position: relative;
  margin: 0;
  padding: var(--presago-spacing-200);
  background-color: var(--presago-color-background-ui);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-md);
  font-family: var(--presago-font-family-code);
  font-size: var(--presago-font-size-body-xs);
  color: var(--presago-color-text-default);
  overflow-x: auto;
  line-height: var(--presago-line-height-md);
}

.presago-code code {
  font-family: inherit;
  white-space: pre;
}

.presago-code__copy {
  position: absolute;
  top: var(--presago-spacing-075);
  inset-inline-end: var(--presago-spacing-075);
  padding: var(--presago-spacing-050) var(--presago-spacing-100);
  background-color: var(--presago-color-background-page);
  color: var(--presago-color-text-subtle);
  border: var(--presago-border-width-thin) solid var(--presago-color-border-default);
  border-radius: var(--presago-radius-sm);
  font-family: var(--presago-font-family-body);
  font-size: var(--presago-font-size-body-xs);
  font-weight: var(--presago-font-weight-medium);
  cursor: pointer;
  transition: background-color var(--presago-motion-duration-fast) var(--presago-motion-easing-standard), color var(--presago-motion-duration-fast) var(--presago-motion-easing-standard);
}

.presago-code__copy:hover {
  background-color: var(--presago-color-item-secondary-hover);
  color: var(--presago-color-text-default);
}

.presago-code__copy[data-copied="true"] {
  background-color: var(--presago-color-item-success-idle);
  color: var(--presago-color-text-on-success);
  border-color: var(--presago-color-item-success-idle);
}

.presago-doc-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--presago-spacing-300);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--presago-spacing-500);
}

.presago-doc-content {
  min-width: 0;
}

.presago-doc-content .presago-section {
  padding: var(--presago-spacing-600) 0;
}

.presago-doc-content .presago-section__inner {
  max-width: none;
  padding: 0;
}

.presago-page-nav {
  position: sticky;
  top: calc(2.25rem + var(--presago-spacing-400));
  align-self: start;
  padding-block: var(--presago-spacing-600);
}

.presago-page-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-100);
}

.presago-page-nav .presago-button {
  justify-content: flex-start;
  width: 100%;
}

.presago-page-nav__details > summary {
  list-style: none;
  cursor: pointer;
}

.presago-page-nav__details > summary::-webkit-details-marker {
  display: none;
}

.presago-page-nav__details > summary::before {
  content: "▸";
  color: var(--presago-color-icon-subtle);
  font-size: var(--presago-font-size-body-xs);
  transition: transform var(--presago-motion-duration-fast) var(--presago-motion-easing-emphasized);
}

.presago-page-nav__details[open] > summary::before {
  transform: rotate(90deg);
}

.presago-page-nav__details > summary a {
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.presago-page-nav__details > summary:has(a[aria-current="true"]) {
  background-color: var(--presago-color-background-ui);
  color: var(--presago-color-text-default);
}

.presago-page-nav__sublist {
  list-style: none;
  margin: var(--presago-spacing-050) 0 0;
  padding: 0 0 0 var(--presago-spacing-150);
  display: flex;
  flex-direction: column;
  gap: var(--presago-spacing-025);
  border-left: var(--presago-border-width-thin) solid var(--presago-color-border-default);
}

.presago-doc-content :is(.presago-heading[id], .presago-demo[id]) {
  scroll-margin-top: var(--presago-spacing-800);
}

/* ─── Footer ────────────────────────────────────────── */
.presago-landing__footer {
  padding: var(--presago-spacing-400) 0;
  background-color: var(--presago-color-background-ui);
}

.presago-landing__footer .presago-section__inner {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--presago-spacing-300);
}

.presago-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--presago-spacing-300);
}

@media (max-width: 960px) {
  .presago-doc-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .presago-page-nav {
    position: static;
    padding-block: var(--presago-spacing-300) 0;
  }

  .presago-page-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .presago-page-nav__sublist {
    padding-inline-start: var(--presago-spacing-200);
  }
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 720px) {
  .presago-landing__header-inner {
    flex-wrap: wrap;
    padding: var(--presago-spacing-150) var(--presago-spacing-200);
    gap: var(--presago-spacing-150);
  }
  .presago-landing__nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
  }
  .presago-section,
  .presago-a11y-banner { padding: var(--presago-spacing-500) 0; }
  .presago-section__inner { padding-inline: var(--presago-spacing-200); }
  .presago-do-dont,
  .presago-do-dont__grid { grid-template-columns: 1fr; }
}