/*
 * Aasha visual compatibility layer for Custom Twitter Feeds Pro.
 * Scope: front-end feed only, active when body has .ctf-aasha-compatible.
 * It uses theme variables when available and falls back gracefully.
 */
:root {
  --ctf-aasha-accent: var(--aasha-primary-color, var(--e-global-color-primary, #f36f2b));
  --ctf-aasha-accent-2: var(--aasha-secondary-color, var(--e-global-color-secondary, #0f766e));
  --ctf-aasha-text: var(--aasha-heading-color, var(--e-global-color-text, #1f2933));
  --ctf-aasha-muted: #6b7280;
  --ctf-aasha-border: rgba(31, 41, 51, 0.10);
  --ctf-aasha-surface: var(--aasha-card-background, #ffffff);
  --ctf-aasha-soft: color-mix(in srgb, var(--ctf-aasha-accent) 9%, #ffffff);
}

.ctf-aasha-compatible #ctf {
  color: var(--ctf-aasha-text);
  font-family: inherit;
  line-height: 1.65;
}

.ctf-aasha-compatible #ctf.ctf-styles,
.ctf-aasha-compatible #ctf .ctf-tweet-items {
  border-radius: 24px;
}

.ctf-aasha-compatible #ctf .ctf-header {
  padding: 22px 24px;
  margin-bottom: 18px;
  border: 1px solid var(--ctf-aasha-border);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--ctf-aasha-soft), #fff 58%);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.ctf-aasha-compatible #ctf .ctf-header > a {
  gap: 14px;
  text-decoration: none;
}

.ctf-aasha-compatible #ctf .ctf-header-img,
.ctf-aasha-compatible #ctf .ctf-author-avatar,
.ctf-aasha-compatible #ctf .ctf-author-avatar img,
.ctf-aasha-compatible #ctf .ctf-header-img img {
  width: 54px;
  height: 54px;
  border-radius: 999px !important;
}

.ctf-aasha-compatible #ctf .ctf-header-img img,
.ctf-aasha-compatible #ctf .ctf-author-avatar img {
  border: 3px solid #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  object-fit: cover;
}

.ctf-aasha-compatible #ctf .ctf-header-user,
.ctf-aasha-compatible #ctf .ctf-author-name,
.ctf-aasha-compatible #ctf .ctf-author-screenname {
  font-family: inherit;
}

.ctf-aasha-compatible #ctf .ctf-item {
  margin: 0 0 18px;
  padding: 22px;
  border: 1px solid var(--ctf-aasha-border) !important;
  border-radius: 22px;
  background: var(--ctf-aasha-surface);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ctf-aasha-compatible #ctf .ctf-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ctf-aasha-accent) 36%, transparent) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}

.ctf-aasha-compatible #ctf .ctf-author-box {
  margin-bottom: 12px;
}

.ctf-aasha-compatible #ctf .ctf-author-name,
.ctf-aasha-compatible #ctf .ctf-header-user,
.ctf-aasha-compatible #ctf .ctf-tweet-text a,
.ctf-aasha-compatible #ctf a {
  color: var(--ctf-aasha-accent);
}

.ctf-aasha-compatible #ctf .ctf-author-name,
.ctf-aasha-compatible #ctf .ctf-header-user {
  font-weight: 700;
}

.ctf-aasha-compatible #ctf .ctf-author-screenname,
.ctf-aasha-compatible #ctf .ctf-tweet-meta,
.ctf-aasha-compatible #ctf .ctf-tweet-date,
.ctf-aasha-compatible #ctf .ctf-context,
.ctf-aasha-compatible #ctf .ctf-screename-sep {
  color: var(--ctf-aasha-muted);
}

.ctf-aasha-compatible #ctf .ctf-tweet-content {
  font-size: clamp(15px, 1vw, 17px);
}

