/* ===========================================================================
   Maktaba Ghousia storefront — design system
   ---------------------------------------------------------------------------
   Direction: a Karachi kitab-khana, drawn from the Urdu/Islamic book itself.
     --binding : deep bottle-green of classic book-cloth bindings (brand)
     --paper   : warm book paper (background)
     --ink     : reading ink
     --rubric  : rubrication red — in manuscripts the important word is the
                 red one; here it is used ONLY for prices & sale labels
     --gilt    : gold of the jadwal (the ruled frame around a manuscript page)
                 — used ONLY for hairline rules and small markers
   Type: Libre Caslon (Latin display, the historic book face) ·
         Noto Nastaliq Urdu (Urdu) · Manrope (UI/body utility).
   Signature: the "jadwal rule" — section titles sit between paired gilt
   hairlines with a small ❖ marker, echoing the manuscript frame.
   =========================================================================== */
:root{
  --binding:#14443f;
  --binding-deep:#0e332f;
  --paper:#f6f3ec;
  --card:#fffdf9;
  --ink:#21251f;
  --ink-soft:#5d6158;
  --rubric:#a52e22;
  --gilt:#b9892f;
  --line:#e4ddcd;
  --radius:10px;
}

/* ---------- base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
}
h1,h2,h3,.display-face{ font-family:'Libre Caslon Text',Georgia,serif; }
.urdu{
  font-family:'Noto Nastaliq Urdu',serif;
  direction:rtl; line-height:2.1;
}
a{ color:var(--binding); }
a:hover{ color:var(--binding-deep); }

.eyebrow{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.price{ color:var(--rubric); font-weight:600; }
.accent{ color:var(--rubric); } /* legacy alias used by older templates */

