/*
  Eve's Library -- adopter chrome layered on top of the libcatalog module's lcat.css,
  loaded after it via the module's head-extra.html hook (no template shadows left).

  Strategy (module-defaults pass): the catalog (works list, Work detail, facets) now
  renders in the module's DEFAULT theme -- this file no longer re-sets the module's
  --lcat-* palette tokens or restyles its .lcat-* components, so the module's identity
  and its built-in light/dark mode apply site-wide. What remains is the structural
  evl-* chrome the module does not ship (hero, shelf, homepage, events, docs, footer,
  nav). Those rules source their colors from the module's own --lcat-* tokens (aliased
  below), so they stay coherent in both light and dark.

  A bespoke re-brand is a later pass: re-set the --lcat-* tokens here (accent, bg, fg,
  ...) and every component -- module and evl-* alike -- re-themes from them.
*/

/* Map the evl- theme tokens onto the module's tokens so demo chrome flips with the
   theme (light/dark) instead of pinning a bespoke palette. Text that sits on an accent
   background uses the module's --lcat-on-accent, which is contrast-correct in both modes. */
:root {
  --evl-accent-ink: var(--lcat-accent-ink);
  --evl-gold: var(--lcat-accent);
  --evl-surface: var(--lcat-surface);
  --evl-surface-alt: var(--lcat-surface-alt);
  --evl-shadow: var(--lcat-shadow);
  --evl-radius: var(--lcat-radius);
}

.evl-brand-name { font-weight: 700; }

/* Cover art. The catalog uses the module's own .lcat-cover; these evl-cover rules back
   the homepage "featured shelf" (and the example in the theming doc). */
.evl-card { display: flex; gap: 1rem; align-items: flex-start; }
/* Cover box: set BOTH width and height so the HTML width/height hints (for CLS) don't
   fight object-fit and crop to a slice; explicit dimensions keep a true 2:3 portrait. */
.evl-cover {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 5.25rem; /* 2:3 of 3.5rem */
  object-fit: cover;
  border-radius: 4px;
  background: var(--evl-surface-alt);
  border: 1px solid var(--lcat-border);
  box-shadow: var(--evl-shadow);
}
.evl-cover--placeholder {
  display: grid;
  place-items: center;
  color: var(--lcat-muted);
  font-weight: 700;
  font-size: 1.1rem;
}
.evl-cover--detail { width: 8.5rem; height: 12.75rem; float: right; margin: 0 0 1rem 1.25rem; }
/* Featured shelf: prominent cover that fills the card width (still a true 2:3). */
.evl-shelf-item .evl-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.evl-rating { color: var(--evl-gold); font-size: 0.85rem; letter-spacing: 0.1em; }
.evl-rating span { color: var(--lcat-muted); letter-spacing: normal; }
/* Search chrome is the module's, bugs and all: the Pagefind drawer layout issues
   are base-theme problems tracked upstream (libcatalog tasks/127) -- per repo
   policy this file carries NO stopgaps for module bugs (tasks/022 outcome). */

/* Reading-log line on Work pages (module work-extra hook, tasks/021). */
.evl-reading-log { margin: 0.75rem 0 0; color: var(--lcat-muted); font-size: 0.95rem; }
.evl-reading-log .evl-rating { font-size: inherit; }

/* Homepage hero. The inner panel is an accent gradient; text on it uses --lcat-on-accent
   so it is legible whether the accent is dark (light mode) or light (dark mode). */
