/* Layout: page containers, floating pill header, footer. */

/* One gutter drives the container and the header, so they can never disagree: both keep the same
   side space at every width, and both stop growing at --content-max. */
:root { --gutter: var(--space-4); }

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); }
}

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

html { scroll-padding-top: 8rem; }

main.container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color_bg_primary);
  color: var(--color_fg_on_primary);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  text-decoration: none;
}

/* Header: floating pill (jwt.io) */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sticky (not fixed): the header stays in document flow, so page content never
   needs a hard-coded offset no matter how the bar wraps. */
.site-header {
  position: sticky;
  top: var(--space-4);
  z-index: 100;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content-max);
  margin: var(--space-4) auto 0;
  border: 1px solid var(--color_bg_app_bar);
  border-radius: var(--radius-xl);
  background: var(--color_bg_app_bar);
  box-shadow: var(--shadow_app_bar);
  -webkit-backdrop-filter: blur(3rem);
  backdrop-filter: blur(3rem);
}

/* The glass look relies on seeing a blurred page through a ~4% tint. Where that is not
   available (no backdrop-filter) or not wanted (reduced transparency), use an opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--color_bg_app_bar_plain); border-color: var(--color_bg_app_bar_border); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--color_bg_app_bar_plain);
    border-color: var(--color_bg_app_bar_border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-header nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-height);
  padding-inline: var(--space-5);
}

.site-header theme-toggle {
  justify-self: end;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color_fg_bold);
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  white-space: nowrap;
}

/* In the footer there is room to wrap the name when text is enlarged, so it never forces a sideways scroll. */
.site-footer-about .site-brand { white-space: normal; }

.site-brand:hover {
  text-decoration: none;
}

.site-brand-sub {
  color: var(--color_fg_muted);
}

.site-nav-link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color_fg_nav);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.1px;
}

.site-nav-link:hover {
  background: var(--color_bg_app_bar_border);
  color: var(--color_fg_bold);
  text-decoration: none;
  transition: all 0.1s ease-out;
}

.site-nav-link[aria-current] {
  background: var(--color_bg_app_bar);
  color: var(--color_fg_bold);
}

.site-nav-link[aria-current='page'] { cursor: default; }

.site-nav-link:focus-visible {
  outline: solid 1px var(--color_border_focus);
  outline-offset: 0.125rem;
  border-radius: var(--radius-sm);
}

/* Header.
   >=60em (960px at the default text size)  brand | links (centred) | theme picker, one row.
   <60em  the links move into a menu: brand | theme picker | menu button, and the links open as a panel under the
          bar. Gating on <site-menu data-enhanced> (set by site-menu.js) keeps this progressive: without JavaScript
          the links stay in the bar. 60em is where the three links, the brand text and the full theme picker stop fitting on one row
          (measured). It is written in em, not px, so it follows the reader's text-size setting: larger text switches to
          the menu sooner instead of overflowing the bar. */
.nav-toggle { display: none; }

/* site-menu.js puts the links after the menu button in the DOM (so Tab follows the visual order on small screens).
   On desktop the bar is a 3-column grid, so pin each item to its column instead of relying on source order. */
@media (min-width: 60em) {
  .site-header site-menu[data-enhanced] .site-brand { grid-column: 1; grid-row: 1; }
  .site-header site-menu[data-enhanced] .site-nav { grid-column: 2; grid-row: 1; }
  .site-header site-menu[data-enhanced] theme-toggle { grid-column: 3; grid-row: 1; }
}

