/* Donate call-to-action (all pages): header button + floating button on small screens.
   Roll back: remove the site_cta.css <link> from template.php, the .donate-cta <li> from header.php
   and the .donate-fab <a> from template.php. */

/* header button (desktop navigation) */
.navbar-nav > li.donate-cta{ position:relative; margin-inline-start:14px; }
.navbar-nav > li.donate-cta > a{
  margin-top:19px; padding:8px 14px !important; border-radius:999px; background:#fff; color:#561d5a !important;
  font-weight:700; border-bottom:none !important; box-shadow:0 2px 10px rgba(0,0,0,.18); white-space:nowrap;
}
.navbar-nav > li.donate-cta > a .fa{ color:#e0457b; margin-inline-end:4px; }
.navbar-nav > li.donate-cta > a:hover, .navbar-nav > li.donate-cta.active-item > a{ background:#e0457b; color:#fff !important; }
.navbar-nav > li.donate-cta > a:hover .fa, .navbar-nav > li.donate-cta.active-item > a .fa{ color:#fff; }

/* floating donate button */
.donate-fab{
  position:fixed; z-index:9990; left:16px; bottom:18px; display:none; align-items:center; gap:8px;
  background:#e0457b; color:#fff !important; font-weight:700; font-size:16px; line-height:1;
  padding:13px 20px; border-radius:999px; box-shadow:0 8px 22px rgba(224,69,123,.45); text-decoration:none !important;
  font-family:'Tajawal','DroidKufi',sans-serif;
}
.donate-fab .fa{ font-size:18px; animation:donate-beat 1.8s ease-in-out infinite; }
.donate-fab:hover, .donate-fab:focus{ background:#c93468; color:#fff; }
@keyframes donate-beat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
@media (max-width:991px){ .donate-fab{ display:inline-flex; } }
@media (prefers-reduced-motion:reduce){ .donate-fab .fa{ animation:none; } }

/* The header row is already full at 1170px, so the extra header button only shows on wide screens (>=1400px,
   with slightly tighter menu spacing); below that the floating button is used instead. */
.navbar-nav > li.donate-cta{ display:none; }
@media (min-width:1400px){
  .navbar-nav > li.donate-cta{ display:block; }
  .navbar-default .navbar-nav > li > a{ padding-left:4px; padding-right:4px; }
  .navbar-default .navbar-nav > li.donate-cta > a{ padding:8px 14px !important; }
}
@media (min-width:992px) and (max-width:1399px){ .donate-fab{ display:inline-flex; } }
@media (min-width:1400px){ .donate-fab{ display:none !important; } }

/* English menu is wider: it always uses the floating button instead of the header one */
body.lang-en .navbar-nav > li.donate-cta{ display:none !important; }
@media (min-width:992px){ body.lang-en .donate-fab{ display:inline-flex !important; } }
@media (min-width:1400px){ body.lang-en .navbar-default .navbar-nav > li > a{ padding-left:7px; padding-right:7px; } }

/* News cards (department pages, news list, related news): category shown as small pills over the photo
   instead of one wide purple bar that covered the top of the image */
.blog-content .news-cats-over, .re-blog-item .news-cats-over{
  top:12px !important; right:12px !important; left:auto !important; width:auto; max-width:calc(100% - 24px);
  background:none !important; font-size:0; line-height:0; z-index:3;
}
body.lang-en .blog-content .news-cats-over, body.lang-en .re-blog-item .news-cats-over{ right:auto !important; left:12px !important; }
.blog-content .news-cats-over a, .re-blog-item .news-cats-over a{
  display:inline-block; width:auto; background:rgba(86,29,90,.92); color:#fff !important; padding:4px 12px; border-radius:999px;
  font-size:13px; line-height:1.5; margin:0 0 4px 4px; font-weight:500;
}
.blog-content .news-cats-over a:hover, .re-blog-item .news-cats-over a:hover{ background:#5daf98; }