/*
 * DataverseNO info site — brand overrides for Material for MkDocs
 * Graphic profile v1.0 — primary: #B34700
 */

/* On a page with both sidebars hidden (currently just the home page — see
   `hide: [navigation, toc]` in docs/en|nn/index.md) the content column
   would otherwise use the full 61rem grid. Capping only the card/button
   rows there left them narrower than the paragraph text above them and
   left-anchored while the rest of the page filled the wide column — it
   read as neither matching nor centered. Cap the whole article instead
   (heading, text, cards, buttons, revision date) as one block and center
   it, so everything shares the same width and the same middle. Ordinary
   content pages (which keep their sidebar/TOC) are unaffected.
   34.4rem matches the effective text width a page WITH both sidebars gets
   at desktop (raised live, issue #16: home read wider than About, so its
   navigation cards ended up larger than the ones on the rest of the
   site): Material's grid is 61rem, each sidebar is 12.1rem
   (main.css `.md-sidebar{width:12.1rem}`), and `.md-content__inner` adds
   1.2rem margin per side at >=76.25em (main.css's desktop breakpoint) —
   61 - 12.1*2 - 1.2*2 = 34.4rem. */
.md-sidebar--primary[hidden] ~ .md-sidebar--secondary[hidden] ~ .md-content .md-typeset {
  max-width: 34.4rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Home page hero logo — matches the DvNO front page (wordmark above the
   H1, same asset as DataverseNO-FrontPage's logos/logo.svg). */
.md-typeset img.dvno-hero-logo {
  height: 3rem;
  width: auto;
  max-width: 100%;
  margin-bottom: 0.5rem;
}

/* ── Brand colour tokens ────────────────────────────────────────────────── */
:root {
  --dvno-orange:       #B34700;
  --dvno-orange-dark:  #8B3500;
  --dvno-orange-light: #D05500;
  --dvno-blue:         #B1CEE0;
  --dvno-grey:         #D9D9D9;
}

/*
 * Material for MkDocs sets data-md-color-primary="custom" and
 * data-md-color-scheme="default" on the <body> element.
 * These selectors override the built-in palette rules.
 */
body[data-md-color-primary="custom"],
[data-md-color-primary="custom"] {
  --md-primary-fg-color:              #B34700;
  --md-primary-fg-color--light:       #D05500;
  --md-primary-fg-color--dark:        #8B3500;
  --md-primary-bg-color:              #ffffff;
  --md-primary-bg-color--light:       rgba(255,255,255,0.7);
  --md-accent-fg-color:               #B34700;
  --md-accent-fg-color--transparent:  rgba(179, 71, 0, 0.1);
  --md-typeset-a-color:               #B34700;
}

body[data-md-color-scheme="default"],
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              #B34700;
  --md-primary-fg-color--light:       #D05500;
  --md-primary-fg-color--dark:        #8B3500;
  --md-accent-fg-color:               #B34700;
  --md-typeset-a-color:               #B34700;
}

/* ── Typography — match DataverseNO graphic profile ─────────────────────── */
:root {
  --md-text-font: Arial, Helvetica, sans-serif;
  --md-code-font: "Courier New", Courier, monospace;
}

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

/* ── Links ──────────────────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--dvno-orange);
  text-decoration-color: rgba(179, 71, 0, 0.4);
}

.md-typeset a:hover {
  color: var(--dvno-orange-dark);
  text-decoration-color: var(--dvno-orange-dark);
}

/* ── Cards — match DataverseNO rounded orange-border style ─────────────── */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 2px solid var(--dvno-orange) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  box-shadow: 0 4px 12px rgba(179, 71, 0, 0.15) !important;
  transform: translateY(-2px);
}

/* ── Admonitions ────────────────────────────────────────────────────────
 * DataverseNO custom admonition styles (spec §9 [ADMONITION] Style field,
 * resolved by hooks/content_blocks.py to `!!! dvno-primary|secondary|tertiary`):
 *   primary   = orange  #B34700
 *   secondary = green    #33AD4F
 *   tertiary  = red      #C92E2E
 * Each block renders its own Bootstrap icon (<span class="bi …">) inside the
 * title, so Material's generated ::before mask icon is suppressed.
 */
.md-typeset .admonition.dvno-primary,
.md-typeset details.dvno-primary {
  border-color: #b34700;
}
.md-typeset .admonition.dvno-secondary,
.md-typeset details.dvno-secondary {
  border-color: #33ad4f;
}
.md-typeset .admonition.dvno-tertiary,
.md-typeset details.dvno-tertiary {
  border-color: #c92e2e;
}

