/* =========================================================
   Calibre PHP Library — responsive stylesheet
   ========================================================= */

:root {
  /* accent colours are set in assets/theme.css, generated by publish.py */
  --accent:    #4a7c59;   /* fallback only */
  --accent-dk: #335a40;   /* fallback only */
  --bg:        #f6f5f0;
  --surface:   #ffffff;
  --border:    #e0ddd6;
  --text:      #1c1b18;
  --muted:     #6b6760;
  --epub-bg:   #d4edda;
  --epub-fg:   #155724;
  --pdf-bg:    #fce8e8;
  --pdf-fg:    #7b1515;
  --radius:    6px;
  --shadow:    0 1px 4px rgba(0,0,0,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent-dk); }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  background: var(--accent);
  color: #fff;
  padding: .75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.site-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.site-name:hover { text-decoration: none; opacity: .9; }

.main-nav { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; }
.main-nav a { color: rgba(255,255,255,.85); font-size: .95rem; padding: .2rem .4rem; border-radius: 3px; }
.main-nav a:hover,
.main-nav a.active { color: #fff; background: rgba(255,255,255,.15); text-decoration: none; }
.nav-main-site { margin-left: .5rem; color: rgba(255,255,255,.55) !important; font-size: .85rem !important; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; padding: .15rem .5rem !important; }
.nav-main-site:hover { color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.6); background: transparent !important; }

/* ── Search bar ──────────────────────────────────────────── */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  max-width: 1200px;
  margin: .5rem auto 0;
}

.search-wrap {
  position: relative;
  flex: 1 1 260px;
}

.search-wrap input[type="search"] {
  width: 100%;
  padding: .5rem .8rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline-offset: 2px;
}
.search-wrap input:focus { outline: 2px solid #fff; background: #fff; }

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  max-height: 420px;
  overflow-y: auto;
  z-index: 200;
}

.search-dropdown .sd-item {
  display: flex;
  gap: .75rem;
  padding: .6rem .75rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
}
.search-dropdown .sd-item:last-child { border-bottom: none; }
.search-dropdown .sd-item:hover { background: #f0ede6; }
.search-dropdown .sd-thumb {
  width: 40px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.search-dropdown .sd-info { min-width: 0; }
.search-dropdown .sd-title { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dropdown .sd-author { font-size: .85rem; color: var(--muted); }
.search-dropdown .sd-series { font-size: .8rem; color: var(--muted); font-style: italic; }
.search-dropdown .sd-none { padding: .75rem; color: var(--muted); font-size: .9rem; }

.btn-fulltext {
  padding: .5rem .9rem;
  background: rgba(255,255,255,.18);
  color: #fff;
  border-radius: var(--radius);
  font-size: .9rem;
  white-space: nowrap;
}
.btn-fulltext:hover, .btn-fulltext.active {
  background: rgba(255,255,255,.32);
  color: #fff;
  text-decoration: none;
}

/* ── Main content ────────────────────────────────────────── */
.main-content {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.page-heading {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.filter-heading {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--muted);
}

.back { margin-bottom: .75rem; }
.back a { font-size: .9rem; }

/* ── Card grid ───────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

@media (min-width: 600px)  { .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (min-width: 900px)  { .card-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }

.card > a { display: block; text-decoration: none; color: inherit; flex: 1; }
.card > a:hover .card-title { color: var(--accent); }

.card .cover {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background: #e8e6e0;
}

.card-body { padding: .5rem .6rem .4rem; }
.card-title { font-size: .9rem; font-weight: 600; line-height: 1.3; margin-bottom: .2rem; }
.card-author { font-size: .8rem; color: var(--muted); }
.card-series { font-size: .75rem; color: var(--muted); font-style: italic; margin-top: .15rem; }

.card-dl {
  display: flex;
  gap: .3rem;
  padding: .4rem .6rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Download link badges ────────────────────────────────── */
.dl, .btn-dl {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 3px;
  text-decoration: none;
}
.dl.epub, .btn-dl.epub { background: var(--epub-bg); color: var(--epub-fg); }
.dl.pdf,  .btn-dl.pdf  { background: var(--pdf-bg);  color: var(--pdf-fg);  }
.dl:hover, .btn-dl:hover { filter: brightness(.92); text-decoration: none; }

.btn-dl { font-size: .95rem; padding: .45rem 1rem; margin-top: .5rem; }

.count { color: var(--muted); font-size: .8rem; margin-left: .3rem; }

/* ── Pill lists (Authors, Series, Tags, Publishers) ─────────── */
.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
}
.pill-list li { padding: 0; }
.pill-list a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: filter .15s, opacity .15s;
}
.pill-list a:hover { filter: brightness(.88); text-decoration: none; }
.pill-list .count { opacity: .65; font-weight: 400; font-size: .8rem; }

/* Per-type colours */
.pill-authors    a { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.pill-series     a { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.pill-publishers a { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pill-tags       a { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* ── Book detail ─────────────────────────────────────────── */
.book-detail {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.book-cover-col { flex: 0 0 200px; max-width: 200px; }
@media (max-width: 500px) { .book-cover-col { flex: 0 0 140px; max-width: 140px; } }

.book-cover-lg {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  display: block;
}

.dl-buttons { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }

.book-meta-col { flex: 1 1 280px; }
.book-title { font-size: 1.6rem; line-height: 1.25; margin-bottom: .5rem; }
.book-author { font-size: 1.05rem; color: var(--muted); margin-bottom: .4rem; }
.book-series, .book-pubdate, .book-publisher { font-size: .92rem; color: var(--muted); margin-bottom: .3rem; }

.book-tags { margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  display: inline-block;
  padding: .2rem .6rem;
  background: #eae8e0;
  border-radius: 20px;
  font-size: .82rem;
  color: var(--text);
}
.tag:hover { background: var(--accent); color: #fff; text-decoration: none; }

.book-description { margin-top: 1rem; }
.book-description h2 { font-size: 1rem; margin-bottom: .4rem; }
.book-description p { font-size: .95rem; color: #333; }

/* ── Full-text search ────────────────────────────────────── */
.fulltext-page { max-width: 900px; }

.fulltext-form {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.fulltext-input {
  flex: 1 1 260px;
  padding: .55rem .8rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.fulltext-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-search {
  padding: .55rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
}
.btn-search:hover { background: var(--accent-dk); }

.result-count { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.no-results { color: var(--muted); }
.error { color: #b30000; }

.fulltext-results { display: flex; flex-direction: column; gap: 1rem; }
.ft-result {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  box-shadow: var(--shadow);
}
.ft-cover { flex-shrink: 0; }
.ft-cover img { width: 60px; height: 82px; object-fit: cover; border-radius: 3px; }
.ft-body { flex: 1; min-width: 0; }
.ft-body h3 { font-size: 1rem; margin-bottom: .15rem; }
.ft-author { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.ft-snippet {
  font-size: .88rem;
  line-height: 1.5;
  color: #444;
  background: #f9f8f4;
  padding: .4rem .6rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 3px 3px 0;
  margin-bottom: .4rem;
}
.ft-snippet mark { background: #ffe082; border-radius: 2px; padding: 0 1px; }
.ft-dl { display: flex; gap: .4rem; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  justify-content: center;
}
.page {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--surface);
}
.page.current { background: var(--accent); color: #fff; border-color: var(--accent); }
a.page:hover { background: #eae8e0; text-decoration: none; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--muted);
  font-size: .85rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}