.ctf-aasha-compatible #ctf .ctf-tweet-content p,
.ctf-aasha-compatible #ctf .ctf-tweet-text {
  margin-bottom: 12px;
}

.ctf-aasha-compatible #ctf .ctf-tweet-text a:hover,
.ctf-aasha-compatible #ctf a:hover {
  color: var(--ctf-aasha-accent-2);
  text-decoration: none;
}

.ctf-aasha-compatible #ctf .ctf-tweet-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ctf-aasha-border);
}

.ctf-aasha-compatible #ctf .ctf-tweet-actions a,
.ctf-aasha-compatible #ctf .ctf-twitterlink,
.ctf-aasha-compatible #ctf .ctf-load-more,
.ctf-aasha-compatible #ctf .ctf-more,
.ctf-aasha-compatible #ctf .ctf-btn-show-threads {
  border-radius: 999px;
}

.ctf-aasha-compatible #ctf .ctf-tweet-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--ctf-aasha-text);
  text-decoration: none;
}

.ctf-aasha-compatible #ctf .ctf-tweet-actions a:hover {
  background: var(--ctf-aasha-accent);
  color: #fff;
}

.ctf-aasha-compatible #ctf .ctf-twitterlink,
.ctf-aasha-compatible #ctf .ctf-load-more,
.ctf-aasha-compatible #ctf .ctf-more,
.ctf-aasha-compatible #ctf .ctf-btn-show-threads {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0 !important;
  background: var(--ctf-aasha-accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ctf-aasha-accent) 28%, transparent);
}

.ctf-aasha-compatible #ctf .ctf-twitterlink:hover,
.ctf-aasha-compatible #ctf .ctf-load-more:hover,
.ctf-aasha-compatible #ctf .ctf-more:hover,
.ctf-aasha-compatible #ctf .ctf-btn-show-threads:hover {
  background: var(--ctf-aasha-accent-2);
  color: #fff !important;
  transform: translateY(-1px);
}

.ctf-aasha-compatible #ctf .ctf-media-link,
.ctf-aasha-compatible #ctf .ctf-tweet-media,
.ctf-aasha-compatible #ctf .ctf-tweet-media img,
.ctf-aasha-compatible #ctf .ctf-quoted-tweet,
.ctf-aasha-compatible #ctf .ctf-twitter-card {
  border-radius: 18px !important;
  overflow: hidden;
}

.ctf-aasha-compatible #ctf .ctf-twitter-card,
.ctf-aasha-compatible #ctf .ctf-quoted-tweet {
  border: 1px solid var(--ctf-aasha-border) !important;
  background: #fff;
}

.ctf-aasha-compatible #ctf.ctf-masonry .ctf-item,
.ctf-aasha-compatible #ctf.ctf-carousel .ctf-item {
  margin-bottom: 20px !important;
}

.ctf-aasha-compatible #ctf .ctf-carousel-arrow,
.ctf-aasha-compatible #ctf .ctf-carousel-prev,
.ctf-aasha-compatible #ctf .ctf-carousel-next {
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --ctf-aasha-soft: #fff7f1;
  }

  .ctf-aasha-compatible #ctf .ctf-item:hover {
    border-color: rgba(243, 111, 43, 0.35) !important;
  }

  .ctf-aasha-compatible #ctf .ctf-twitterlink,
  .ctf-aasha-compatible #ctf .ctf-load-more,
  .ctf-aasha-compatible #ctf .ctf-more,
  .ctf-aasha-compatible #ctf .ctf-btn-show-threads {
    box-shadow: 0 10px 26px rgba(243, 111, 43, 0.25);
  }
}

@media (max-width: 767px) {
  .ctf-aasha-compatible #ctf .ctf-header,
  .ctf-aasha-compatible #ctf .ctf-item {
    padding: 18px;
    border-radius: 18px;
  }

  .ctf-aasha-compatible #ctf .ctf-tweet-actions {
    flex-wrap: wrap;
  }

  .ctf-aasha-compatible #ctf .ctf-twitterlink {
    width: 100%;
  }
}

