/* ============================================================
   AROUND THE WORLD — English internal-page brand layer
   Every rule below is scoped under html[lang="en"], so this file
   has ZERO visual effect on Arabic pages even though it may load
   on every page. Safe by construction — do not remove the scope.
   ============================================================ */

html[lang="en"] {
  --awl-ink: #0B211D;
  --awl-ink-deep: #071613;
  --awl-parchment: #F1E7CC;
  --awl-parchment-2: #E8DAB4;
  --awl-ink-text: #2B2118;
  --awl-ink-text-soft: #5A4E3C;
  --awl-gold: #C9A876;
  --awl-gold-bright: #E8CE9C;
  --awl-gold-deep: #8A6E3E;
  --awl-teal: #4FB6A6;
}

html[lang="en"] body {
  font-family: 'Literata', 'Tajawal', serif !important;
  background: var(--awl-parchment) url(none) !important;
  color: var(--awl-ink-text);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .navbar-brand,
html[lang="en"] .custom-navbar-brand {
  font-family: 'Fraunces', 'Cairo', serif !important;
  font-weight: 600 !important;
}

/* Keep the Arabic Quran text itself in its authentic Uthmani/Amiri
   fonts — only the surrounding chrome and Latin text is restyled. */
html[lang="en"] .ayat,
html[lang="en"] .ayat2,
html[lang="en"] .ayat4tafseer,
html[lang="en"] #translateindex .ayat,
html[lang="en"] #translateindex .ayat2 {
  font-family: 'KFGQPC Uthmanic Script HAFS', 'Amiri Quran', 'Amiri', serif !important;
}

html[lang="en"] a { color: var(--awl-gold-deep); }
html[lang="en"] a:hover { color: var(--awl-teal); }

/* -- Top navigation -- */
html[lang="en"] .navbar.custom-nav,
html[lang="en"] nav.navbar.bg-light {
  background: var(--awl-ink) !important;
  border-bottom: 1px solid rgba(201,168,118,0.18);
}
html[lang="en"] .navbar.custom-nav .nav-link,
html[lang="en"] .navbar.custom-nav .navbar-brand,
html[lang="en"] .custom-navbar-brand {
  color: var(--awl-gold-bright) !important;
}
html[lang="en"] .navbar.custom-nav .nav-link:hover {
  color: #fff !important;
}

/* -- Breadcrumb -- */
html[lang="en"] .custom-breadcrumb .breadcrumb {
  background: var(--awl-parchment-2);
  border: 1px solid rgba(43,33,24,0.12);
  border-radius: 10px;
}
html[lang="en"] .custom-breadcrumb .breadcrumb li a,
html[lang="en"] .custom-breadcrumb .breadcrumb li a span {
  color: var(--awl-ink-text) !important;
}
html[lang="en"] .custom-breadcrumb .breadcrumb > .active {
  color: var(--awl-ink-text-soft) !important;
}

/* -- Cards (surah lists, reciter lists, tafsir picker, etc.) -- */
html[lang="en"] .card-custom,
html[lang="en"] .block,
html[lang="en"] .books-languages {
  background: #fff;
  border: 1px solid rgba(43,33,24,0.1) !important;
  border-radius: 12px !important;
  border-bottom: 1px solid rgba(43,33,24,0.1) !important;
  overflow: hidden;
}
html[lang="en"] .card-custom .card-header {
  background: var(--awl-ink-deep) !important;
  color: var(--awl-parchment) !important;
  border-bottom: 3px solid var(--awl-gold) !important;
  font-family: 'Fraunces', serif !important;
}

/* -- Buttons -- */
html[lang="en"] .btn-primary {
  background: var(--awl-gold) !important;
  border-color: var(--awl-gold) !important;
  color: var(--awl-ink-deep) !important;
  font-weight: 600;
}
html[lang="en"] .btn-primary:hover {
  background: var(--awl-gold-bright) !important;
  border-color: var(--awl-gold-bright) !important;
}
html[lang="en"] .btn-outline-secondary,
html[lang="en"] .btn-secondary {
  border-color: rgba(43,33,24,0.25) !important;
  color: var(--awl-ink-text) !important;
}

/* -- Translation / tafsir reading view -- */
html[lang="en"] #translateindex h1 {
  color: var(--awl-ink-text) !important;
  font-family: 'Fraunces', serif !important;
}
html[lang="en"] #translateindex .englishtext {
  color: var(--awl-gold-deep) !important;
  font-family: 'Literata', serif !important;
}
html[lang="en"] #translateindex .ayat {
  background: var(--awl-parchment-2) !important;
  border: 1px solid rgba(43,33,24,0.12) !important;
  border-radius: 10px;
}
html[lang="en"] #translateindex .ayat2 {
  background: #fff !important;
  border: 1px solid rgba(43,33,24,0.1) !important;
  border-radius: 10px;
}

/* -- Footer -- */
html[lang="en"] footer {
  background: var(--awl-ink-deep) !important;
  color: var(--awl-parchment) !important;
  border-top: 1px solid rgba(201,168,118,0.18);
}
html[lang="en"] footer a,
html[lang="en"] footer a:hover {
  color: var(--awl-gold-bright) !important;
}
html[lang="en"] .powered {
  color: var(--awl-parchment) !important;
}
html[lang="en"] .dedication-line {
  color: var(--awl-gold-bright) !important;
  opacity: 0.85;
}

/* -- Floating theme controls (keep functional, restyle to match) -- */
html[lang="en"] .theme-toggle-btn,
html[lang="en"] .theme-picker-fab {
  background: var(--awl-ink-deep) !important;
  border: 1px solid var(--awl-gold) !important;
  color: var(--awl-gold) !important;
}