/* DataverseNO design tokens (spec §8) */
:root {
  --dataverseno-dark-primary: #000000;
  --dataverseno-light-primary: #FFFFFF;
  --dataverseno-dark-secondary: #B34700;
  --dataverseno-light-secondary: #E66A1A;
  --dataverseno-accent: #8C3800;
  --dataverseno-neutral-primary: #B1CEE0;
  --dataverseno-neutral-secondary: #D9D9D9;
}

body, .md-typeset {
  font-family: Arial, Helvetica, sans-serif;
}

/* Single spacing value for every gap in the header row — nav items, the
   palette/search/language cluster, and the minimum breathing room between
   the two groups. header.html's script reads this same variable as its
   collision threshold, so "the standard gap" and "how close is too close"
   are literally the same number, not two values kept in sync by hand. */
:root {
  --dvno-header-gap: 8px;
}

/* DataverseNO brand colours */
:root {
  --dvno-orange: #B34700;
  --dvno-blue: #B1CEE0;
  --dvno-grey: #D9D9D9;
}

/* Primary colour overrides for Material theme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--dvno-orange);
  --md-primary-fg-color--light: #d45500;
  --md-primary-fg-color--dark: #8a3600;
  --md-accent-fg-color: var(--dvno-orange);
  --md-typeset-a-color: var(--dvno-orange);
  /* Same request as dark mode's --md-typeset-color override below: fully
     opaque black body text, not Material's default translucent ~87%-opacity
     dark grey (raised live). --md-default-fg-color--light drives h1/h5/h6
     specifically, which Material renders at ~54% opacity by default. */
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: #000000;
  --md-typeset-color: #000000;
}

/* ===========================================================================
   Header — logo, primary nav, disclosures, language switch (spec §8.5-8.9)
   =========================================================================== */

.dvno-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Material hides .md-header__button.md-logo (display:none) and only reveals
   it in some layouts; our custom header always wants the brand visible, so
   override with matching specificity. */
.md-header__button.md-logo.dvno-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The wordmark's fills (#B34700 orange icon, #000 text) both read as
   near-invisible on the same-orange header background, so force the whole
   graphic to white there — same treatment DataverseNO-FrontPage's header
   applies to this exact asset. */
