@font-face {
  font-family: 'Kalligraaf Arabic';
  src: url('../fonts/Kalligraaf Arabic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kalligraaf Arabic';
  src: url('../fonts/Kalligraaf Arabic Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kalligraaf Arabic';
  src: url('../fonts/Kalligraaf Arabic Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kalligraaf Arabic';
  src: url('../fonts/Kalligraaf Arabic Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kalligraaf Arabic';
  src: url('../fonts/Kalligraaf Arabic Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.blog-widget,
.blog-widget * {
  font-family: 'Kalligraaf Arabic', Arial, sans-serif !important;
} 
.boxed-short-title {
	background: #00bcff !important;
    color: #fff !important;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.3rem 1rem;
    margin:auto !important;
    letter-spacing: 0.5px;
    display: inline-block;
    border-radius: 0px;
} 
.has-short-title {
  padding-top: 53px !important;
}

@media (max-width:600px){
	.has-short-title{padding-top:0 !important;}
}
/* 1.11: cover image replacing background-image (same look as background-size: cover; center) */
.blog-widget img.bw-cover-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Short titles are <span> (were <h3>/<h5>): same defaults a browser gives a heading,
   at the lowest priority (:where) so the widget's own rules still win.
   Theme rules written for h3 no longer apply; to restore the old markup exactly use
   define('BLOG_WIDGETS_SHORT_TITLE_TAG', 'legacy'); in wp-config.php. */
:where(.blog-widget) .bw-short-title:where(span) {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  line-height: 1.2;
  margin-block: 1em;
}

/* ------------------------------------------------------------------------
   Colors & JNews dark mode
   - Light mode: widget colors are written as var(--bw-…, <light value>) and the
     variables are NOT set in light mode, so every rule keeps its exact light color.
   - Dark mode: JNews toggles body.jnews-dark-mode live (JS, no reload); only the
     variables below change. No prefers-color-scheme: the site's toggle decides.
   - Blue accents (#00bcff / #2196f3: short titles, labels, badges, numbering) and
     text on top of photos stay the same in both modes.
   ------------------------------------------------------------------------ */
body.jnews-dark-mode .blog-widget {
  --bw-text: #f1f1f1;
  --bw-text-muted: #b5b5b5;
  --bw-border: rgba(255, 255, 255, 0.12);
  --bw-card-bg: #1c1c1c;
  --bw-panel-bg: #1c1c1c;
  --bw-placeholder-bg: #2a2a2a;
  --bw-link-hover: #6cb8ff;
  --bw-overlay-bg: rgba(17, 17, 17, 0.72);
  --bw-overlay-text: #f1f1f1;
  color: var(--bw-text);
}

/* Dark mode titles and links: set by the plugin itself (not left to JNews), with
   enough weight to beat JNews' dark-mode heading/link rules. Accents are excluded. */
body.jnews-dark-mode .blog-widget :is(h1, h2, h3, h4, h5, h6):not([class*="short-title"]):not(.text-blue):not(.text-white),
body.jnews-dark-mode .blog-widget :is(h1, h2, h3, h4, h5, h6):not([class*="short-title"]):not(.text-blue):not(.text-white) a,
body.jnews-dark-mode .blog-widget .most-read-list-title,
body.jnews-dark-mode .blog-widget .most-read-featured-title a,
body.jnews-dark-mode .blog-widget .sidebar-two-blogs-list-title {
  color: var(--bw-text) !important;
}