/* 0.1 alpha (per review feedback) read as barely-there, especially in dark
   mode against a near-black background — bumped to 0.22 so the title band
   is clearly distinguishable as its own region in both palettes. */
.md-typeset .dvno-primary > .admonition-title,
.md-typeset .dvno-primary > summary {
  background-color: rgba(179, 71, 0, 0.22);
}
.md-typeset .dvno-secondary > .admonition-title,
.md-typeset .dvno-secondary > summary {
  background-color: rgba(51, 173, 79, 0.22);
}
.md-typeset .dvno-tertiary > .admonition-title,
.md-typeset .dvno-tertiary > summary {
  background-color: rgba(201, 46, 46, 0.22);
}

/* Suppress Material's mask-image icon — the block supplies a real glyph. */
.md-typeset :is(.dvno-primary, .dvno-secondary, .dvno-tertiary) > :is(.admonition-title, summary)::before {
  display: none;
}
.md-typeset :is(.dvno-primary, .dvno-secondary, .dvno-tertiary) > :is(.admonition-title, summary) {
  padding-left: 0.8rem;
}

.md-typeset .admonition-title .bi,
.md-typeset summary .bi {
  margin-right: 0.4rem;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.15em;
}
.md-typeset .dvno-primary > :is(.admonition-title, summary) .bi {
  color: #b34700;
}
.md-typeset .dvno-secondary > :is(.admonition-title, summary) .bi {
  color: #33ad4f;
}
.md-typeset .dvno-tertiary > :is(.admonition-title, summary) .bi {
  color: #c92e2e;
}

/* ── Navigation tabs active indicator ──────────────────────────────────── */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: white !important;
  opacity: 1 !important;
}

/* ── Code examples wrap instead of scrolling ───────────────────────────────
 * Material's default `.md-typeset pre>code{white-space:pre}` makes long
 * lines (e.g. citation examples in Modify your data) scroll sideways
 * instead of wrapping — review feedback: wrap onto the next line instead
 * so the whole example fits without a horizontal scrollbar. */
.md-typeset pre > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Search highlight ───────────────────────────────────────────────────── */
.md-search-result mark {
  color: var(--dvno-orange-dark);
  background-color: rgba(179, 71, 0, 0.12);
}

/* ── Table of contents active link ─────────────────────────────────────── */
.md-nav__link--active {
  color: var(--dvno-orange) !important;
}

/* ── Content components (spec §9) ────────────────────────────────────────
 * [NAVIGATION CARD], [RESOURCE BOX], [BUTTON], [WORKFLOW], checklist items,
 * and the generated partner logo grid, resolved at build time by
 * hooks/content_blocks.py and hooks/generated_components.py. Cards lay out
 * into a wrapping row via flexbox on the cards themselves — no grid
 * container element is required in the resolved markup.
 */
/* Cards have no wrapping element in the resolved markup (each is a lone
 * inline-flex <a> — see hooks/content_blocks.py's module docstring), so
 * without a real flex container they can't share a stretch context and
 * end up different heights whenever their text wraps differently (e.g.
 * "For institutions: Become a partner" vs "About DataverseNO"). Target the
 * markdown-generated parent <p> that holds a row of them and turn it into
 * that container — same fix .workflow already gets for free from being a
 * real <ul>, whose default align-items: stretch equalizes step heights.
 *
 * Cards used a fixed width and left-aligned, so the row stopped short of
 * the content column's right edge while the button row below (flex: 1,
 * stretched full width) reached it — the two rows' edges didn't line up.
 * flex: 1 1 172px (same pattern as .workflow-step and .dvno-button below)
 * makes cards grow to fill the row like the buttons do, so both rows span
 * the exact same width and their left/right/center all line up. */
.md-typeset p:has(> .navigation-card),
.md-typeset p:has(> .resource-card) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.6rem;
}

.navigation-card,
.resource-card {
  display: flex;
  flex: 1 1 210px;
  /* Flex items default to min-width:auto (their content's min-content
     floor), which ignores flex-basis and can force the row wider than its
     container at narrow widths instead of shrinking/wrapping — the same
     bug already fixed for .people-card elsewhere in this stylesheet. */
  min-width: 0;
  flex-direction: column;
  align-items: center;
  /* Cards are stretched to equal height (align-items:stretch on the row
     wrapper above, so a 2-line title doesn't make its card the only tall
     one) — without this, the shorter cards' icon+title block sits at the
     top by default and all the slack height collects at the bottom only,
     instead of splitting evenly above and below (raised live: top/icon and
     icon/text gaps looked fine, but bottom padding was visibly bigger). */
  justify-content: center;
  text-align: center;
  margin: 0.5rem 0;
  padding: 0.9rem 1rem;
  border: 4px solid var(--dvno-orange);
  border-radius: 40px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}

