/*
 * anchor-nav — sticky "on this page" navigation.
 * Mobile-first: dropdown. Desktop (>=768px md): horizontal bar.
 *
 * EXACT Figma metrics (node 230:9150 / anchorItem 230:9146):
 *   label = Hurme Geometric Sans 1 SemiBold 16px / lh 24px / ls +0.5%
 *           (articles/buttons/buttonSmall)
 *   default item colour #001E41 (ink-blue); active item colour #0018F0
 *   item padding 16px; mobile list column gap 24px; desktop row gap 35px
 *   mobile bar rests grey #F6F6F6, turns white #FFFFFF when sticky
 *   elevation-m shadow = 0 2px 4px rgba(0,0,0,0.2)
 */

:root {
  /* offset so anchored sections land below the sticky nav */
  --anchor-nav-offset: 72px;
}

html {
  scroll-padding-top: var(--anchor-nav-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*
 * Let the sticky bar travel the FULL article height regardless of how the
 * author sections it: collapse the block's own section + wrapper so the
 * sticky element's containing block becomes <main> (the tall scroller),
 * instead of a section that is only as tall as the nav itself.
 */
main .section:has(> .anchor-nav-wrapper) {
  display: contents;
}

.anchor-nav-wrapper {
  display: contents;
}

/* Non-sticky (resting) state — Figma 1921:96819 articles/anchorNav/Mobile:
     grey band #f6f6f6 with px-8, white card inside with pt-32 pb-24 px-12,
     border-top separator #e8e8e8 above the row. When the bar sticks
     (.is-stuck) or opens (.is-open) it collapses to the tighter layout below. */
.anchor-nav.block {
  position: sticky;
  top: var(--anchor-nav-sticky-top, 0);
  z-index: 20;
  background: var(--amp-bg-grey, #f6f6f6);
  transition: box-shadow 0.2s ease;
}

/* Floating shadow once the bar sticks, and a stronger one while open so the
   dropdown reads as a panel above the dimmed page. Sticky/open also drop the
   grey outer band and side padding — the bar becomes a full-width white bar. */
.anchor-nav.block.is-stuck,
.anchor-nav.block.is-open {
  padding: 0;
  background: var(--amp-bg, #fff);
}

.anchor-nav.block.is-stuck {
  /* elevation-m */
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.anchor-nav.block.is-open {
  z-index: 1000;
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
}

.anchor-nav nav {
  max-width: var(--content-max-width, 1248px);
  margin: 0 auto;
}

/* Mobile-only card frame (Figma 1921:96819 articles/anchorNav/Mobile):
   grey outer band #f6f6f6 with px-8, white inner card with pt-32 pb-24 px-12.
   Desktop (rail) hides the toggle entirely and overrides the block bg to
   transparent (see article.css .article-layout-rail rules), so these mobile
   card styles never reach desktop. */
@media (width < 1024px) {
  .anchor-nav nav {
    padding: var(--spacing-32) var(--spacing-12) var(--spacing-24);
    background: var(--amp-bg, #fff);
  }
}

/* Sticky/open collapse the card padding — the toggle owns spacing then. */
.anchor-nav.is-stuck nav,
.anchor-nav.is-open nav {
  padding: 0;
  background: transparent;
}

/* ---------- closed bar (toggle) ----------
 * The nav sits inside the content card, aligned with the body copy (so the grey
 * page shows either side of the card). Closed = a compact white bar: "On this
 * page" + chevron on the left, "Currently reading:" + active section stacked on
 * the right, right-anchored. Sticky-state metrics from Figma 4384:28101 (375×104):
 *   containerText padding 16px 20px 24px, gap 24px
 *   label = Hurme SemiBold 14 / lh 1.48 / ls 0.21px (1.5%), ultramarine #0018f0
 *   chevron slot 16×16, gap 4px to label
 *   right column fills remaining width, right-aligned; each row pb-8
 *   "Currently reading:" = Open Sans SemiBold 12/16, ink-blue #001e41
 *   value                = Open Sans Regular 12/16, text-secondary #313131,
 *                          clamped to 2 lines / 50 chars via JS truncate
 */
.anchor-nav-toggle {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-24);
  width: 100%;
  margin: 0;
  padding: var(--spacing-16) 0 0;
  border: 0;
  border-top: 1px solid var(--amp-grey-e8, #e8e8e8);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* Sticky/open flatten the card — the toggle absorbs the padding again and
   drops the internal border (there's no card frame to separate from). */
.anchor-nav.is-stuck .anchor-nav-toggle,
.anchor-nav.is-open .anchor-nav-toggle {
  padding: var(--spacing-16) var(--spacing-20) var(--spacing-24);
  border-top: 0;
}

.anchor-nav-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex: 0 0 auto;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: 1.48;
  letter-spacing: 0.015em;
  color: var(--amp-ultramarine, #0018f0);
}

.anchor-nav-toggle-label::after {
  content: "";
  flex: 0 0 auto;
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.anchor-nav-current-group {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  text-align: right;
}

.anchor-nav-current-label {
  padding-bottom: var(--spacing-8);
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  white-space: nowrap;
  color: var(--amp-ink-blue, #001e41);
}

.anchor-nav-current {
  display: -webkit-box;
  padding-bottom: var(--spacing-8);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  text-align: right;
  color: var(--amp-text, #313131);
  overflow-wrap: anywhere;
}

/* ---------- open state ----------
   Opening turns the bar into a taller grey header — a larger title with the
   chevron pushed right, and the "currently reading" group stacked underneath on
   the left — above a white panel listing every section. */
.anchor-nav.is-open .anchor-nav-toggle {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-8);
  padding: var(--spacing-20) var(--spacing-20) var(--spacing-16);
  border-bottom-color: transparent;
  background: var(--amp-bg-2, #f6f6f6);
}

.anchor-nav.is-open .anchor-nav-toggle-label {
  width: 100%;
  justify-content: space-between;
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-22);
  line-height: var(--line-height-24);
  color: var(--amp-ultramarine-deep, #001b99);
}

.anchor-nav.is-open .anchor-nav-toggle-label::after {
  align-self: center;
  transform: rotate(-135deg) translateY(2px);
}

.anchor-nav.is-open .anchor-nav-current-group {
  align-items: flex-start;
  text-align: left;
}

.anchor-nav.is-open .anchor-nav-current-label {
  color: var(--amp-ink-blue, #001e41);
}

.anchor-nav.is-open .anchor-nav-current {
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

/* ---------- open dropdown panel ---------- */
.anchor-nav-panel {
  display: none;
  background: var(--amp-bg, #fff);
}

.anchor-nav.is-open .anchor-nav-panel {
  display: block;
  padding: 0 var(--spacing-20) var(--spacing-16);
}

.anchor-nav-panel-heading {
  display: block;
  padding: var(--spacing-16) 0 var(--spacing-8);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  line-height: var(--line-height-20);
  color: var(--amp-ink-blue, #001e41);
}

.anchor-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.anchor-nav-link {
  display: block;
  padding: var(--spacing-18) var(--spacing-16);
  border-radius: 8px;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: var(--line-height-24);
  letter-spacing: 0.005em;
  color: var(--amp-ink-blue, #001e41);
  text-decoration: none;
}

/* Panel-scoped colours win over the global `a:any-link` rule (which would
   otherwise paint every item ultramarine). Non-active = ink-blue navy. */
.anchor-nav-panel .anchor-nav-link {
  color: var(--amp-ink-blue, #001e41);
}

.anchor-nav-link:hover {
  color: var(--amp-ultramarine, #0018f0);
}

.anchor-nav-link:active {
  color: var(--amp-ultramarine-hover);
  border-radius: var(--spacing-s);
  background: var(--amp-blue-tint);
}

.anchor-nav-link:focus-visible {
  text-decoration: none;
  outline: none;
}

/* Active section = grey rounded chip with the deep-ultramarine accent. The list
   only renders inside the open dropdown on mobile; non-active items stay ink.
   (Desktop rail overrides this colour via higher specificity.) */
.anchor-nav-link[aria-current="true"] {
  border-radius: var(--spacing-s);
  background: var(--amp-blue-pale);
  color: var(--amp-ultramarine);
}

/* ---------- scrim (dims the page behind the open dropdown) ---------- */
.anchor-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  background: rgb(0 0 0 / 40%);
}

.anchor-nav-scrim.is-visible {
  display: block;
}