@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Lugrasimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');


/* Slightly nicer reading width */
.content-narrow {
  max-width: 860px;
}

/* Simple “encyclopedia” vibe */
.page-title {
  letter-spacing: 0.2px;
}

/* Pure black dark mode */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] main,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid {
  background-color: #000000 !important;
}

/* Force true black text in light mode */
[data-bs-theme="light"] {
  --bs-body-color: #000000;
  --bs-heading-color: #000000;
}

.navbar-brand{
  font-family: "Cormorant", serif;
  font-size: 3rem;
}

[data-bs-theme="light"] .navbar-brand {
  color: #432DD7;
}

[data-bs-theme="dark"] .navbar-brand {
  color: #ffffff;
}

#library{
  font-size: 1.5em;
}

/* Prevent Bootstrap hover overrides */
.navbar-brand:hover {
  color: inherit;
}

.subtxt1{
  font-family: "Cormorant", serif;
  font-size: 20px;
}

.subtxt2{
  font-family: "Cinzel", serif;
}

i{
  font-weight: bold;
}

.p{
  font-family: "Noto Serif" , "Times New Roman", serif;
  font-size: 1em;
}

.p a{
  text-decoration: none;
}

.noto{
  font-family: "Noto Serif", "Times New Roman", serif;
}

.p_about {
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: 20px;
}

.amiri{
  font-family: "Amiri Quran", serif;
}

.naskh{
  font-family: "Noto Naskh Arabic", serif;
}

.basmalah{
  font-size: 1.1em;
}

.ayah{
  font-family: "Scheherazade New", "Amiri Quran", serif;
  direction: rtl;
  unicode-bidi: plaintext;
  line-height: 2.2;                    /* roomy for harakat */
  letter-spacing: 0;                   /* don’t space Arabic letters */
  word-spacing: 0.08em;                /* slight mushaf feel */
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  font-size: 1.8em;
}

.arabic{
  font-family: "Scheherazade New", "Amiri Quran", serif;
}

.arabic .ayah-num {
  font-size: 0.9em;
  margin-inline: 0.25em;
  opacity: 0.85;
}

.theme_color{
  color: #432DD7;
}

/*---------------------------------------------*/
.hr-double-symbol{
  border: none;
  height: 10px;              /* distance between the two lines */
  margin: 2.5rem 0;
  position: relative;
  background:
    linear-gradient(currentColor, currentColor) center 2px / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center calc(100% - 2px) / 100% 1px no-repeat;
  opacity: 0.7;
}

.hr-double-symbol::after{
  content: "۞";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 0.7rem;
  background: var(--hr-bg, #fff); /* match page background */
  font-size: 0.9rem;
  font-family: "EB Garamond", "Cormorant Garamond", serif;
  opacity: 0.9;
}

/* Dark mode override */
[data-bs-theme="dark"] .hr-double-symbol {
  color: #ffffff;          /* makes the lines white */
  opacity: 0.8;
}

[data-bs-theme="dark"] .hr-double-symbol::after {
  color: #ffffff;          /* makes the symbol white */
  background: var(--bs-body-bg); /* matches dark background */
}

/*-----------------------------------------*/


.list-container{
  font-family: serif;
}

/* Tabs container */
.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  justify-content: center;
}

/* Tab buttons */
.nav-tabs .nav-link {
  color: var(--bs-body-color);
  font-weight: bold;
  font-size: 1.3em;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
}

/* Active tab */
.nav-tabs .nav-link.active {
  border-bottom-color: #432DD7;
  background: transparent;
  color: #432DD7;
}

[data-bs-theme="light"] .nav-tabs .nav-link.active {
  background: lightgrey;
}

/* Hover */
.nav-tabs .nav-link:hover {
  border-bottom-color: #155DFC var(--bs-secondary-color);
}


.tab-content {
  background: var(--bs-body-bg);
  border-radius: 0 0 6px 6px;
}

@media (max-width: 768px) {
  #topicTabs {
    flex-wrap: nowrap;          /* force single row */
  }

  #topicTabs .nav-item {
    flex: 1 1 0;                /* equal width tabs */
    text-align: center;
  }

  #topicTabs .nav-link {
    width: 100%;
    padding: 0.5rem 0.25rem;    /* tighter padding */
    font-size: 0.9rem;          /* slightly smaller text */
    white-space: nowrap;        /* prevent text wrapping */
  }
}


/* Search input */
input[type="search"] {
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Remove excessive focus glow */
input[type="search"]:focus {
  box-shadow: none;
  border-color: var(--bs-body-color);
}

.list-group {
  border: none;
}

.list-group-item {
  border: none;
  padding: 0.75rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  cursor: default;
}

/* Subtle separators */
.list-group-item:not(:last-child) {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Hover highlight */
.list-group-item:hover {
  background: rgba(0, 0, 0, 0.02);
}


.list-group-item a {
  text-decoration: none;
  color: inherit;
}

[data-bs-theme="light"] .nav-tabs .nav-link.active {
  background: #E5E5E5;
}

[data-bs-theme="dark"] .list-group-item:hover {
  background: rgba(255, 255, 255, 0.04);
}


footer{
  margin-top: 20px;
}