.md-header__button.md-logo.dvno-logo img {
  display: block;
  height: 1.6rem;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Specificity must match/beat the general img rule above (0,3,1), or its
   display:block wins and both images show at once regardless of these. */
.md-header__button.md-logo.dvno-logo .dvno-logo__icon-img {
  display: none;
}

/* Only swap to the compact mark on genuinely narrow (phone-width) screens —
   the wordmark plus hamburger/search-icon/flags-only language switch adds
   up to well under 30em, so anything wider has room for the full wordmark. */
@media screen and (max-width: 30em) {
  .md-header__button.md-logo.dvno-logo .dvno-logo__wordmark-img {
    display: none;
  }
  .md-header__button.md-logo.dvno-logo .dvno-logo__icon-img {
    display: block;
  }
}

/* Material's default header title (unlinked site name + page topic) is
   replaced by the linked wordmark in the logo anchor above. */
.md-header__title {
  display: none;
}

/* Material caps .md-grid at max-width:61rem (976px) — sized for the stock
   header (logo, search, source, palette). Our header also carries a
   6-item primary nav plus a language switch, which don't fit in what's
   left of that budget and wrap mid-list. The header row should use the
   full header width, not the narrower content-column width. */
.md-header .md-grid {
  max-width: 100%;
}

/* Pushed to the right edge, same as .dvno-header-end below — per review
   feedback, every header control except the logo should sit right-aligned
   as one group (matching the new front page), not nav-left/controls-right. */
.dvno-primary-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.dvno-primary-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--dvno-header-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav ↔ drawer switch is driven by measured collision (see the script in
   header.html), not a fixed viewport breakpoint: a static em value can't
   know how wide the logo/nav/search actually render (differs by language,
   zoom, font rendering), so it either collapses with room to spare or
   leaves a gap where both the inline nav and the ☰ drawer toggle show at
   once. .dvno-header--compact is added to .md-header only once the header's
   content actually no longer fits it. !important is deliberate: it
   overrides Material's own fixed-breakpoint rules for the drawer toggle
   (below), not just cascade order — a plain override could be re-won by
   Material's media query at a width our JS doesn't expect. */
.md-header:not(.dvno-header--compact) .dvno-primary-nav {
  display: flex !important;
}
.md-header.dvno-header--compact .dvno-primary-nav {
  display: none !important;
}
.md-header:not(.dvno-header--compact) .md-header__button[for="__drawer"] {
  display: none !important;
}
.md-header.dvno-header--compact .md-header__button[for="__drawer"] {
  display: block !important;
}

/* Material gives the search box its own persistent ~11.7rem inline width
   once the viewport crosses 60em (.md-search__inner), entirely independent
   of how much room our nav actually needs. Left alone, that creates a
   feedback loop: nav goes compact for lack of room while search is still
   full width, then a moment later — at a narrower, unrelated width —
   Material's own 60em cutover collapses search on its own, freeing space
   nav springs back open into, only to compact again shortly after.
   dvno-search-compact (header.html's script, checked before
   dvno-header--compact) collapses search under our own measured
   threshold instead, so search always goes first. Selector specificity
   here (3 classes) beats the plain .md-search__inner rule Material sets
   inside its @media(min-width:60em) block, but stays below the native
   [data-md-toggle=search]:checked~.md-header .md-search__inner rule (4
   selectors) that expands it when actually opened — so clicking the
   search icon still opens the full overlay even while this is active. */
/* Full copy of Material's own <60em "closed, idle" .md-search__inner state
   (max-width:59.984375em in its compiled CSS) — not just position/width.
   A partial override (position + width alone) left opacity/height/overflow
   coming from Material's other, still-matching rules, so the input and its
   icon stayed partly laid out and visible instead of fully collapsing —
   confirmed live as a duplicate search icon wrapping onto a second row,
   and the leftover width it still occupied was quietly defeating the
   "collapsing search actually frees enough room" calculation in
   header.html's script, which is what drove the observed flip-flopping.
   transition: none skips Material's animation so header.html's
   getBoundingClientRect() reads the final collapsed size immediately
   rather than a mid-animation one. */
.md-header.dvno-search-compact .md-search__inner {
  height: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(5%);
  transition: none;
  width: 0;
  z-index: 2;
}

/* Material hides the standalone search-icon button at >=60em (its own
   .md-search__inner box takes over as the visible trigger there instead).
   Collapsing that box back to width:0 above without this leaves no way to
   open search at all — the icon and the inline box must toggle together. */
.md-header.dvno-search-compact .md-header__button[for="__search"] {
  display: block;
}

/* While the full inline nav is shown (≥76.25em) the header row also carries
   the language switch, palette toggle and search box. The GitHub repo link
   is the lowest-priority item and a dev-facing detail on a public info
   site — drop it before it gets pushed off the right edge. It reappears on
   very wide screens where everything fits. */
@media screen and (max-width: 87.5em) {
  .md-header__source {
    display: none;
  }
}

.dvno-primary-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.dvno-primary-nav__link {
  display: inline-block;
  padding: 0.5rem 0.6rem;
  color: var(--dataverseno-light-primary);
  font-size: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.dvno-primary-nav__link:hover,
.dvno-primary-nav__link--active {
  text-decoration: underline;
}

/* 0.15rem to the arrow, matching .dvno-login-toggle's text-to-arrow gap
   below (the one nav item Rieke pointed to as the correct spacing) — 0.1rem
   here read as too tight by comparison (raised live). */
.dvno-primary-nav__item:has(.dvno-disclosure-toggle) .dvno-primary-nav__link {
  padding-right: 0.15rem;
}

.dvno-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.3rem 0.2rem 0;
  margin: 0 0 0 -0.1rem;
  border: none;
  background: transparent;
  color: var(--dataverseno-light-primary);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}

/* A nested toggle (e.g. What is DataverseNO? > Policy framework/People)
   lives inside a .secondary-nav dropdown panel, which has a white
   background — the white arrow color above (meant for the orange header
   bar) was invisible there instead of just "not shown" (raised live: no
   affordance that a submenu existed). */
.secondary-nav .dvno-disclosure-toggle {
  color: var(--dataverseno-dark-primary);
}

/* The nested <li> reuses .dvno-primary-nav__item (a flex row) so the arrow
   sits beside the text instead of wrapping to its own line, but left at
   that it only spans its own content width — the arrow ends up touching
   the text with no gap, and doesn't reach the panel's right edge like a
   submenu indicator normally would. Stretch it to the panel's full width
   and push the arrow to the far edge instead. */
.secondary-nav > li.dvno-primary-nav__item {
  width: 100%;
  justify-content: space-between;
}

/* Panel opens three ways: pointer hover, keyboard focus entering the item
   (:focus-within), or an explicit click/tap on the toggle (aria-expanded,
   for touch where there is no hover). Hover/focus close themselves the
   moment the pointer or focus leaves; the click path is closed by the
   script in the header partial. This only matters on the wide layout —
   .dvno-primary-nav is display:none once the nav collapses to the drawer. */
.secondary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--dataverseno-light-primary);
  color: var(--dataverseno-dark-primary);
  border: 1px solid var(--dataverseno-neutral-secondary);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.dvno-disclosure-toggle[aria-expanded="true"] + .secondary-nav,
