/* ================================================
   NIOZ brand fonts — Avenir Next LT Pro
   The NIOZ typeface (visual identity manual p.9). Self-hosted so the
   site does not depend on the Microsoft 365 / macOS cloud font.

   The .otf files live in the extension's public/ directory, which
   `add_public_directory` serves from the site root — absolute URLs so the
   `cssrewrite` webassets filter has nothing to rewrite.
   ================================================ */

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("/fonts/AvenirNextLTPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("/fonts/AvenirNextLTPro-It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("/fonts/AvenirNextLTPro-Demi.otf") format("opentype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("/fonts/AvenirNextLTPro-DemiIt.otf") format("opentype");
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("/fonts/AvenirNextLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ================================================
   NIOZ Theme for CKAN — v2
   Royal Netherlands Institute for Sea Research

   Drop-in replacement for
   src/ckanext-driftwood/ckanext/driftwood/assets/css/driftwood_theme.css

   Same NIOZ visual identity v2 (Nov 2023): Avenir Next LT Pro, the
   five-colour palette, the colour bar in its fixed order. No new hues —
   every value below is one of the ramp steps already defined in v1.

   What changed, and why (design directions 1c + 1f):
   - Chrome is thinner. The 80px logo + 8px bar + account strip pushed the
     first line of content ~190px down the page. Header is now a 60px bar
     with a 38px logo and an 8px colour bar.
   - Paper is sand (--color--tertiary--alpha--100), not tinted blue, and the
     two fixed radial gradients are gone. Blue is now only used for meaning
     (links, actions, chrome), not for the background.
   - Radii and shadows are much smaller: 6/8px instead of 16/24px, hairline
     borders instead of drop shadows. Result reads as a catalogue, not a
     marketing site.
   - Search results are flat rows with a left gutter carrying date and DOI
     version, rather than floating hover-lifting cards. Title and DOI version
     are the two loudest things on a result.
   - Dataset page gets a navy record header (title, DOI, status, version,
     Cite) and CKAN's own primary nav is restyled as record tabs.
   - Hover transforms (translateY / scale) are removed throughout. They made
     long lists feel unstable.
   ================================================ */

:root {
  /* ================================================================
     NIOZ design-system ramps — unchanged from v1.
     The 400 step of each ramp IS the corresponding identity colour.
     ================================================================ */

  /* Primary — NIOZ blue */
  --color--primary--100: #f2f5fb;
  --color--primary--200: #e5eaf7;
  --color--primary--300: #b2c1e7;
  --color--primary--350: #6b88d3;
  --color--primary--400: #0032b4;
  --color--primary--500: #0032b4;
  --color--primary--600: #495b8a;
  --color--primary--700: #1a306b;
  --color--primary--800: #00195a;
  --color--primary--900: #001448;

  /* Secondary — NIOZ orange */
  --color--secondary--100: #fff6e5;
  --color--secondary--200: #ffedcc;
  --color--secondary--300: #ffdb99;
  --color--secondary--400: #ffa500;
  --color--secondary--500: #996300;
  --color--secondary--600: #664200;
  --color--secondary--700: #664200;
  --color--secondary--800: #664200;
  --color--secondary--900: #664200;

  /* Tertiary alpha — NIOZ sand */
  --color--tertiary--alpha--100: #f8f7f3;
  --color--tertiary--alpha--200: #f8f7f3;
  --color--tertiary--alpha--300: #edeae0;
  --color--tertiary--alpha--400: #dcd5c1;
  --color--tertiary--alpha--500: #b0aa9a;
  --color--tertiary--alpha--600: #b0aa9a;
  --color--tertiary--alpha--700: #b0aa9a;
  --color--tertiary--alpha--800: #b0aa9a;
  --color--tertiary--alpha--900: #726b59;

  /* Tertiary beta — NIOZ green */
  --color--tertiary--beta--100: #e2eeeb;
  --color--tertiary--beta--200: #d4e8e3;
  --color--tertiary--beta--300: #93c5b8;
  --color--tertiary--beta--400: #288a71;
  --color--tertiary--beta--500: #206e5a;
  --color--tertiary--beta--600: #206e5a;
  --color--tertiary--beta--700: #206e5a;
  --color--tertiary--beta--800: #206e5a;
  --color--tertiary--beta--900: #206e5a;

  /* ---- Identity colours (manual p.11), in colour-bar order ----
     FIXED. Literal rather than ramp references, so no ramp edit can shift
     the bar. */
  --nioz-sand: #dcd5c1;    /* RGB 220/213/193 */
  --nioz-orange: #ffa500;  /* RGB 255/165/0   — RAL 1033 Dahlia Yellow */
  --nioz-blue: #0032b4;    /* RGB 0/50/180    — RAL 5002 Ultramarine Blue */
  --nioz-cyan: #00ebff;    /* RGB 0/235/255   — no ramp; bar only */
  --nioz-green: #288a71;   /* RGB 40/138/113  */

  /* ---- Colour bar (manual p.12): five equal blocks, fixed order ---- */
  --nioz-colour-bar: linear-gradient(
    90deg,
    var(--nioz-sand) 0%, var(--nioz-sand) 20%,
    var(--nioz-orange) 20%, var(--nioz-orange) 40%,
    var(--nioz-blue) 40%, var(--nioz-blue) 60%,
    var(--nioz-cyan) 60%, var(--nioz-cyan) 80%,
    var(--nioz-green) 80%, var(--nioz-green) 100%
  );

  /* ---- Semantic tokens ----
     v2 uses primary--900 for the header and footer, not --700. Against sand
     paper the darkest step gives the chrome a clean edge and leaves --700
     for record headers and facet headings, one step down. */
  --nioz-chrome: var(--color--primary--900);
  --nioz-chrome-2: var(--color--primary--700);

  --nioz-blue-deep: var(--color--primary--700);
  --nioz-blue-darkest: var(--color--primary--800);
  --nioz-orange-deep: var(--color--secondary--500);
  --nioz-orange-ink: var(--color--secondary--600);
  --nioz-orange-tint: var(--color--secondary--100);
  --nioz-green-deep: var(--color--tertiary--beta--500);
  --nioz-green-tint: var(--color--tertiary--beta--100);
  --nioz-sand-tint: var(--color--tertiary--alpha--100);

  --nioz-white: #ffffff;
  /* Paper is sand. Cards are white, so a card now separates from the page
     by value rather than by shadow. */
  --nioz-bg: var(--color--tertiary--alpha--100);
  --nioz-surface: #ffffff;
  --nioz-light-blue: var(--color--primary--200);
  --nioz-text: var(--color--primary--900);
  --nioz-text-muted: var(--color--tertiary--alpha--900);
  --nioz-text-muted-cool: var(--color--primary--600);
  /* Hairline borders: warm on sand, cool inside blue-tinted contexts. */
  --nioz-border: var(--color--tertiary--alpha--300);
  --nioz-border-cool: var(--color--primary--200);
  --nioz-border-strong: var(--color--primary--300);

  /* ---- Spacing — nioz.nl --spacing--1..20 ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---- Radii. Much tighter than v1: an archive catalogue, not a card wall. */
  --radius-tiny: 3px;
  --radius-action-sm: 4px;
  --radius-action: 6px;
  --radius-surface-sm: 6px;
  --radius-surface: 8px;
  --radius-surface-lg: 12px;

  /* Line heights — nioz.nl --typography--line-height--* */
  --lh-tight: 1.125;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;

  /* Type ramp. h1 is deliberately smaller than v1 (which topped out at 64px
     and made every dataset title shout). Dataset titles are long; 34px max
     keeps a two-line title readable. */
  --text-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h4: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --text-h5: 1rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);

  /* Shadows are now the exception, not the rule. */
  --nioz-shadow-sm: 0 1px 2px rgba(51, 61, 71, 0.04);
  --nioz-shadow: 0 2px 6px rgba(51, 61, 71, 0.08);
  --nioz-shadow-lg: 0 8px 24px rgba(51, 61, 71, 0.12);
  --nioz-shadow-lift: 0 2px 8px rgba(51, 61, 71, 0.10);

  --nioz-radius: var(--radius-action);
  --nioz-radius-lg: var(--radius-surface);
  --nioz-radius-pill: 999px;

  --nioz-transition: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --nioz-transition-slow: 240ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Avenir Next LT Pro is the NIOZ typeface; Arial is the sanctioned
     substitute (manual p.9). A real monospace is added for identifiers —
     DOIs and DAS codes are strings to be transcribed, and Avenir's
     ambiguous 1/l/I makes that error-prone. */
  --nioz-font: "Avenir Next LT Pro", "Avenir Next", Helvetica, Arial, sans-serif;
  --nioz-font-display: var(--nioz-font);
  --nioz-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --bs-body-font-family: var(--nioz-font);
  --bs-font-sans-serif: var(--nioz-font);
  --bs-font-monospace: var(--nioz-font-mono);
  --nioz-focus: 0 0 0 3px rgba(0, 50, 180, 0.28);
  --nioz-space: 1rem;

  /* Colour bar: 8px, both in the chrome and where it is used as a graphic
     device on its own. */
  --nioz-bar-height: 8px;
  --nioz-measure: 96rem;

  /* Header geometry — one place to change the whole chrome height. */
  --nioz-header-height: 96px;
  --nioz-logo-height: 76px;
}

/* Reusable brand colour bar (manual p.12). Horizontal is preferred. */
.nioz-colour-bar {
  background: var(--nioz-colour-bar);
  height: 8px;
  width: 100%;
}

.nioz-colour-bar--vertical {
  background: linear-gradient(
    180deg,
    var(--nioz-sand) 0%, var(--nioz-sand) 20%,
    var(--nioz-orange) 20%, var(--nioz-orange) 40%,
    var(--nioz-blue) 40%, var(--nioz-blue) 60%,
    var(--nioz-cyan) 60%, var(--nioz-cyan) 80%,
    var(--nioz-green) 80%, var(--nioz-green) 100%
  );
  height: auto;
  width: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nioz-transition: 0ms; --nioz-transition-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================
   BASE
   ====================================== */

html {
  scroll-behavior: smooth;
  /* Anchored jumps must clear the pinned header. */
  scroll-padding-top: calc(var(--nioz-header-height) + 2rem);
}

body {
  color: var(--nioz-text);
  /* Flat sand. v1's two fixed radial gradients are gone — they tinted every
     white card slightly differently depending on scroll position. */
  background-color: var(--nioz-bg);
  background-image: none;
  font-family: var(--nioz-font);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(0, 50, 180, 0.18);
  color: var(--nioz-blue);
}

/* Identifiers are set in monospace wherever they appear. */
.dataset-doi a,
.dataset-doi-item-link,
.nioz-mono,
.additional-info td.dataset-details code,
code, kbd, samp, pre {
  font-family: var(--nioz-font-mono);
  font-size: 0.9375em;
  letter-spacing: -0.01em;
}

/* ---- Type ramp ---- */
h1, h2, h3, h4, h5, h6 {
  /* Headings are chrome-navy, not brand blue. Brand blue now means
     "interactive" and nothing else, which is what makes links findable in a
     page as link-dense as a dataset record. */
  color: var(--color--primary--700);
  font-family: var(--nioz-font-display);
  letter-spacing: 0;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); font-weight: 600; }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: var(--lh-body); }
h5, h6 { font-size: var(--text-h5); font-weight: 600; line-height: var(--lh-body); }

table.diff, table.diff td, table.diff th { font-family: var(--nioz-font-mono); }

.module-content > p,
.notes p,
.prose p { max-width: 72ch; }

/* "N datasets found" is a result count, not a page title. */
.search-form h1,
.search-form > h1 {
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: var(--lh-body);
  margin: var(--space-sm) 0 var(--space-xs);
}

p.lead, .lead {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--nioz-text-muted);
  max-width: 68ch;
}

