/* Concord shared site template — brand-parameterized rules.
   All colors come from the mod's theme via CSS variables; no mod-specific
   values may appear in this file. */

/* Self-hosted JetBrains Mono — the suite's monospace, so every member site
   renders the same regardless of what the visitor's OS ships. Weights match
   the template's usage (400 body, 600 semibold, 700 bold); the eleventy
   config's --font-mono names it first, ahead of the system fallbacks.
   font-display: swap paints fallback text immediately, then swaps in. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/css/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/css/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/css/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
::selection { background: var(--color-accent); color: var(--color-bone); }

/* Brand gradient used on every heading. The 200% background-size lets the
   hero variant animate the gradient position; static headings sit at 0%. */
.heading-gradient {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent2) 50%, var(--color-accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@keyframes brand-pulse {
  0%, 100% { background-position: 0% 50%; filter: brightness(1); }
  50%      { background-position: 100% 50%; filter: brightness(1.15); }
}
.animate-brand-pulse { animation: brand-pulse 4s ease-in-out infinite; }

/* Radial glow behind the hero, tinted by the mod's accent. */
.hero-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.4) 0%, transparent 70%);
  opacity: 0.15;
  pointer-events: none;
}

/* Accent-tinted drop shadow on the hero logo. */
.hero-logo-shadow { filter: drop-shadow(0 0 30px rgba(var(--glow-rgb), 0.3)); }

/* Sortable data tables (blocks.njk `table` with sortable columns). Progressive
   enhancement: the header buttons are plain buttons that do nothing until the
   base.njk script wires them, so the table still renders in source order with
   no JS. The direction indicator is driven entirely by the th's aria-sort.
   The button matches a normal cell's padding (py-2 px-3) so header text lines
   up with the column below it, and the indicator sits right beside the label
   rather than floating at the far edge of the cell. */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.th-sort:hover { color: var(--color-accent); }
.th-sort:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Direction caret drawn with CSS borders, not a Unicode arrow glyph, so it
   renders identically in every font (many monospace/pixel faces ship no
   ↑/↓/↕). A faint up+down pair marks a sortable-but-unsorted column; the
   active column shows a single accent caret pointing the sort direction. */
.th-sort-ind {
  position: relative;
  flex: none;
  width: 0.7em;
  height: 1em;
}
.th-sort-ind::before,
.th-sort-ind::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  transform: translateX(-50%);
  opacity: 0.4;
}
.th-sort-ind::before { top: 0.14em; border-bottom: 0.32em solid currentColor; }  /* ▲ */
.th-sort-ind::after  { bottom: 0.14em; border-top: 0.32em solid currentColor; }  /* ▼ */
[aria-sort="ascending"]  .th-sort-ind::before { opacity: 1; border-bottom-color: var(--color-accent); }
[aria-sort="ascending"]  .th-sort-ind::after  { opacity: 0; }
[aria-sort="descending"] .th-sort-ind::after   { opacity: 1; border-top-color: var(--color-accent); }
[aria-sort="descending"] .th-sort-ind::before  { opacity: 0; }