/* ===================================================================
   Black Quant Empire - Design System & Global Styles
   WCAG 2.2 AA Compliant
   =================================================================== */

/* ─────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (Design Tokens)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* === COLORS ===
     Taken from the start page hero: the canvas gradient gives the three
     grounds, the quote nodes the gold, the price line the blue accent,
     and the headline ink the grey ramp. A ratio is noted where it is what
     fixes the value. */

  /* Grounds */
  --color-black: #050810;
  --color-black-soft: #070b15;
  --color-black-muted: #0f1a2c;

  /* Gold: the quote nodes */
  --color-gold: #f0b429;         /* 10.74:1 on the page ground */
  --color-gold-light: #ffd166;
  --color-gold-dark: #c88f14;

  /* Blue: the price line */
  --color-navy: #13233d;
  --color-navy-mid: #1b3354;
  --color-navy-light: #59c0ff;   /* 9.93:1 on the page ground */

  /* Ink */
  --color-white: #eef2f8;
  --color-gray-50: #f4f7fb;
  --color-gray-100: #e8edf5;
  --color-gray-200: #d4dce8;
  --color-gray-300: #a8b6c9;     /* body copy, 8.47:1 on a card */
  --color-gray-400: #7c8da6;     /* meta text, 5.16:1 on a card */
  --color-gray-500: #5a7098;     /* control borders, 3.49:1 on a card */
  --color-gray-700: #1e2c44;

  /* Semantic: the hero canvas already uses these for an up and a down tick */
  --color-error: #f87171;
  --color-success: #6ee796;
  --color-focus: #59c0ff;

  /* Channel triplets, so rgba() overlays and glows follow the palette
     instead of pinning the colour they were written against. */
  --rgb-black: 5, 8, 16;
  --rgb-gold: 240, 180, 41;
  --rgb-navy: 19, 35, 61;

  /* === TYPOGRAPHY === */
  --font-heading: "Georgia", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier New", monospace;

  /* Type Scale (based on 16px = 1rem) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-hero: 4rem;      /* 64px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* === SPACING (8px grid) === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 720px;

  /* === BORDERS & SHADOWS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 20px rgba(212, 168, 83, 0.3);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* === FOCUS === */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;

  /* === Z-INDEX === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-overlay: 500;
}

/* ─────────────────────────────────────────────────────────────────
   ACCESSIBILITY: Reduced Motion
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ACCESSIBILITY: High Contrast Mode
   ───────────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  :root {
    --color-gold: ButtonText;
    --color-white: CanvasText;
    --focus-ring: 3px solid Highlight;
  }
}

/* ─────────────────────────────────────────────────────────────────
   CSS RESET & BASE STYLES
   ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-white);
  background-color: var(--color-black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────────
   SKIP LINK (WCAG 2.4.1)
   ───────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-overlay);
  background-color: var(--color-gold);
  color: var(--color-black);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ─────────────────────────────────────────────────────────────────
   FOCUS VISIBLE (WCAG 2.4.7)
   ───────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Remove outline for mouse users (but keep for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--color-white);
  letter-spacing: -0.5px;
}

h1 {
  font-size: var(--text-2xl);
  color: var(--color-white);
  font-weight: 700;
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--text-5xl);
  }
}

h2 {
  font-size: var(--text-xl);
  color: var(--color-white);
  font-weight: 600;
}

@media (min-width: 768px) {
  h2 {
    font-size: var(--text-3xl);
  }
}

h3 {
  font-size: var(--text-lg);
  color: var(--color-white);
  font-weight: 600;
}

@media (min-width: 768px) {
  h3 {
    font-size: var(--text-2xl);
  }
}

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

p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-300);
  line-height: var(--leading-loose);
  font-size: var(--text-base);
}

a {
  color: var(--color-gray-300);
  text-decoration: underline;
  transition: all var(--transition-fast);
}

a:hover {
  color: var(--color-white);
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
}

a:active {
  color: var(--color-gold);
}

strong {
  font-weight: var(--weight-bold);
}

em {
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   LISTS
   ───────────────────────────────────────────────────────────────── */