a { color: var(--nioz-blue); transition: color var(--nioz-transition); }
a:hover { color: var(--nioz-blue-deep); }

:focus-visible { outline: 2px solid var(--nioz-blue); outline-offset: 2px; }
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible { box-shadow: var(--nioz-focus); }

/* ======================================
   HEADER / NAVIGATION
   One flat navy bar, 60px, with the account strip folded into it on
   desktop. v1 stacked a 30px strip on a 100px masthead.
   ====================================== */

.account-masthead {
  background-color: var(--color--primary--900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8125rem;
  padding: 0.2rem 0;
}

.account-masthead .list-unstyled {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  margin: 0;
}

.account-masthead a,
.account-masthead .btn-link {
  color: rgba(255, 255, 255, 0.66) !important;
  transition: color var(--nioz-transition), background-color var(--nioz-transition);
  text-decoration: none;
  border-radius: var(--radius-action-sm);
  padding: 0.2rem 0.55rem;
}

.account-masthead a:hover,
.account-masthead .btn-link:hover {
  color: var(--nioz-orange) !important;
  background-color: rgba(255, 255, 255, 0.07);
}

.account-masthead .username {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
}

.masthead {
  /* Flat, not a five-stop gradient. The gradient competed with the colour
     bar directly beneath it for the same "brand ramp" reading. */
  background: var(--color--primary--900) !important;
  box-shadow: none;
  border-bottom: 0;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nioz-bar-height));
  height: var(--nioz-bar-height);
  background: var(--nioz-colour-bar);
}

