/* ============================================================
   Al Awsat — Brand overrides (loaded last)
   Link colours, primary actions, gradients, Arabic typography
   ============================================================ */

/* ── Official logo lockups & clearspace ──────────────────── */
.nav-logo {
  flex-shrink: 0;
}

.nav-logo .logo-img,
.footer-brand-logo-link .footer-brand-logo-img {
  display: block;
  object-fit: contain;
  -o-object-fit: contain;
  /* Clearspace ≈ wordmark cap height on all four sides */
  --logo-clearspace: 0.15em;
  padding: var(--logo-clearspace);
  box-sizing: content-box;
}

.nav-logo--mark .logo-img,
.logo-img.logo-img--mark {
  width: auto !important;
  height: 56px !important;
  max-width: 60px !important;
  max-height: 56px !important;
}

.logo-img--mark {
  width: auto;
  height: 56px;
  max-width: 60px;
  max-height: 56px;
}

.logo-img--horizontal {
  max-height: 44px;
  max-width: min(180px, 38vw);
  width: auto;
  height: auto;
}

.logo-img--stacked {
  max-height: 56px;
  max-width: 52px;
  width: auto;
  height: auto;
}

.footer-brand-logo-img--wordmark {
  max-height: 36px;
  max-width: min(220px, 58vw);
  width: auto;
  height: auto;
}

.footer-brand-logo-img--horizontal {
  max-height: 44px;
  max-width: min(200px, 52vw);
  width: auto;
  height: auto;
}

/* Do not recolour supplied SVG assets */
.logo-img--mark,
.logo-img--horizontal,
.logo-img--stacked,
.footer-brand-logo-img--wordmark,
.footer-brand-logo-img--horizontal {
  filter: none !important;
}

@media (max-width: 768px) {
  .nav-logo--mark .logo-img,
  .logo-img.logo-img--mark {
    height: 50px !important;
    max-width: 54px !important;
    max-height: 50px !important;
  }
}

@media (max-width: 480px) {
  .nav-logo--mark .logo-img,
  .logo-img.logo-img--mark {
    height: 46px !important;
    max-width: 50px !important;
    max-height: 46px !important;
  }

  .footer-brand-logo-img--wordmark {
    max-height: 32px;
    max-width: min(200px, 62vw);
  }
}

/* ── Clickable text: Sapphire 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,
.pagination a:hover:not(.disabled),
.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:hover,
.home-news-card__title a:hover,
.read-also-item__title:hover,
.author-profile__articles a: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 hovers (no Sapphire on Royal Ink) ─── */
.topbar a:hover,
.topbar-lang-btn:hover,
.topbar-lang-btn.active,
.breaking-bar a:hover,
.breaking-track a:hover,
.footer-brand--brand .footer-brand-link:hover,
.footer--brand .footer-brand-link:hover {
  color: var(--swan-wing);
}

/* ── Primary actions: Royal Ink (not accent) ─────────────── */
.btn-red,
.page-btn.active,
.footer-brand-subscribe-btn,
.article-poll__submit:not(.article-poll__submit--icon) {
  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,
.article-poll__submit:not(.article-poll__submit--icon):hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--royal-ink) 22%, transparent);
}

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

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

/* ── Brand gradients ─────────────────────────────────────── */
.weather-widget-card {
  background: linear-gradient(135deg, var(--royal-ink) 0%, var(--sapphire) 100%);
}

.weather-main-card {
  background: linear-gradient(135deg, var(--royal-ink) 0%, var(--sapphire) 100%);
}

.weather-widget-pro {
  background: linear-gradient(145deg, var(--royal-ink) 0%, var(--sapphire) 55%, var(--teal) 100%);
}

/* ── Widget icon accents ───────────────────────────────────── */
.widget-header-icon--weather {
  color: var(--sapphire);
}

/* ── Legacy rgba accent tints → token ──────────────────────── */
.nav-spotlight-pill.is-active {
  border-color: color-mix(in srgb, var(--quicksand) 35%, var(--border));
}

.cal-day.today,
.article-poll__option:has(input:checked),
.home-poll__option:has(input:checked) {
  background: var(--red-soft);
}

/* ── Text selection ───────────────────────────────────────── */
::selection {
  background: var(--royal-ink);
  color: var(--swan-wing);
}

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

/* ── Arabic typography (primary script) ────────────────────── */
[dir="rtl"] .breaking-label,
[dir="rtl"] .sec-label,
[dir="rtl"] .card-cat-badge,
[dir="rtl"] .article-kicker,
[dir="rtl"] .widget-header-label,
[dir="rtl"] .hero-cat-pill,
[dir="rtl"] .sidebar-widget .widget-header,
[dir="rtl"] .event-month {
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
}

[dir="rtl"] .article-body blockquote {
  font-style: normal;
}