/*
  Eve's Library -- adopter theme layered on top of the libcatalog module's lcat.css
  (tasks/002). Loaded after lcat.css by the site's baseof.html override, so it wins
  on cascade without forking the module stylesheet.

  Strategy: re-set the module's own --lcat-* custom properties for the palette (every
  module component re-themes automatically) and add a small set of evl-* components
  (hero, shelf, cover, footer) the module does not ship. All colors are checked to
  meet WCAG 2.1 AA contrast against their background; verify in a real browser as a
  separate pass (tasks/005) since jsdom can't compute contrast.

  NOTE on ownership: much of what's here is generic polish + fixes for module-theme
  defects (narrow sidebar-less pages, link/pagination a11y, desktop widths) that should
  live in the module's default theme, not this adopter. Those are filed upstream
  (../libcatalog/tasks/024 defects, 025 richer default theme). Once the module absorbs
  them, this file should shrink to brand identity only -- palette, logo, hero/about copy.
*/

:root {
  /* Palette: warm "paper" background, deep teal accent, muted ink. */
  --lcat-fg: #1c1b18;      /* ink on paper: ~15:1 */
  --lcat-bg: #fbf9f4;      /* warm paper */
  --lcat-accent: #115c52;  /* deep teal: 6.0:1 on paper, carries white text at 5.9:1 */
  --lcat-muted: #5c574e;   /* muted ink: 5.9:1 on paper */
  --lcat-border: #e2dccd;
  --lcat-maxw: 72rem;

  /* Theme-only tokens (evl- namespace). */
  --evl-accent-ink: #0c443c;   /* darker teal for large headings */
  --evl-gold: #8a5a12;         /* warm secondary accent: 5.3:1 on paper */
  --evl-surface: #ffffff;      /* raised cards */
  --evl-surface-alt: #f3efe4;  /* tag chips / subtle fills */
  --evl-shadow: 0 1px 2px rgba(28, 27, 24, 0.06), 0 2px 8px rgba(28, 27, 24, 0.05);
  --evl-radius: 10px;
}

/* Typography: a serif display face for headings gives the "library" feel; body
   stays on the module's system stack for legibility and zero web-font cost. */
body {
  font: 100%/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, .evl-brand-name, .lcat-card-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  letter-spacing: 0.01em;
}

/* Header / brand: give the module's brand link a book colophon and stronger identity. */
.lcat-header {
  background: var(--evl-surface);
  border-bottom: 2px solid var(--lcat-accent);
  padding: 0.85rem clamp(1rem, 4vw, 2rem);
}
.lcat-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--evl-accent-ink);
  font-size: 1.3rem;
}
.lcat-brand svg { flex: none; }
.evl-brand-name { font-weight: 700; }

/* Layout: a touch more breathing room than the module default. */
.lcat-layout { padding: 1.75rem clamp(1rem, 4vw, 2rem); gap: 2.5rem; }

/* Sidebar-less pages (Work detail, About, 404) render <main> as the ONLY grid child;
   with grid-template-columns: 16rem 1fr that lone child lands in the 16rem sidebar
   track, squeezing all copy into a ~256px column -- the "narrow/mobile" look. Make a
   lone main span the full width. (Root cause is in the module theme; see
   ../libcatalog/tasks/024.) */
.lcat-layout > .lcat-main:only-child { grid-column: 1 / -1; }

/* Facet sidebar: lift onto a card so it reads as a panel. */
.lcat-sidebar {
  background: var(--evl-surface);
  border: 1px solid var(--lcat-border);
  border-radius: var(--evl-radius);
  padding: 1rem 1.1rem;
  align-self: start;
  box-shadow: var(--evl-shadow);
}
.lcat-facet summary { color: var(--evl-accent-ink); }

/* Result cards. Card-title links stay underlined so they're distinguishable without
   relying on color (WCAG 1.4.1, Lighthouse link-in-text-block). */
.lcat-results > li { border-bottom: 1px solid var(--lcat-border); }
.lcat-card-title a { text-decoration: underline; text-underline-offset: 2px; }

/* Pagination: touch targets >= ~44px with spacing (WCAG 2.5.8, Lighthouse target-size);
   the module renders Hugo's _internal/pagination.html (.pagination/.page-link). */
.pagination { gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pagination .page-item { display: inline-flex; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--lcat-border);
  border-radius: 6px;
  background: var(--evl-surface);
  text-decoration: none;
  color: var(--lcat-accent);
}
.pagination .page-item.active .page-link {
  background: var(--lcat-accent);
  border-color: var(--lcat-accent);
  color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--lcat-muted); opacity: 0.65; }
.lcat-tags li {
  background: var(--evl-surface-alt);
  color: var(--lcat-fg);
  border: 1px solid var(--lcat-border);
}

/* Cover art (tasks/002 §5): rendered by the work-card / page overrides when the
   catalog carries a cover URL; falls back to a lettered placeholder otherwise. */
.evl-card { display: flex; gap: 1rem; align-items: flex-start; }
/* Cover box: set BOTH width and height in CSS. The <img> carries width/height HTML
   attributes (for CLS); without an explicit CSS height the HTML height hint wins and
   the box becomes the wrong shape, so object-fit crops to a thin slice. Explicit
   dimensions keep every cover 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; }

/* Homepage hero (tasks/002 §2). */
.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: #fff;
  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: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.evl-hero p { margin: 0.3rem 0 0; max-width: 46rem; font-size: 1.05rem; }
.evl-hero a { color: #fff; 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, module page.html untouched. */
.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 (tasks/002 §4), on every page via baseof. */
.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(--evl-gold);
  color: #fff;
  text-align: center;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}
.evl-demo-banner a { color: #fff; text-decoration: underline; }

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

/* ============================================================================
   Library site shell (tasks/007): primary nav, homepage, events, docs. These are
   adopter chrome for an ordinary library site around the catalog -- another set of
   candidates to migrate into a fuller module theme (see ../libcatalog/tasks/025).
   ============================================================================ */

/* Header + primary nav. */
.evl-header { gap: 0.75rem 1.5rem; }
.evl-nav { flex: 1 1 auto; }
.evl-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; }
.evl-nav a {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  color: var(--evl-accent-ink);
}
.evl-nav a:hover { background: var(--evl-surface-alt); text-decoration: underline; }
.evl-nav a[aria-current="page"] { color: var(--lcat-accent); box-shadow: inset 0 -3px 0 var(--lcat-accent); }

/* Buttons. */
.evl-btn {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}
.evl-btn:hover { text-decoration: underline; }
.evl-btn--solid { background: var(--lcat-accent); color: #fff; border-color: var(--lcat-accent); }
.evl-btn--light { background: #fff; color: var(--evl-accent-ink); }
.evl-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }

/* Homepage. */
.evl-hero--home .evl-hero-kicker {
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: #d7e6e2;
}
.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: #fff;
  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: #fff; }
.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; }