/* Decoded — the portal layer on top of Tailwind's Play CDN.
   Tailwind covers layout/spacing utilities; this file owns the identity: the accent
   system every site tile is coloured from, the dark masthead, the tile treatment, and
   the long-form prose used on the detail pages. */

:root {
  --ink: #11131a;
  --paper: #f7f6f3;
  --rule: #e4e1da;
  --muted: #6b6862;

  /* Overridden per-tile by the .accent-* classes below. */
  --accent: #475569;
  --accent-soft: #e2e8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
}

.font-display {
  font-family: "Playfair Display", Georgia, serif;
}

/* ---- Accent system -------------------------------------------------------
   One class per accent stem used in the content file. Every tile, badge and icon
   chip reads --accent / --accent-soft, so a site's colour is set in exactly one
   place and nothing downstream needs to know which colour it got. Plain CSS custom
   properties rather than Tailwind colour utilities: the class names come from data,
   and a utility built by string concatenation is a class no build step can see. */
.accent-amber    { --accent: #b45309; --accent-soft: #fef3c7; }
.accent-orange   { --accent: #c2410c; --accent-soft: #ffedd5; }
.accent-rose     { --accent: #be123c; --accent-soft: #ffe4e6; }
.accent-red      { --accent: #b91c1c; --accent-soft: #fee2e2; }
.accent-fuchsia  { --accent: #a21caf; --accent-soft: #fae8ff; }
.accent-violet   { --accent: #6d28d9; --accent-soft: #ede9fe; }
.accent-indigo   { --accent: #4338ca; --accent-soft: #e0e7ff; }
.accent-blue     { --accent: #1d4ed8; --accent-soft: #dbeafe; }
.accent-sky      { --accent: #0369a1; --accent-soft: #e0f2fe; }
.accent-cyan     { --accent: #0e7490; --accent-soft: #cffafe; }
.accent-teal     { --accent: #0f766e; --accent-soft: #ccfbf1; }
.accent-emerald  { --accent: #047857; --accent-soft: #d1fae5; }
.accent-lime     { --accent: #4d7c0f; --accent-soft: #ecfccb; }
.accent-stone    { --accent: #57534e; --accent-soft: #e7e5e4; }
.accent-slate    { --accent: #475569; --accent-soft: #e2e8f0; }

/* ---- Masthead ------------------------------------------------------------ */
.masthead-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

/* The hero's soft off-centre glow. Two radial gradients over the ink base — cheap,
   resolution-independent, and no image request. */
.hero-dark {
  background:
    radial-gradient(60rem 30rem at 78% -10%, rgba(129, 140, 248, 0.18), transparent 60%),
    radial-gradient(45rem 26rem at 8% 108%, rgba(251, 191, 36, 0.13), transparent 62%),
    #11131a;
}

.hero-rule {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.nav-link {
  position: relative;
  padding-bottom: 2px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transition: right 0.18s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  right: 0;
}

/* ---- Site tiles ---------------------------------------------------------- */
.site-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* The accent hairline that lights up along the top edge on hover. */
.site-tile::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: 0.9rem 0.9rem 0 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.site-tile.is-live:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}

.site-tile.is-live:hover::before {
  opacity: 1;
}

.site-tile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Stretched link: the tile's heading anchor covers the whole card, so the card is one
   big target, while any sibling link (the outbound "Visit" link) is lifted above the
   overlay and stays separately clickable. Two real anchors, no nesting. */
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.above-stretch {
  position: relative;
  z-index: 1;
}

/* Not-yet-deployed sites still link to their own detail page here on the portal —
   that page exists. What they never get is the outbound link to the site itself, so
   no crawler is sent to a URL that would 404. Dashed and paler to say so visually. */
.site-tile.is-upcoming {
  background: #fbfaf8;
  border-style: dashed;
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: 0.7rem;
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-chip svg {
  width: 1.65rem;
  height: 1.65rem;
}

.icon-chip-lg {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1rem;
}

.icon-chip-lg svg {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-chip-sm {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.55rem;
}

.icon-chip-sm svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* On the dark hero the soft fill would disappear; invert to a translucent white. */
.on-dark .icon-chip {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tile-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tile-tagline {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- Badges & chips ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.badge-live {
  background: #dcfce7;
  color: #15803d;
}

.badge-live::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #22c55e;
}

.badge-upcoming {
  background: #f1efea;
  color: #78716c;
}

.badge-collection {
  background: var(--accent-soft);
  color: var(--accent);
}

.topic-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: #fff;
  font-size: 0.72rem;
  color: #57534e;
}

/* ---- Mobile drawer nav (< md) --------------------------------------------
   CSS-only: the hidden #nav-toggle checkbox holds open/closed state; the hamburger
   <label> and the backdrop <label> both toggle it. Static SSR has no Blazor event
   handlers to drive this. wwwroot/nav.js is progressive enhancement only (closes it
   on link-tap/Escape, makes the label keyboard-operable). #nav-toggle must stay a
   sibling of .mobile-topbar/.drawer-backdrop/.drawer for the `~` selectors to reach
   them. */
.drawer {
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
}

#nav-toggle:checked ~ .drawer {
  transform: translateX(0);
}

.drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#nav-toggle:checked ~ .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* hamburger — three bars that morph to an X while the drawer is open */
.hb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 1.2rem;
}

.hb > span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#nav-toggle:checked ~ .mobile-topbar .hb > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle:checked ~ .mobile-topbar .hb > span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .mobile-topbar .hb > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-link {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  color: #44403c;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.drawer-link:hover { background: #f1efea; color: var(--ink); }
.drawer-link.active { background: #eceae4; color: var(--ink); }

/* ---- Long-form prose (the site detail + about pages) --------------------- */
.prose-body {
  font-size: 1.03rem;
  line-height: 1.75;
  color: #34302b;
}

.prose-body > * + * {
  margin-top: 1.1rem;
}

.prose-body h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2.3rem;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

.prose-body h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 0.85rem;
}

.prose-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-body .lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #4b4640;
}

/* ---- Section headings ---------------------------------------------------- */
.section-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---- Stat strip ---------------------------------------------------------- */
.stat-value {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}

/* ---- Search ------------------------------------------------------------- */
.search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  color: #44403c;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 4px rgba(17, 19, 26, 0.06);
}

.search-input-dark {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.search-input-dark::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-input-dark:focus {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.6rem 1.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.08); }

.btn-ghost {
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
}

.btn-ghost:hover { border-color: #b9b4ab; }

.btn-on-dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-on-dark:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Breadcrumbs --------------------------------------------------------- */
.crumbs {
  font-size: 0.78rem;
  color: var(--muted);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---- Accessibility ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}