/*
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  preCICE Design System — theme-main.css [HEARTBEAT v3.3]           ║
 * ║                                                                      ║
 * ║  Logo source colors:                                                 ║
 * ║    Blue   #0a76bb  (the blue wave)                                   ║
 * ║    Orange #ed762c  (the orange wave)                                 ║
 * ║    Ink    #040606  (logotype)                                        ║
 * ║                                                                      ║
 * ║  Architecture:                                                       ║
 * ║    1. Full tonal scales (like Tailwind's color system)               ║
 * ║    2. Semantic tokens per component (like Stripe's design tokens)    ║
 * ║    3. [data-theme="dark"] overrides semantic layer only              ║
 * ║    4. CSS applies tokens to actual elements                          ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. TONAL SCALES  (raw palette — never used directly in components)
   These never change between light/dark. Think Tailwind's blue-50…900.
═══════════════════════════════════════════════════════════════════════ */
:root {

  /* ── Blue scale (from #0a76bb) ──────────────────────────────────────
     Derived by stepping lightness in HSL from the brand hue (205°, 89%)  */
  --blue-50: #e8f4fc;
  --blue-100: #cce5f6;
  --blue-200: #99ccee;
  --blue-300: #66b2e5;
  --blue-400: #3a9dd4;
  /* blue-light */
  --blue-500: #0a76bb;
  /* BRAND — logo blue wave */
  --blue-600: #085d93;
  --blue-700: #064870;
  --blue-800: #04304d;
  --blue-900: #021828;

  /* ── Orange scale (from #ed762c) ────────────────────────────────────
     Hue 25°, sat 83%. Used for accents, highlights, badges, hover states */
  --orange-50: #fef3e8;
  --orange-100: #fde3c8;
  --orange-200: #fbc591;
  --orange-300: #f9a85a;
  --orange-400: #f49356;
  /* orange-light */
  --orange-500: #ed762c;
  /* BRAND — logo orange wave */
  --orange-600: #c45a14;
  --orange-700: #964310;
  --orange-800: #672e0b;
  --orange-900: #391807;

  /* ── Neutral scale (blue-tinted, NOT flat grey — Stripe/Linear style)
     Hue 215°, sat 12–15%. Adds depth without being colourless.         */
  --neutral-0: #ffffff;
  --neutral-50: #f5f7fa;
  --neutral-100: #eaecf0;
  --neutral-200: #d5d9e2;
  --neutral-300: #b4bac8;
  --neutral-400: #8c93a8;
  --neutral-500: #636b80;
  --neutral-600: #4a5168;
  --neutral-700: #333a52;
  --neutral-800: #1e2336;
  --neutral-900: #0d1020;
  --neutral-950: #070912;

  /* ── Ink (logotype near-black — used for headings & navbar) ───────── */
  --ink: #040606;

  /* ── Green / success ────────────────────────────────────────────────
     Distinct from brand, only for status messaging                      */
  --green-400: #34d399;
  --green-600: #059669;

  /* ── Red / error ────────────────────────────────────────────────── */
  --red-400: #f87171;
  --red-600: #dc2626;

  /* ── Typography scale ───────────────────────────────────────────────
     Fluid, consistent type ramp used across all elements                */
  --font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Size scale */
  --text-xs: 0.6875rem;
  /* 11px  — meta, timestamps, uppercase labels */
  --text-sm: 0.8125rem;
  /* 13px  — nav links, footer links, badges     */
  --text-base: 0.9375rem;
  /* 15px  — body paragraph text                 */
  --text-md: 1rem;
  /* 16px  — slightly larger body / lead text     */
  --text-lg: 1.125rem;
  /* 18px  — h6 / subheads                        */
  --text-xl: 1.25rem;
  /* 20px  — h5                                   */
  --text-2xl: 1.5rem;
  /* 24px  — h4                                   */
  --text-3xl: 1.875rem;
  /* 30px  — h3                                   */
  --text-4xl: 2.25rem;
  /* 36px  — h2                                   */
  --text-5xl: 3rem;
  /* 48px  — h1                                   */

  /* Weight tokens */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line-height tokens */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* Letter-spacing tokens */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.12em;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SEMANTIC TOKENS — LIGHT MODE  (what components actually reference)
═══════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {

  /* ── Page surfaces ──────────────────────────────────────────────── */
  --surface-page: var(--neutral-0);
  /* main canvas: white */
  --surface-raised: var(--neutral-50);
  /* cards, inputs */
  --surface-overlay: var(--neutral-100);
  /* hover states, alt sections */
  --surface-sunken: var(--blue-50);
  /* inset wells, code bg */
  --surface-brand: var(--blue-500);
  /* full-bleed brand sections */
  --surface-accent: var(--orange-500);
  /* full-bleed accent sections */
  --surface-dark: var(--neutral-900);
  /* testimonials, footer, dark sections */
  --surface-darker: var(--neutral-950);
  /* navbar, deepest elements */
  --surface-news: var(--blue-50);
  /* news strip */

  /* ── Text ───────────────────────────────────────────────────────── */
  --text-primary: var(--ink);
  /* headings, body — #040606 */
  --text-secondary: var(--neutral-600);
  /* supporting copy — #4a5168 */
  --text-tertiary: var(--neutral-500);
  /* captions, meta — #636b80 */
  --text-disabled: var(--neutral-300);
  /* disabled state — #b4bac8 */
  --text-on-dark: var(--neutral-100);
  /* text on dark surfaces */
  --text-on-brand: #ffffff;
  /* text on blue surfaces */
  --text-on-accent: #ffffff;
  /* text on orange surfaces */
  --text-heading: var(--ink);
  /* h1–h6 on light bg */
  --text-heading-dark: var(--neutral-50);
  /* headings inside dark sections */

  /* ── Links ──────────────────────────────────────────────────────── */
  --link-color: var(--blue-600);
  /* slightly darker for WCAG AA on white */
  --link-hover: var(--blue-700);
  --link-visited: #6d4bb5;
  /* accessible purple */
  --link-on-dark: var(--blue-300);
  /* links inside dark sections */
  --link-on-dark-hover: var(--blue-200);

  /* ── Navbar ─────────────────────────────────────────────────────── */
  --nav-bg: var(--ink);
  --nav-border: rgba(10, 118, 187, 0.3);
  --nav-text: var(--neutral-400);
  --nav-text-hover: var(--neutral-0);
  --nav-text-active: var(--neutral-0);
  --nav-active-pill-bg: rgba(10, 118, 187, 0.15);
  --nav-active-underline: var(--blue-400);

  /* ── Footer ─────────────────────────────────────────────────────── */
  /* Light mode: warm near-white — no longer always dark */
  --footer-bg: var(--neutral-50);
  /* warm light surface — was neutral-950 */
  --footer-border: var(--neutral-200);
  /* visible divider on light bg */
  --footer-text: var(--neutral-600);
  /* dark enough on light bg */
  --footer-link: var(--neutral-600);
  --footer-link-hover: var(--orange-600);
  /* orange accent on hover in light mode */
  --footer-heading: var(--ink);
  /* near-black headings on light bg */

  /* ── Cards ──────────────────────────────────────────────────────── */
  --card-bg: var(--neutral-0);
  --card-bg-hover: var(--blue-50);
  --card-border: var(--neutral-200);
  --card-border-hover: var(--blue-400);
  --card-shadow: 0 1px 3px rgba(13, 16, 32, 0.08), 0 4px 16px rgba(13, 16, 32, 0.04);
  --card-shadow-hover: 0 4px 12px rgba(10, 118, 187, 0.15), 0 12px 40px rgba(10, 118, 187, 0.10);
  --card-header-bg: var(--blue-500);
  --card-header-text: #ffffff;
  /* Dark-surface card (testimonials, support) */
  --card-invert-bg: rgba(255, 255, 255, 0.04);
  --card-invert-border: rgba(10, 118, 187, 0.35);
  --card-invert-hover: rgba(255, 255, 255, 0.08);

  /* ── Buttons — Primary (Blue CTA) ───────────────────────────────── */
  --btn-primary-bg: var(--blue-500);
  --btn-primary-bg-hover: var(--blue-600);
  --btn-primary-bg-active: var(--blue-700);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 2px 8px rgba(10, 118, 187, 0.35);
  --btn-primary-shadow-hover: 0 4px 16px rgba(10, 118, 187, 0.50);

  /* ── Buttons — Secondary (outline) ─────────────────────────────── */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: var(--blue-50);
  --btn-secondary-text: var(--blue-600);
  --btn-secondary-border: var(--blue-300);
  --btn-secondary-border-hover: var(--blue-500);

  /* ── Buttons — Ghost (subtle, on white) ─────────────────────────── */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--neutral-100);
  --btn-ghost-text: var(--neutral-700);
  --btn-ghost-border: var(--neutral-200);

  /* ── Buttons — Accent (Orange — for secondary CTAs) ─────────────── */
  --btn-accent-bg: var(--orange-500);
  --btn-accent-bg-hover: var(--orange-600);
  --btn-accent-text: #ffffff;
  --btn-accent-shadow: 0 2px 8px rgba(237, 118, 44, 0.35);
  --btn-accent-shadow-hover: 0 4px 16px rgba(237, 118, 44, 0.50);

  /* ── Icons ──────────────────────────────────────────────────────── */
  --icon-brand: var(--blue-500);
  --icon-accent: var(--orange-500);
  --icon-muted: var(--neutral-400);
  --icon-on-dark: var(--neutral-400);
  --icon-success: var(--green-600);
  --icon-error: var(--red-600);

  /* ── Borders ────────────────────────────────────────────────────── */
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--blue-500);
  --border-accent: var(--orange-500);

  /* ── Focus ──────────────────────────────────────────────────────── */
  --focus-ring: rgba(10, 118, 187, 0.45);
  --focus-ring-accent: rgba(237, 118, 44, 0.45);

  /* ── Badges / tags ──────────────────────────────────────────────── */
  --badge-blue-bg: var(--blue-100);
  --badge-blue-text: var(--blue-700);
  --badge-orange-bg: var(--orange-100);
  --badge-orange-text: var(--orange-700);
  --badge-neutral-bg: var(--neutral-100);
  --badge-neutral-text: var(--neutral-700);

  /* ── Code ───────────────────────────────────────────────────────── */
  --code-bg: var(--blue-50);
  --code-text: var(--blue-800);
  --code-border: var(--blue-100);
  --code-inline-bg: var(--neutral-100);
  --code-inline-text: var(--blue-700);

  /* ── Logowall ───────────────────────────────────────────────────── */
  --logo-filter: grayscale(100%);
  --logo-opacity: 0.45;
  --logo-filter-hover: grayscale(0%);
  --logo-opacity-hover: 1;

  /* ── Scrollbar ──────────────────────────────────────────────────── */
  --scrollbar-track: var(--neutral-100);
  --scrollbar-thumb: var(--blue-200);
  --scrollbar-thumb-hover: var(--blue-400);

  /* ── Gradient highlights (Stripe-style hero glow) ───────────────── */
  --gradient-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --gradient-accent: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-600) 100%);
  --gradient-hero-glow: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(10, 118, 187, 0.12) 0%, transparent 70%);
  --gradient-section: linear-gradient(180deg, var(--neutral-0) 0%, var(--blue-50) 100%);

  /* ── Misc ───────────────────────────────────────────────────────── */
  --selection-bg: var(--blue-200);
  --selection-text: var(--blue-900);
  --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. SEMANTIC TOKENS — DARK MODE
   Only the semantic layer changes. Tonal scales stay identical above.