.evl-hero {
  max-width: var(--lcat-maxw);
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 0.5rem;
}
.evl-hero-inner {
  background: linear-gradient(135deg, var(--evl-accent-ink), var(--lcat-accent));
  color: var(--lcat-on-accent);
  border-radius: var(--evl-radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--evl-shadow);
}
.evl-hero h1 { margin: 0 0 0.4rem; color: var(--lcat-on-accent); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.evl-hero p { margin: 0.3rem 0 0; max-width: 46rem; font-size: 1.05rem; }
/* Buttons opt out: each .lcat-btn variant owns its color pair (the --surface chip is
   surface-on-surface-colored, so inheriting on-accent here made it unreadable, 016). */
.evl-hero a:not(.lcat-btn) { color: var(--lcat-on-accent); text-decoration: underline; }

/* "Featured" shelf of covers below the hero. */
.evl-shelf { max-width: var(--lcat-maxw); margin: 1.5rem auto 0; padding: 0 clamp(1rem, 4vw, 2rem); }
.evl-shelf h2 { margin: 0 0 0.75rem; font-size: 1.2rem; color: var(--evl-accent-ink); }
.evl-shelf-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
}
.evl-shelf-item {
  background: var(--evl-surface);
  border: 1px solid var(--lcat-border);
  border-radius: var(--evl-radius);
  padding: 0.85rem;
  box-shadow: var(--evl-shadow);
}
.evl-shelf-item a { text-decoration: none; color: var(--lcat-fg); }
.evl-shelf-item a:hover .evl-shelf-title { text-decoration: underline; }
.evl-shelf-title { display: block; margin-top: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.evl-shelf-author { display: block; color: var(--lcat-muted); font-size: 0.85rem; }

/* Content pages (About): readable measure. */
.evl-page { max-width: 44rem; }
.evl-page h1 { color: var(--evl-accent-ink); }
.evl-page h2 { color: var(--evl-accent-ink); margin-top: 1.75rem; }
.evl-page :is(p, li) { line-height: 1.7; }
.evl-page pre {
  background: var(--evl-surface-alt);
  border: 1px solid var(--lcat-border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
}

/* Persistent demo-disclosure footer, on every page via the module footer hook. */
.evl-footer {
  border-top: 1px solid var(--lcat-border);
  background: var(--evl-surface-alt);
  color: var(--lcat-muted);
  padding: 1.5rem clamp(1rem, 4vw, 2rem);
  font-size: 0.9rem;
}
.evl-footer-inner {
  max-width: var(--lcat-maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.evl-footer a { color: var(--lcat-accent); }
.evl-footer-note strong { color: var(--lcat-fg); }
.evl-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }

/* A demo ribbon so no visitor mistakes this for a real collection. */
.evl-demo-banner {
  background: var(--lcat-accent);
  color: var(--lcat-on-accent);
  text-align: center;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}
.evl-demo-banner a { color: var(--lcat-on-accent); text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .evl-shelf-item a { transition: color 0.12s ease; }
}

/* ============================================================================
   Library site shell: primary nav, homepage, events, docs -- adopter chrome for an
   ordinary library site around the catalog.
   ============================================================================ */

/* Header, primary nav, and buttons are the module's now (.lcat-nav from
   [[menu.main]], .lcat-btn--solid/--surface/--ghost -- upstream tasks/118+120);
   this file styles neither. */

/* Homepage. */
.evl-hero--home .evl-hero-kicker {
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--lcat-on-accent);
  opacity: 0.85;
}
.evl-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }
.evl-home { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 1.5rem; }
.evl-muted { color: var(--lcat-muted); }
.evl-quickinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.evl-info-card {
  background: var(--evl-surface);
  border: 1px solid var(--lcat-border);
  border-radius: var(--evl-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--evl-shadow);
}
.evl-info-card h2 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--evl-accent-ink); }
.evl-info-card p { margin: 0; }
.evl-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.evl-section-head h2, .evl-section > h2 { margin: 0; color: var(--evl-accent-ink); }
.evl-news { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.evl-news li { padding: 0.15rem 0 0.15rem 0.85rem; border-left: 3px solid var(--lcat-accent); }
.evl-buildstrip {
  background: var(--evl-surface-alt);
  border: 1px solid var(--lcat-border);
  border-radius: var(--evl-radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.evl-buildstrip h2 { margin-top: 0; color: var(--evl-accent-ink); }

/* Events. */
.evl-event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.evl-event {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--evl-surface);
  border: 1px solid var(--lcat-border);
  border-radius: var(--evl-radius);
  padding: 1rem;
  box-shadow: var(--evl-shadow);
}
.evl-date-badge {
  flex: none;
  width: 3.5rem;
  text-align: center;
  background: var(--lcat-accent);
  color: var(--lcat-on-accent);
  border-radius: 8px;
  padding: 0.4rem 0;
  line-height: 1.15;
}
.evl-date-mon { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.evl-date-day { display: block; font-size: 1.4rem; font-weight: 700; }
.evl-event-title { margin: 0 0 0.2rem; font-size: 1.1rem; }
.evl-event-title a { text-decoration: none; }
.evl-event-title a:hover { text-decoration: underline; }
.evl-event-meta { margin: 0; color: var(--lcat-muted); font-size: 0.9rem; }
.evl-event-meta--lg { font-size: 1rem; margin: 0 0 1.25rem; }
.evl-event-desc { margin: 0.4rem 0 0; }
.evl-event-list--past .evl-date-badge { background: var(--lcat-muted); }
.evl-eyebrow { color: var(--lcat-muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
.evl-eyebrow a { color: var(--lcat-accent); }

/* Docs. */
.evl-docnav-title { font-weight: 700; color: var(--evl-accent-ink); margin: 0 0 0.5rem; }
.evl-docnav-inner ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.evl-docnav-inner a { display: block; padding: 0.4rem 0.55rem; border-radius: 6px; text-decoration: none; color: var(--lcat-fg); }
.evl-docnav-inner a:hover { background: var(--evl-surface-alt); }
.evl-docnav-inner a[aria-current="page"] { background: var(--lcat-accent); color: var(--lcat-on-accent); }
.evl-doc { max-width: 48rem; }
.evl-doc h2 { margin-top: 1.9rem; color: var(--evl-accent-ink); }
.evl-doc :not(pre) > code { background: var(--evl-surface-alt); border: 1px solid var(--lcat-border); border-radius: 4px; padding: 0.05em 0.35em; font-size: 0.9em; }
.evl-doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.evl-doc th, .evl-doc td { border: 1px solid var(--lcat-border); padding: 0.5rem 0.75rem; text-align: left; }
.evl-doc th { background: var(--evl-surface-alt); }
.evl-doc blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--lcat-accent); background: var(--evl-surface-alt); border-radius: 0 6px 6px 0; }
.evl-doc-index { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.evl-doc-index li { padding: 0.85rem 1rem; background: var(--evl-surface); border: 1px solid var(--lcat-border); border-radius: var(--evl-radius); box-shadow: var(--evl-shadow); }
.evl-doc-index a { font-weight: 600; font-size: 1.05rem; }
.evl-doc-index-sum { display: block; color: var(--lcat-muted); font-size: 0.9rem; margin-top: 0.2rem; }
.evl-doc-foot { margin-top: 2rem; }
.evl-page--wide { max-width: 60rem; }