/*
 * Visibility fix: Aasha/Elementor layouts can apply clipping rules to cards,
 * text blocks and media wrappers. Keep the styled cards, but never clamp tweets
 * or hide attached media.
 */
.ctf-aasha-compatible #ctf,
.ctf-aasha-compatible #ctf .ctf-tweet-items,
.ctf-aasha-compatible #ctf .ctf-item,
.ctf-aasha-compatible #ctf .ctf-tweet-content,
.ctf-aasha-compatible #ctf .ctf-tweet-text,
.ctf-aasha-compatible #ctf p.ctf-tweet-text,
.ctf-aasha-compatible #ctf .ctf-tweet-media {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  display: block;
}

.ctf-aasha-compatible #ctf .ctf-tweet-text,
.ctf-aasha-compatible #ctf p.ctf-tweet-text {
  white-space: normal !important;
  text-overflow: clip !important;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media a,
.ctf-aasha-compatible #ctf .ctf-media-link,
.ctf-aasha-compatible #ctf .ctf-lightbox-link {
  display: block !important;
  height: auto !important;
  min-height: 1px;
  max-height: none !important;
  max-width: 100% !important;
  overflow: hidden !important;
  line-height: 0;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media img,
.ctf-aasha-compatible #ctf .ctf-tweet-media video,
.ctf-aasha-compatible #ctf .ctf-media-link > img,
.ctf-aasha-compatible #ctf .ctf-image > img {
  display: block !important;
  width: auto;
  max-width: 100% !important;
  height: auto !important;
  min-height: 1px;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain;
}

.ctf-aasha-compatible [data-ctfimagecols="2"] .ctf-tweet-media,
.ctf-aasha-compatible [data-ctfimagecols="3"] .ctf-tweet-media {
  display: grid !important;
  gap: 8px;
  overflow: visible !important;
}

.ctf-aasha-compatible [data-ctfimagecols="2"] .ctf-tweet-media img,
.ctf-aasha-compatible [data-ctfimagecols="3"] .ctf-tweet-media img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

@media (max-width: 767px) {
  .ctf-aasha-compatible #ctf .ctf-tweet-content,
  .ctf-aasha-compatible #ctf .ctf-tweet-actions {
    margin-left: 0 !important;
  }

  .ctf-aasha-compatible #ctf .ctf-tweet-media,
  .ctf-aasha-compatible [data-ctfimagecols="2"] .ctf-tweet-media,
  .ctf-aasha-compatible [data-ctfimagecols="3"] .ctf-tweet-media {
    display: block !important;
  }
}

/*
 * Aasha long-text and video fix.
 * Keep all plugin media visible and remove only visual clipping imposed by the theme.
 */
.ctf-aasha-compatible #ctf .ctf_more,
.ctf-aasha-compatible #ctf a.ctf_more {
  display: none !important;
}

.ctf-aasha-compatible #ctf .ctf_remaining,
.ctf-aasha-compatible #ctf span.ctf_remaining {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media,
.ctf-aasha-compatible #ctf .ctf-media-wrap,
.ctf-aasha-compatible #ctf .ctf-media-link,
.ctf-aasha-compatible #ctf .ctf-lightbox-link,
.ctf-aasha-compatible #ctf .ctf-quoted-tweet,
.ctf-aasha-compatible #ctf .ctf-twitter-card,
.ctf-aasha-compatible #ctf .ctf-video,
.ctf-aasha-compatible #ctf .ctf-video-container,
.ctf-aasha-compatible #ctf .ctf-iframe-wrap,
.ctf-aasha-compatible #ctf .ctf-broadcast {
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
}

.ctf-aasha-compatible #ctf video,
.ctf-aasha-compatible #ctf iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  min-height: 260px;
  border: 0;
}