═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Page surfaces ──────────────────────────────────────────────── */
  --surface-page: var(--neutral-900);
  /* #0d1020 — rich dark, not pure black */
  --surface-raised: var(--neutral-800);
  /* #1e2336 — cards */
  --surface-overlay: rgba(255, 255, 255, 0.06);
  /* hover on dark — slightly brighter for feedback */
  --surface-sunken: var(--neutral-950);
  /* inset wells */
  --surface-brand: var(--blue-700);
  /* darker brand section */
  --surface-accent: var(--orange-700);
  --surface-dark: var(--neutral-950);
  --surface-darker: #020305;
  --surface-news: rgba(10, 118, 187, 0.12);

  /* ── Text ───────────────────────────────────────────────────────── */
  --text-primary: var(--neutral-50);
  /* #f5f7fa — high-contrast body text */
  --text-secondary: var(--neutral-300);
  /* raised from 400 → WCAG AA on dark bg */
  --text-tertiary: var(--neutral-400);
  /* raised from 500 → readable captions */
  --text-disabled: var(--neutral-600);
  /* raised from 700 → visible disabled state */
  --text-on-dark: var(--neutral-100);
  --text-on-brand: #ffffff;
  --text-on-accent: #ffffff;
  --text-heading: var(--neutral-50);
  /* crisp white-tinted headings */
  --text-heading-dark: var(--neutral-50);

  /* ── Links ──────────────────────────────────────────────────────── */
  --link-color: var(--blue-300);
  /* #66b2e5 — accessible on dark */
  --link-hover: var(--blue-200);
  --link-visited: #c4b5fd;
  /* softer purple on dark */
  --link-on-dark: var(--blue-300);
  --link-on-dark-hover: var(--blue-200);

  /* ── Navbar ─────────────────────────────────────────────────────── */
  --nav-bg: var(--neutral-950);
  --nav-border: rgba(10, 118, 187, 0.2);
  --nav-text: var(--neutral-400);
  --nav-text-hover: var(--neutral-100);
  --nav-text-active: #ffffff;
  --nav-active-pill-bg: rgba(10, 118, 187, 0.20);
  --nav-active-underline: var(--blue-400);

  /* ── Footer ─────────────────────────────────────────────────────── */
  --footer-bg: var(--neutral-950);
  /* dark footer in dark mode */
  --footer-border: rgba(255, 255, 255, 0.07);
  --footer-text: var(--neutral-400);
  /* readable on near-black */
  --footer-link: var(--neutral-400);
  --footer-link-hover: var(--blue-300);
  /* blue hover in dark mode */
  --footer-heading: var(--neutral-100);
  /* crisp headings on dark */

  /* ── Cards ──────────────────────────────────────────────────────── */
  --card-bg: var(--neutral-800);
  --card-bg-hover: var(--neutral-700);
  --card-border: rgba(255, 255, 255, 0.09);
  /* slightly more visible */
  --card-border-hover: var(--blue-400);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 4px 12px rgba(10, 118, 187, 0.3), 0 12px 40px rgba(10, 118, 187, 0.15);
  --card-header-bg: var(--blue-700);
  --card-header-text: #ffffff;
  --card-invert-bg: rgba(255, 255, 255, 0.03);
  --card-invert-border: rgba(10, 118, 187, 0.30);
  --card-invert-hover: rgba(255, 255, 255, 0.06);

  /* ── Buttons — Primary ──────────────────────────────────────────── */
  --btn-primary-bg: var(--blue-500);
  --btn-primary-bg-hover: var(--blue-400);
  --btn-primary-bg-active: var(--blue-600);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 2px 8px rgba(10, 118, 187, 0.4);
  --btn-primary-shadow-hover: 0 4px 20px rgba(10, 118, 187, 0.6);

  /* ── Buttons — Secondary ────────────────────────────────────────── */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: rgba(10, 118, 187, 0.15);
  --btn-secondary-text: var(--blue-300);
  --btn-secondary-border: var(--blue-600);
  --btn-secondary-border-hover: var(--blue-400);

  /* ── Buttons — Ghost ────────────────────────────────────────────── */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.08);
  --btn-ghost-text: var(--neutral-200);
  /* raised from 300 → crisper on dark */
  --btn-ghost-border: rgba(255, 255, 255, 0.14);
  /* slightly more visible */

  /* ── Buttons — Accent ───────────────────────────────────────────── */
  --btn-accent-bg: var(--orange-500);
  --btn-accent-bg-hover: var(--orange-400);
  --btn-accent-text: #ffffff;
  --btn-accent-shadow: 0 2px 8px rgba(237, 118, 44, 0.4);
  --btn-accent-shadow-hover: 0 4px 20px rgba(237, 118, 44, 0.6);

  /* ── Icons ──────────────────────────────────────────────────────── */
  --icon-brand: var(--blue-400);
  --icon-accent: var(--orange-400);
  --icon-muted: var(--neutral-400);
  --icon-on-dark: var(--neutral-400);
  --icon-success: var(--green-400);
  --icon-error: var(--red-400);

  /* ── Borders ────────────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.10);
  /* raised from 0.08 → visible dividers */
  --border-strong: rgba(255, 255, 255, 0.18);
  /* raised from 0.15 → strong borders pop */
  --border-brand: var(--blue-500);
  --border-accent: var(--orange-500);

  /* ── Focus ──────────────────────────────────────────────────────── */
  --focus-ring: rgba(58, 157, 212, 0.55);
  --focus-ring-accent: rgba(249, 163, 90, 0.55);

  /* ── Badges ─────────────────────────────────────────────────────── */
  --badge-blue-bg: rgba(10, 118, 187, 0.22);
  --badge-blue-text: var(--blue-200);
  /* raised from 300 → AA contrast on rgba bg */
  --badge-orange-bg: rgba(237, 118, 44, 0.22);
  --badge-orange-text: var(--orange-200);
  /* raised from 300 → better legibility */
  --badge-neutral-bg: rgba(255, 255, 255, 0.09);
  --badge-neutral-text: var(--neutral-200);
  /* raised from 300 → crisp on dark */

  /* ── Code ───────────────────────────────────────────────────────── */
  --code-bg: var(--neutral-950);
  --code-text: var(--blue-200);
  /* raised from 200 — same, good contrast */
  --code-border: rgba(10, 118, 187, 0.28);
  --code-inline-bg: rgba(10, 118, 187, 0.16);
  --code-inline-text: var(--blue-200);
  /* raised from 300 → WCAG AA */

  /* ── Logowall ───────────────────────────────────────────────────── */
  --logo-filter: grayscale(100%) brightness(1.6);
  --logo-opacity: 0.35;
  --logo-filter-hover: grayscale(0%) brightness(1);
  --logo-opacity-hover: 1;

  /* ── Scrollbar ──────────────────────────────────────────────────── */
  --scrollbar-track: var(--neutral-900);
  --scrollbar-thumb: var(--neutral-700);
  --scrollbar-thumb-hover: var(--blue-600);

  /* ── Gradient highlights ────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
  --gradient-accent: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-700) 100%);
  --gradient-hero-glow: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(10, 118, 187, 0.18) 0%, transparent 70%);
  --gradient-section: linear-gradient(180deg, var(--neutral-900) 0%, var(--neutral-950) 100%);

  /* ── Misc ───────────────────────────────────────────────────────── */
  --selection-bg: var(--blue-700);
  --selection-text: var(--blue-100);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. APPLY TO ELEMENTS