.navigation-card:hover,
.resource-card:hover {
  box-shadow: 0 4px 12px rgba(179, 71, 0, 0.15);
  transform: translateY(-2px);
}

/* .md-typeset a { color: var(--dvno-orange) } outranks the single-class
 * selectors above on specificity ((0,1,1) beats (0,1,0)), so it silently
 * overrode "color: inherit" here — these compound selectors win instead. */
.md-typeset a.navigation-card,
.md-typeset a.resource-card {
  color: inherit;
}

/* Equal spacing top-to-icon / icon-to-title / title-to-bottom (per
   mockup comparison, raised live) — this margin-top matches the card's own
   top/bottom padding exactly, rather than being a separately-tuned value. */
.navigation-card__title,
.resource-card__title {
  margin-top: 0.9rem;
  font-weight: bold;
  font-size: 1.15em;
  /* Cap at two lines (per review feedback) so a long title like "Becoming
     a partner institution" doesn't stretch the card to three lines and
     throw off the row's proportions. text-wrap: balance (follow-up
     feedback) picks a more even break point between those two lines
     instead of whatever the browser's default greedy wrap lands on —
     e.g. "Becoming a" / "partner institution" instead of a lopsided
     split — without hardcoding a manual line break per title/language. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

/* The two-line cap above is for navigation cards; resource cards carry
 * longer, unshortenable titles (e.g. "DataverseNO README File Template"
 * needs three lines at three-per-row width) and were cut off. */
.resource-card__title {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.navigation-card__accent {
  margin-top: 0.3rem;
  font-size: 0.85em;
  color: var(--dvno-orange);
  text-decoration: underline;
}

/* The title's own first word, highlighted in place of a separate
   duplicate accent line (see hooks/content_blocks.py's
   _render_navigation_card) — e.g. "What is DataverseNO?" with "What"
   orange, rest of the title in the normal title colour. */
.navigation-card__title-accent {
  color: var(--dvno-orange);
}

.navigation-card__description {
  margin-top: 0.3rem;
  font-size: 0.9em;
  opacity: 0.85;
}

.navigation-card--pending,
.resource-card--pending {
  border-style: dashed;
  opacity: 0.7;
}

/* Icon: fields (hooks/content_blocks.py's _render_icon) — Bootstrap Icons
 * font glyphs (.bi) inherit colour via currentColor automatically; the one
 * <img>-based icon (.dvno-icon, an actual SVG asset) is sized to match.
 * Black per mockup/design review — only admonitions keep colour-coded
 * icons (style-specific, handled separately). */
.navigation-card .bi,
.resource-card .bi,
.navigation-card .dvno-icon,
.resource-card .dvno-icon {
  /* Reduced from 3.2rem alongside the tighter card padding above (per
     review feedback: too much empty space in the cards). Kept well above
     the original 2.5rem — a max-width cap on this same goal previously
     broke the row's equal-width symmetry (raised live) — this only
     shrinks the icon, not the card's layout box. */
  font-size: 2.8rem;
  color: #000;
  height: 2.8rem;
  width: 2.8rem;
  flex-shrink: 0;
  /* Without an explicit line-height, the <i> glyph's own line box (using
     the font's default ~1.15-1.2 leading) is taller than its visible ink,
     leaving blank space under the icon inside its own box — fixed
     regardless of the title's margin-top, which is why that margin
     appeared to do nothing (raised live). line-height:1 collapses that
     leading so the icon's box actually hugs the glyph, and the title's
     margin-top becomes the real, controllable source of the gap. */
  display: block;
  line-height: 1;
}

.dvno-button .bi,
.dvno-button .dvno-icon {
  font-size: 1rem;
  margin-right: 0.4rem;
  height: 1rem;
  width: 1rem;
}

/* .dvno-icon is an <img src="*.svg">, not an inline glyph — its fill is
 * baked into the SVG file itself (dataverseno-icon.svg hardcodes
 * fill:#b34700) and can't be recoloured via CSS `color`/currentColor the
 * way .bi can, because an <img>-embedded SVG doesn't inherit the host
 * page's styles. Every .dvno-icon inside a button sits on a solid orange
 * background (all its buttons are Style: primary), so it was rendering
 * orange-on-orange and invisible. filter forces it to pure white instead. */
.dvno-button .dvno-icon {
  filter: brightness(0) invert(1);
}

/* Bootstrap Icons glyphs carry extra whitespace under the ink within their
 * own em-box, so centering the <i> element's box (align-items: center on
 * the flex button) doesn't center the visible glyph — it still reads as
 * sitting low. Making the icon itself a flex container centers its actual
 * content instead of just its box. */
.dvno-button .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons have the same no-wrapper problem as cards (see .md-typeset
 * p:has(> .navigation-card) above): each is a lone element with no shared
 * row container, so they can't split the row width evenly on their own.
 * Per mockup, the button row should span the same total width as the card
 * row above it and split it evenly between however many buttons there are. */
.md-typeset p:has(> .dvno-button) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* A lone button (e.g. "Meet our curators") should size to its label and sit
   at the start of its own line — not stretch to the full content width the
   way a row of two or more buttons does. */
.md-typeset p:has(> .dvno-button:only-child) {
  justify-content: flex-start;
}
.dvno-button:only-child {
  flex: 0 0 auto;
}

.dvno-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 160px;
  min-width: 0;
  margin: 0.25rem 0;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: box-shadow 0.2s, transform 0.2s;
}

/* Same pop-out-on-hover treatment as .navigation-card/.resource-card
   (review feedback: buttons were the one card-like component missing it). */
.dvno-button:hover {
  box-shadow: 0 4px 12px rgba(179, 71, 0, 0.15);
  transform: translateY(-2px);
}

.dvno-button--primary {
  background: var(--dvno-orange);
  color: #fff;
}

.dvno-button--secondary {
  background: var(--dvno-orange);
  color: #fff;
}

/* --secondary now has the same solid-orange background as --primary, so
 * its icon needs to be white too (inherits from .dvno-button--secondary's
 * white text already — no override needed here). */

/* Same .md-typeset a specificity problem as .navigation-card/.resource-card
 * above — without this, --primary's white text renders orange-on-orange
 * (invisible); --secondary happened to look right only by coincidence
 * (its intended color already matched .md-typeset a's). */
.md-typeset a.dvno-button--primary {
  color: #fff;
}

.md-typeset a.dvno-button--secondary {
  color: #fff;
}

.dvno-button--pending {
  opacity: 0.6;
  border: 2px dashed var(--dvno-grey);
}

/* Selectors are prefixed with `.md-typeset` throughout: Material's
   `.md-typeset ol:not([hidden]){display:flow-root}` and
   `.md-typeset ol li{margin-left:1.25em}` both outrank a bare `.workflow`
   / `.workflow-step`, so without the prefix the steps just stacked as a
   normal ordered list. */
.md-typeset ol.workflow {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  /* All five steps scale down to share one row (no sideways scroll). em-based
     gap/padding so the whole strip shrinks together in a narrow column. */
  gap: 1.1em;
  padding: 0.8rem 0.2rem 1rem;
  margin: 1.4rem 0;
}

.md-typeset .workflow .workflow-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border: 3px solid var(--dvno-orange);
  border-radius: 10px;
  padding: 0.9em 0.5em 0.7em;
}

