/* FILE: assets/css/style.css — theme styles on top of Bootstrap */

/* ---------- self-hosted Sindhi / Urdu fonts ---------- */
/* Noto Nastaliq Urdu: traditional calligraphic style for Sindhi & Urdu. */
/* Noto Sans Arabic: clean fallback so no character ever renders tofu.  */
/* MB Sarem Iqra: dedicated naskh-style Sindhi font (has U+06FD ۽ etc). */
@font-face {
  font-family: "MB Sarem Iqra";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mbsarem-iqra.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nastaliq-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nastaliq-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sansarabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sansarabic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+2215;
}

/* ---------- top utility bar ---------- */
.topbar {
  background: #212529;
  color: #adb5bd;
  font-size: 0.85rem;
  padding: 0.4rem 0;
  /* Keep above the sticky navbar so the language dropdown menu
     (Bootstrap z-index 1000) is not hidden behind it (z-index 1020). */
  position: relative;
  z-index: 1030;
}
.topbar-contact span { margin-inline-end: 1rem; }
.topbar-contact i { margin-inline-end: 0.25rem; }
.topbar .lang-switcher .btn { border-color: #495057; color: #dee2e6; }
.topbar .lang-switcher .btn:hover { background: #343a40; }

/* ---------- main navbar ---------- */
.main-navbar {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.navbar-brand { font-weight: 700; font-size: 1.3rem; }
.navbar-brand img { max-height: 40px; width: auto; }
.main-navbar .nav-link { font-weight: 500; padding: 0.75rem 0.9rem !important; }
.main-navbar .nav-link.active { color: #0d6efd !important; }

/* ---------- footer ---------- */
.site-footer { background: #212529; color: #adb5bd; }
.footer-heading { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.footer-text { font-size: 0.95rem; }
.footer-links a, .footer-contact a { color: #adb5bd; text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: #fff; }
.footer-links li { padding: 0.25rem 0; }
.footer-contact li { padding: 0.3rem 0; }
.footer-contact i { margin-inline-end: 0.5rem; color: #6c757d; }
.footer-bottom { background: #1a1d20; font-size: 0.85rem; }
.footer-bottom a { color: #adb5bd; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #343a40; color: #dee2e6; margin-inline-end: 0.5rem;
  text-decoration: none; transition: background 0.2s;
}
.social-links a:hover { background: #0d6efd; color: #fff; }
.social-links-sm a { width: 28px; height: 28px; font-size: 0.8rem; }

/* ---------- content ---------- */
.page-content .content-body { line-height: 1.8; }
.content-body img { max-width: 100%; height: auto; border-radius: 0.375rem; }
.breadcrumb { background: transparent; padding: 0; margin-bottom: 1.25rem; }

/* ---------- sidebar ---------- */
.sidebar-widget .card-header { font-weight: 600; background: #f8f9fa; }
.sidebar-widget .list-group-item a { text-decoration: none; color: #212529; }
.sidebar-widget .list-group-item a:hover { color: #0d6efd; }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #0d6efd; color: #fff; font-size: 1.2rem; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.4); z-index: 1030;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #0b5ed7; }

/* ---------- ad slots ---------- */
.ad-slot { text-align: center; overflow: hidden; }
.ad-slot img { max-width: 100%; height: auto; }

/* ---------- homepage ---------- */
.hero {
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  color: #fff;
  padding: 4.5rem 0;
  margin-bottom: 0;
}
.hero-title { font-weight: 800; font-size: 2.6rem; line-height: 1.25; }
.hero-subtitle { font-size: 1.2rem; opacity: 0.9; margin-top: 1rem; }
.hero-image {
  max-height: 340px; border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
html[dir="rtl"] .hero-title { line-height: 1.9; }
.section-title {
  font-weight: 700; font-size: 1.6rem; margin: 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 4px solid #0d6efd;
}
.home-card { transition: transform 0.2s, box-shadow 0.2s; }
.home-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }
.home-card .card-img-top { height: 190px; object-fit: cover; }
.home-card .book-cover { height: 260px; object-fit: cover; }

/* ---------- order tracking timeline ---------- */
.track-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.track-timeline li {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 26px;
  font-size: 0.78rem;
  color: #9ca3af;
}
.track-timeline li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 50%;
  height: 2px;
  background: #e5e7eb;
}
.track-timeline li:first-child::before { display: none; }
.track-timeline .dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
}
.track-timeline li.done { color: #374151; }
.track-timeline li.done::before { background: #4f46e5; }
.track-timeline li.done .dot { background: #4f46e5; box-shadow: 0 0 0 2px #4f46e5; }
.track-timeline li.current .dot { background: #4f46e5; box-shadow: 0 0 0 2px #4f46e5, 0 0 0 6px #e0e7ff; }
.track-timeline li.current { color: #111827; font-weight: 600; }
/* RTL: the timeline flows right-to-left, so connectors mirror. */
html[dir="rtl"] .track-timeline li::before { left: auto; right: 0; }
html[dir="rtl"] .track-timeline .dot { left: auto; right: 50%; transform: translateX(50%); }

/* ---------- RTL readability (Sindhi / Urdu) ---------- */
html[dir="rtl"] body {
  font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Jameel Noori Nastaleeq",
               "Segoe UI", Tahoma, sans-serif;
  line-height: 2.2;
}
html[dir="rtl"] .page-content .content-body { line-height: 2.4; }
/* Long-form reading areas get a touch more air for the tall Nastaliq glyphs. */
html[dir="rtl"] .blog-post .content-body,
html[dir="rtl"] .daily-quote p { line-height: 2.6; }

/* ---------- Sindhi: MB Sarem Iqra (naskh style, more compact than Nastaliq) --- */
/* Same specificity as the RTL rules above, placed later so they win for Sindhi. */
html[lang="sd"] body {
  font-family: "MB Sarem Iqra", "Noto Nastaliq Urdu", "Noto Sans Arabic",
               "Segoe UI", Tahoma, sans-serif;
  line-height: 1.9;
}
html[lang="sd"] .page-content .content-body { line-height: 2.1; }
html[lang="sd"] .blog-post .content-body,
html[lang="sd"] .daily-quote p { line-height: 2.2; }