/* ========== Theme tokens ========== */
:root{
  --bg:#ffffff;
  --text:#0b0b0b;
  --muted:#6b7280;
  --card:#f5f5f7;
  --accent:#2563eb;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:14px;

  /* Typography scales */
  --title-size: clamp(22px, 3vw, 34px);
  --tagline-size: clamp(12px, 2.2vw, 16px);
  --card-title-size: clamp(14px, 2vw, 18px);
}

.dark{
  --bg:#0f1115;
  --text:#f5f7fa;
  --muted:#9aa4b2;
  --card:#161a22;
  --accent:#60a5fa;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
  transition: background .2s ease, color .2s ease;
}

/* ========== Header ========== */
header.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--card);
  box-shadow: var(--shadow);
  position:sticky;
  top:0;
  z-index:10;
}
.header-left{display:flex; flex-direction:column; gap:2px}
.site-title{
  margin:0;
  font-size: var(--title-size);
  font-weight:800;
  letter-spacing:.3px;
}
.tagline{
  margin:0;
  font-size: var(--tagline-size);
  color:var(--muted);
}
.header-right{display:flex; gap:10px; align-items:center}

/* Theme button */
#theme-toggle{
  border:none;
  background:var(--text);
  color:var(--bg);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}

/* ========== Nav buttons ========== */
.nav-buttons{
  display:flex;
  gap:10px;
  padding:12px 20px;
  flex-wrap:wrap;
}
.nav-btn{
  display:inline-block;
  text-decoration:none;
  background:var(--card);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease;
}
.nav-btn:hover{ transform: translateY(-2px); }
.nav-btn.active{ outline:2px solid var(--accent) }

/* ========== Filter buttons ========== */
.filters{
  display:flex; gap:10px; padding:10px 20px; flex-wrap:wrap;
}
.filter-btn{
  border:none; background:var(--card); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.filter-btn.active, .filter-btn:hover{ background:var(--text); color:var(--bg);}

/* ========== Grid ========== */
.book-list{
  display:grid;
  gap:18px;
  padding:20px;
  grid-template-columns: repeat(2, 1fr); /* phones */
}
@media (min-width:700px){ .book-list{ grid-template-columns: repeat(3, 1fr);} } /* tablets */
@media (min-width:1024px){ .book-list{ grid-template-columns: repeat(5, 1fr);} } /* desktops */

/* ========== Cards ========== */
.book-card{
  display:block;
  background:var(--card);
  border-radius: var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.book-card:hover{ transform: translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.12); }
.book-card img{ width:100%; display:block; aspect-ratio: 2/3; object-fit: cover; }
.book-card h2{
  margin:10px 12px 14px;
  font-size: var(--card-title-size);
  font-weight:700;
  text-align:left; /* لا يتم توسيط العناوين */
}

/* category chips on cards (optional hidden on index for now) */
.card-chips{ display:flex; gap:8px; padding:0 12px 12px; flex-wrap:wrap;}
.chip{
  display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px;
  background:rgba(99,102,241,.12); color:var(--text); text-decoration:none;
}

/* ========== Pagination ========== */
#pagination{ display:flex; gap:10px; justify-content:center; align-items:center; padding:10px 0 28px;}
#pagination button{
  padding:8px 12px; border:none; border-radius:10px; background:var(--card); color:var(--text); cursor:pointer;
}
#pagination button[disabled]{ opacity:.5; cursor:not-allowed }

/* ========== Content pages ========== */
.main-content{ max-width: 820px; margin: 26px auto; padding: 0 20px;}
.book-header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; background:var(--card); box-shadow:var(--shadow);
}
.header-left h1{ margin:6px 0 0; font-size: clamp(22px, 4vw, 36px);}
.back-btn{ text-decoration:none; color:var(--text); background:var(--card); padding:8px 12px; border-radius:10px; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin:0; }
.tag-row a{ text-decoration:none; padding:6px 10px; border-radius:999px; background:var(--card); color:var(--text); }
.tag-row a:hover{ background:var(--text); color:var(--bg); }

/* Paragraph rhythm */
.entry-content p{ line-height:1.8; }
.narrow-container{ max-width: 600px; margin: 1.5rem auto; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 1.5rem;}

/* Base styles (Light mode) */
:root {
  --bg: #ffffff;
  --text: #000000;
  --input-bg: #f9f9f9;
  --input-border: #ccc;
}

/* Dark mode */
.dark {
  --bg: #121212;
  --text: #ffffff;
  --input-bg: #1e1e1e;
  --input-border: #555;
}

/* Search */
.search-container {
  text-align: center;
  margin: 1rem;
}

#searchBox {
  width: 60%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 1rem;
  background-color: var(--input-bg);
  color: var(--text);
}

/* في ملف styles.css */

img, video, iframe {
  max-width: 100%; /* تضمن أن هذه العناصر لا تتجاوز عرض الحاوية */
  height: auto;    /* تحافظ على نسبة العرض إلى الارتفاع */
  display: block;  /* تمنع المساحات الفارغة أسفل الصور */
}

.main-content {
  padding: 1rem; /* إضافة مسافة بادئة حول المحتوى للمساحات الصغيرة */
  word-wrap: break-word; /* لكسر الكلمات الطويلة ومنع التجاوز */
  overflow-x: hidden; /* لمنع أي تجاوزات أفقية غير متوقعة داخل المحتوى الرئيسي */
}

.narrow-container {
  max-width: 800px; /* أو أي عرض أقصى تفضله للمحتوى على الشاشات الكبيرة */
  margin: 0 auto; /* لمركزة الحاوية الأفقية */
  padding: 0 1rem; /* إضافة مسافة بادئة على الجانبين للمساحات الصغيرة */
}

/* تعديلات إضافية للعناصر النصية لمنع التجاوز */
p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote {
  word-break: break-word; /* لكسر الكلمات الطويلة ومنع التجاوز */
}