/*
Theme Name: Folio Reading Room
Theme URI: https://example.com
Author: You
Description: A minimalist reading-room theme for a DearFlip-powered PDF library. Colors, hero text, and logo are editable in Appearance > Customize. Books are managed under the "Books" menu — no code editing required to add content.
Version: 1.0
Requires PHP: 7.4
Text Domain: folio
*/

/* Fixed design tokens (not user-editable — these are structural, not brand color).
   Brand colors (--paper, --ink, --emerald, --brass) are injected in wp_head
   from Appearance > Customize > Folio Colors, with these as fallback defaults. */
:root{
  --paper:#F6F3EA; --paper-raised:#FFFFFF; --ink:#1E2A22; --ink-soft:#5B6A5F;
  --emerald:#2F5233; --brass:#B08D57; --line:#DAD3C2;
  --c-fiction:#2F5233; --c-scifi:#3F5E7A; --c-romance:#7A4B6D;
  --c-business:#B08D57; --c-poetry:#A85C32; --c-nonfiction:#5B6A5F;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Work Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,234,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.headbar{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:22px;
  letter-spacing:0.01em; display:flex; align-items:center; gap:10px;
}
.logo .mark{width:22px; height:26px; background:var(--emerald); border-radius:2px 5px 5px 2px; position:relative; flex-shrink:0;}
.logo .mark::after{content:''; position:absolute; left:4px; top:0; bottom:0; width:2px; background:var(--brass);}
nav.primary{display:flex; align-items:center; gap:36px;}
nav.primary a{font-size:14px; letter-spacing:.03em; color:var(--ink-soft); position:relative; padding:4px 0;}
nav.primary a.active{color:var(--ink); font-weight:500;}
nav.primary a.active::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--brass);}