═══════════════════════════════════════════════════════════════════════ */

/* ── Global ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--transition-theme);
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* ── Typography — Headings ───────────────────────────────────────────
   Consistent scale, tight tracking, bold weight.
   Never set font-family here — inherits from body.
─────────────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
  transition: color 0.25s ease;
}

h1 {
  font-size: var(--text-5xl);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
}

/* Responsive heading scale — compress on small screens */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(1.875rem, 7vw, 3rem);
  }

  h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.875rem);
  }

  h4 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
  }
}

/* Section headers (utility class used in the project) */
.section-header {
  color: var(--text-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Headings inside dark-bg sections */
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark .section-header {
  color: var(--text-heading-dark);
}

/* ── Typography — Body text ──────────────────────────────────────────
   Paragraph, list, and misc inline text
─────────────────────────────────────────────────────────────────────── */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin-top: 0;
}

/* Lead / intro paragraph */
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-weight: var(--font-regular);
}

/* Small text */
small,
.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Bold text — ensure it never disappears on dark bg */
strong,
b {
  font-weight: var(--font-semibold);
  color: inherit;
  /* inherits from parent; never washed out */
}

/* ── Links ──────────────────────────────────────────────────────────── */
a {
  color: var(--link-color);
  transition: color 0.15s ease;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

a:visited {
  color: var(--link-visited);
}

.bg-dark a {
  color: var(--link-on-dark);
}

.bg-dark a:hover {
  color: var(--link-on-dark-hover);
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar .nav-link {
  color: var(--nav-text) !important;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: 6px;
  padding: 6px 10px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar .nav-link:hover {
  color: var(--nav-text-hover) !important;
  background-color: var(--nav-active-pill-bg);
}

.navbar .nav-link.active {
  color: var(--nav-text-active) !important;
  background-color: var(--nav-active-pill-bg);
  border-bottom: 2px solid var(--nav-active-underline);
  border-radius: 6px 6px 0 0;
}

.navbar-brand {
  color: var(--nav-text-active) !important;
}

.navbar-toggler {
  border-color: var(--nav-border);
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
}

footer h2,
footer h3,
footer h4,
footer strong {
  color: var(--footer-heading);
}

footer a {
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.precice-footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover {
  color: var(--footer-link-hover);
}

.precice-footer a:hover {
  color: inherit;
}

.precice-footer a:visited {
  color: inherit;
}

/* ── Surfaces ───────────────────────────────────────────────────────── */
/* Override Bootstrap's bg-light / bg-dark with our tokens */
.bg-light {
  background-color: var(--surface-raised) !important;
}

.bg-dark {
  background-color: var(--surface-dark) !important;
}

#latest-news {
  background-color: var(--surface-news) !important;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition:
    box-shadow 0.25s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.card-header {
  background-color: var(--card-header-bg);
  color: var(--card-header-text);
  border-bottom: none;
  font-weight: var(--font-semibold);
}

.card.border-primary {
  border-color: var(--border-brand) !important;
}

/* Cards on dark bg surfaces */
.bg-dark .card {
  background-color: var(--card-invert-bg);
  border-color: var(--card-invert-border);
  color: var(--text-on-dark);
}

.bg-dark .card:hover {
  background-color: var(--card-invert-hover);
}

.bg-dark .card-header {
  background-color: rgba(10, 118, 187, 0.25);
}

/* ── Buttons — Base shared styles ───────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

/* ── Buttons — Primary (Blue CTA) ───────────────────────────────────── */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  box-shadow: var(--btn-primary-shadow);
  font-weight: var(--font-semibold);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text) !important;
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--btn-primary-bg-active);
  transform: translateY(0);
}

/* ── Buttons — Outline / Secondary ─────────────────────────────────── */
.btn-outline-primary {
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border);
  background-color: var(--btn-secondary-bg);
  font-weight: var(--font-medium);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-outline-primary:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  color: var(--btn-secondary-text) !important;
  transform: translateY(-1px);
}