.md-typeset .workflow .workflow-step--secondary {
  border-style: dashed;
}

/* Orange arrow between consecutive steps (per mockup), sitting in the gap.
   A text glyph ("\2192") was tried for the arrow so its own shaft would
   read as a short tail, but a font's glyph box is rarely centered exactly
   on its own visual mark — it landed visibly off-center against the cards
   (raised live) despite the centering math being correct. Back to the
   original CSS border-triangle for ::after (a zero-size box centers
   exactly, unlike a glyph), with the tail added separately as ::before —
   a plain rectangle, centered the same proven way. */
.md-typeset .workflow .workflow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 0.1em;
  transform: translateY(-50%);
  width: 0.35em;
  height: 3px;
  background: var(--dvno-orange);
}

.md-typeset .workflow .workflow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 0.5em;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-left: 0.55em solid var(--dvno-orange);
}

.md-typeset .workflow .workflow-step a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3em;
}

.md-typeset .workflow .workflow-step__title {
  font-size: 0.95em;
  font-weight: bold;
  line-height: 1.25;
}

/* color: #000 here (not the site's usual orange) matches how every other
   navigation-card/resource-card icon is styled (see .navigation-card .bi
   above) — the workflow step icons were the one place still orange
   (raised live). Sized up from 1.5em for the same reason as the step
   numbers below: at 1.5em they read as an afterthought next to the bold
   step titles. */