.masthead .navbar {
  align-items: center;
  gap: 1.25rem;
  min-height: var(--nioz-header-height);
  padding-top: 0;
  padding-bottom: 0;
}

.masthead .navbar-nav .nav-link,
.masthead .main-navbar ul li a {
  position: relative;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--nioz-font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0;
  border-radius: var(--radius-action-sm);
  padding: 0.45rem 0.75rem !important;
  transition: color var(--nioz-transition);
}

/* The active section is marked by weight and a white label, with a thin
   orange rule — no filled pill, so nav items never read as buttons. */
.masthead .main-navbar ul li a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--nioz-orange);
  opacity: 0;
  transition: opacity var(--nioz-transition);
}

.masthead .main-navbar ul li.active a,
.masthead .main-navbar ul li a:hover,
.masthead .main-navbar ul li a:focus-visible {
  background-color: transparent !important;
  color: #fff !important;
}

.masthead .main-navbar ul li.active a { font-weight: 600; }
.masthead .main-navbar ul li.active a::after,
.masthead .main-navbar ul li a:hover::after { opacity: 1; }

.masthead .site-search { gap: 0; margin-left: 0.5rem; }

.masthead .site-search .form-control {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  border-radius: var(--radius-action) 0 0 var(--radius-action);
  font-size: 0.875rem;
  min-width: 11rem;
  padding: 0.35rem 0.75rem;
  transition: background-color var(--nioz-transition), border-color var(--nioz-transition), box-shadow var(--nioz-transition);
}

.masthead .site-search .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }

.masthead .site-search .form-control:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.3);
  outline: none;
}

.masthead .site-search .btn {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-left: none;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 0 var(--radius-action) var(--radius-action) 0;
  padding: 0.35rem 0.8rem;
  transition: background-color var(--nioz-transition), color var(--nioz-transition);
}

.masthead .site-search .btn:hover {
  background-color: var(--nioz-orange);
  border-color: var(--nioz-orange);
  /* Brand orange is too light for white text — the logo pairs it with blue. */
  color: var(--color--primary--800);
}

.masthead .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-action);
  padding: 0.3rem 0.55rem;
}

.logo,
.logo-image {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none !important;
  gap: 0.6rem;
}

/* The logo SVG declares only a viewBox — no width/height — so as a flex item
   `height: auto` resolves to zero and it disappears. An explicit height is
   what gives it a size. */
.masthead .navbar .logo img,
.logo img,
.logo .nioz-logo {
  height: var(--nioz-logo-height) !important;
  max-height: var(--nioz-logo-height) !important;
  width: auto !important;
  display: block;
  filter: none;
  transition: opacity var(--nioz-transition);
}

.logo:hover img,
.logo:hover .nioz-logo { transform: none; opacity: 0.85; }

/* Wordmark beside the logo. Add to header.html:
   <span class="nioz-wordmark">Data Repository</span> inside .logo — optional. */
.nioz-wordmark {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ======================================
   HOMEPAGE — "quiet index" (direction 1c)

   The photographic hero is replaced by a sand band. Reason: the hero image
   is decorative, it pushed the search box below the fold on a laptop, and
   the search input had to be reversed out of a dark photo, which is the
   hardest possible background for a text field.

   To keep the v1 photo hero instead, delete this block and restore the
   `.homepage .hero` rules from v1 — nothing else depends on it.
   ====================================== */

.homepage .hero {
  background-color: var(--nioz-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--nioz-border);
  position: relative;
  overflow: visible;
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-xl) !important;
  min-height: 0;
}

.homepage .hero::before,
.homepage .hero::after { content: none; }

.homepage .hero > .container,
.homepage .hero .row { position: relative; z-index: 2; }

/* ---- Homepage search module ---- */
.homepage .module-search {
  position: relative;
  z-index: 2;
  max-width: 56rem;
  margin: 0 auto;
  animation: none;
}

@keyframes nioz-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.homepage .module-search.card.box {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
}

.homepage .module-search .search-form {
  color: var(--nioz-text);
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

.homepage .module-search .search-form .heading {
  color: var(--color--primary--700);
  font-family: var(--nioz-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.homepage .module-search .search-form .search-input {
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--nioz-surface);
  border: 2px solid var(--color--primary--700);
  border-radius: var(--radius-action);
  overflow: hidden;
  box-shadow: var(--nioz-shadow-sm);
  transition: border-color var(--nioz-transition), box-shadow var(--nioz-transition);
}

.homepage .module-search .search-form .search-input:focus-within {
  border-color: var(--nioz-blue);
  box-shadow: var(--nioz-focus);
}

.homepage .module-search .search-form .search-input .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  font-size: 1.0625rem;
  padding: 0.9rem 1.15rem;
  color: var(--nioz-text);
  text-align: left;
}

.homepage .module-search .search-form .search-input .form-control:focus {
  box-shadow: none;
  outline: none;
}

/* Override CKAN core absolute positioning so the button sits in the flex row. */
.homepage .module-search .search-form .search-input button,
.homepage .module-search .search-form .search-giant .btn {
  position: static;
  top: auto;
  right: auto;
  margin-top: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--color--primary--700);
  color: #fff;
  border: none;
  border-radius: 0 !important;
  padding: 0.9rem 1.6rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--nioz-transition);
}

.homepage .module-search .search-form .search-giant .btn:hover {
  background: var(--nioz-blue);
  filter: none;
  transform: none;
}

.homepage .module-search .search-form .search-input button i,
.homepage .module-search .search-form .search-giant .btn i {
  font-size: 1.05rem;
  width: auto;
  line-height: 1;
  color: inherit;
  display: block;
}

/* Popular tags: a quiet line of links under the field, not a navy slab. */
.homepage .module-search .tags,
.homepage .module-search + .tags {
  background: transparent !important;
  border-radius: 0;
  padding: var(--space) 0 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 1.1rem;
}

.homepage .module-search .tags h3 {
  color: var(--nioz-text-muted);
  font-family: var(--nioz-font-display);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0;
}

.homepage .module-search .tags .tag {
  display: inline-block;
  background: transparent;
  color: var(--nioz-blue);
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--nioz-transition);
}