ul,
ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-2);
}

/* Remove default list styling */
[role="list"] {
  list-style: none;
  margin-left: 0;
}

[role="list"] li {
  margin-left: 0;
}

/* ─────────────────────────────────────────────────────────────────
   HEADER & NAVIGATION
   ───────────────────────────────────────────────────────────────── */

header {
  background-color: var(--color-black-soft);
  border-bottom: 1px solid var(--color-gray-400);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 1000;
}

.header-top {
  width: 100%;
  position: relative;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  gap: var(--space-8);
  position: relative;
}

/* Logo Section */
.logo-link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  padding-left: var(--space-4);
  gap: var(--space-3);
}

.logo-link:hover {
  transform: scale(1.05);
}

.logo-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-md);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo-image {
  height: 50px;
  width: auto;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.5px;
}

.logo-tagline {
  font-size: var(--text-xs);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--weight-medium);
}

/* Primary Navigation */
.primary-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--color-gray-300);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-base);
  display: block;
  padding: var(--space-3) var(--space-4);
  position: relative;
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--color-white);
  background-color: transparent;
}

/* Call-to-Action Navigation Link */
.nav-link.nav-cta {
  background-color: transparent;
  color: var(--color-gray-300);
  font-weight: 500;
  border: 1px solid var(--color-gray-400);
}

.nav-link.nav-cta:hover {
  background-color: var(--color-black-muted);
  border-color: var(--color-white);
  color: var(--color-white);
}

.nav-link.nav-cta[aria-current="page"] {
  background-color: var(--color-gold) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-gold) !important;
  font-weight: 600;
}

.nav-link.nav-cta[aria-current="page"]:hover {
  background-color: var(--color-gold-light) !important;
  border-color: var(--color-gold-light) !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-gold), 0.2);
}

/* Login Button */
.login-button {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
  border: 1px solid var(--color-navy-mid);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--text-base);
  display: none;
  margin-left: auto;
  flex-shrink: 0;
}

.login-button:hover {
  background-color: rgba(var(--rgb-navy), 0.8);
  border-color: var(--color-white);
  box-shadow: 0 4px 12px rgba(var(--rgb-navy), 0.3);
}

.login-button:active {
  background-color: var(--color-navy-mid);
}

@media (min-width: 769px) {
  .login-button {
    display: block;
  }
}

/* Login Modal */
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-modal[hidden] {
  display: none !important;
}

.login-modal-content {
  background-color: var(--color-black-muted);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-400);
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.login-modal-content h2 {
  color: var(--color-white);
  margin-top: 0;
  margin-bottom: var(--space-6);
  text-align: center;
}

.login-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-2xl);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-modal-close:hover {
  color: var(--color-gold);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.login-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-form-group label {
  color: var(--color-white);
  font-weight: 500;
  font-size: var(--text-base);
}

.login-form-group input {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-gray-400);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
}

.login-form-group input:focus {
  outline: none;
  border-color: var(--color-gold);
  background-color: var(--color-black-soft);
  box-shadow: 0 0 0 2px rgba(var(--rgb-gold), 0.2);
}

.login-submit {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
  border: 1px solid var(--color-navy-mid);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-base);
  transition: all var(--transition-fast);
}

.login-submit:hover {
  background-color: rgba(var(--rgb-navy), 0.8);
  border-color: var(--color-white);
  box-shadow: 0 4px 12px rgba(var(--rgb-navy), 0.3);
}

.login-submit:active {
  background-color: var(--color-navy-mid);
}

/* Mobile Menu Toggle Button */
.nav-toggle {
  display: none !important;
  background-color: transparent;
  border: 1px solid var(--color-gray-400);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin-right: var(--space-3);
  position: relative;
  z-index: 1001;
}

.nav-toggle:hover {
  border-color: var(--color-white);
  background-color: var(--color-black-muted);
}