/* ---------- buttons ---------- */
.btn-accent{ background:var(--binding); border-color:var(--binding); color:#fff; }
.btn-accent:hover,.btn-accent:focus{ background:var(--binding-deep); border-color:var(--binding-deep); color:#fff; }
.btn-outline-accent{ border:1px solid var(--binding); color:var(--binding); background:transparent; }
.btn-outline-accent:hover{ background:var(--binding); color:#fff; }

/* ---------- the jadwal rule (signature) ---------- */
.jadwal{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.1rem;
}
.jadwal::before,.jadwal::after{
  content:""; flex:1; height:0;
  border-top:1px solid var(--gilt);
  box-shadow:0 3px 0 0 var(--gilt); /* paired hairlines, like ruled margins */
  opacity:.55;
}
.jadwal .jadwal-title{
  font-family:'Libre Caslon Text',Georgia,serif;
  font-size:1.25rem; white-space:nowrap;
}
.jadwal .jadwal-mark{ color:var(--gilt); font-size:.8rem; }
.jadwal .jadwal-title .urdu{ font-size:1.35rem; line-height:1.6; }

/* framed hero box — a full jadwal around the opening panel */
.jadwal-frame{
  border:1px solid var(--gilt);
  outline:1px solid var(--gilt);
  outline-offset:4px;
  background:var(--card);
  border-radius:2px;
}

/* ---------- header ---------- */
.site-header{ background:var(--binding); }
.site-header .navbar-brand{
  font-family:'Libre Caslon Text',Georgia,serif;
  color:#f3ead2; font-size:1.3rem; letter-spacing:.02em;
}
.site-header .navbar-brand:hover{ color:#fff; }
.site-header .form-control{
  background:#fffdf9; border-color:var(--binding-deep);
}
.site-header .btn-outline-light{ --bs-btn-color:#f3ead2; --bs-btn-border-color:#3e6a62; }
.menu-bar{ background:var(--card); border-bottom:1px solid var(--line); }
.menu-bar .nav-link{ color:var(--ink); font-size:.925rem; }
.menu-bar .nav-link:hover{ color:var(--binding); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:2.6rem 2rem;
}
.hero .hero-word{
  position:absolute; inset-inline-end:1.2rem; top:50%;
  transform:translateY(-50%);
  font-family:'Noto Nastaliq Urdu',serif;
  font-size:clamp(4rem,12vw,8.5rem); line-height:1;
  color:var(--binding); opacity:.08; pointer-events:none; user-select:none;
}
.hero h1{ font-size:clamp(1.6rem,4vw,2.5rem); margin-bottom:.4rem; }
.hero .lead{ color:var(--ink-soft); max-width:34rem; }

/* ---------- book cards ---------- */
.book-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden; height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.book-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(20,68,63,.14);
  border-color:var(--gilt);
}
.book-cover{
  aspect-ratio:3/4; width:100%; object-fit:cover; display:block;
  background:#efe9db;
}
.book-cover-empty{
  aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:.75rem;
  background:#efe9db; color:var(--binding);
}
.book-cover-empty .urdu{
  font-size:1.05rem; line-height:1.9;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.book-cover-empty .latin{
  font-family:'Libre Caslon Text',Georgia,serif; font-size:.9rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.pub-cover{
  aspect-ratio:3/2; width:100%; object-fit:contain; display:block;
  background:#fffdf9; padding:.6rem;
}
.pub-cover-empty{
  aspect-ratio:3/2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.15rem; text-align:center; padding:.75rem;
  background:#efe9db; color:var(--binding);
}
.pub-cover-empty .latin{
  font-family:'Libre Caslon Text',Georgia,serif; font-size:1rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pub-cover-empty .urdu{ font-size:1rem; line-height:1.8; }
.book-card .card-pad{ padding:.6rem .7rem .75rem; }
.book-title-ur{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl;
  font-size:.95rem; line-height:1.9;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.book-title-en{
  font-size:.78rem; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sale-flag{
  position:absolute; top:.5rem; inset-inline-start:.5rem;
  background:var(--rubric); color:#fff;
  font-size:.65rem; font-weight:600; letter-spacing:.08em;
  padding:.15rem .45rem; border-radius:3px; text-transform:uppercase;
}

/* ---------- index tiles (categories / publishers) ---------- */
.tile{
  display:block; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.1rem; height:100%;
  text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tile:hover{ border-color:var(--gilt); box-shadow:0 6px 18px rgba(20,68,63,.10); color:var(--ink); }
.tile .tile-count{ color:var(--ink-soft); font-size:.8rem; }
.tile .urdu{ font-size:1.05rem; }
.chip{
  display:inline-block; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:.2rem .8rem; font-size:.85rem;
  color:var(--ink); text-decoration:none; margin:0 .25rem .4rem 0;
}
.chip:hover{ border-color:var(--binding); color:var(--binding); }

/* ---------- CMS page body (reading typography) ---------- */
.page-body{
  max-width:46rem; font-size:1.05rem; line-height:1.75;
}
.page-body p{ margin-bottom:1rem; }
.page-body h2,.page-body h3{ margin-top:1.8rem; }
.page-body img{ max-width:100%; height:auto; border-radius:6px; }
.page-body [dir="rtl"], .page-body .urdu{
  font-family:'Noto Nastaliq Urdu',serif; line-height:2.1;
}
.page-body table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.page-body th,.page-body td{ border:1px solid var(--line); padding:.45rem .6rem; }
.page-body blockquote{
  border-inline-start:3px solid var(--gilt);
  padding:.25rem 1rem; color:var(--ink-soft); margin:1rem 0;
}

/* ---------- footer ---------- */
.site-footer{ background:var(--binding-deep); color:#cfded6; }
.site-footer h6{ color:#f3ead2; }
.site-footer a{ color:#cfded6; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.site-footer hr{ border-color:#3e6a62; }
.site-footer .small, .site-footer .text-muted{ color:#a9c2b8 !important; }

/* ---------- a11y & motion ---------- */
:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .book-card,.tile{ transition:none; }
  .book-card:hover{ transform:none; }
}
@media (max-width:575px){
  .hero{ padding:1.8rem 1.1rem; }
  .hero .hero-word{ display:none; }
}