.homepage .module-search .tags .tag:hover {
  background: transparent;
  color: var(--nioz-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}

/* Dataset / package pages — tags on light surfaces */
section.tags,
.primary .tags {
  background: transparent !important;
  box-shadow: none;
  padding: 0.25rem 0 0.75rem;
  border-radius: 0;
}

section.tags h3,
.primary .tags h3 {
  color: var(--nioz-text-muted);
  font-family: var(--nioz-font-display);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.65rem;
  font-weight: 600;
}

section.tags .tag,
.primary .tags .tag,
.tag-list .tag {
  display: inline-block;
  background-color: var(--nioz-surface);
  color: var(--color--primary--700);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius-pill);
  padding: 0.25rem 0.75rem;
  margin: 0.15rem 0.2rem 0.15rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--nioz-transition), color var(--nioz-transition), border-color var(--nioz-transition);
}

section.tags .tag:hover,
.primary .tags .tag:hover,
.tag-list .tag:hover {
  background-color: var(--nioz-light-blue);
  border-color: var(--nioz-border-strong);
  color: var(--nioz-blue);
  transform: none;
}

/* ======================================
   PROMOTED / WELCOME MODULE
   ====================================== */

.module-promotion.card.box {
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none;
}

.module-promotion.card.box:hover { box-shadow: none !important; transform: none; }

.module-promotion h1,
.module-promotion h2,
.module-promotion .page-heading {
  color: var(--color--primary--700) !important;
  font-family: var(--nioz-font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  margin-bottom: 0.65rem;
  letter-spacing: 0;
}

.module-promotion p {
  color: var(--nioz-text-muted);
  line-height: var(--lh-body);
  font-size: 1rem;
  max-width: 68ch;
}

.module-promotion a {
  color: var(--nioz-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  transition: color var(--nioz-transition);
}

.module-promotion a:hover {
  color: var(--nioz-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ======================================
   PAGE HEADINGS & LAYOUT RHYTHM
   ====================================== */

.page-heading {
  color: var(--color--primary--700) !important;
  font-family: var(--nioz-font-display);
  font-weight: 600;
}

h1.page-heading { font-weight: 700; font-size: var(--text-h1); }

.wrapper {
  margin-top: 0.25rem;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.wrapper:before,
.wrapper:after { display: none !important; }

.main {
  padding-top: var(--space-md);
  padding-bottom: var(--space-2xl);
}

.primary .module + .module,
.primary section + section { margin-top: var(--space-lg); }

/* ======================================
   MODULE FEEDS (stats)
   ====================================== */

.module-feeds {
  background-color: var(--nioz-surface) !important;
  border: 1px solid var(--nioz-border) !important;
  border-radius: var(--nioz-radius-lg) !important;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--nioz-transition);
}

.module-feeds:hover { box-shadow: none; transform: none; border-color: var(--nioz-border-strong) !important; }
.module-feeds h3 { color: var(--color--primary--700); font-family: var(--nioz-font-display); font-weight: 600; }
.module-feeds .media-heading a { color: var(--nioz-blue); font-weight: 600; }

/* ======================================
   ORGANIZATION BLOCK (front page)

   `.group-list .module-heading` is the organization's logo + name bar. CKAN
   core paints it grey (#f6f6f6) with #333 links, which hides the white NIOZ
   logo completely. Navy is the backdrop the white logo is drawn for.
   ====================================== */

.group-list.module { border-radius: var(--nioz-radius-lg); overflow: hidden; }

.group-list .module-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background-color: var(--nioz-chrome-2) !important;
  border: none !important;
  padding: var(--space-sm) var(--space) !important;
}

.group-list .module-heading .module-image {
  /* Core floats this and caps it at 50px; flex handles the layout here. */
  float: none;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  line-height: 0;
  margin-right: 0;
}

.group-list .module-heading .module-image img {
  display: block;
  max-width: none;
  max-height: none;
  height: 40px;
  width: auto;
}

.group-list .module-heading .media-heading,
.group-list .module-heading h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--nioz-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  /* Core sets `word-break: break-all`, which chops names mid-word. */
  word-break: normal;
  overflow-wrap: anywhere;
}

.group-list .module-heading .media-heading a,
.group-list .module-heading h3 a,
.group-list .module-heading .h3 a { color: #fff !important; text-decoration: none; }

.group-list .module-heading .media-heading a:hover,
.group-list .module-heading h3 a:hover,
.group-list .module-heading .h3 a:hover { color: var(--nioz-orange) !important; }

/* ======================================
   ORGANIZATION LOGO (white-background contexts)

   The SVG declares no intrinsic size, only a tall 50x86 viewBox, and CKAN
   core stretches organization logos to the full width of their container
   (`.media-image img { min-width: 100% }`, `.context-info .image img
   { width: 100% }`), rendering it ~400px high. Cap and centre instead.
   ====================================== */

.media-grid .media-item img.media-image {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: 72px;
  margin: 0 auto var(--space-sm);
}

#organization-info .image { text-align: center; }

#organization-info .image a,
#organization-info .image img {
  display: inline-block;
  width: auto;
  height: 84px;
  max-width: 100%;
}

/* ======================================
   BUTTONS
   ====================================== */

.btn {
  border-radius: var(--radius-action) !important;
  font-family: var(--nioz-font-display);
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.5rem 1rem;
  transition: background-color var(--nioz-transition), border-color var(--nioz-transition), color var(--nioz-transition) !important;
}

.btn-sm { border-radius: var(--radius-action-sm) !important; padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
.btn-lg { border-radius: var(--radius-action) !important; padding: 0.7rem 1.5rem; font-size: 1rem; }

.btn-primary {
  background: var(--nioz-blue) !important;
  border-color: var(--nioz-blue) !important;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--nioz-blue-darkest) !important;
  border-color: var(--nioz-blue-darkest) !important;
  transform: none;
  box-shadow: none;
}

.btn-primary:active { transform: none !important; }

.btn-default,
.btn-secondary {
  border-color: var(--nioz-border-strong);
  color: var(--color--primary--700);
  background-color: var(--nioz-surface);
}

.btn-default:hover,
.btn-secondary:hover {
  border-color: var(--nioz-blue);
  color: var(--nioz-blue);
  background-color: var(--nioz-light-blue);
}

/* The one place orange is used as a button: the primary deposit action.
   Add class="btn nioz-btn-deposit" to the "Add Dataset" button. */
.nioz-btn-deposit,
.nioz-btn-deposit:visited {
  background: var(--nioz-orange) !important;
  border-color: var(--nioz-orange) !important;
  color: var(--color--primary--800) !important;
}

.nioz-btn-deposit:hover {
  background: var(--nioz-orange-deep) !important;
  border-color: var(--nioz-orange-deep) !important;
  color: #fff !important;
}

/* ======================================
   FOOTER
   ====================================== */

.site-footer {
  background: var(--color--primary--900) !important;
  color: rgba(255, 255, 255, 0.7);
  padding: 2.25rem 0 1.25rem;
  border-top: none;
  margin-top: var(--space-2xl);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nioz-bar-height);
  background: var(--nioz-colour-bar);
}

.site-footer a { color: rgba(255, 255, 255, 0.68); transition: color var(--nioz-transition); text-decoration: none; }
.site-footer a:hover { color: var(--nioz-orange); }
.site-footer p { color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; }

.nioz-footer-inner { padding-top: 0.25rem; }

.nioz-footer-inner .nioz-footer-logo {
  height: 32px;
  width: auto;
  margin-bottom: 0.65rem;
  filter: none;
}

.nioz-footer-inner .nioz-footer-blurb {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-top: 0.4rem;
  max-width: 30ch;
}

.nioz-footer-inner .nioz-footer-heading {
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--nioz-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.nioz-footer-inner .nioz-footer-links { font-size: 0.875rem; }
.nioz-footer-inner .nioz-footer-links li { margin-bottom: 0.4rem; }
.nioz-footer-inner .nioz-footer-links a { color: rgba(255, 255, 255, 0.68); }

.nioz-footer-inner .nioz-footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1.1rem 0 0.9rem;
}

.nioz-footer-inner .nioz-footer-copy {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.38);
}