.nav-toggle:active {
  background-color: var(--color-navy-mid);
}

.nav-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Nav wave: a slim signal trace built by navigation.js (initNavWave), drawn
   through the real, measured centre of each mobile menu item rather than
   guessed coordinates. Hidden by default - desktop's horizontal nav has
   nothing for a vertical trace to run through - switched on for the mobile
   dropdown below. */
.nav-wave {
  display: none;
}

/* Mobile Navigation (up to 768px) */
@media (max-width: 768px) {
  .header-content {
    gap: var(--space-4);
    padding: var(--space-3) 0;
    position: static;
  }

  .logo-link {
    padding-left: var(--space-3);
  }

  .logo-group {
    gap: var(--space-2);
  }

  .logo-image {
    height: 40px;
  }

  .logo-name {
    font-size: var(--text-base);
  }

  .logo-tagline {
    font-size: 10px;
  }

  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    display: none;
    background-color: var(--color-black-muted);
    border-bottom: 1px solid var(--color-gold);
    padding: var(--space-4);
    flex-direction: column;
    gap: 0;
    z-index: 999;
  }

  .primary-nav.is-open {
    display: flex !important;
  }

  .nav-list {
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: 0;
  }

  /* The trace sits behind the list, in the same blue and the same glow as
     the hero's price line (assets/js/hero-network.js uses
     rgba(89,192,255,*) with a 10px shadowBlur; this is the same colour,
     turned down for a small, static UI element rather than a full canvas). */
  .nav-wave {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
  }

  .nav-wave-path {
    fill: none;
    stroke: var(--color-navy-light);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.55;
    filter: drop-shadow(0 0 3px rgba(89, 192, 255, 0.6));
    stroke-dasharray: 5 5;
    animation: nav-wave-flow 8s linear infinite;
  }

  .nav-wave-node {
    fill: var(--color-navy-light);
    opacity: 0.85;
    filter: drop-shadow(0 0 2px rgba(89, 192, 255, 0.7));
  }

  .nav-wave-node.is-current {
    fill: var(--color-gold);
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(var(--rgb-gold), 0.8));
  }

  @keyframes nav-wave-flow {
    to {
      stroke-dashoffset: -60;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-wave-path {
      animation: none;
    }
  }

  .nav-item {
    border-bottom: 1px solid var(--color-navy);
  }

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

  .nav-link {
    /* Symmetric padding, so the centred text sits in the middle of the
       whole box rather than the middle of whatever's left after the
       gutter. The left side reserves room for the trace; the matching
       right padding is just there to balance it. */
    padding: var(--space-4) 44px;
    justify-content: center;
    border-radius: 0;
  }

  .nav-link[aria-current="page"]::after {
    display: none;
  }

  .nav-link[aria-current="page"] {
    background-color: var(--color-navy-mid);
    border-left: 4px solid var(--color-gold);
    padding-left: 40px; /* 44px minus the 4px border-left, keeps it centred */
  }
}

/* ─────────────────────────────────────────────────────────────────
   PAGE HEADER (for article/content pages)
   ───────────────────────────────────────────────────────────────── */

.page-header {
  margin-bottom: var(--space-12);
  padding: var(--space-12) var(--space-8);
  border-top: 3px solid var(--color-gold);
  border-bottom: 3px solid var(--color-gold);
  position: relative;
  text-align: center;
  background: none;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--rgb-gold), 0.05) 0%, transparent 50%, rgba(var(--rgb-gold), 0.05) 100%);
  pointer-events: none;
}

.page-header > .container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.page-header h1 {
  color: var(--color-gold);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-weight: 700;
  font-size: var(--text-3xl);
}

.page-header .lead {
  color: var(--color-white);
  margin-bottom: 0;
  font-size: var(--text-lg);
  font-weight: 300;
}