.dvno-primary-nav__item:hover > .secondary-nav,
.dvno-primary-nav__item:focus-within > .secondary-nav {
  display: block;
}

.secondary-nav li a {
  display: block;
  padding: 0.4rem 0.8rem;
  color: var(--dataverseno-dark-primary);
  text-decoration: none;
  font-size: 0.7rem;
  white-space: nowrap;
}

.secondary-nav li a:hover {
  background: var(--dataverseno-neutral-primary);
}

/* Nested flyout (e.g. About > What is DataverseNO? > Policy framework/
   People) opens to the side of its parent panel instead of below it —
   stacking it below, like the top-level menu does, would overlap the
   parent panel's own remaining items instead of sitting next to them. */
.secondary-nav--nested {
  top: -0.4rem;
  left: 100%;
}

/* ---- Login institution picker -------------------------------------------
   Reuses .secondary-nav (panel) and .dvno-disclosure-toggle (open/close,
   handled by the header script), with a search field and a scrollable list.
   Login is now a real <a> + separate arrow-<button> (like About/Deposit
   guidelines above — review feedback: clicking "Login" itself used to do
   nothing, only the arrow was interactive), so .dvno-login-toggle no
   longer needs its own text+arrow styling — the base .dvno-disclosure-toggle
   rule already covers an arrow-only button correctly. */
.dvno-primary-nav__item--login {
  position: relative;
}

/* Wider than the plain disclosure panels, right-aligned so it doesn't spill
   off the end of the header. */
.dvno-login-panel {
  left: auto;
  right: 0;
  width: 17rem;
  max-width: 80vw;
  padding: 0.6rem;
}

.dvno-login-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--dataverseno-neutral-secondary);
  border-radius: 4px;
  font: inherit;
  font-size: 0.75rem;
}

.dvno-login-search:focus-visible {
  outline: 2px solid var(--dataverseno-accent);
  outline-offset: 1px;
}

.dvno-login-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
}

.dvno-login-list li a {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--dataverseno-dark-primary);
  text-decoration: none;
  font-size: 0.72rem;
  border-radius: 3px;
  white-space: normal;
}

