/* Shared styles for individual adhkar pages — responsive, web-first */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  --paper: #f7f3ea;
  --paper-2: #efe9dc;
  --ink: #1c1b18;
  --ink-soft: #4a4640;
  --ink-faint: #8a8478;
  --rule: #d8d2c2;
  --accent: oklch(0.45 0.08 60);
  --accent-soft: oklch(0.92 0.04 70);
}

[data-theme="sage"] {
  --paper: #f0f1ea;
  --paper-2: #e6e8de;
  --rule: #cfd2c2;
  --accent: oklch(0.42 0.05 150);
  --accent-soft: oklch(0.90 0.03 150);
}
[data-theme="charcoal"] {
  --paper: #1c1b18;
  --paper-2: #25231f;
  --ink: #ece7dc;
  --ink-soft: #b8b1a3;
  --ink-faint: #7a7468;
  --rule: #3a3630;
  --accent: oklch(0.78 0.10 70);
  --accent-soft: oklch(0.30 0.04 70);
}

[data-page="evening"] {
  --accent: oklch(0.45 0.05 260);
  --accent-soft: oklch(0.92 0.025 260);
}
[data-page="sleep"] {
  --accent: oklch(0.40 0.06 280);
  --accent-soft: oklch(0.90 0.03 280);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Reem Kufi', 'Amiri', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Top nav bar */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topnav .home-link {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  transition: all .15s ease;
}
.topnav .home-link:hover { color: var(--ink); background: var(--accent-soft); }

.topnav .nav-pills {
  display: flex;
  gap: 6px;
  direction: rtl;
}
.topnav .nav-pills a {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 16px;
  border-radius: 999px;
  transition: all .15s ease;
}
.topnav .nav-pills a:hover { color: var(--ink); background: var(--accent-soft); }
.topnav .nav-pills a.active { color: var(--paper); background: var(--accent); }

/* Page header */
.adhkar-header {
  text-align: center;
  padding: 56px 24px 24px;
  direction: rtl;
}
.adhkar-header h1 {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 64px);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Adhkar list */
.adhkar-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.adhkar-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  transition: border-color .15s ease;
}
.adhkar-card:hover {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--rule));
}

.card-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 56px;
}
.card-count {
  font-family: 'Reem Kufi', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
[data-theme="charcoal"] .card-count { color: var(--ink); }

.card-text {
  font-family: 'Amiri', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 2;
  direction: rtl;
  text-align: justify;
  color: var(--ink);
}
.card-label {
  display: block;
  margin-top: 10px;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 13px;
  color: var(--accent);
  direction: rtl;
  font-weight: 500;
}

/* Footer */
.adhkar-foot {
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--rule);
  font-family: 'Reem Kufi', sans-serif;
  color: var(--ink-faint);
  direction: rtl;
}

/* Mobile */
@media (max-width: 600px) {
  .topnav { padding: 10px 14px; flex-wrap: wrap; }
  .topnav .home-link { order: 2; }
  .topnav .nav-pills { order: 1; width: 100%; justify-content: center; }
  .adhkar-header { padding: 36px 16px 16px; }
  .adhkar-list { padding: 16px 14px 64px; gap: 12px; }
  .adhkar-card { padding: 18px 18px; gap: 14px; }
  .card-text { line-height: 1.9; }
}