@media (max-width: 768px) {
  .page-header {
    padding: var(--space-8) var(--space-4);
    margin-bottom: var(--space-8);
  }

  .page-header > .container {
    padding: 0 var(--space-4);
  }

  .page-header h1 {
    font-size: var(--text-2xl);
  }

  .page-header .lead {
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-6);
  }

  .page-header h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
  }

  .page-header .lead {
    font-size: var(--text-sm);
  }
}

/* ─────────────────────────────────────────────────────────────────
   MAIN CONTAINER
   ───────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    padding: var(--space-4) var(--space-4);
  }
}

@media (max-width: 480px) {
  .container {
    padding: var(--space-4) var(--space-4);
  }
}

.container-narrow {
  max-width: var(--container-narrow);
}

.container-wide {
  max-width: var(--container-wide);
}

/* ─────────────────────────────────────────────────────────────────
   SECTIONS & ARTICLES
   ───────────────────────────────────────────────────────────────── */

section {
  width: 100%;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-gray-400);
}

@media (max-width: 768px) {
  section {
    padding: var(--space-8) 0;
  }
}

@media (max-width: 480px) {
  section {
    padding: var(--space-6) 0;
  }
}

section:last-child {
  border-bottom: none;
}

section:nth-child(even) {
  background-color: rgba(var(--rgb-navy), 0.3);
}

section .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 768px) {
  section .container {
    padding: 0 var(--space-4);
  }
}

section .container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 768px) {
  section .container-narrow {
    padding: 0 var(--space-4);
  }
}

article {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: var(--color-black);
}

article > * {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-16) var(--space-6);
}

@media (max-width: 768px) {
  article > * {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 480px) {
  article > * {
    padding: var(--space-6) var(--space-4);
  }
}

/* Sections in articles - full width with background */
article section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--space-16) var(--space-6);
  max-width: none;
}

@media (max-width: 768px) {
  article section {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 480px) {
  article section {
    padding: var(--space-6) var(--space-4);
  }
}

article section > * {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Disclaimer warning box */
.disclaimer-warning {
  background-color: var(--color-black-muted);
  border-left: 3px solid var(--color-error);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
}

.disclaimer-warning p {
  margin-bottom: 0;
  color: var(--color-error);
}

/* ─────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────── */

button,
.btn {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover,
.btn:hover {
  background-color: var(--color-black-muted);
  border-color: var(--color-white);
  color: var(--color-white);
}

button:active,
.btn:active {
  background-color: var(--color-navy-mid);
}

.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  box-shadow: 0 4px 12px rgba(var(--rgb-gold), 0.2);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-gray-400);
}

.btn-secondary:hover {
  background-color: var(--color-black-muted);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-secondary:active {
  background-color: var(--color-navy-mid);
}

/* ─────────────────────────────────────────────────────────────────
   FORMS (WCAG 3.3 - Labels, Validation, etc.)
   ───────────────────────────────────────────────────────────────── */

fieldset {
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (max-width: 480px) {
  fieldset {
    padding: var(--space-4);
  }
}

legend {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  padding: 0 var(--space-2);
}

.form-group {
  margin-bottom: var(--space-6);
}

label {
  display: block;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
  color: var(--color-white);
}

input,
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  background-color: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
  min-height: 44px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-gold);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

input:invalid,
textarea:invalid {
  border-color: var(--color-error);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

@media (max-width: 480px) {
  input,
  textarea,
  select {
    font-size: 16px;
    padding: var(--space-4);
  }

  textarea {
    min-height: 100px;
  }
}

/* Field Hints & Errors */
.field-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-gray-300);
  margin-bottom: var(--space-2);
}

.field-error {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Error Summary */
.error-summary {
  background-color: var(--color-black-muted);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--color-error);
}

.error-summary h2 {
  margin-top: 0;
  color: var(--color-error);
}

/* ─────────────────────────────────────────────────────────────────
   SCREEN READER ONLY TEXT
   ───────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */

footer {
  background-color: var(--color-black-soft);
  border-top: 1px solid var(--color-gray-400);
  margin-top: auto;
  padding: var(--space-16) 0 var(--space-8);
}

/* One column per section, all four on a single row. The columns are sized
   from the content rather than fixed fractions, so a short list does not
   claim the same width as the long Research one. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-heading {
  font-size: var(--text-base);
  color: var(--color-gold);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

footer nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

footer nav h2 {
  margin: 0;
}

footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

footer nav ul li {
  margin-bottom: 0;
  list-style: none;
}

footer nav a {
  color: var(--color-gray-300);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
  display: block;
  padding: var(--space-1) 0;
  border-bottom: 1px solid transparent;
}

footer nav a:hover {
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

footer address {
  font-style: normal;
  color: var(--color-gray-300);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  margin: 0;
}

footer a {
  color: var(--color-gray-300);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  text-align: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-400);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.footer-bottom p {
  margin-bottom: var(--space-2);
  color: var(--color-gray-400);
}

.footer-bottom a {
  color: var(--color-gray-300);
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, auto);
    gap: var(--space-8);
  }
}

/* Four columns stop fitting here, so they pair off two by two. */
@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  .footer-grid {
    padding: 0 var(--space-4);
  }

  .footer-heading {
    font-size: var(--text-sm);
  }
}

