/* /assets/css/home.css */
/* Home page only: dynamic background + foreground via CSS variables */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.65);
  --fg-hover: rgba(255, 255, 255, 0.75);

  /* Pattern overlay variables */
  --bg-image: none;
  --bg-pattern-opacity: 0;

  /* NEW: pattern scale (set by JS only when pattern is used) */
  --bg-pattern-size: auto;
}

/* Solid background lives on html */
html {
  background-color: var(--bg) !important;
}

/* Body stays transparent so the html background + overlay show through */
body {
  background: transparent !important;
  color: var(--fg) !important;
  position: relative;
  z-index: 1; /* keep content above the overlay */
}

/* Pattern overlay layer (drawn above solid color, below content) */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: var(--bg-image);
  background-repeat: repeat;
  background-position: top left;

  /* NEW: width-based random sizing (JS sets --bg-pattern-size; default is auto) */
  background-size: var(--bg-pattern-size) auto;

  opacity: var(--bg-pattern-opacity);
}

/* Links follow foreground color */
a:link,
a:visited {
  color: var(--fg) !important;
}

a:hover {
  color: var(--fg-hover) !important;
}

a:active {
  color: var(--fg) !important;
  opacity: 0.85;
}

/* Borders follow foreground color */
table {
  border-color: var(--fg) !important;
}

th,
td {
  border-color: var(--fg) !important;
}

/* Secondary UI text */
.year-range {
  color: var(--fg-muted) !important;
}

/* Footer text */
.home-footer {
  text-align: center;
  font-size: 0.77em;
  color: var(--fg-muted);
}