/* ── Buttons — Ghost ────────────────────────────────────────────────── */
.btn-outline-secondary {
  color: var(--btn-ghost-text) !important;
  border-color: var(--btn-ghost-border);
  background-color: var(--btn-ghost-bg);
  font-weight: var(--font-medium);
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-outline-secondary:hover {
  background-color: var(--btn-ghost-bg-hover);
  color: var(--text-primary) !important;
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* ── Buttons — Accent (Orange) ──────────────────────────────────────── */
.btn-accent {
  background-color: var(--btn-accent-bg);
  border-color: var(--btn-accent-bg);
  color: var(--btn-accent-text) !important;
  box-shadow: var(--btn-accent-shadow);
  font-weight: var(--font-semibold);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-accent:hover {
  background-color: var(--btn-accent-bg-hover);
  border-color: var(--btn-accent-bg-hover);
  box-shadow: var(--btn-accent-shadow-hover);
  color: var(--btn-accent-text) !important;
  transform: translateY(-1px);
}

/* ── Focus rings ────────────────────────────────────────────────────── */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ── Icons ──────────────────────────────────────────────────────────── */
.icon-brand {
  color: var(--icon-brand);
}

.icon-accent {
  color: var(--icon-accent);
}

.icon-muted {
  color: var(--icon-muted);
}

/* ── Social icon link base ─────────────────────────────────────── */
.nav-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .15s ease;
  text-decoration: none;
}

.nav-external i {
  font-size: 1.05rem;
  color: var(--nav-text);
  transition: color 0.18s ease;
}

/* GitHub — neutral on hover */
.nav-external[aria-label="GitHub"]:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.nav-external[aria-label="GitHub"]:hover i {
  color: var(--neutral-0);
}

/* Discourse — warm orange tint on hover */
.nav-external[aria-label="Discourse"]:hover {
  background-color: rgba(237, 118, 44, 0.15);
  border-color: rgba(237, 118, 44, 0.35);
  transform: translateY(-1px);
}

.nav-external[aria-label="Discourse"]:hover i {
  color: var(--orange-400);
}

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge-blue {
  background-color: var(--badge-blue-bg);
  color: var(--badge-blue-text);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  display: inline-block;
}

.badge-orange {
  background-color: var(--badge-orange-bg);
  color: var(--badge-orange-text);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  display: inline-block;
}

.badge-neutral {
  background-color: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  display: inline-block;
}

/* ── Borders / dividers ─────────────────────────────────────────────── */
hr {
  border-color: var(--border-default);
  opacity: 1;
}

/* ── Code ───────────────────────────────────────────────────────────── */
pre {
  background-color: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: 8px;
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  overflow-x: auto;
}

code {
  background-color: var(--code-inline-bg);
  color: var(--code-inline-text);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Logowall ───────────────────────────────────────────────────────── */
.logo,
.logo>div,
.logo>p {
  filter: var(--logo-filter);
  opacity: var(--logo-opacity);
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.logo:hover,
.logo:hover>div,
.logo:hover>p {
  filter: var(--logo-filter-hover);
  opacity: var(--logo-opacity-hover);
}

.logo:hover>div {
  transform: scale(1.05);
}

/* ── Dropdown menus ─────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.dropdown-item {
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover {
  background-color: var(--surface-raised);
  color: var(--link-color);
}

.dropdown-item.active {
  background-color: var(--btn-primary-bg);
  color: #ffffff;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ── Text utilities ─────────────────────────────────────────────────── */
.text-muted {
  color: var(--text-secondary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.bg-dark .text-muted,
.bg-dark .text-secondary {
  color: var(--neutral-400) !important;
}

/* ── Gradient helpers ───────────────────────────────────────────────── */
.gradient-brand {
  background: var(--gradient-brand);
}

.gradient-accent {
  background: var(--gradient-accent);
}

.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-glow);
  pointer-events: none;
  z-index: 0;
}

/* ================================================================
   NAVBAR
================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   These override the --nav-* variables for the glass style.
---------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --nav-glass-bg: rgba(255, 255, 255, 0.55);
  --nav-glass-border: rgba(0, 0, 0, 0.08);
  --nav-scrolled-bg: rgba(255, 255, 255, 0.97);
  --nav-scrolled-border: rgba(0, 0, 0, 0.10);
  --nav-scrolled-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  --nav-text: var(--neutral-600);
  /* readable on white glass */
  --nav-text-hover: var(--orange-600);
  /* orange hover — warm brand accent */
  --nav-text-active: var(--orange-600);
  /* orange active in light mode */
  --nav-active-pill-bg: rgba(237, 118, 44, 0.08);
  /* orange tint pill */
  --nav-active-underline: var(--orange-500);
  /* orange underline indicator */
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
  --nav-mobile-border: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --nav-glass-bg: rgba(13, 16, 32, 0.45);
  --nav-glass-border: rgba(255, 255, 255, 0.07);
  --nav-scrolled-bg: rgba(13, 16, 32, 0.97);
  --nav-scrolled-border: rgba(255, 255, 255, 0.08);
  --nav-scrolled-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  --nav-text: rgba(255, 255, 255, 0.65);
  /* raised from 0.60 → better legibility */
  --nav-text-hover: rgba(255, 255, 255, 0.96);
  --nav-text-active: var(--blue-300);
  --nav-active-pill-bg: rgba(10, 118, 187, 0.15);
  --nav-active-underline: var(--blue-400);
  --nav-mobile-bg: rgba(13, 16, 32, 0.98);
  --nav-mobile-border: rgba(255, 255, 255, 0.08);
  /* raised from 0.07 → visible dividers */
}


/* ----------------------------------------------------------------
   2. NAV SHELL
---------------------------------------------------------------- */
.precice-nav {
  background-color: var(--nav-glass-bg) !important;
  border-bottom: 1px solid var(--nav-glass-border);
  height: 58px;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  transition: background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
  padding: 0;
}

/* Opaque on scroll */
.precice-nav--scrolled {
  background-color: var(--nav-scrolled-bg) !important;
  border-bottom: 1px solid var(--nav-scrolled-border);
  box-shadow: var(--nav-scrolled-shadow);
}

/* Opaque when mobile menu is open */
body.precice-mobile-open .precice-nav {
  background-color: var(--nav-scrolled-bg) !important;
}

/* Inner flex row */
.precice-nav__inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ----------------------------------------------------------------
   3. BRAND / LOGO
   - No filter on the icon SVG (keeps real blue+orange colors)
   - Dark mode: invert only the text wordmark (2nd img), not the icon
   - All sources of the "link box" outline killed
---------------------------------------------------------------- */
.precice-nav__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 10px;
  text-decoration: none;
  outline: none;
  border: none;
  box-shadow: none;
  opacity: 1;
  transition: opacity .15s;
}

.precice-nav__brand:hover,
.precice-nav__brand:focus,
.precice-nav__brand:focus-visible,
.precice-nav__brand:active {
  opacity: 0.82;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.precice-nav__brand::after,
.precice-nav__brand::before {
  display: none !important;
  content: none !important;
}

.precice-nav__brand img {
  display: block;
  pointer-events: none;
  user-select: none;
}

[data-theme="dark"] .precice-nav__brand img:last-child {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}


/* ----------------------------------------------------------------
   4. NAV LINKS
---------------------------------------------------------------- */
.precice-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.precice-nav__link {
  font-size: var(--text-base);
  /* bumped from text-sm → 15px */
  font-weight: var(--font-medium);
  color: var(--nav-text) !important;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease, background-color .15s ease;
}

.precice-nav__link::after,
.precice-nav__link::before {
  display: none !important;
  content: none !important;
}

.precice-nav__link:hover,
.precice-nav__link:focus-visible {
  color: var(--nav-text-hover) !important;
  background-color: var(--nav-active-pill-bg);
  text-decoration: none;
}

.precice-nav__link--active {
  color: var(--nav-text-active) !important;
  background-color: var(--nav-active-pill-bg);
}

/* Custom chevron caret — only for dropdown toggles */
.precice-nav__link--dropdown.dropdown-toggle::after {
  content: "" !important;
  display: inline-block !important;
  width: 8px;
  height: 5px;
  margin-left: 5px;
  border: none;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .2s ease;
  flex-shrink: 0;
}

.dropdown.show .precice-nav__link--dropdown.dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Desktop dropdown panel */
.precice-nav__dropdown {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--card-shadow-hover);
  padding: 6px;
  min-width: 190px;
  margin-top: 8px !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  display: block;
  pointer-events: none;
}

.precice-nav__dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.precice-nav__dropdown .dropdown-item {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color .12s, color .12s;
}

.precice-nav__dropdown .dropdown-item::after,
.precice-nav__dropdown .dropdown-item::before {
  display: none !important;
  content: none !important;
}

.precice-nav__dropdown .dropdown-item:hover {
  background-color: var(--surface-overlay);
  color: var(--link-color);
}

.precice-nav__dropdown .dropdown-item.active {
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-active-underline);
}


/* ----------------------------------------------------------------
   5. SEARCH — expandable icon search
   Collapsed: shows only a search icon. Expands on hover / focus.
---------------------------------------------------------------- */
.precice-nav__search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 8px 0 auto;
  /* push to right of nav links; right cluster handles its own margin */
  flex-shrink: 0;
}

