/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  /* Ink & structure */
  --ink: #111827;
  --page-bg: #fef9ee;

  /* UI primary (red) */
  --primary: #dc2626;
  --primary-light: #fca5a5;

  /* Comic accent palette */
  --comic-red: #e63946;
  --comic-yellow: #ffd700;
  --comic-blue: #0057b8;
  --comic-green: #2dc653;
  --comic-orange: #ff6b00;

  /* Panels */
  --panel-bg: #ffffff;
  --panel-border: var(--ink);
  --panel-shadow: var(--ink);

  /* Dark mode accent (amber) */
  --dark-accent: #f59e0b;
}

.dark {
  --panel-bg: #1e293b;
  --panel-border: var(--dark-accent);
  --panel-shadow: var(--dark-accent);
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}
.dark .skip-link {
  background: var(--primary-light);
  color: #0f172a;
}

[x-cloak] {
  display: none !important;
}

/* ============================================================
   Pagefind
   ============================================================ */
.pagefind-ui {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--primary);
  --pagefind-ui-text: #374151;
  --pagefind-ui-background: var(--panel-bg);
  --pagefind-ui-border: #d1d5db;
  --pagefind-ui-tag: #e5e7eb;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-font: "Radio Canada", ui-sans-serif, system-ui, sans-serif;
}
.dark .pagefind-ui {
  --pagefind-ui-primary: var(--primary-light);
  --pagefind-ui-text: #e2e8f0;
  --pagefind-ui-background: var(--panel-bg);
  --pagefind-ui-border: #475569;
  --pagefind-ui-tag: #334155;
}
.pagefind-ui .pagefind-ui__search-input {
  font-weight: 400;
}
.pagefind-ui .pagefind-ui__result-link {
  color: var(--primary);
}
.dark .pagefind-ui .pagefind-ui__result-link {
  color: var(--primary-light);
}

/* ============================================================
   Comic background bubbles
   ============================================================ */
.comic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.comic-bubble {
  position: absolute;
  display: block;
  color: var(--comic-red); /* default before JS assigns a class */
  rotate: var(--rot, 0deg);
  opacity: 1;
  /* animation name/duration/delay set by Alpine JS */
}
.comic-bubble svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Random color classes assigned by Alpine on page load */
.comic-bubble.comic-color-red {
  color: var(--comic-red);
}
.comic-bubble.comic-color-yellow {
  color: var(--comic-yellow);
}
.comic-bubble.comic-color-blue {
  color: var(--comic-blue);
}
.comic-bubble.comic-color-orange {
  color: var(--comic-orange);
}
.comic-bubble.comic-color-green {
  color: var(--comic-green);
}

/* ============================================================
   Masthead title
   ============================================================ */
.masthead-title {
  font-size: clamp(3.5rem, 13vw, 9rem);
  line-height: 1.05;
  display: inline-block;
  color: var(--ink);
  background: var(--comic-yellow);
  padding: 0.05em 0.3em;
  -webkit-text-stroke: 3px var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2deg);
  letter-spacing: 0.03em;
}
.dark .masthead-title {
  box-shadow: 8px 8px 0 var(--dark-accent);
}

/* ============================================================
   Section headings
   ============================================================ */
.section-title {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.05;
  display: inline-block;
  color: var(--section-title-color, #ffffff);
  background: var(--section-title-bg, var(--comic-blue));
  padding: 0.2em 0.3em 0.05em;
  -webkit-text-stroke: 3px var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(2deg);
  letter-spacing: 0.03em;
}
.dark .section-title {
  box-shadow: 8px 8px 0 var(--dark-accent);
}

/* ============================================================
   Comic panels
   ============================================================ */
.comic-panel {
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  box-shadow: 5px 5px 0 var(--panel-shadow);
}