@media (max-width: 59.9375em) {
  .site-header site-menu[data-enhanced] nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .site-header site-menu[data-enhanced] .site-brand { margin-right: auto; }

  .site-header site-menu[data-enhanced] .nav-toggle {
    order: 3;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color_border_default);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color_fg_bold);
  }

  /* The three bars rotate into an X (the SVG is in site-menu.js; paths pivot on their own centre). */
  .site-header site-menu[data-enhanced] .nav-toggle .bar {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--duration-base) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--duration-fast) ease;
  }

  .site-header site-menu[data-enhanced] .nav-toggle[aria-expanded='true'] .bar-1 { transform: translateY(5px) rotate(45deg); }
  .site-header site-menu[data-enhanced] .nav-toggle[aria-expanded='true'] .bar-2 { opacity: 0; transform: scaleX(0.2); }
  .site-header site-menu[data-enhanced] .nav-toggle[aria-expanded='true'] .bar-3 { transform: translateY(-5px) rotate(-45deg); }

  .site-header site-menu[data-enhanced] .nav-toggle:hover { background: var(--color_bg_button_hover); }
  .site-header site-menu[data-enhanced] .nav-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .site-header site-menu[data-enhanced] theme-toggle { order: 2; }

  /* The panel: an overlay card under the bar, so opening it never pushes the page down. Closed it is
     visibility:hidden (not tabbable, not announced) and is faded and nudged up; opening fades it in and slides it
     into place. The visibility change is delayed on close so the fade-out stays visible. */
  .site-header site-menu[data-enhanced] .site-nav {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    max-height: calc(100vh - 7rem);
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    border: 1px solid var(--color_border_default);
    border-radius: var(--radius-lg);
    background: var(--color_bg_app_bar_plain);
    box-shadow: var(--shadow_card_hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--duration-base) ease,
      transform var(--duration-base) cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear var(--duration-base);
  }

  .site-header site-menu[data-enhanced][data-open] .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-header site-menu[data-enhanced] .site-nav-link {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-md);
  }
}

@media (max-width: 35.9375em) {
  .site-header {
    top: var(--space-2);
    margin-top: var(--space-2);
  }

  /* The nav sits inside <site-menu>, so the sticky header keeps its single row; only the open panel adds height. */
  .site-header nav { padding-inline: var(--space-3); gap: var(--space-2); }

  /* The theme picker collapses to its active option (theme-toggle.js cycles it on tap). */
  .site-header .theme-option:not([aria-checked='true']) { display: none; }
  .site-header .theme-picker { padding: var(--space-1); }
  .site-header .theme-option { width: 2.5rem; height: 2.25rem; }

  html { scroll-padding-top: 5rem; }
}

/* Page name: the empty middle of the bar on a phone. From 36em the brand text fits and takes that place instead, and
   on desktop the links are in the bar. Only with JS (data-enhanced): without it the links stay in the bar and there
   is no room for it. */
.site-page-name { display: none; }

@media (max-width: 35.9375em) {
  .site-brand-text { display: none; }

  .site-header site-menu[data-enhanced] .site-page-name {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: var(--color_fg_bold);
    font-family: var(--font-secondary);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header site-menu[data-enhanced] .site-brand { margin-right: 0; }
}

/* Very short viewports (phones in landscape, under 500px tall): a sticky bar would eat a fifth of the
   screen, so it scrolls away there. */
@media (max-height: 500px) {
  .site-header { position: static; }
  html { scroll-padding-top: var(--space-4); }
}

/* Footer: link columns (jwt.io / openidconnect.net) */

.site-footer-wrap {
  /* No top margin: main.container's padding-bottom already spaces the content from the footer. */
  margin-top: 0;
  background: var(--color_bg_page);
}

/* Compact footer: the flows are the content, so the footer stays well under the height of a diagram. */
.site-footer-wrap > .container {
  padding-block: 0;
}

/* The divider lives inside the container so it matches the bottom one's width. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color_border_default);
}

.site-footer-logo {
  display: inline-flex;
  color: var(--color_fg_bold);
}

.site-footer-logo svg { width: 5.5rem; height: auto; }

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
}

.site-footer-col { min-width: 0; }

.site-footer-col h2 {
  margin: 0 0 var(--space-2);
  color: var(--color_fg_muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-col li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.site-footer-col li + li { margin-top: 0; }

.site-footer-col a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--color_fg_bold);
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-footer-col a:hover { color: var(--color_fg_link); }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-social li { margin: 0 !important; }

.footer-social a {
  display: inline-flex;
  border-radius: var(--radius-sm);
}

.footer-social svg { width: 1.5rem; height: 1.5rem; }

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color_border_default);
}

.site-footer-bottom small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}

@media (max-width: 991px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr cannot shrink below its content, so enlarged text widened the page. */
  .site-footer { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 767px) {
  .site-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}

@media (max-width: 575px) {
  /* Columns are sized in rem, so when the reader enlarges text they drop to one column instead of overflowing. */
  .site-footer-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-5) var(--space-4); }
}