@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Amiri:wght@400;700&display=swap');

body {
  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
    This allows bigger images of media on listings for large screens
    It would be great to adapt to other sizes, but this requires a good refaftoring
     */

  @media screen and (min-width: 2200px) {
      --default-item-width: 342px !important;
      --default-max-item-width: 342px !important;
      --default-item-margin-right-width: 17px !important;
      --default-item-margin-bottom-width: 27px !important;
  }
}

/* ============================================================
   islamicmedia.tv — Hybrid theme (Serene base · Heritage soul)
   Runtime override layer. Loaded after _commons.css.
   ============================================================ */
:root {
  /* Brand palette */
  --im-emerald: #1F5C46;
  --im-emerald-deep: #16352a;
  --im-gold: #B08D57;
  --im-gold-soft: #C8A876;

  /* Retheme MediaCMS accent system: deep emerald instead of bright green */
  --theme-color: var(--im-emerald);
  --brand-color: var(--im-emerald);
  --default-theme-color: var(--im-emerald);
  --default-brand-color: var(--im-emerald);
}

/* Logo: refined serif + gold accent on the ".tv" / brand span */
.logo,
.logo a {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.2px;
}
.logo span {
  color: var(--im-gold) !important;
}

/* Headings & titles: elegant serif for an editorial, premium feel */
.media-title-banner h1,
.media-title-banner .media-title,
.page-title,
.item-title,
h1, h2, h3,
.profile-page-header h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.3px;
}

/* Arabic-aware: anything tagged Arabic uses a proper naskh face */
[lang="ar"], .ar, .arabic {
  font-family: 'Amiri', 'Times New Roman', serif !important;
}

/* Primary buttons: gentle emerald gradient + softer rounding */
.user-action-form-inner button[type=submit],
.media-author-actions > a,
.media-author-actions > button {
  background-image: linear-gradient(135deg, var(--im-emerald), var(--im-emerald-deep)) !important;
}

/* Brand mark hover warmth */
a:hover .menu-item-icon { color: var(--im-gold) !important; }