/* Theme tokens */
:root {
  --brand: #f37321;
  --brand-600: #e86812;
  --brand-700: #cf5d0f;
  --ink: #151515;
  --muted: #6c757d;
  --bg-subtle: #fff7f1;
}

html, body {
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;
  color: var(--ink);
}

.text-primary, .btn-primary, .badge.text-bg-primary,
.link-primary, .page-link.active {
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand);
}

.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Theme toggle button */
.theme-toggle-btn { border-color: rgba(0,0,0,.2); color: #555; }
.theme-dark .theme-toggle-btn { border-color: rgba(255,255,255,.35); color: #eee; }

/* Navbar */
.navbar-brand { letter-spacing: -0.3px; }
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -6px;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Hero */
.hero-feature { min-height: 320px; background: #000; }
.hero-feature .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%);
  display: flex; flex-direction: column; justify-content: end;
}
.object-fit-cover { object-fit: cover; }

/* Carousel indicators themed */
#heroCarousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: rgba(255,255,255,.6);
}
#heroCarousel .carousel-indicators .active {
  background-color: var(--brand);
}

/* Section title */
.section-title h2 { color: var(--ink); }
.section-title .subtitle { color: var(--muted); }

/* Cards */
.card.news-card .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.card.news-card { transition: transform .15s ease, box-shadow .15s ease; }
.card.news-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08) !important; }

/* Most Read (center) counters */
.most-read-center .list-group-numbered > li::marker { content: none; }
.most-read-center .list-group-numbered > li {
  counter-increment: section;
  position: relative;
  padding-inline-start: 3rem;
}
.most-read-center .list-group-numbered > li::before {
  content: counter(section);
  position: absolute;
  inset-inline-start: .75rem; inset-block-start: 50%; transform: translateY(-50%);
  width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center;
  background: var(--brand);
  color: #fff; border-radius: .5rem; font-weight: 700; font-size: .9rem;
}
.bg-brand-subtle { background: var(--bg-subtle); }

/* Featured Blogs */
.blog-card .avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px;
}
.blog-card { transition: box-shadow .15s ease, transform .15s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem rgba(0,0,0,.08) !important; }

/* Video Section (Al Jazeera-like) */
.video-card .ratio { background: #000; }
.video-card .video-overlay {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  /*background: linear-gradient(180deg, transparent, rgba(0,0,0,.6) 48%, rgba(0,0,0,.4));*/
  color: #fff;
}
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  border: 0; border-radius: 50%; background: rgba(243,115,33,.9);
  box-shadow: 0 6px 20px rgba(243,115,33,.35);
}
.play-btn::before {
  content: ""; display: block; width: 0; height: 0; margin: auto;
  border-inline-start: 16px solid #fff; border-block: 10px solid transparent;
  transform: translateX(2px);
}
.play-btn:hover, .play-btn:focus { background: var(--brand-600); outline: none; }

.badge-duration {
  position: absolute; 
  /*inset-inline-start: .75rem; inset-block-start: .75rem;*/
  background: rgba(0,0,0,.55); color: #fff; border-radius: .5rem;
  padding: .25rem .5rem; font-weight: 700;
}
.badge-duration-sm { 
  /*inset-inline-start: .5rem; inset-block-start: .5rem;*/ padding: .2rem .45rem; font-size: .7rem; }

.video-list .list-group-item { padding: .75rem 1rem; }
.video-list .thumb { width: 140px; }
.video-list .title { line-height: 1.3; }

/* Focus styles */
:focus-visible { outline: 3px solid rgba(243,115,33,.45); outline-offset: 2px; }

/* Utilities */
.shadow-sm-sm { box-shadow: 0 .25rem .5rem rgba(0,0,0,.04) !important; }

/* Translations (ترجمات) */
.translations-section .translation-card { transition: transform .15s ease, box-shadow .15s ease; }
.translations-section .translation-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.08) !important; }
.translations-section .ratio { background: #000; }
.translations-section .chip.chip-source {
  position: absolute; inset-inline-start: .75rem; inset-block-start: .75rem;
  background: #fff; color: var(--ink);
  border: 1px solid rgba(243,115,33,.35);
  padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  width: auto !important; height: auto !important;
}
.translations-section .card-title a { text-decoration: none; }
.translations-section .card-title a:hover { color: var(--brand); }

/* Video section theming */
.theme-dark .video-section { background-color: #111; }
.theme-dark .video-section .section-title h2 { color: #fff; }
.video-section .section-title .btn { color: var(--brand); border-color: var(--brand); }
.video-section .section-title .btn:hover, .video-section .section-title .btn:focus {
  background-color: var(--brand);
  color: #fff;
}
.theme-dark .video-section .video-card { background-color: #000; }
.theme-dark .video-section .video-list { background: transparent; }
.theme-dark .video-section .video-list .list-group-item {
  background: transparent;
  color: #ddd;
  border-color: rgba(255,255,255,.12);
}
.theme-dark .video-section .video-list .title { color: #fff; }
.theme-dark .video-section .video-list .meta { color: #bbb; }

/* Footer theming */
.theme-dark footer {
  background-color: #111 !important;
  color: #ddd;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.theme-dark footer h6, .theme-dark footer .navbar-brand { color: #fff !important; }
.theme-dark footer .text-muted { color: #bbb !important; }
.theme-dark footer a, .theme-dark footer .link-body-emphasis { color: #ddd; }
.theme-dark footer a:hover { color: var(--brand); }
.theme-dark footer .border-top { border-top-color: rgba(255,255,255,.12) !important; }

/* Global dark theme overrides */
.theme-dark body { background-color: #0f0f0f; color: #e6e6e6; }
.theme-dark .topbar { background-color: #0f0f0f; border-bottom-color: rgba(255,255,255,.12) !important; }
.theme-dark .navbar { background-color: #111 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
.theme-dark .navbar .navbar-brand { color: #fff !important; }
.theme-dark .navbar .nav-link { color: #ddd; }
.theme-dark .navbar .nav-link:hover, .theme-dark .navbar .nav-link.active { color: #fff; }
.theme-dark .form-control { background-color: #1c1c1c; border-color: #333; color: #eee; }
.theme-dark .form-control::placeholder { color: #aaa; }
.theme-dark .card { background-color: #161616; color: #ddd; }
.theme-dark .list-group-item { background-color: #161616; color: #ddd; }
.theme-dark .bg-white { background-color: #111 !important; }
.theme-dark .border-top { border-top-color: rgba(255,255,255,.12) !important; }
.theme-dark .border-bottom { border-bottom-color: rgba(255,255,255,.12) !important; }
.theme-dark .section-title h2 { color: #fff; }
.theme-dark .text-muted { color: #bbb !important; }
.theme-dark .link-body-emphasis { color: #eee; }
.theme-dark .bg-brand-subtle { background-color: #1b1510 !important; }