/* ======================================
   ABOUT PAGE
   ====================================== */

.nioz-about { max-width: 62rem; margin: 0 auto; animation: none; }

.nioz-about-hero {
  position: relative;
  overflow: hidden;
  background: var(--color--primary--700);
  color: #fff;
  border-radius: var(--nioz-radius-lg);
  padding: 2.25rem 2rem;
  margin-bottom: var(--space-md);
  box-shadow: none;
}

.nioz-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 90% 10%, rgba(0, 235, 255, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 70% at 8% 100%, rgba(255, 165, 0, 0.16), transparent 55%);
  pointer-events: none;
}

.nioz-about-hero > * { position: relative; z-index: 1; }

.nioz-about-eyebrow {
  display: inline-block;
  font-family: var(--nioz-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nioz-orange);
  margin-bottom: 0.6rem;
}

.nioz-about-title.page-heading {
  color: #fff !important;
  font-size: var(--text-h1);
  margin: 0 0 0.85rem;
}

.nioz-about-lead {
  font-family: var(--nioz-font-display);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  max-width: 46ch;
  margin-bottom: 0.9rem;
}

.nioz-about-intro {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 68ch;
  margin-bottom: 0;
}

.nioz-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space);
  margin-bottom: var(--space-md);
}

.nioz-about-card {
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: none;
  transition: border-color var(--nioz-transition);
}

.nioz-about-card:hover { box-shadow: none; transform: none; border-color: var(--nioz-border-strong); }

.nioz-about-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nioz-radius);
  background: var(--nioz-light-blue);
  color: var(--nioz-blue);
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.nioz-about-card h2 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.nioz-about-card p { color: var(--nioz-text-muted); font-size: 0.9375rem; line-height: 1.65; margin: 0; }

.nioz-about-callout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--nioz-orange-tint);
  border: 1px solid var(--color--secondary--300);
  border-left: 3px solid var(--nioz-orange);
  border-radius: var(--nioz-radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: var(--space-md);
}

.nioz-about-callout-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--nioz-radius-pill);
  background: var(--nioz-orange);
  color: var(--color--primary--800);
  font-size: 1.2rem;
  box-shadow: none;
}

.nioz-about-callout-body { flex: 1 1 auto; min-width: 0; }
.nioz-about-callout-body h2 { font-size: 1.125rem; margin: 0 0 0.45rem; }
.nioz-about-callout-body p { color: var(--nioz-text); line-height: 1.65; margin: 0 0 1rem; }
.nioz-about-callout-btn { display: inline-flex; align-items: center; gap: 0.5rem; }

.nioz-about-contact {
  text-align: center;
  padding: 1.25rem 1rem 0;
  border-top: 1px solid var(--nioz-border);
}

.nioz-about-contact p { color: var(--nioz-text-muted); margin: 0; }
.nioz-about-contact a { font-weight: 600; }

/* ======================================
   DATASET RECORD HEADER (direction 1f)

   Optional markup — see APPLYING.md. Without the template change the page
   still works; these rules simply go unused.
   ====================================== */

.nioz-record-header {
  background: var(--nioz-chrome-2);
  color: #fff;
  margin: 0 0 var(--space-lg);
  padding: var(--space) var(--space-md);
  border-radius: var(--nioz-radius-lg);
}

/* Sidebar context-info title (the dataset / organization name shown above the
   follower count) is a contextual label, not a headline — drop the heavy
   weight. Scoped to `.secondary` so the homepage search heading is untouched. */
.secondary .context-info .heading,
.secondary h1.heading {
  font-weight: 500;
}

.nioz-record-header .breadcrumb,
.nioz-record-header .breadcrumb-item,
.nioz-record-header .breadcrumb-item.active { color: rgba(255, 255, 255, 0.55); }
.nioz-record-header .breadcrumb-item a { color: rgba(255, 255, 255, 0.75); }
.nioz-record-header .breadcrumb-item a:hover { color: #fff; }
.nioz-record-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.35); }

.nioz-record-header h1,
.nioz-record-header .page-heading {
  color: #fff !important;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 48ch;
  margin: 0 0 0.65rem;
}

.nioz-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  padding-bottom: var(--space);
}

.nioz-record-meta a { color: var(--nioz-cyan); }
.nioz-record-meta .nioz-record-doi { font-family: var(--nioz-font-mono); }

.nioz-record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.nioz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 24px;
  padding: 0 0.6rem;
  border-radius: var(--radius-action-sm);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.nioz-badge--published { background: var(--nioz-green); border-color: var(--nioz-green); }
.nioz-badge--draft { background: var(--nioz-orange); border-color: var(--nioz-orange); color: var(--color--primary--800); }
.nioz-badge--private { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.25); }

.nioz-record-actions { display: flex; gap: 0.6rem; align-items: center; }

/* Record tabs — styles CKAN's own `content_primary_nav` (.nav-tabs inside
   the record header) as tabs sitting on the navy band. */