/* The standalone search icon (visible when collapsed) */
.search-expandable-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nav-text);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s;
}

/* Wrapper transitions width */
.search-expandable #search-demo-container {
  overflow: hidden;
  width: 36px;
  /* icon-button size collapsed */
  height: 36px;
  border-radius: 7px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s;
  background: none;
  position: relative;
  /* needed so icon z-index stacks correctly */
  flex-shrink: 0;
}

/* Expand on hover or when input is focused */
.search-expandable:hover #search-demo-container,
.search-expandable:focus-within #search-demo-container {
  width: 240px;
  background-color: var(--surface-raised);
}

/* Hide the Algolia input until expanded */
.search-expandable .ais-search-box,
.search-expandable .ais-search-box--input {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.search-expandable:hover .ais-search-box,
.search-expandable:hover .ais-search-box--input,
.search-expandable:focus-within .ais-search-box,
.search-expandable:focus-within .ais-search-box--input {
  opacity: 1;
  pointer-events: auto;
}

/* Hover colour on the icon */
.search-expandable:hover .search-expandable-icon,
.search-expandable:focus-within .search-expandable-icon {
  color: var(--nav-text-hover);
}


/* ----------------------------------------------------------------
   6. ALGOLIA SEARCH INPUT
   The widget renders: #search-input > .ais-search-box > form >
     input.ais-search-box--input
   The algolia.html JS sets inline elem.style.* — we beat those
   with !important only on the specific properties it overwrites.
---------------------------------------------------------------- */

/* Outer wrapper */
.precice-nav__search .ais-search-box {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}

/* The actual input */
.precice-nav__search .ais-search-box--input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 32px 0 12px !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  font-size: var(--text-sm) !important;
  color: var(--nav-text-hover) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  appearance: none;
}

[data-theme="dark"] .precice-nav__search .ais-search-box--input {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  /* raised from 0.12 */
  color: rgba(255, 255, 255, 0.92) !important;
  /* raised from 0.9 */
}

.precice-nav__search .ais-search-box--input::placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .precice-nav__search .ais-search-box--input::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
  /* raised from 0.35 */
}

.precice-nav__search .ais-search-box--input:focus {
  background-color: rgba(10, 118, 187, 0.05) !important;
  border-color: var(--nav-active-underline) !important;
}

[data-theme="dark"] .precice-nav__search .ais-search-box--input:focus {
  background-color: rgba(10, 118, 187, 0.12) !important;
}

/* Reset × button */
.precice-nav__search .ais-search-box--reset {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-tertiary) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}

.precice-nav__search .ais-search-box--reset:hover {
  color: var(--nav-text-hover) !important;
}

/* Hide "Powered by Algolia" inside navbar only */
.precice-nav__search .ais-search-box--powered-by {
  display: none !important;
}

/* Search results dropdown */
#search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--card-shadow-hover);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}

.result-item {
  padding: 10px 12px;
  border-radius: 7px;
  transition: background-color .12s;
}

.result-item:hover {
  background-color: var(--surface-overlay);
}

.result-item h2 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 3px;
  color: var(--text-primary);
}

.result-link {
  color: var(--link-color) !important;
  text-decoration: none;
}

.result-link:hover {
  text-decoration: underline;
}

.result-breadcrumbs {
  font-size: var(--text-xs);
  color: var(--text-tertiary) !important;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.result-snippet {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.result-snippet em,
.result-item em {
  font-style: normal;
  background-color: var(--badge-blue-bg);
  color: var(--badge-blue-text);
  border-radius: 3px;
  padding: 0 3px;
}


/* ----------------------------------------------------------------
   7. RIGHT CLUSTER — theme toggle + community/socials button
---------------------------------------------------------------- */
.precice-nav__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Spacer between nav links and right cluster */
.precice-nav__spacer {
  flex: 1;
  min-width: 8px;
}

.precice-nav__icon-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--nav-text);
  font-size: 1rem;
  /* bigger icons — was text-sm (13px) */
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  transition: color .15s ease, background-color .15s ease;
}

.precice-nav__icon-btn::after {
  display: none !important;
}

/* kill BS caret */
.precice-nav__icon-btn:hover,
.precice-nav__icon-btn:focus-visible,
.precice-nav__icon-btn.show {
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-text-hover);
  outline: none;
}

.precice-nav__socials-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
}

/* Socials dropdown panel */
.precice-nav__socials-menu {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 8px;
  min-width: 215px;
  right: 0 !important;
  left: auto !important;
  margin-top: 8px !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  display: block;
  pointer-events: none;
}

.precice-nav__socials-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.precice-nav__social-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .12s;
}

.precice-nav__social-item::after,
.precice-nav__social-item::before {
  display: none !important;
  content: none !important;
}

.precice-nav__social-item:hover {
  background-color: var(--surface-overlay);
}

.precice-nav__social-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: var(--text-sm);
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-active-underline);
  flex-shrink: 0;
}

.precice-nav__social-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.precice-nav__social-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: 1;
}

.precice-nav__social-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1;
}


/* ----------------------------------------------------------------
   8. HAMBURGER — mobile only, always far right
---------------------------------------------------------------- */
.precice-nav__toggler {
  display: none;
  /* flex only at ≤768px */
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--nav-glass-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  transition: border-color .15s;
}

.precice-nav__toggler:hover {
  border-color: var(--nav-text);
}

.precice-nav__toggler span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--nav-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

.precice-nav__toggler[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.precice-nav__toggler[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.precice-nav__toggler[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ----------------------------------------------------------------
   9. MOBILE MENU PANEL
---------------------------------------------------------------- */
.precice-mobile-menu {
  display: none;
  /* block at ≤768px */
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  background-color: var(--nav-mobile-bg);
  border-bottom: 1px solid var(--nav-mobile-border);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  padding: 14px 20px 28px;
  overflow-y: auto;
  max-height: calc(100dvh - 58px);
  z-index: 1039;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.precice-mobile-menu--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.precice-mobile-open {
  overflow: hidden;
}

/* Mobile search bar */
.precice-mobile-menu__search {
  position: relative;
  margin-bottom: 14px;
}

.precice-mobile-menu__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 12px;
  pointer-events: none;
}

.precice-mobile-menu__search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 32px;
  background-color: var(--surface-raised);
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}

.precice-mobile-menu__search-input::placeholder {
  color: var(--text-tertiary);
}

.precice-mobile-menu__search-input:focus {
  border-color: var(--nav-active-underline);
  box-shadow: 0 0 0 3px rgba(237, 118, 44, 0.20);
}

[data-theme="dark"] .precice-mobile-menu__search-input:focus {
  box-shadow: 0 0 0 3px rgba(10, 118, 187, 0.25);
}

/* Nav links */
.precice-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 4px;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--nav-text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--nav-mobile-border);
  transition: color .15s;
}