.dvno-login-list li a:hover {
  background: var(--dataverseno-neutral-primary);
}

.dvno-login-list__divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--dataverseno-neutral-secondary);
}

/* Trailing cluster: palette toggle, search, language switch, repo source.
   In the expanded header it sits directly after the primary nav (which
   carries the margin-left:auto that pushes both as one right-aligned
   group) with just the standard gap between them — not its own
   margin-left:auto too, or the two auto margins would split the free space
   and open a gap in the middle of the group. But .dvno-primary-nav is
   display:none in the compact/hamburger header (rules above), which takes
   its margin-left:auto out of the layout too — without its own auto margin
   here for that state, this cluster would collapse back to sitting flush
   left against the drawer button instead of staying right-aligned
   (confirmed live). */
.dvno-header-end {
  display: flex;
  align-items: center;
  gap: var(--dvno-header-gap);
}
.md-header:not(.dvno-header--compact) .dvno-header-end {
  margin-left: var(--dvno-header-gap);
}
.md-header.dvno-header--compact .dvno-header-end {
  margin-left: auto;
}

/* Material gives its own header controls built-in margins that would
   stack on top of the gap above, making parts of this cluster wider than
   the rest of it (and wider than the nav's own spacing) —
   .dvno-primary-nav__item has no such margin, only its own padding.
   .md-header__button: margin:.2rem on every icon. .md-header__source: up
   to margin:1.4rem around the repo badge specifically (confirmed live as
   a visibly bigger gap around just that one item). Stripping both makes
   gap the one and only source of spacing everywhere in this cluster. */
.dvno-header-end .md-header__button,
.dvno-header-end .md-header__source {
  margin: 0;
}

/* Language switch: flag + code button (overrides/partials/alternate.html),
   replacing Material's single translate-icon glyph. The button has no SVG
   child to size it, so it needs its own explicit height to match the other
   header icon buttons (palette/search/repo, all ~1.2rem glyphs).
   Compound selector needed: main.css's `.md-header__button:not([hidden])`
   is specificity (0,2,0), which otherwise beats a plain `.dvno-lang-switch__button`
   (0,1,0) and silently keeps the browser default inline-block (confirmed
   live — the flag/code fell onto two lines because of it). */
.md-header__button.dvno-lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.2rem;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* svg.dvno-lang-switch__flag (not .dvno-lang-switch__flag): main.css's
   `.md-icon svg` is also specificity (0,1,1) and was winning the tie by
   forcing this to a square 1.2rem/1.2rem box (confirmed live via
   getComputedStyle — 24x24 instead of the rectangular flag shape below),
   same root cause as the .dvno-lang-switch__button fix above. */
svg.dvno-lang-switch__flag {
  width: 1.2rem;
  height: 0.6rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.dvno-lang-switch__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Visible focus outlines for keyboard users across the custom header controls */
.dvno-primary-nav__link:focus-visible,
.dvno-disclosure-toggle:focus-visible,
.secondary-nav li a:focus-visible,
.dvno-logo:focus-visible {
  outline: 2px solid var(--dataverseno-accent);
  outline-offset: 2px;
}

/* ===========================================================================
   Footer — four sections, CC0/citation strip (spec §8.10-8.13)
   =========================================================================== */

.dvno-footer {
  background: var(--dataverseno-dark-secondary);
  color: var(--dataverseno-light-primary);
}

.dvno-footer__sections {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.6rem 1.2rem;
}

.dvno-footer__section {
  flex: 1 1 12rem;
}

.dvno-footer__heading {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dataverseno-light-primary);
}

.dvno-footer__section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dvno-footer__section li a {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--dataverseno-light-primary);
  text-decoration: none;
  font-size: 0.7rem;
}

.dvno-footer__section li a:hover {
  text-decoration: underline;
}

.dvno-footer__section li a:focus-visible {
  outline: 2px solid var(--dataverseno-light-primary);
  outline-offset: 2px;
}