/* ---------- Top reads (auto-sliding strip) ---------- */
.top-reads{padding:22px 0 20px; border-bottom:1px solid var(--line); background:var(--paper);}
.top-reads-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.top-reads .count{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--ink-soft);}
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.marquee-track{display:flex; gap:16px; width:max-content; animation:slide 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.tr-cover{position:relative; flex-shrink:0; width:132px; height:176px; border-radius:3px; display:flex; align-items:flex-end; padding:12px; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 10px 22px -12px rgba(30,42,34,.35);}
.tr-spine{position:absolute; left:0; top:0; bottom:0; width:5px;}
.tr-title{font-family:'Fraunces', Georgia, serif; color:#fff; font-size:13px; line-height:1.2; font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.3);}

/* ---------- Hero ---------- */
.hero{padding:88px 0 64px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.eyebrow{font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--brass);}
h1.display{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:56px; line-height:1.04; letter-spacing:-0.01em; margin-bottom:22px;}
h1.display em{font-style:italic; color:var(--emerald); font-weight:400;}
.hero p.lede{font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:440px; margin-bottom:32px;}
.btn-primary{display:inline-flex; align-items:center; gap:10px; background:var(--emerald); color:#fff; padding:15px 26px; border-radius:3px; font-size:14px; font-weight:500; letter-spacing:.02em; border:none; cursor:pointer;}
.btn-secondary{display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); padding:16px 22px; border:1px solid var(--line); border-radius:3px; font-size:14px;}
.hero-image{width:100%; height:340px; object-fit:cover; border-radius:4px;}
.shelf{height:340px; display:flex; align-items:flex-end; gap:6px; padding:0 8px 18px; border-bottom:8px solid var(--ink); position:relative;}
.spine{border-radius:3px 3px 0 0; flex-shrink:0;}

/* ---------- Filters ---------- */
.filters{padding:36px 0 8px;}
.filters-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
h2.section-title{font-family:'Fraunces', Georgia, serif; font-size:26px; font-weight:500;}
.count{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft);}
.pills{display:flex; gap:10px; flex-wrap:wrap; padding-bottom:36px;}
.pill{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:20px; border:1px solid var(--line); font-size:13px; color:var(--ink-soft); background:var(--paper-raised);}
.pill .dot{width:8px; height:8px; border-radius:50%;}
.pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* ---------- Book grid ---------- */
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding-bottom:80px;}
.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column;}
.cover{height:230px; position:relative; display:flex; align-items:flex-end; padding:18px; background-size:cover; background-position:center;}
.cover .spine-edge{position:absolute; left:0; top:0; bottom:0; width:6px;}
.cover .cover-title{font-family:'Fraunces', Georgia, serif; color:#fff; font-size:19px; line-height:1.2; font-weight:500; text-shadow:0 2px 10px rgba(0,0,0,.25);}
.card-body{padding:16px 18px 20px;}
.cat-tag{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; display:block;}
.book-title{font-size:15px; font-weight:600; margin-bottom:3px;}
.book-author{font-size:13px; color:var(--ink-soft);}
.empty-state{padding:60px 0; text-align:center; color:var(--ink-soft);}

/* ---------- Book detail ---------- */
.breadcrumb{padding:22px 0 0; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb .current{color:var(--ink);}
.detail{padding:36px 0 72px; display:grid; grid-template-columns:380px 1fr; gap:56px;}
.cover-large{height:520px; border-radius:4px; position:relative; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 24px 48px -20px rgba(30,42,34,.35);}
.cover-large .spine-edge{position:absolute; left:0; top:0; bottom:0; width:10px;}
.cover-large .cover-title{position:absolute; left:32px; bottom:36px; right:32px; font-family:'Fraunces', Georgia, serif; color:#fff; font-size:34px; line-height:1.08; font-weight:500; text-shadow:0 2px 14px rgba(0,0,0,.3);}
.info .cat-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); background:#EAF0EA; display:inline-block; padding:5px 10px; border-radius:3px; margin-bottom:18px;}
h1.title{font-family:'Fraunces', Georgia, serif; font-size:40px; font-weight:500; line-height:1.08; margin-bottom:10px;}
.author{font-size:16px; color:var(--ink-soft); margin-bottom:28px;}
.meta-row{display:flex; gap:28px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap;}
.meta-item{display:flex; flex-direction:column; gap:4px;}
.meta-item .k{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.meta-item .v{font-size:14px; font-weight:500;}
.synopsis{font-size:16px; line-height:1.75; color:#33403A; max-width:620px; margin-bottom:34px;}
.cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.more{padding-top:40px; border-top:1px solid var(--line);}
.row{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.mini-card{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-raised);}
.mini-cover{height:130px; position:relative; background-size:cover; background-position:center;}
.mini-cover .spine-edge{position:absolute; left:0; top:0; bottom:0; width:5px;}
.mini-body{padding:10px 12px;}
.mini-title{font-size:12.5px; font-weight:600; line-height:1.3;}

/* ---------- Reader mode ---------- */
body.reading-mode{background:#26332A; color:#F6F3EA; height:100vh; overflow:hidden; display:flex; flex-direction:column;}
.reader-head{display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:56px; background:#1E2A22; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;}
.reader-head .back{display:flex; align-items:center; gap:8px; font-size:13px; color:#C9D2CB;}
.reader-head .logo-mini{font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:15px; display:flex; align-items:center; gap:8px; color:#fff;}
.reader-head .book-name{font-size:13px; color:#9FAAA2; padding-left:18px; border-left:1px solid rgba(255,255,255,.15);}
.reader-head .right-nav{display:flex; align-items:center; gap:22px; font-size:13px; color:#C9D2CB;}
.reader-stage{flex:1; overflow:auto; padding:24px; display:flex; align-items:flex-start; justify-content:center;}
.reader-stage .dflip-wrap{width:min(78vw, 900px); background:#fff; border-radius:2px; box-shadow:0 40px 80px -20px rgba(0,0,0,.55);}

/* ---------- About page (page.php content) ---------- */
.about-hero{padding:88px 0 56px; border-bottom:1px solid var(--line);}
.entry-content{padding:48px 0 72px;}
.entry-content h1, .entry-content h2{font-family:'Fraunces', Georgia, serif; font-weight:500;}
.entry-content h1{font-size:44px; margin-bottom:20px; line-height:1.1;}
.entry-content h2{font-size:26px; margin:36px 0 16px;}
.entry-content p{font-size:16px; line-height:1.75; color:#33403A; margin-bottom:16px; max-width:680px;}
.entry-content blockquote{font-family:'Fraunces', Georgia, serif; font-size:26px; line-height:1.45; color:#2A362F; border-left:3px solid var(--brass); padding-left:24px; margin:36px 0;}

footer.site-footer{border-top:1px solid var(--line); padding:32px 0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:12px;}
.foot-nav{display:flex; gap:24px;}

/* ============================================ RESPONSIVE ============================================ */
@media (max-width: 1100px){
  .wrap{padding:0 24px;}
  .grid{grid-template-columns:repeat(3, 1fr); gap:20px;}
  .detail{grid-template-columns:300px 1fr; gap:40px;}
  .row{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero{padding:56px 0 44px;}
  h1.display{font-size:42px;}
  .shelf, .hero-image{height:220px;}
  .tr-cover{width:112px; height:150px;}
}
@media (max-width: 820px){
  .detail{grid-template-columns:1fr; gap:32px;}
  .cover-large{height:360px; max-width:320px;}
  h1.title{font-size:32px;}
  .row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 760px){
  .headbar{height:64px;}
  .logo{font-size:19px;}
  nav.primary{gap:22px;}
  nav.primary a{font-size:13px;}
  .grid{grid-template-columns:repeat(2, 1fr); gap:16px;}
  .cover{height:190px;}
  .cover .cover-title{font-size:17px;}
  .filters-row{flex-direction:column; align-items:flex-start; gap:8px;}
  .top-reads-head{flex-direction:column; align-items:flex-start; gap:4px;}
  .top-reads .count{display:none;}
}
@media (max-width: 560px){
  .wrap{padding:0 18px;}
  h1.display{font-size:32px;}
  .btn-primary{width:100%; justify-content:center;}
  .shelf{display:none;}
  .grid{grid-template-columns:1fr; gap:14px;}
  .cover{height:210px;}
  .cover-large{max-width:100%; height:320px;}
  h1.title{font-size:28px;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .row{grid-template-columns:repeat(2,1fr); gap:12px;}
  .foot-row{flex-direction:column; text-align:center;}
  .tr-cover{width:96px; height:130px; padding:9px;}
  .marquee-track{gap:12px; animation-duration:26s;}
  .reader-head .book-name{display:none;}
  .reader-stage .dflip-wrap{width:94vw;}
}