/*
 * Site-wide visual integrity layer.
 *
 * This file is intentionally small and final. It normalizes the visual and
 * responsive behavior shared by legacy pages, generated research, guides,
 * tools, and commercial pages without adding another component theme.
 * The primary site header remains the only sticky navigation surface.
 */

/* Prevent grid/flex children and long research content from forcing viewport overflow. */
:where(main, footer, article, section, .section, .panel, .card, .feed-card, .guide-body) {
  min-width: 0;
}

:where(main, footer) p,
:where(main, footer) li,
:where(main, footer) dd,
:where(main, footer) figcaption {
  overflow-wrap: anywhere;
}

/* Media must respect its content column on every page family. */
img,
video,
canvas {
  max-inline-size: 100%;
  height: auto;
}

iframe,
object,
embed,
figure {
  max-inline-size: 100%;
}

figure {
  margin-inline: 0;
}

/* Code and evidence tables remain usable instead of being clipped on narrow screens. */
pre {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

pre code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.feed-detail__body table,
.guide-body .panel table,
.cert-cheatsheet table,
.report-body table,
.research-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Modern minmax syntax prevents fixed card minima from overflowing very small phones. */
.feed-stream .feed-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.feed-related__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.feed-detail__visuals {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.cert-resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.flashcard-deck--grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

:where(
  .grid,
  .feed-list,
  .feed-related__grid,
  .feed-detail__visuals,
  .cert-resource-grid,
  .flashcard-deck--grid,
  .footer-grid,
  .hero-grid
) > * {
  min-width: 0;
}

/* Anchored headings clear the sticky primary site header. */
main :where(h1, h2, h3, h4, h5, h6)[id],
main :where(section, article, div)[id] {
  scroll-margin-top: 92px;
}

/*
 * Secondary page navigation stays in document flow. A single sticky site
 * header avoids stacked navigation, clipped content, and competing scroll
 * containers on long research pages.
 */
@media (min-width: 960px) {
  .page-toc {
    position: relative;
    top: auto;
    max-width: none;
    margin: -48px 0 56px;
  }

  .page-toc__inner {
    grid-template-areas:
      "header actions"
      "list list";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem 1.1rem;
    padding: 1rem 1.25rem;
  }

  .page-toc__header {
    max-width: 42rem;
  }

  .page-toc__list {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: .3rem;
  }

  .page-toc__item,
  .page-toc__link,
  .page-toc__actions {
    width: auto;
  }

  .page-toc__link {
    white-space: nowrap;
  }

  .page-toc__actions {
    justify-self: end;
  }
}

@media (min-width: 1024px) {
  .hero-aside,
  .reports-toc,
  .feed-sidebar {
    position: relative;
    top: auto;
    max-height: none;
  }

  .reports-toc,
  .feed-sidebar {
    overflow-y: visible;
  }
}

@media (min-width: 1200px) {
  .cert-toc {
    position: relative;
    top: auto;
  }
}

.cq-score {
  position: relative;
  top: auto;
}

.reports-toc__header[role="button"]:focus-visible {
  outline: 3px solid rgba(34, 242, 163, .62);
  outline-offset: 3px;
}

/* The mobile navigation must remain usable on short and landscape viewports. */
@media (max-width: 839px) {
  body.is-mobile-nav-open {
    overflow-y: hidden;
  }

  .mobile.open {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .container {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .container {
    padding-inline: 16px;
  }

  .panel,
  .feed-detail,
  .guide-body .panel {
    max-width: 100%;
  }
}

/* Minimum interaction sizes for controls that are repeatedly used across page families. */
:where(
  .hamburger,
  .nav-icon-btn,
  .nav-search-btn,
  .mobile-search-btn,
  .mobile__summary,
  .mobile__link,
  .menu-group__trigger,
  .feed-filter,
  .feed-search__clear,
  .back-to-top
) {
  min-height: 44px;
}

/* Avoid permanently promoting dozens of cards/buttons to compositor layers. */
.pillar-card,
.latest-briefing,
.feed-card,
.calendar-card,
.btn {
  will-change: auto;
}

/* Keep motion purposeful: explicit reveal behavior may animate, static sections and CTAs do not pulse forever. */
.section,
.btn--primary {
  animation: none;
}

/* Hover movement should never be the only feedback and should not fire on touch-first devices. */
@media (hover: none), (pointer: coarse) {
  .pillar-card:hover,
  .feed-card:hover,
  .calendar-card:hover,
  .product-route:hover,
  .btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .hero-title,
  .reading-progress,
  .trust-ticker__track,
  .cookie-consent,
  .exit-intent__panel,
  .back-to-top {
    animation: none !important;
    transition: none !important;
  }
}