.nioz-record-header .nav-tabs,
.nioz-record-tabs {
  border-bottom: none;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.nioz-record-header .nav-tabs .nav-link,
.nioz-record-tabs .nav-link,
.nioz-record-tabs > a {
  border: none;
  border-radius: var(--radius-action) var(--radius-action) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  background: transparent;
  transition: background-color var(--nioz-transition), color var(--nioz-transition);
}

.nioz-record-header .nav-tabs .nav-link:hover,
.nioz-record-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.nioz-record-header .nav-tabs .nav-link.active,
.nioz-record-tabs .nav-link.active {
  background: var(--nioz-bg);
  color: var(--color--primary--700);
  font-weight: 600;
  border: none;
}

.nioz-record-header .nav-tabs .nav-link .badge,
.nioz-record-tabs .nav-link .badge {
  background: transparent !important;
  border: none;
  color: inherit;
  opacity: 0.6;
  padding: 0 0 0 0.25rem;
}

/* At-a-glance strip under the description. */
.nioz-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}

.nioz-glance-item {
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  padding: 0.85rem 1rem;
}

.nioz-glance-item dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nioz-text-muted);
  margin-bottom: 0.35rem;
}

.nioz-glance-item dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color--primary--700);
}

/* Cite card in the sidebar. */
.nioz-cite-card {
  background: var(--nioz-chrome-2);
  border-radius: var(--nioz-radius-lg);
  padding: 1.25rem;
  color: #fff;
}

.nioz-cite-card .nioz-cite-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.6rem;
}

.nioz-cite-card p {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.85rem;
}

/* Version history rows. */
.nioz-versions {
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  overflow: hidden;
}

.nioz-version-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--nioz-border);
  font-size: 0.875rem;
}

.nioz-version-row:last-child { border-bottom: none; }
.nioz-version-row.is-current { background: var(--color--primary--100); }
.nioz-version-row .nioz-version-no { flex: 0 0 3.5rem; font-weight: 700; color: var(--nioz-blue); }
.nioz-version-row .nioz-version-date { flex: 0 0 7rem; font-family: var(--nioz-font-mono); color: var(--nioz-text-muted-cool); }
.nioz-version-row .nioz-version-note { flex: 1 1 auto; min-width: 0; color: var(--nioz-text); }

/* ======================================
   DATASET / RESOURCE ITEMS
   ====================================== */

.resources > h2 {
  font-family: var(--nioz-font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--color--primary--700);
  border-bottom: 1px solid var(--nioz-border);
  padding-bottom: 0.5rem;
  margin-bottom: var(--space-sm);
}

.resource-list { position: relative; z-index: 0; }

.resource-item {
  position: relative;
  z-index: 1;
  background-color: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-left: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  margin: 0 0 var(--space-xs);
  padding: 0.9rem 1rem;
  transition: border-color var(--nioz-transition), background-color var(--nioz-transition);
}

.resource-item:hover {
  box-shadow: none;
  border-color: var(--nioz-border-strong);
  background-color: var(--color--primary--100);
}

/* Keep Explore menu above the next resource card */
.resource-item:hover,
.resource-item:focus-within,
.resource-item:has(.dropdown-menu.show),
.resource-item:has(.show > .dropdown-menu),
.resource-item:has(.btn-group.open),
.resource-item:has(.dropdown.open) { z-index: 20; }

.resource-item .dropdown-menu,
.resource-item .btn-group .dropdown-menu { z-index: 30; }

.resource-item a.heading {
  font-size: 0.9375rem !important;
  color: var(--nioz-blue) !important;
  font-weight: 600;
  font-family: var(--nioz-font-display);
}

.resource-item a.heading:hover { color: var(--nioz-blue-deep) !important; }

.resource-item .format-label,
.resource-item .label {
  /* CKAN core renders `.format-label` as an absolutely-positioned icon with
     the text pushed off-screen (`text-indent:-9900px`, `width:60px`,
     `position:absolute`). Reset all of that so it reads as a normal inline
     format pill sitting just after the resource name. */
  position: static;
  top: auto;
  right: auto;
  float: none;
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  text-indent: 0;
  vertical-align: baseline;
  margin: 0 0 0 0.5rem;
  background: var(--nioz-green-tint) !important;
  color: var(--nioz-green-deep) !important;
  border: none;
  border-radius: var(--radius-action-sm);
  /* At least as large as the resource name (a.heading is 0.9375rem). */
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
}

/* ======================================
   ADDITIONAL INFO TABLE

   Kept as a table (it is a table), but the zebra striping is dropped: with
   20+ rows the alternating blue made the whole block read as a texture. A
   hairline rule and a fixed label column is easier to scan.
   ====================================== */

.additional-info h3 {
  font-family: var(--nioz-font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  margin-top: var(--space-lg);
  color: var(--color--primary--700);
  border-bottom: 1px solid var(--nioz-border);
  padding-bottom: 0.4rem;
}

.additional-info table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  border-radius: 0;
  overflow: visible;
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  font-size: 0.9375rem;
}

.additional-info table tr {
  border-bottom: 1px solid var(--nioz-border);
  font-weight: 400;
}

.additional-info table tr:last-child { border-bottom: none; }
.additional-info table tr:nth-child(even) { background-color: transparent; }
.additional-info table tr:hover { background-color: var(--color--primary--100); }

.additional-info table td,
.additional-info table th { padding: 0.65rem 0.9rem; vertical-align: top; }

.additional-info table th {
  width: 34%;
  color: var(--nioz-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
}

.additional-info table td {
  color: var(--nioz-text);
  /* Long unbroken values (DOIs, URLs, monospace identifiers) must wrap rather
     than force the table wider than the viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Identifier-shaped values are set in monospace. */
.additional-info table td.dataset-details:has(a[href*="doi.org"]),
.additional-info .nioz-identifier { font-family: var(--nioz-font-mono); }

/* ======================================
   DATASET LIST / SEARCH RESULTS (direction 1c)

   Flat rows separated by a hairline, not floating cards. Title and DOI
   version are the two things a depositor scans for.
   ====================================== */

.dataset-list {
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  overflow: hidden;
  padding: 0;
}

.dataset-list .dataset-item,
.dataset-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nioz-border);
  border-radius: 0;
  padding: var(--space) var(--space-md);
  margin: 0;
  transition: background-color var(--nioz-transition);
}

.dataset-list .dataset-item:last-child { border-bottom: none; }

.dataset-list .dataset-item:hover,
.dataset-item:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--nioz-border);
  background-color: var(--color--primary--100);
}