.ctf-aasha-compatible #ctf .ctf-tweet-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * Compact media cards and accessible video modal.
 * Videos stay lightweight in the feed and open at full size on demand.
 */
.ctf-aasha-compatible #ctf .ctf-item {
  padding: 18px 20px;
}

.ctf-aasha-compatible #ctf .ctf-author-box {
  margin-bottom: 8px;
}

.ctf-aasha-compatible #ctf .ctf-tweet-content {
  font-size: clamp(14px, .92vw, 16px);
  line-height: 1.52;
}

.ctf-aasha-compatible #ctf .ctf-tweet-content p,
.ctf-aasha-compatible #ctf .ctf-tweet-text {
  margin-bottom: 8px;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media.ctf-aasha-has-video {
  display: block !important;
  margin-top: 10px;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger {
  position: relative;
  display: block !important;
  width: 100%;
  max-width: 420px !important;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  max-height: 236px !important;
  padding: 0;
  border: 0;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #0b0d12;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger video,
.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 236px !important;
  object-fit: cover !important;
  pointer-events: none;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.36));
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding-left: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #111827;
  font-size: 22px;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .18s ease, background .18s ease;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger:hover::after,
.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger:focus-visible::after {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger:focus-visible {
  outline: 3px solid var(--ctf-aasha-accent);
  outline-offset: 3px;
}

.ctf-aasha-video-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ctf-aasha-video-modal.is-open {
  display: flex;
}

.ctf-aasha-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, .82);
  backdrop-filter: blur(7px);
}

.ctf-aasha-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 94vw);
  max-height: 90vh;
  border-radius: 18px;
  overflow: hidden;
  background: #05070b;
  box-shadow: 0 28px 90px rgba(0,0,0,.5);
}

.ctf-aasha-video-modal__video {
  display: block;
  width: 100%;
  max-height: 90vh;
  background: #000;
  object-fit: contain;
}

.ctf-aasha-video-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ctf-aasha-video-modal__close:hover,
.ctf-aasha-video-modal__close:focus-visible {
  background: #fff;
  color: #111827;
}

body.ctf-aasha-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .ctf-aasha-compatible #ctf .ctf-item {
    padding: 15px;
  }

  .ctf-aasha-compatible #ctf .ctf-aasha-video-trigger {
    max-width: 100% !important;
    max-height: 210px !important;
  }

  .ctf-aasha-video-modal {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctf-aasha-compatible #ctf .ctf-aasha-video-trigger::after {
    transition: none;
  }
}

/*
 * Card containment fix (Aasha v5).
 * Some legacy CTF media wrappers use floats/positioning, so the tweet card did
 * not always include their height. Create a new block formatting context and
 * keep media inside the same rounded card.
 */
.ctf-aasha-compatible #ctf .ctf-item {
  display: flow-root !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.ctf-aasha-compatible #ctf .ctf-item::after,
.ctf-aasha-compatible #ctf .ctf-tweet-content::after,
.ctf-aasha-compatible #ctf .ctf-tweet-media::after {
  content: "";
  display: table;
  clear: both;
}

.ctf-aasha-compatible #ctf .ctf-tweet-content,
.ctf-aasha-compatible #ctf .ctf-tweet-media,
.ctf-aasha-compatible #ctf .ctf-media-wrap,
.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger {
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.ctf-aasha-compatible #ctf .ctf-tweet-media.ctf-aasha-has-video {
  width: 100% !important;
  margin: 12px 0 0 !important;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 16 / 9;
  max-height: none !important;
}

.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger video,
.ctf-aasha-compatible #ctf .ctf-aasha-video-trigger img {
  max-height: none !important;
}

.ctf-aasha-compatible #ctf .ctf-tweet-actions {
  clear: both !important;
}

@media (max-width: 767px) {
  .ctf-aasha-compatible #ctf .ctf-aasha-video-trigger {
    max-height: none !important;
  }
}