/* Progressive-enhancement styles for the PHP-rendered pages. Loaded on every
   page; the reveal/menu hidden states only engage once arp-enhance.js marks the
   document ready, so content is always visible without JS (and if the SPA never
   boots on the visual routes). */

/* Safety fallbacks in case a custom Tailwind color token is ever missing. */
html { background:#080c14; }
body { background:#080c14; color:#fff; min-height:100%; }

/* ---- Scroll reveal (only after arp-enhance.js runs) ---- */
.arp-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.arp-reveal-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .arp-reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Blip detail HTML (raw <p>/<ul>/<li> from map content) ---- */
.arp-blip-body p { margin: 0; }
.arp-blip-body p + ul { margin-top: .65rem; }
.arp-blip-body ul {
  list-style: disc;
  padding-left: 1.15rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.arp-blip-body li { margin: 0; }
.arp-blip-body li::marker { color: rgba(249,118,176,.7); }
.arp-blip-body strong { color: #fff; font-weight: 600; }
.arp-blip-body em { color: #cbd5e1; }

/* ---- Discord CTA button (rainbow) ---- */
.arp-discord-btn {
  background-image: linear-gradient(90deg,#f976b0,#cf6bd0 45%,#86bdcb);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 8px 30px rgba(249,118,176,.28);
  transition: background-position .5s ease, filter .2s ease, transform .2s ease;
}
.arp-discord-btn:hover { background-position: 100% 50%; filter: brightness(1.05); }

/* ---- Mobile nav overlay (content pages) ---- */
.arp-menu { visibility: hidden; }
.arp-menu.open { visibility: visible; }
.arp-menu .arp-menu-close { opacity: 0; }
.arp-menu.open .arp-menu-close { opacity: 1; }
.arp-menu .arp-menu-link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease, color .3s ease;
}
.arp-menu.open .arp-menu-link { opacity: 1; transform: none; }
.arp-menu.open .arp-menu-link:nth-child(1) { transition-delay: .12s; }
.arp-menu.open .arp-menu-link:nth-child(2) { transition-delay: .17s; }
.arp-menu.open .arp-menu-link:nth-child(3) { transition-delay: .22s; }
.arp-menu.open .arp-menu-link:nth-child(4) { transition-delay: .27s; }
.arp-menu.open .arp-menu-link:nth-child(5) { transition-delay: .32s; }
.arp-menu.open .arp-menu-link:nth-child(6) { transition-delay: .37s; }
body.arp-menu-open { overflow: hidden; }

/* Hamburger → X */
.arp-menu-toggle[aria-expanded="true"] .arp-burger-top {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.arp-menu-toggle[aria-expanded="true"] .arp-burger-bot {
  bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg);
}

/* Hidden natives rows during search */
.native-item[hidden] { display: none; }

/* ---- Natives list rows (compact, self-contained styling) ---- */
.nrow {
  display: block;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (min-width: 640px) { .nrow { border-radius: 1.5rem; } }
.nrow:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.nrow-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.nrow-name { font-weight: 700; font-size: .9375rem; color: #86bdcb; }
.nrow-ns { font-size: 11px; color: rgba(255,255,255,.35); }
.nrow-meta { margin-top: .375rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: 11px; color: rgba(255,255,255,.45); }
.nrow-jhash { color: rgba(255,255,255,.3); }
.nrow-sig {
  margin-top: .5rem;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}