.md-typeset .workflow .workflow-step .bi,
.md-typeset .workflow .workflow-step .dvno-icon {
  font-size: 2.3em;
  color: #000;
  height: auto;
  width: auto;
}

/* Numbered badge overlapping the top-left corner, as in the mockup. */
.md-typeset .workflow .workflow-step__number {
  position: absolute;
  top: -0.7em;
  left: -0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  background: var(--dvno-orange);
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.1em;
}

/* Below ~55em the row can no longer hold all steps legibly — stack them in
   one column with the arrows pointing downward. */
/* On a phone five columns are unreadably thin — stack them, arrows down. */
@media screen and (max-width: 38em) {
  .md-typeset ol.workflow {
    flex-direction: column;
    gap: 1.4rem;
  }
  .md-typeset .workflow .workflow-step:not(:last-child)::before {
    left: 50%;
    top: 100%;
    margin-left: 0;
    margin-top: 0.15rem;
    transform: translateX(-50%);
    width: 2px;
    height: 0.4rem;
  }
  .md-typeset .workflow .workflow-step:not(:last-child)::after {
    left: 50%;
    top: 100%;
    margin-left: 0;
    margin-top: 0.65rem;
    transform: translateX(-50%);
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-bottom: none;
    border-top: 0.5em solid var(--dvno-orange);
  }
  .md-typeset .workflow .workflow-step__title {
    font-size: 0.95em;
  }
}

.checklist-item {
  margin: 0.25rem 0;
}

.partner-logo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  /* 17 partner logos never divides evenly into full rows — the last, short
     row defaulted to flex-start and sat flush left under the centered rows
     above it (raised live). justify-content: center on the whole row
     re-centers every row, including that trailing partial one, without
     needing to single it out. */
  justify-content: center;
  margin: 1rem 0;
}

/* A fixed box per logo, not a shared max-height/max-width on the <img>
   itself: institutions supplied logos at wildly different intrinsic
   aspect ratios (tall marks, wide wordmarks), so capping the image alone
   sized each one differently and rows never lined up (raised live, twice —
   enlarging specific logos individually only shifted which ones looked
   mismatched). Every .partner-logo is the same box; object-fit: contain
   scales each logo down to fit it without distorting it, so the grid stays
   symmetrical regardless of the source file's shape. */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 64px;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Partner logos are institution-supplied PNGs, most with transparent
   backgrounds and dark text/marks meant to sit on a white page — in
   dark-mode they turned invisible against the page's dark background
   (raised live). One white plate behind the whole grid, not one per logo
   (tried first — a grid of separate white boxes read as visually busy,
   raised live) keeps every logo readable regardless of theme. */
[data-md-color-scheme="slate"] .partner-logo-grid {
  /* var(--dvno-grey): the site's existing neutral fill (already used as the
     people-page initials-avatar background), not pure white — softer
     against the dark page than a stark white plate (raised live). */
  background: var(--dvno-grey);
  border-radius: 8px;
  padding: 1.5rem;
}

/* Glossary terms (docs/en|nn/glossary/index.md, rendered as <dl
   class="glossary-list"> by hooks/generated_components.py): browsers don't
   bold <dt> by default, so a term read at the same weight as its own
   definition below it (raised live). */
.glossary-list dt {
  font-weight: bold;
}

/* Related-terms/further-reading metadata under a glossary definition: kept
   visually smaller and muted so it doesn't compete with the definition
   text (raised live). */
.glossary-related,
.glossary-further-reading {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  margin: 0.4rem 0 0;
}

.glossary-further-reading ul {
  margin: 0.2rem 0 0;
}

/* "Before you get started" FAQ (docs/en|nn/deposit/index.md): was a run of
   ### headings, each with its own answer paragraph — a lot of vertical
   space (heading margins plus paragraph margins) for what's really a
   short Q&A list (raised live). Converted to a plain list with a bold
   question leading straight into its answer text in the same line, so
   there's exactly one item's worth of spacing between entries instead of
   a heading's margin plus a paragraph's margin. */
.faq-list li {
  margin: 0 0 0.6rem;
}

.faq-list li:last-child {
  margin-bottom: 0;
}