/*
 * Light DGA card touch for the homepage Twitter/X feed section
 * (Custom Twitter Feeds Pro plugin, `[custom-twitter-feeds]` shortcode,
 * `#ctf .ctf-item` per-tweet wrapper).
 *
 * This is intentionally NOT a full `.dga-card` rebuild -- the plugin owns
 * this markup (third-party embed, live tweet content, its own avatar/media
 * rendering) and isn't part of DGA's component library. Just borrowing
 * .dga-card's radius/shadow/background tokens so the tweet cards read as
 * consistent with the rest of the page instead of the plugin's bare
 * default box, per the client's "slightly apply .dga-card" request.
 */
#ctf .ctf-item {
  background-color: var(--background-card);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.15s ease;
}

#ctf .ctf-item:hover {
  box-shadow: var(--shadow-lg);
}

#ctf .ctf-tweet-text,
#ctf .ctf-author-name,
#ctf .ctf-author-screenname {
  font-family: var(--font-family-arabic);
}

/* Equal-height cards per row -- the carousel's own JS positions items
   assuming inline-block/absolute layout, but flex here only affects
   height distribution within each slide, not the stage's own
   left-offset positioning, so this doesn't fight the carousel's own
   slide mechanics. */
.ctf-carousel .ctf-owl-item {
  display: flex;
}
.ctf-carousel .ctf-owl-stage {
  display: flex;
  height: 100%;
}

/* The plugin's own CSS strips the border on the first/last item's outer
   edge (border-top:none on :first-child, border-bottom:0 on
   :last-of-type) -- meant for a stacked-list layout where adjacent items
   share one border. In this boxed-card carousel that's wrong, so restore
   it with the same border token used on every other card. */
#ctf .ctf-item:first-child {
  border: 1px solid var(--border-neutral-primary) !important;
}
#ctf:not(.ctf-masonry) .ctf-item:last-of-type {
  border-bottom: 1px solid var(--border-neutral-primary) !important;
}

.wp-block-heading:has(+ #ctf) {
  display: none !important;
}

/* Breathing room below the "Latest from Twitter" heading, before the feed */
#ctf {
  margin-top: 32px;
}

/* ---- Redesign: polished DGA tweet card ---- */
#ctf .ctf-item {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column;
}
/* Header: circular avatar, aligned name/handle */
#ctf .ctf-author-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
#ctf .ctf-author-avatar,
#ctf .ctf-author-avatar img {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
}
#ctf .ctf-author-name {
  font-weight: var(--font-weight-bold) !important;
  color: var(--text-default) !important;
}
#ctf .ctf-author-screenname,
#ctf .ctf-tweet-date {
  color: var(--text-secondary-paragraph) !important;
  font-size: var(--font-size-text-small) !important;
}
/* Tweet text — clamp to a uniform height so the media below lines up across cards */
#ctf .ctf-tweet-text {
  color: var(--text-primary-paragraph) !important;
  font-size: var(--font-size-text-md) !important;
  line-height: 1.6 !important;
  margin: 12px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 8em; /* 5 lines x 1.6 line-height */
}
#ctf .ctf-tweet-text a {
  color: var(--colors-primary-sa-flag-700) !important;
}
/* Media: rounded, contained */
#ctf .ctf-tweet-media {
  margin-top: 10px !important;
  border-radius: 10px;
  overflow: hidden;
}
#ctf .ctf-tweet-media img {
  border-radius: 10px !important;
  width: 100%;
}
/* Actions row pinned to the bottom, on a divider */
#ctf .ctf-tweet-actions {
  margin-top: auto;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-neutral-primary);
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-secondary-paragraph);
}
#ctf .ctf-tweet-actions a,
#ctf .ctf-action-count {
  color: var(--text-secondary-paragraph) !important;
  font-size: var(--font-size-text-small) !important;
}
#ctf .ctf-twitterlink {
  margin-inline-start: auto;
  color: var(--text-secondary-paragraph) !important;
}
#ctf .ctf-twitterlink:hover {
  color: var(--colors-primary-sa-flag-700) !important;
}

/* ---- Carousel nav: side arrows instead of bottom dots ---- */
#ctf { position: relative; }
#ctf .ctf-owl-dots { display: none !important; }
#ctf .ctf-owl-nav,
#ctf .ctf-owl-nav.disabled { margin: 0 !important; display: block !important; }
#ctf .ctf-owl-prev,
#ctf .ctf-owl-next {
  position: absolute;
  top: 46%; /* vertical middle of the card/image row */
  transform: translateY(-50%);
  z-index: 10;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.15);
  font-size: 0; /* hide the "prev"/"next" text */
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#ctf .ctf-owl-prev {
  left: -52px; /* outside the cards, in the gutter */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23166a45'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='15%2018%209%2012%2015%206'/%3E%3C/svg%3E");
}
#ctf .ctf-owl-next {
  right: -52px; /* outside the cards, in the gutter */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23166a45'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='9%2018%2015%2012%209%206'/%3E%3C/svg%3E");
}
/* On small screens there's no gutter -- keep the arrows just inside the edges */
@media (max-width: 767px) {
  #ctf .ctf-owl-prev { left: 4px; }
  #ctf .ctf-owl-next { right: 4px; }
}
#ctf .ctf-owl-prev:hover,
#ctf .ctf-owl-next:hover {
  background-color: var(--colors-primary-sa-flag-50);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.22);
}
#ctf .ctf-owl-prev.disabled,
#ctf .ctf-owl-next.disabled {
  opacity: 0.4;
  cursor: default;
}

/* Pin the DGA font on the Twitter/X feed. On Arabic pages the theme bundle's
   legacy rule (.rtl p / a { font-family:"NeoSans Arabic" !important }, 0,1,1)
   otherwise reverts the feed text to the old font. Scoped selectors below are
   >= 0,2,0 so they win over it. */
.ctf [class^="ctf-"],
.ctf [class*=" ctf-"],
.rtl .ctf,
.rtl .ctf p,
.rtl .ctf a,
.rtl .ctf [class^="ctf-"],
.rtl .ctf [class*=" ctf-"] {
  font-family: var(--font-family-arabic) !important;
}