/* ============================================================
   Al Awsat — Colour system implementation
   Royal Ink · Swan Wing · Quicksand (accent) · Sapphire (links)
   ============================================================ */

/* ── Global scrollbar (subtle accent) ────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--accent-muted);
}

/* ── Royal Ink — structural / brand chrome ───────────────── */
.topbar,
.breaking-bar-inner,
.footer--brand:not(.footer--custom-bg) {
  background: var(--royal-ink);
  color: var(--swan-wing);
}

.sec-label-bar,
.widget-header::before,
.sidebar-widget .widget-header::before {
  background: var(--quicksand);
}

.nav-quick-link.is-active {
  color: var(--royal-ink);
  border-bottom-color: var(--royal-ink);
}

.cat-tab.active {
  color: var(--royal-ink);
  border-bottom-color: var(--royal-ink);
}

.reading-progress-bar {
  background: var(--quicksand);
}

/* ── Sapphire — clickable on light surfaces ──────────────── */
.card-title a:hover,
.card-ranked:hover .card-ranked-title,
.card-opinion-title:hover,
.widget-news-item:hover .widget-news-title,
.trending-card:hover .trending-title,
.author-article-list__title:hover,
.team-roster-card__link:hover .team-roster-card__name,
.sec-label-more:hover,
.breadcrumb a:hover,
.sidebar-cat-link:hover,
.article-category-link:hover,
.cat-subnav__link:hover,
.pagination a:hover:not(.disabled):not(.active),
.footer-brand-link:hover,
.nav-quick-link:hover,
.nav-spotlight-pill:hover,
.article-breaking-stack__link:hover,
.event-detail-back:hover,
.event-detail-article-link:hover,
.event-modal-articles a:hover,
.home-featured-side-title a:hover,
.home-news-card__title a:hover,
.read-also-item__title:hover,
.drawer-nav-item:hover,
.mega-item:hover,
.nav-link:hover {
  color: var(--sapphire);
}

.article-body a {
  color: var(--sapphire);
  text-decoration-color: color-mix(in srgb, var(--sapphire) 35%, transparent);
}

.article-body a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--sapphire);
}

/* Dark bars: Swan Wing — never Sapphire on Royal Ink ─────── */
.topbar a,
.topbar-lang-btn,
.topbar-social a,
.topbar-weather,
.breaking-bar a:not(.breaking-label),
.breaking-track a,
.footer--brand .footer-brand-link,
.footer--brand .footer-brand__desc {
  color: var(--swan-wing);
}

.breaking-label,
a.breaking-label--link {
  background: var(--quicksand);
  color: var(--swan-wing);
}

.breaking-label:hover,
a.breaking-label--link:hover,
a.breaking-label--link:focus-visible {
  background: var(--accent-dark);
  color: var(--swan-wing);
  opacity: 1;
}

.topbar a:hover,
.topbar-lang-btn:hover,
.topbar-lang-btn.active,
.topbar-social a:hover,
.topbar-weather:hover,
.breaking-bar a:not(.breaking-label):hover,
.breaking-track a:hover,
.footer--brand .footer-brand-link:hover {
  color: var(--swan-wing);
  opacity: 0.92;
}

.topbar-lang-btn.active {
  background: color-mix(in srgb, var(--swan-wing) 18%, transparent);
  color: var(--swan-wing);
}

/* ── Quicksand accent (~3%) ──────────────────────────────── */
.card-opinion-badge,
.card-breaking-badge,
.article-kicker,
.hero-cat-pill {
  border-color: var(--quicksand);
}

.card-opinion-badge,
.card-breaking-badge {
  color: var(--quicksand);
}

.card-cat,
.card-cat-badge,
.news-card-category,
.article-category-link {
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.card-cat {
  text-transform: none;
  letter-spacing: normal;
}

[dir="rtl"] .card-cat,
[dir="rtl"] .card-cat-badge,
[dir="rtl"] .news-card-category {
  text-transform: none;
  letter-spacing: normal;
}

.news-card-category[style],
.card-cat-badge[style] {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
}

/* ── Primary actions: Royal Ink ──────────────────────────── */
.btn-red,
.page-btn.active,
.footer-brand-subscribe-btn,
.article-poll__submit:not(.article-poll__submit--icon),
.back-to-top {
  background: var(--royal-ink);
  border-color: var(--royal-ink);
  color: var(--swan-wing);
}

.btn-red:hover,
.page-btn.active:hover,
.footer-brand-subscribe-btn:hover,
.back-to-top:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
}

.btn-outline:hover {
  border-color: var(--sapphire);
  color: var(--sapphire);
}

.page-btn:hover:not(.active):not(.disabled) {
  border-color: var(--sapphire);
  color: var(--sapphire);
}

/* ── Widget icons ────────────────────────────────────────── */
.widget-header-icon--fire,
.widget-header-icon--exchange,
.widget-header-icon--events {
  color: var(--royal-ink);
}

.widget-header-icon--weather {
  color: var(--sapphire);
}

.exchange-chg-up {
  color: var(--status-success);
}

.exchange-chg-down {
  color: var(--text-muted);
}

.city-card-temp {
  color: var(--royal-ink);
}

/* ── Horizontal scroll ───────────────────────────────────── */
.knews-scroll {
  scrollbar-color: var(--accent-muted) transparent;
}

.knews-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-muted);
}

.knews-scroll:focus-visible {
  outline-color: var(--sapphire);
}

/* ── Gradients → brand palette ───────────────────────────── */
.weather-widget-card,
.weather-main-card,
.weather-widget-pro {
  background: linear-gradient(135deg, var(--royal-ink) 0%, var(--navy-mid) 55%, var(--sapphire) 100%);
}

::selection {
  background: var(--royal-ink);
  color: var(--swan-wing);
}

::-moz-selection {
  background: var(--royal-ink);
  color: var(--swan-wing);
}

.drawer-close:hover,
.drawer-lang-btn:hover {
  background: var(--royal-ink);
  border-color: var(--royal-ink);
  color: var(--swan-wing);
}

.mega-item:hover {
  background: color-mix(in srgb, var(--sapphire) 8%, var(--bg-card));
  color: var(--sapphire);
}

.drawer-search-input:focus,
.nav-search-dialog-input:focus {
  border-color: var(--sapphire);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sapphire) 18%, transparent);
}

.card-opinion-name,
.author-profile__role {
  color: var(--quicksand);
}

.hero-arrow:hover {
  background: var(--royal-ink);
  border-color: var(--royal-ink);
}