.dataset-item .heading,
.dataset-item h3.dataset-heading a {
  color: var(--color--primary--700) !important;
  font-family: var(--nioz-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.dataset-item .heading:hover,
.dataset-item h3.dataset-heading a:hover {
  color: var(--nioz-blue) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dataset-item .notes {
  color: var(--nioz-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 74ch;
}

.label-default,
.badge {
  background-color: var(--nioz-light-blue);
  color: var(--nioz-blue);
  border: 1px solid var(--nioz-border-cool);
  border-radius: var(--radius-tiny);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
}

/* "Private" badge — white label needs a solid dark fill. */
.dataset-private,
.dataset-private.badge,
.badge.bg-secondary {
  background-color: var(--nioz-chrome-2) !important;
  border-color: var(--nioz-chrome-2) !important;
  color: #fff !important;
}

.dataset-private .fa,
.dataset-private.badge .fa { color: #fff !important; margin-right: 0.25rem; }

.dataset-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dataset-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dataset-heading-row .cite-button { white-space: nowrap; }

.dataset-digital-objects {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.5rem;
  color: var(--nioz-text-muted-cool);
  background: transparent;
  border: 1px solid var(--nioz-border);
  border-radius: var(--radius-action-sm);
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.dataset-digital-objects .fa { color: var(--nioz-text-muted); }

.dataset-doi,
.dataset-doi-item-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.8125rem;
  margin-top: 0.4rem;
  color: var(--nioz-text-muted);
}

/* DOI version pill on the search result card. */
.dataset-doi-version {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--nioz-border-cool);
  border-radius: var(--radius-tiny);
  background: var(--nioz-light-blue);
  color: var(--nioz-blue);
  font-family: var(--nioz-font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

/* DOI version badge beside the dataset title. Sized in `em` so it tracks
   the h1 rather than fighting it. */
.dataset-doi-version-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.2em 0.55em;
  border: 1px solid var(--nioz-border-cool);
  border-radius: var(--radius-tiny);
  background: var(--nioz-light-blue);
  color: var(--nioz-blue);
  font-family: var(--nioz-font);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--nioz-transition), border-color var(--nioz-transition);
}

.dataset-doi-version-badge:hover,
.dataset-doi-version-badge:focus {
  background: var(--nioz-blue);
  border-color: var(--nioz-blue);
  color: var(--nioz-white);
  text-decoration: none;
}

/* On the navy record header the badge reverses out. */
.nioz-record-header .dataset-doi-version-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* DOI version chip on activity-stream rows. */
.activity-doi-version {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--nioz-border-cool);
  border-radius: var(--radius-tiny);
  background: var(--nioz-light-blue);
  color: var(--nioz-blue);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.dataset-meta-label { color: var(--nioz-text); font-weight: 600; }

.dataset-keywords {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cite-text {
  font-family: var(--nioz-font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  resize: vertical;
}

/* ======================================
   FACET / FILTER SIDEBAR
   Borderless sections separated by rules, rather than five stacked cards
   each with its own navy heading bar.
   ====================================== */

.filters,
.secondary.filters { display: flex; flex-direction: column; }

.filters .module,
.secondary .module,
.secondary .module.box,
.secondary .module.context-info {
  border: 1px solid var(--nioz-border) !important;
  border-radius: var(--nioz-radius) !important;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  box-shadow: none !important;
  background: var(--nioz-surface);
  transition: border-color var(--nioz-transition);
}

.filters .module:hover,
.secondary .module:hover { box-shadow: none !important; border-color: var(--nioz-border) !important; }

/* CKAN wraps some sidebar cards in a bare .module, so the rule above rings
   both wrapper and inner .module — a double border. */
.filters .module .module,
.secondary .module .module {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.filters .module:hover .module,
.secondary .module:hover .module { box-shadow: none !important; border-color: transparent !important; }

.filters .module-heading,
.secondary .module-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent !important;
  color: var(--nioz-text-muted) !important;
  /* CKAN core adds border-top/bottom #ddd on stacked facet headings. */
  border: none !important;
  border-bottom: 1px solid var(--nioz-border) !important;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--nioz-font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.filters .module-heading .fa,
.secondary .module-heading .fa {
  color: var(--nioz-text-muted);
  font-size: 0.8rem;
  opacity: 0.8;
  flex-shrink: 0;
}

/* The organization / context-info card keeps a navy heading — it is an
   identity block, not a filter. */
.secondary .module.context-info .module-heading {
  background: var(--nioz-chrome-2) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.secondary .module.context-info .module-heading .fa { color: var(--nioz-orange); }

.filters .nav-facet,
.filters .module-content .nav { margin: 0; padding: 0.3rem 0; }

.filters .nav-facet .nav-item,
.filters .module-content li.nav-item { margin: 0; border: none; }

.filters .module-content .nav-item .nav-link,
.filters .module-content li a,
.filters .nav-facet .nav-item > a {
  color: var(--nioz-text) !important;
  padding: 0.4rem 0.9rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none !important;
  transition: color var(--nioz-transition), background-color var(--nioz-transition);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 0;
}

.filters .nav-facet .nav-item > a .item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filters .module-content .nav-item .nav-link:hover,
.filters .module-content li a:hover,
.filters .nav-facet .nav-item > a:hover {
  color: var(--nioz-blue) !important;
  background-color: var(--color--primary--100);
  transform: none;
}

.filters .module-content .active a,
.filters .module-content li.active a,
.filters .nav-facet .nav-item.active > a {
  color: var(--nioz-blue) !important;
  font-weight: 600;
  background: var(--color--primary--100);
  box-shadow: inset 2px 0 0 var(--nioz-blue);
}

.filters .nav-facet .nav-item.active > a:hover { background: var(--nioz-light-blue); }

.filters .nav-facet .item-count.badge,
.filters .module-content .item-count.badge {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--nioz-text-muted) !important;
  background: transparent !important;
  border: none;
  border-radius: 0;
}

.filters .nav-facet .nav-item > a:hover .item-count.badge,
.filters .nav-facet .nav-item.active > a .item-count.badge {
  color: var(--nioz-blue) !important;
  background: transparent !important;
  border-color: transparent;
}

.filters .nav-facet .facet-close {
  display: inline-flex;
  align-items: center;
  color: var(--nioz-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.9;
}

.filters .nav-facet .nav-item.active > a:hover .facet-close { color: var(--nioz-blue); opacity: 1; }

.filters .module-footer {
  margin: 0;
  padding: 0.4rem 0.9rem 0.65rem;
  border-top: 1px solid var(--nioz-border);
  background: transparent;
}

.filters .module-footer .read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--nioz-blue);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--nioz-transition);
}

.filters .module-footer .read-more:hover { color: var(--nioz-blue-deep); }
.filters .module-footer .read-more::after { content: "→"; font-weight: 700; }

.filters .module-content.empty {
  margin: 0;
  padding: 0.8rem 0.9rem 1rem;
  color: var(--nioz-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Active filter chips above search results */
.filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0.75rem 0 0.35rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.filter-list .facet {
  color: var(--nioz-text-muted);
  font-family: var(--nioz-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 0.1rem;
}

.filter-list .filtered.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.45rem 0.22rem 0.6rem;
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border-strong);
  border-radius: var(--radius-action-sm);
  color: var(--color--primary--700);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none;
}

.filter-list .filtered.pill .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-tiny);
  color: var(--nioz-text-muted);
  text-decoration: none;
  transition: background-color var(--nioz-transition), color var(--nioz-transition);
}

.filter-list .filtered.pill .remove:hover { background: rgba(198, 40, 40, 0.12); color: #c62828; }

.show-filters.btn { border-radius: var(--radius-action); font-weight: 600; }

/* ======================================
   BREADCRUMBS
   ====================================== */

.breadcrumb { background-color: transparent; padding: 0.5rem 0; font-size: 0.8125rem; }
.breadcrumb-item a { color: var(--nioz-text-muted-cool); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { color: var(--nioz-blue); }
.breadcrumb-item.active { color: var(--nioz-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nioz-border-strong); }

/* ======================================
   CARDS & BOXES (general)
   ====================================== */

.module.box,
.module.card {
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  box-shadow: none;
  background-color: var(--nioz-surface);
}

.primary .module { border-radius: var(--nioz-radius); }

/* ======================================
   PAGINATION
   ====================================== */

.pagination .page-link {
  color: var(--color--primary--700);
  border-color: var(--nioz-border);
  border-radius: var(--radius-action-sm) !important;
  margin: 0 0.1rem;
  font-size: 0.875rem;
  transition: background-color var(--nioz-transition), color var(--nioz-transition);
}

.pagination .page-link:hover {
  background-color: var(--color--primary--100);
  color: var(--nioz-blue);
  border-color: var(--nioz-border-strong);
  transform: none;
}

.pagination .page-item.active .page-link {
  background: var(--nioz-blue);
  border-color: var(--nioz-blue);
  color: #fff;
  box-shadow: none;
}

/* ======================================
   ALERTS / FLASH MESSAGES
   ====================================== */

.alert {
  border-radius: var(--radius-action) !important;
  border-width: 1px;
  border-left-width: 3px;
  font-size: 0.9375rem;
}

.alert-info {
  background-color: var(--color--primary--100);
  border-color: var(--nioz-border-cool);
  border-left-color: var(--nioz-blue);
  color: var(--nioz-blue-deep);
}

.alert-success {
  background-color: var(--nioz-green-tint);
  border-color: var(--color--tertiary--beta--300);
  border-left-color: var(--nioz-green-deep);
  color: var(--nioz-green-deep);
}

.alert-warning {
  background-color: var(--nioz-orange-tint);
  border-color: var(--color--secondary--300);
  border-left-color: var(--nioz-orange);
  color: var(--nioz-orange-ink);
}

.alert-danger,
.alert-error { border-left-color: #c62828; }

/* ======================================
   FORMS
   ====================================== */

.form-control,
.form-select {
  border-radius: var(--radius-action);
  border-color: var(--nioz-border-strong);
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  transition: border-color var(--nioz-transition), box-shadow var(--nioz-transition);
}

.form-control:focus,
.form-select:focus { border-color: var(--nioz-blue); box-shadow: var(--nioz-focus); }

.control-label,
label { color: var(--nioz-text); font-weight: 600; font-size: 0.875rem; }

.form-group .info-block,
.form-text { color: var(--nioz-text-muted); font-size: 0.8125rem; }

/* ======================================
   ORGANIZATION / GROUP CARDS
   ====================================== */

.organization-list .organization-item,
.group-list .group-item {
  background: var(--nioz-surface);
  border: 1px solid var(--nioz-border);
  border-radius: var(--nioz-radius);
  padding: 1rem 1.1rem;
  margin-bottom: var(--space-xs);
  transition: border-color var(--nioz-transition);
}

.organization-list .organization-item:hover,
.group-list .group-item:hover { box-shadow: none; transform: none; border-color: var(--nioz-border-strong); }

/* ======================================
   TABS / DASHBOARD
   ====================================== */

.dash-tabs.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  border-bottom-color: var(--nioz-blue);
  color: var(--nioz-blue);
  font-weight: 600;
}

.nav-tabs .nav-link {
  font-family: var(--nioz-font-display);
  font-size: 0.9375rem;
  transition: color var(--nioz-transition);
}

/* ======================================
   RESPONSIVE
   ====================================== */

@media (max-width: 991.98px) {
  .masthead .navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .masthead .site-search { margin: 0.6rem 0 0; width: 100%; }
  .masthead .site-search .form-control { min-width: 0; flex: 1; }
  .nioz-record-header .nav-tabs,
  .nioz-record-tabs { overflow-x: auto; }
}

@media (max-width: 767.98px) {
  :root { --nioz-logo-height: 52px; }
  .nioz-footer-inner .nioz-footer-logo { height: 28px; }
  .homepage .hero { padding-top: var(--space-xl) !important; padding-bottom: var(--space-lg) !important; }
  .dataset-list .dataset-item,
  .dataset-item { padding: var(--space) var(--space); }
  .nioz-about-hero { padding: 1.75rem 1.25rem; }
  .nioz-about-callout { flex-direction: column; gap: 1rem; padding: 1.25rem; }

  /* Record header: keep padding tighter and let the long DOI wrap instead of
     spilling past the navy band. */
  .nioz-record-header { padding: var(--space) var(--space); }
  .nioz-record-meta { gap: 0.35rem 0.75rem; }
  .nioz-record-meta,
  .nioz-record-doi { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

  /* Additional Info: a two-column table does not fit an ~430px phone once the
     values are DOIs/URLs. Stack each row — label above its value — so nothing
     is clipped and no horizontal scroll appears. */
  .additional-info table,
  .additional-info table tbody,
  .additional-info table tr,
  .additional-info table th,
  .additional-info table td { display: block; width: 100%; }

  .additional-info table tr { padding: 0.6rem 0.9rem; }
  .additional-info table tr:hover { background-color: transparent; }

  .additional-info table th {
    width: 100%;
    padding: 0 0 0.15rem;
    border: none;
  }

  .additional-info table td {
    padding: 0;
    color: var(--nioz-text);
  }
}

/* ======================================
   DEBUG
   ====================================== */

#flDebug,
#flDebug * { overflow: scroll !important; }