/* Section 1: thin divider above it, smaller font, pinned at the very bottom */
.dvno-footer__legal {
  border-top: 1px solid var(--dataverseno-neutral-secondary);
  padding: 0.8rem 1.2rem;
  font-size: 0.6rem;
  /* --dataverseno-neutral-secondary (#D9D9D9) on this background is 3.9:1,
     below the 4.5:1 AA threshold for small text — white clears it (6.9:1). */
  color: var(--dataverseno-light-primary);
}

.dvno-footer__legal p {
  margin: 0;
}

/* The footer keeps its columns much longer than the header nav — the links
   are short, three narrow columns fit down to phone width. Only stack them
   below ~40em, and even then at natural height (flex-grow would otherwise
   spread them down the page). */
@media screen and (max-width: 40em) {
  .dvno-footer__sections {
    flex-direction: column;
  }
  .dvno-footer__section {
    flex: 0 0 auto;
  }
}

/* ===========================================================================
   Dark mode (Material's [data-md-color-scheme="slate"] palette)
   =========================================================================== */

/* Per design feedback: dark mode should be true black, not Material's
   default slate grey (hsla(hue,15%,14%)); and body text should be fully
   opaque white, not Material's translucent ~82%-opacity light grey (which
   reads as visibly grey against true black, more so than it did against
   slate's original grey background). */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #000000;
  --md-default-bg-color--light: rgba(0, 0, 0, 0.54);
  --md-default-bg-color--lighter: rgba(0, 0, 0, 0.26);
  --md-default-bg-color--lightest: rgba(0, 0, 0, 0.07);
  --md-footer-bg-color: #000000;
  --md-footer-bg-color--dark: #000000;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #ffffff;
  --md-typeset-color: #ffffff;
}

[data-md-color-scheme="slate"] .dvno-primary-nav__link,
[data-md-color-scheme="slate"] .dvno-disclosure-toggle {
  color: var(--dataverseno-light-primary);
}

/* The home hero wordmark's text is baked in as black (see extra.css) —
   invisible against the black dark-mode page background, same failure as
   the header logo. Same fix: force the whole graphic white rather than
   waiting on a separate white-variant asset. */
[data-md-color-scheme="slate"] .dvno-hero-logo {
  filter: brightness(0) invert(1);
}

/* extra.css hardcodes navigation/resource/workflow-step icons to black (per
   the light-mode mockup) — invisible against a black page background in
   dark mode. Admonition icons are excluded: those are colour-coded per
   style (orange/green/red), not black, and already show up fine. */
[data-md-color-scheme="slate"] .navigation-card .bi,
[data-md-color-scheme="slate"] .resource-card .bi,
[data-md-color-scheme="slate"] .md-typeset .workflow .workflow-step .bi,
[data-md-color-scheme="slate"] .md-typeset .workflow .workflow-step .dvno-icon {
  color: var(--dataverseno-light-primary);
}

[data-md-color-scheme="slate"] .secondary-nav {
  background: var(--dataverseno-dark-primary);
  color: var(--dataverseno-light-primary);
  border-color: var(--dataverseno-neutral-secondary);
}

[data-md-color-scheme="slate"] .secondary-nav li a,
[data-md-color-scheme="slate"] .dvno-login-list li a {
  color: var(--dataverseno-light-primary);
}

[data-md-color-scheme="slate"] .secondary-nav li a:hover,
[data-md-color-scheme="slate"] .dvno-login-list li a:hover {
  background: var(--dataverseno-dark-secondary);
}

[data-md-color-scheme="slate"] .dvno-login-search {
  background: var(--dataverseno-dark-primary);
  color: var(--dataverseno-light-primary);
}

/* Footer intentionally has no dark-mode override — per design feedback it
 * should stay the same orange as light mode, not switch to black. The base
 * .dvno-footer / .dvno-footer__legal rules already apply in both schemes. */