.precice-mobile-menu__link::after,
.precice-mobile-menu__link::before {
  display: none !important;
  content: none !important;
}

.precice-mobile-menu__link:hover {
  color: var(--nav-text-hover) !important;
}

.precice-mobile-menu__link--active {
  color: var(--nav-text-active) !important;
}

.precice-mobile-menu__ext-icon {
  font-size: 10px;
  opacity: .45;
}

/* Accordion */
.precice-mobile-menu__accordion {
  margin-top: 2px;
}

.precice-mobile-menu__accordion-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--nav-mobile-border);
}

.precice-mobile-menu__accordion-btn {
  background: none !important;
  color: var(--nav-text) !important;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  padding: 11px 4px;
  box-shadow: none !important;
  border: none;
}

.precice-mobile-menu__accordion-btn:not(.collapsed) {
  color: var(--nav-text-hover) !important;
}

[data-theme="dark"] .precice-mobile-menu__accordion-btn::after {
  filter: invert(.7);
}

.precice-mobile-menu__accordion-body {
  padding: 4px 0 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.precice-mobile-menu__sub-link {
  display: block;
  padding: 8px 12px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  border-radius: 7px;
  text-decoration: none;
  transition: background-color .12s, color .12s;
}

.precice-mobile-menu__sub-link::after,
.precice-mobile-menu__sub-link::before {
  display: none !important;
  content: none !important;
}

.precice-mobile-menu__sub-link:hover {
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-text-hover);
}

.precice-mobile-menu__sub-link--active {
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-text-active);
}

/* Socials section */
.precice-mobile-menu__section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  margin: 18px 4px 8px;
}

.precice-mobile-menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.precice-mobile-menu__social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background-color: var(--surface-raised);
  border-radius: 8px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary) !important;
  transition: background-color .15s, color .15s;
}

.precice-mobile-menu__social-btn::after,
.precice-mobile-menu__social-btn::before {
  display: none !important;
  content: none !important;
}

.precice-mobile-menu__social-btn:hover {
  background-color: var(--nav-active-pill-bg);
  color: var(--nav-text-hover) !important;
}

/* Footer row */
.precice-mobile-menu__footer {
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--nav-mobile-border);
}

.precice-mobile-menu__theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

.precice-mobile-menu__theme-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background-color: var(--nav-active-pill-bg);
}


/* ----------------------------------------------------------------
   10. RESPONSIVE BREAKPOINTS
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .precice-nav__search {
    max-width: 200px;
    margin: 0 10px;
  }
}

@media (max-width: 768px) {

  .precice-nav__links,
  .precice-nav__search,
  .precice-nav__right {
    display: none !important;
  }

  .precice-nav__toggler {
    display: flex;
  }

  .precice-mobile-menu {
    display: block;
  }
}


/* ================================================================
   FOOTER — precice-footer component
   Uses the existing --footer-* tokens already defined in :root above,
   plus new tokens added to :root / [data-theme="dark"] below.
================================================================ */

/* ── New footer tokens — appended to the existing token system ── */
/* Light mode additions */
:root,
[data-theme="light"] {
  --footer-bg2: var(--neutral-100);
  /* contributors banner — slightly darker than page */
  --footer-bg3: var(--neutral-50);
  /* newsletter band — same as page */
  --footer-accent: var(--orange-500);
  /* orange primary accent in footer */
  --footer-accent2: var(--orange-600);
  /* darker orange for links/counts */
  --footer-muted: var(--neutral-600);
  /* readable on light footer bg */
  --footer-col-title: var(--neutral-500);
  /* uppercase column labels — muted */
}

/* Dark mode additions */
[data-theme="dark"] {
  --footer-bg2: var(--neutral-800);
  --footer-bg3: var(--neutral-850, #161b2e);
  /* between 800 and 900 */
  --footer-accent: var(--blue-400);
  /* blue accent in dark footer */
  --footer-accent2: var(--blue-400);
  /* orange counts/highlights on dark */
  --footer-muted: var(--neutral-400);
  /* WCAG AA on near-black */
  --footer-col-title: var(--neutral-200);
  /* crisp column headings on dark */
}

/* ── Override the global footer rule ── */
footer.precice-footer {
  /* Original preCICE brand blue — matches the live website */
  background: #0a76bb !important;
  color: rgba(255, 255, 255, 0.88);
  border-top: none;
  font-family: var(--font-sans, system-ui, sans-serif);
}


/* Let the component manage its own link colours */
footer.precice-footer a,
footer.precice-footer a:hover,
footer.precice-footer a:visited {
  color: inherit;
  text-decoration: none;
}

/* ── Contributors Banner ── */
.precice-footer__contrib {
  background: var(--footer-bg2);
  border-bottom: 1px solid var(--footer-border);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.precice-footer__avatar-stack {
  display: flex;
  align-items: center;
}

.precice-footer__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--footer-bg2);
  margin-left: -9px;
  position: relative;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--footer-bg3);
  color: var(--footer-muted);
}

.precice-footer__avatar:first-child {
  margin-left: 0;
}

.precice-footer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.precice-footer__contrib-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.precice-footer__contrib-count {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--footer-text);
  letter-spacing: var(--tracking-tight);
  font-family: var(--font-mono, monospace);
}

.precice-footer__contrib-count span {
  color: var(--footer-accent2);
}

[data-theme="dark"] .precice-footer__contrib-count span {
  color: var(--footer-accent2);
}

.precice-footer__contrib-label {
  font-size: var(--text-xs);
  color: var(--footer-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.precice-footer__contrib-divider {
  width: 1px;
  height: 36px;
  background: var(--footer-border);
  flex-shrink: 0;
}

.precice-footer__contrib-msg {
  font-size: var(--text-sm);
  color: var(--footer-muted);
  line-height: var(--leading-relaxed);
  max-width: 300px;
}

.precice-footer__contrib-msg a {
  color: var(--footer-accent2) !important;
  text-decoration: none;
}

.precice-footer__contrib-msg a:hover {
  text-decoration: underline;
}

/* ── Newsletter Band ── */
.precice-footer__newsletter {
  background: var(--footer-bg3);
  border-bottom: 1px solid var(--footer-border);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.precice-footer__newsletter-label {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--footer-text);
  white-space: nowrap;
}

.precice-footer__newsletter-label small {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--footer-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.precice-footer__newsletter-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.precice-footer__newsletter-form input {
  flex: 1;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Dark mode: make newsletter input legible */
[data-theme="dark"] .precice-footer__newsletter-form input {
  background: var(--neutral-800);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.precice-footer__newsletter-form input::placeholder {
  color: var(--text-tertiary);
}

.precice-footer__newsletter-form input:focus {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.precice-footer__newsletter-form button {
  background: var(--footer-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
}

.precice-footer__newsletter-form button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Main 3-col Grid ── */
.precice-footer__main {
  padding: 32px 32px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* ── Column ── */
.precice-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.precice-footer__col-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--footer-col-title);
  margin-bottom: 14px;
}

/* ── Links ── */
.precice-footer__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--footer-muted) !important;
  text-decoration: none !important;
  font-size: var(--text-sm);
  padding: 4px 0;
  line-height: var(--leading-snug);
  transition: color 0.14s;
}

.precice-footer__link:hover {
  color: var(--footer-link-hover) !important;
}

.precice-footer__link svg {
  width: 13px;
  height: 13px;
  opacity: 0.55;
  flex-shrink: 0;
}

.precice-footer__link:hover svg {
  opacity: 0.9;
}

/* ── Social Chips ── */
.precice-footer__social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.precice-footer__social-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  color: var(--footer-muted) !important;
  text-decoration: none !important;
  font-size: var(--text-xs);
  transition: color 0.14s, border-color 0.14s, background-color 0.14s;
}

/* Dark mode: ensure social chips are visible */
[data-theme="dark"] .precice-footer__social-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-default);
  color: var(--neutral-400) !important;
}

.precice-footer__social-chip:hover {
  color: var(--footer-link-hover) !important;
  border-color: var(--border-accent);
  /* orange border on hover in light mode */
  background: var(--surface-overlay);
}

[data-theme="dark"] .precice-footer__social-chip:hover {
  border-color: var(--border-brand);
  /* blue border on hover in dark mode */
}

.precice-footer__social-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ── License Badge ── */
.precice-footer__license-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-bottom: 12px;
  width: fit-content;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s;
}