@media (max-width: 480px) {
  footer {
    padding: var(--space-8) 0 var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: 0 var(--space-4);
    margin-bottom: var(--space-8);
  }

  .footer-heading {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }

  footer nav a {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
  }

  .footer-bottom {
    padding: var(--space-6) var(--space-4) 0;
    font-size: var(--text-xs);
  }

  .footer-bottom p {
    margin-bottom: var(--space-1);
  }
}

address {
  font-style: normal;
  line-height: var(--leading-loose);
}

/* ─────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────── */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-gray-300);
  line-height: var(--leading-loose);
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE: TABLET (768px)
   ───────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .container {
    padding: var(--space-8);
  }

  section {
    padding: var(--space-16) 0;
  }

  article {
    padding: var(--space-16) var(--space-8);
  }
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE: DESKTOP (1024px+)
   ───────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  nav {
    display: flex !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE: LARGE DESKTOP (1440px+)
   ───────────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {
  .container {
    padding: var(--space-8);
  }

  section {
    padding: var(--space-20) 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
}

table tr {
  border-bottom: 1px solid var(--color-navy);
}

table tr:last-child {
  border-bottom: none;
}

table td {
  padding: var(--space-2);
}

table td strong {
  font-weight: var(--weight-bold);
}

table th {
  padding: var(--space-2);
  font-weight: var(--weight-bold);
  text-align: left;
  background-color: rgba(var(--rgb-navy), 0.3);
}

/* Table with width distribution */
table td:first-child {
  width: 30%;
}

/* ─────────────────────────────────────────────────────────────────
   HORIZONTAL DIVIDER
   ───────────────────────────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--color-gray-500);
  margin: var(--space-8) 0;
}

/* ─────────────────────────────────────────────────────────────────
   PAGE NAVIGATION (Previous/Next buttons)
   ───────────────────────────────────────────────────────────────── */

.page-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-400);
}

.page-navigation .btn {
  flex: 0 1 auto;
  min-width: 140px;
  text-align: center;
}

.page-navigation .btn-prev {
  order: 1;
}

.page-navigation .btn-next {
  order: 2;
  margin-left: auto;
}

/* On smaller screens, stack buttons vertically */
@media (max-width: 768px) {
  .page-navigation {
    flex-direction: column;
    gap: var(--space-4);
  }

  .page-navigation .btn {
    width: 100%;
    min-width: unset;
  }

  .page-navigation .btn-prev {
    order: 1;
  }

  .page-navigation .btn-next {
    order: 2;
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────────── */

@media print {
  body {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  a {
    color: var(--color-navy);
    text-decoration: underline;
  }

  header,
  footer,
  .skip-link {
    display: none;
  }
}


/* Cookie Banner Styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-black-soft);
  color: var(--color-white);
  padding: 15px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.cookie-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.9rem;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

@media (min-width: 768px) {
  .cookie-banner .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}