/* Dark mode: license badge needs visible border */
[data-theme="dark"] .precice-footer__license-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-default);
  color: var(--footer-muted) !important;
}

.precice-footer__license-badge:hover {
  border-color: var(--border-brand);
}

.precice-footer__license-badge img {
  height: 18px;
  display: block;
}

/* ── Meta dates ── */
.precice-footer__meta {
  font-size: var(--text-xs);
  color: var(--footer-muted);
  line-height: 2;
  font-family: var(--font-mono, monospace);
}

.precice-footer__meta span {
  color: var(--footer-accent2);
}

/* ── Bottom Bar ── */
.precice-footer__bottom {
  padding: 14px 32px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.precice-footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  outline: none;
  border: none;
  box-shadow: none;
  opacity: 1;
  transition: opacity 0.15s;
}

.precice-footer__brand:hover {
  opacity: 0.8;
}

.precice-footer__brand img {
  height: 20px;
  display: block;
  opacity: 0.85;
}

/* Same invert trick as the navbar brand in dark mode */
[data-theme="dark"] .precice-footer__brand img:last-child {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.precice-footer__brand-fallback {
  display: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  letter-spacing: -0.3px;
  color: var(--footer-heading);
}

.precice-footer__brand-fallback span {
  color: var(--footer-accent2);
}

.precice-footer__tagline {
  font-size: var(--text-xs);
  color: var(--footer-muted);
}

/* ── Follow section spacing ── */
.precice-footer__follow {
  margin-top: 18px;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .precice-footer__main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px 20px;
  }

  .precice-footer__contrib,
  .precice-footer__newsletter,
  .precice-footer__bottom {
    padding-left: 20px;
    padding-right: 20px;
  }

  .precice-footer__contrib-divider,
  .precice-footer__contrib-msg {
    display: none;
  }
}

/* ================================================================
   FOOTER — new flat-class styles for rewritten footer.html
================================================================ */

footer.precice-footer {
  padding-top: 36px;
}

/* ── Footer main row ── */
.footer-main {
  padding-bottom: 32px;
}

/* ── Newsletter hover-expand widget ── */
.footer-nl-widget {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  outline: none;
}

.footer-nl-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}

.footer-nl-widget:hover .footer-nl-trigger,
.footer-nl-widget:focus-within .footer-nl-trigger {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Expand panel */
.footer-nl-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.2s;
  margin-top: 0;
}

.footer-nl-widget:hover .footer-nl-expand,
.footer-nl-widget:focus-within .footer-nl-expand {
  max-height: 80px;
  opacity: 1;
  margin-top: 8px;
}

/* Inline form inside the expand panel */
.footer-nl-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.footer-nl-form input[type="email"] {
  flex: 1;
  height: 34px;
  padding: 4px 10px;
  font-size: 0.82rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  outline: none;
  min-width: 130px;
  transition: border-color 0.2s, background 0.2s;
}

.footer-nl-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer-nl-form input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.22);
}

.footer-nl-form button[type="submit"] {
  height: 34px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.footer-nl-form button[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.4);
}


/* ── Brand block ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

a.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

.footer-logo-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.footer-tagline {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.55;
  max-width: 220px;
  margin: 0;
}

/* ── Social icon buttons ── */
.footer-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff !important;
  font-size: 0.95rem;
  transition: background 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.2s;
  text-decoration: none !important;
}

.footer-social-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ── Column headings ── */
.footer-col-heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}

/* ── Link list ── */
.footer-links li {
  margin-bottom: 6px;
}

.footer-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  padding: 3px 0;
  transition: color 0.15s, padding-left 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-links a:hover {
  color: #ffffff !important;
  padding-left: 5px;
}

.footer-links a i {
  opacity: 0.7;
  font-size: 0.82em;
  transition: opacity 0.15s;
}

.footer-links a:hover i {
  opacity: 1;
}

/* ── Meta text ── */
.footer-meta {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0 0 6px;
}

.footer-meta i {
  opacity: 0.8;
}

.footer-no-cookie {
  color: rgba(180, 255, 200, 0.85);
}

/* ── Newsletter box ── */
.footer-newsletter-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 24px;
}

.footer-newsletter-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--footer-heading, #e0ecff);
  margin-bottom: 14px;
}

/* ── Bottom bar ── */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-copy,
.footer-copy-right {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-copy a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
}

.footer-copy a:hover {
  color: #fff !important;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .footer-tagline {
    max-width: 100%;
  }
}

/* ================================================================
   DOCS SIDEBAR — Modern Bootstrap 5 aesthetic
================================================================ */

.precice-docs-sidebar {
  font-family: var(--font-sans, system-ui, sans-serif);
  padding-right: 15px;
  margin-bottom: 40px;
}

.precice-docs-sidebar ul.nav {
  padding-left: 0;
  list-style: none;
  background: transparent !important;
}

.precice-docs-sidebar ul.nav .nav-item {
  margin-bottom: 2px;
}

.precice-docs-sidebar ul.nav .nav-link {
  color: #495057;
  padding: 6px 16px;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
  background: transparent !important;
  border: none !important;
  font-weight: 500;
  line-height: 1.5;
}

[data-theme="dark"] .precice-docs-sidebar ul.nav .nav-link {
  color: #adb5bd;
}

.precice-docs-sidebar ul.nav .nav-link:hover {
  background-color: #e9ecef !important;
  color: #212529 !important;
}

[data-theme="dark"] .precice-docs-sidebar ul.nav .nav-link:hover {
  background-color: #2b3035 !important;
  color: #f8f9fa !important;
}

.precice-docs-sidebar ul.nav .nav-link.active {
  color: #0a76bb !important;
  background-color: rgba(10, 118, 187, 0.08) !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .precice-docs-sidebar ul.nav .nav-link.active {
  color: #6ea8fe !important;
  background-color: rgba(110, 168, 254, 0.12) !important;
}

/* Caret icon animation for collapsible menus */
.precice-docs-sidebar .menu-caret {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.precice-docs-sidebar .has-submenu>.nav-link[aria-expanded="true"] .menu-caret {
  transform: rotate(90deg);
  opacity: 0.9;
}

/* Submenu layout */
.precice-docs-sidebar .sidebar-submenu {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #dee2e6;
  margin-top: 4px;
  margin-bottom: 4px;
  display: block;
  /* Bootstrap collapse handles visibility, but ensuring flex-column works */
}

[data-theme="dark"] .precice-docs-sidebar .sidebar-submenu {
  border-left-color: #495057;
}

.precice-docs-sidebar .sidebar-submenu .nav-link {
  font-size: 0.9rem;
  padding: 5px 12px;
}

/* ================================================================
   DARK MODE COLORS
================================================================ */
[data-theme="dark"] {
  /* Background colors */
  --bg-color: #121212;
  /* True black base */
  --bg-surface: #1e1e1e;
  /* Dark grey for cards/containers */
  --bg-surface-elevated: #2d2d2d;
  /* Lighter shade of black */

  /* Text colors */
  --text-color: #f8f9fa;
  /* White text */
  --text-muted: #adb5bd;
  --heading-color: #6ea8fe;
  /* Blue headings */
  --link-color: #6ea8fe;

  /* Borders */
  --border-color: #333333;
}

[data-theme="dark"] body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme="dark"] .post-content,
[data-theme="dark"] main,
[data-theme="dark"] .post-header {
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--heading-color) !important;
}

[data-theme="dark"] a {
  color: var(--link-color);
}

[data-theme="dark"] a:hover {
  color: #0a76bb;
  /* Old recognizable preCICE blue hover */
}

[data-theme="dark"] .post-content p.post-meta {
  color: var(--text-muted);
}

/* Navbar adaptations */
[data-theme="dark"] .precice-nav {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .precice-nav__link,
[data-theme="dark"] .precice-nav__icon-btn {
  color: var(--text-color) !important;
}

[data-theme="dark"] .precice-nav__link:hover,
[data-theme="dark"] .precice-nav__icon-btn:hover {
  color: #e06c00 !important;
  /* PreCICE orange hover */
}

[data-theme="dark"] .precice-nav__link.active {
  color: var(--heading-color) !important;
}

/* Mobile Nav Menu */
[data-theme="dark"] .precice-mobile-menu {
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-color);
}

[data-theme="dark"] .precice-mobile-menu__link {
  color: var(--text-color);
}

[data-theme="dark"] .precice-mobile-menu__theme-btn {
  color: var(--text-color);
}

/* Footer already has dark background, but unify borders */
[data-theme="dark"] footer.precice-footer {
  background: var(--bg-color) !important;
  border-top: 1px solid var(--border-color);
}

/* Code blocks / tables / cards */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--bg-surface) !important;
  color: #e6e6e6 !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] table.table th,
[data-theme="dark"] table.table td,
[data-theme="dark"] table {
  background-color: var(--bg-surface) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color);
}

[data-theme="dark"] table>tbody>tr:nth-of-type(odd) {
  background-color: var(--bg-surface-elevated) !important;
}

[data-theme="dark"] table>thead>tr>th {
  background-color: var(--bg-surface-elevated) !important;
  color: var(--heading-color) !important;
  border-bottom-color: var(--heading-color) !important;
}

/* TOC / Callouts */
[data-theme="dark"] div#toc ul {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

[data-theme="dark"] div#toc>ul::before {
  color: var(--text-color);
}

[data-theme="dark"] .bs-callout {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

[data-theme="dark"] .bs-example {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

/* Landing Page Specific Rules */
[data-theme="dark"] .section-header {
  color: var(--heading-color) !important;
}

[data-theme="dark"] .panel-precice {
  background-color: var(--bg-surface);
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .panel-heading-precice {
  color: var(--text-color) !important;
  background-color: var(--bg-surface-elevated) !important;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .panel-precice .card-body {
  color: var(--text-color) !important;
}

[data-theme="dark"] .usp {
  color: var(--text-color) !important;
}

[data-theme="dark"] .background-light {
  background-color: var(--bg-surface) !important;
}

[data-theme="dark"] .quote a,
[data-theme="dark"] .quote i {
  color: var(--text-color) !important;
}

/* Landing Page Hero Text Dark Mode */
[data-theme="dark"] .subtitle,
[data-theme="dark"] .title {
  color: #6ea8fe !important;
}

[data-theme="dark"] .hero-description p {
  color: var(--text-color) !important;
}

/* Footer Links and Text */
[data-theme="dark"] .footer-brand p,
[data-theme="dark"] .footer-tagline,
[data-theme="dark"] .footer-col-heading,
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-copy-right {
  color: var(--text-color) !important;
}

[data-theme="dark"] .footer-logo-name {
  color: #6ea8fe !important;
}

[data-theme="dark"] footer.precice-footer a:not(.btn) {
  color: #6ea8fe !important;
}

[data-theme="dark"] footer.precice-footer a:not(.btn):hover {
  color: #9ec5fe !important;
}

/* Landing page & diagram SVGs */
/* Invert black to white, then hue-rotate 180 to keep the blue brand colors normal */
[data-theme="dark"] img[src*="preCICE_text"],
[data-theme="dark"] img[src*="preCICE_logo"],
[data-theme="dark"] .hero-image img,
[data-theme="dark"] .image-holder.usp img,
[data-theme="dark"] .img-equivalent i,
[data-theme="dark"] .img-equivalent-uni-logo i,
[data-theme="dark"] .uni-logo,
[data-theme="dark"] .precice-support {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
}

/* UNIVERSAL LOGO PROTECTION - Ensure adapter logos are always colorful and visible */
a.adapter img.adapter,
.adapter img,
img.adapter,
[data-theme="dark"] img.adapter {
  filter: none !important;
  -webkit-filter: none !important;
  background-color: #ffffff !important;
  padding: 10px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 20px !important;
  display: block !important;
  opacity: 1 !important;
  max-width: 100% !important;
}

/* ================================================================
   VISUAL ENHANCEMENTS FOR LIGHT MODE 
================================================================ */
html:not([data-theme="dark"]) .title,
html:not([data-theme="dark"]) .subtitle {
  color: #0a76bb;
}

/* Apply bold styling to feature cards and FAQ */
html:not([data-theme="dark"]) .panel-precice,
html:not([data-theme="dark"]) .background-light .card {
  background-color: #0a76bb !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(10, 118, 187, 0.2);
}

html:not([data-theme="dark"]) .panel-heading-precice,
html:not([data-theme="dark"]) .card-header {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-bottom: none !important;
}

html:not([data-theme="dark"]) .panel-precice .card-body,
html:not([data-theme="dark"]) .background-light .card .card-body,
html:not([data-theme="dark"]) .usp {
  color: #ffffff !important;
}

/* Link accents inside the blue feature cards */
html:not([data-theme="dark"]) .panel-precice a:not(.btn),
html:not([data-theme="dark"]) .background-light .card a:not(.btn) {
  color: #ffcb6a !important;
}

html:not([data-theme="dark"]) .panel-precice a:not(.btn):hover,
html:not([data-theme="dark"]) .background-light .card a:not(.btn):hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ================================================================
   TESTIMONIAL SECTION MOCKUP (.background-dark in Light Mode)
================================================================ */
html:not([data-theme="dark"]) .background-dark {
  background-color: #0a76bb !important;
}

html:not([data-theme="dark"]) .background-dark .section-header,
html:not([data-theme="dark"]) .background-dark h2,
html:not([data-theme="dark"]) .background-dark .text-white {
  color: #ffffff !important;
}

/* The cards inside the dark section should be solid white */
html:not([data-theme="dark"]) .background-dark .card {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: none !important;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .background-dark .card .card-body,
html:not([data-theme="dark"]) .background-dark .card p,
html:not([data-theme="dark"]) .background-dark .card strong {
  color: #333333 !important;
}

html:not([data-theme="dark"]) .background-dark .card .vertical-align>div>p:first-child strong {
  color: #000000 !important;
}

html:not([data-theme="dark"]) .background-dark .card .vertical-align>div>p:last-child {
  color: #555555 !important;
}

/* Ensure the button matches the mockup (Outline white) */
html:not([data-theme="dark"]) .background-dark .btn-primary {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .background-dark .btn-primary:hover {
  background-color: #ffffff !important;
  color: #0a76bb !important;
}