/* ═══════════════════════════════════════════════════════════
   iToldu Custom Theme — Vibrant Refresh
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (overrides socialblue defaults) ── */
:root {
  --itoldu-primary:   #7c3aed;
  --itoldu-primary-dark: #5b21b6;
  --itoldu-primary-light: #a78bfa;
  --itoldu-accent:    #f59e0b;
  --itoldu-accent2:   #ec4899;
  --itoldu-grad-a:    #7c3aed;
  --itoldu-grad-b:    #ec4899;
  --itoldu-grad-c:    #f59e0b;
  --itoldu-surface:   #faf5ff;
  --itoldu-card-glow: rgba(124, 58, 237, 0.12);
  --itoldu-radius:    16px;
  --itoldu-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Hero image clickable overlay — edit button stays on top ── */
.cover { position: relative; z-index: 1050 !important; }
.hero-action-button { position: relative; z-index: 2; }
.cover-wrap { position: relative; }

/* ── Hero footer CTA dropdowns — escape the secondary nav stacking context ── */
.hero-footer__cta {
  position: relative;
  z-index: 9999 !important;
  overflow: visible !important;
}
.hero-footer__cta .btn-group,
.hero-footer__cta .open {
  overflow: visible !important;
}
.hero-footer__cta .dropdown-menu {
  z-index: 9999 !important;
  position: absolute !important;
}

/* ── Hide breadcrumbs ──────────────────────────────────────── */
.breadcrumb { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR — deep purple gradient
   ═══════════════════════════════════════════════════════════ */
.navbar,
.navbar-default,
nav.navbar {
  background: linear-gradient(135deg, #1e0a3c 0%, #3b0764 50%, #1e0a3c 100%) !important;
  border-bottom: 2px solid rgba(167, 139, 250, 0.25);
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.3) !important;
}

.dropdown-menu {
  z-index: 1040 !important;
}

.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  color: #e9d5ff !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color var(--itoldu-transition), text-shadow var(--itoldu-transition);
}

.navbar .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.active > a {
  color: #fde68a !important;
  text-shadow: 0 0 12px rgba(253, 230, 138, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   CARDS — lift + glow on hover
   ═══════════════════════════════════════════════════════════ */
.card,
.teaser,
.teaser-topic,
.teaser-event {
  border-radius: var(--itoldu-radius) !important;
  transition: box-shadow var(--itoldu-transition);
  border: 1px solid rgba(124, 58, 237, 0.08) !important;
  overflow: hidden;
  background: #fff;
}

.card:hover,
.teaser:hover,
.teaser-topic:hover,
.teaser-event:hover {
  box-shadow: 0 20px 60px var(--itoldu-card-glow),
              0 6px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}

/* Card image zoom on hover */
.teaser__image .card__image img,
.teaser .teaser__image img,
.card .cover-img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.teaser:hover .teaser__image img,
.card:hover .card__image img {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — vibrant gradient
   ═══════════════════════════════════════════════════════════ */
.btn-primary,
.btn-accent,
a.btn-primary,
button.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 50px !important;
  padding: 0.6rem 1.6rem !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
  transition: transform var(--itoldu-transition),
              box-shadow var(--itoldu-transition),
              filter var(--itoldu-transition);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.55) !important;
  filter: brightness(1.08);
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

/* Secondary / raised buttons */
.btn-raised,
.btn-default {
  border-radius: 50px !important;
  transition: transform var(--itoldu-transition), box-shadow var(--itoldu-transition);
}
.btn-raised:hover,
.btn-default:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ── Invite button in hero footer — teal gradient matching Joined style ── */
.hero-footer__cta .btn-group .btn-default.dropdown-toggle {
  background: linear-gradient(135deg, #0ea5e9 0%, #0891b2 50%, #0e7490 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  border-radius: 50px !important;
  padding: 0.6rem 1.6rem !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.45) !important;
  transition: transform var(--itoldu-transition),
              box-shadow var(--itoldu-transition),
              filter var(--itoldu-transition);
  position: relative;
  overflow: hidden;
}
.hero-footer__cta .btn-group .btn-default.dropdown-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  border-radius: 50px;
}
.hero-footer__cta .btn-group .btn-default.dropdown-toggle:hover::after {
  transform: translateX(100%);
}
.hero-footer__cta .btn-group .btn-default.dropdown-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.55) !important;
  filter: brightness(1.08);
}

/* ═══════════════════════════════════════════════════════════
   LINKS — purple with underline grow animation
   ═══════════════════════════════════════════════════════════ */
a:not(.btn):not(.badge):not(.navbar-brand):not([class*="navbar"]) {
  color: var(--itoldu-primary);
  text-decoration: none;
  background-image: linear-gradient(var(--itoldu-primary-light), var(--itoldu-primary-light));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--itoldu-transition), color var(--itoldu-transition);
}

a:not(.btn):not(.badge):not(.navbar-brand):not([class*="navbar"]):hover {
  background-size: 100% 1px;
  color: var(--itoldu-primary-dark);
}

/* Keep teaser title links clean */
.teaser__title a,
.card__title a {
  background-image: none;
  color: #1a1a2e;
  font-weight: 700;
}
.teaser__title a:hover,
.card__title a:hover {
  color: var(--itoldu-primary);
  background-image: none;
}

/* ═══════════════════════════════════════════════════════════
   HERO — glass overlay + animated gradient border
   ═══════════════════════════════════════════════════════════ */
.cover.cover-img {
  position: relative;
  border-radius: 0;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.25);
}

/* Clip the background/overlay inside cover without clipping dropdowns */
.cover.cover-img > *:not(.dropdown):not(.cover-wrap) {
  border-radius: inherit;
  overflow: hidden;
}

.cover.cover-img::before {
  display: none;
}

.hero__bgimage-overlay {
  display: none;
}

.page-title {
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

.page-title h1 {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: #fff;
  animation: hero-title-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes hero-title-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER STRIPE (non-hero pages)
   ═══════════════════════════════════════════════════════════ */
.page-hero--small,
.page-title-banner {
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b));
  padding: 2rem 1rem;
  border-radius: 0 0 var(--itoldu-radius) var(--itoldu-radius);
}

/* ═══════════════════════════════════════════════════════════
   DROPCAP on topic body
   ═══════════════════════════════════════════════════════════ */
.page-node-type-topic .body-text > p:first-child::first-letter,
.page-node-type-topic .body-text > div:first-child::first-letter {
  float: left;
  font-size: 3.8em;
  font-weight: 900;
  line-height: 0.78;
  margin: 0.06em 0.1em 0 0;
  color: var(--itoldu-primary);
  text-shadow: 2px 2px 0 rgba(124, 58, 237, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   VIDEO PLAYER
   ═══════════════════════════════════════════════════════════ */
.video-swiper { margin-bottom: 20px; }

.field--name-field-video video {
  display: block;
  border: 2px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--itoldu-radius);
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   BADGES — colored pill
   ═══════════════════════════════════════════════════════════ */
.badge-accent {
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}

.badge-default {
  border: 1.5px solid rgba(124, 58, 237, 0.2);
  border-radius: 50px !important;
  background: rgba(124, 58, 237, 0.05);
  transition: background var(--itoldu-transition), border-color var(--itoldu-transition);
}
.badge-default:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   META-ENGAGE bar
   ═══════════════════════════════════════════════════════════ */
.meta-engage {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(236, 72, 153, 0.04));
  border-radius: var(--itoldu-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(124, 58, 237, 0.1);
}

/* ═══════════════════════════════════════════════════════════
   STREAM / ACTIVITY FEED
   ═══════════════════════════════════════════════════════════ */
.stream-wrapper .teaser,
.view-stream .teaser {
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR BLOCKS — subtle purple tint
   ═══════════════════════════════════════════════════════════ */
.sidebar .card,
.sidebar-block {
  border-left: 3px solid var(--itoldu-primary) !important;
  border-radius: var(--itoldu-radius) !important;
}

.block-title,
.card__title-bar {
  font-weight: 800;
  color: var(--itoldu-primary-dark);
  letter-spacing: -0.2px;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATION (controlled by JS IntersectionObserver)
   ═══════════════════════════════════════════════════════════ */
.itoldu-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.itoldu-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.itoldu-reveal:nth-child(2) { transition-delay: 0.08s; }
.itoldu-reveal:nth-child(3) { transition-delay: 0.16s; }
.itoldu-reveal:nth-child(4) { transition-delay: 0.24s; }
.itoldu-reveal:nth-child(5) { transition-delay: 0.32s; }
.itoldu-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════════════════════
   RIPPLE CLICK EFFECT
   ═══════════════════════════════════════════════════════════ */
.ripple-container { position: relative; overflow: hidden; }

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.3);
  transform: scale(0);
  animation: ripple-expand 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   FLOATING ACTION PULSE (like/follow buttons)
   ═══════════════════════════════════════════════════════════ */
.like-widget-output a:active,
.flag-action-link:active {
  animation: pulse-pop 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes pulse-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   RELATED POSTS — image card grid
   ═══════════════════════════════════════════════════════════ */
.itoldu-related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(124, 58, 237, 0.12);
}

.itoldu-related-posts__heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.itoldu-related-posts__heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.35em;
  background: linear-gradient(to bottom, var(--itoldu-grad-a), var(--itoldu-grad-b));
  border-radius: 3px;
  flex-shrink: 0;
}

.itoldu-related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.itoldu-related-card {
  border-radius: var(--itoldu-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.1);
  transition: transform var(--itoldu-transition), box-shadow var(--itoldu-transition);
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  background-image: none !important;
}

.itoldu-related-card:hover {
  box-shadow: 0 16px 48px var(--itoldu-card-glow), 0 4px 16px rgba(0,0,0,0.08);
  border-color: rgba(124, 58, 237, 0.3);
}

.itoldu-related-card__img-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  flex-shrink: 0;
}

.itoldu-related-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.itoldu-related-card:hover .itoldu-related-card__img-wrap img {
  transform: none;
}

.itoldu-related-card__no-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b));
}
.itoldu-related-card__no-img svg {
  width: 40px;
  height: 40px;
  fill: rgba(255,255,255,0.7);
}

.itoldu-related-card__body {
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.itoldu-related-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--itoldu-transition);
}
.itoldu-related-card:hover .itoldu-related-card__title {
  color: var(--itoldu-primary);
}

.itoldu-related-card__meta {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════
   TAGS / TOPIC TYPE pills
   ═══════════════════════════════════════════════════════════ */
.field--name-field-topic-tags .field__item a,
.tag-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(124, 58, 237, 0.08);
  color: var(--itoldu-primary);
  border: 1.5px solid rgba(124, 58, 237, 0.2);
  margin: 0.2rem;
  transition: background var(--itoldu-transition), transform var(--itoldu-transition);
  background-image: none !important;
}
.field--name-field-topic-tags .field__item a:hover,
.tag-link:hover {
  background: var(--itoldu-primary);
  color: #fff;
  transform: translateY(-1px);
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════
   COMMENTS section
   ═══════════════════════════════════════════════════════════ */
#section-comments {
  scroll-margin-top: 80px;
}

.comment {
  border-left: 3px solid rgba(124, 58, 237, 0.15);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  transition: border-color var(--itoldu-transition);
}
.comment:hover { border-left-color: var(--itoldu-primary); }

/* ═══════════════════════════════════════════════════════════
   FORMS — focus glow
   ═══════════════════════════════════════════════════════════ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--itoldu-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   SOCIAL SHARE / LIKE buttons
   ═══════════════════════════════════════════════════════════ */
.like-widget-output .like-button,
.like-widget-output .likes-count {
  transition: transform var(--itoldu-transition), color var(--itoldu-transition);
}
.like-widget-output .like-button:hover {
  transform: none;
  color: var(--itoldu-accent2) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITIONS — smooth fade-in on load
   ═══════════════════════════════════════════════════════════ */
.layout-container,
.page-wrapper {
  animation: page-fade-in 0.5s ease both;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR (top of page)
   ═══════════════════════════════════════════════════════════ */
#itoldu-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--itoldu-grad-a), var(--itoldu-grad-b), var(--itoldu-grad-c));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON (if present)
   ═══════════════════════════════════════════════════════════ */
#back-to-top,
.back-to-top {
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b)) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45) !important;
  transition: transform var(--itoldu-transition), box-shadow var(--itoldu-transition) !important;
}
#back-to-top:hover,
.back-to-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer,
footer.site-footer {
  background: linear-gradient(135deg, #1e0a3c 0%, #2d1045 100%) !important;
  color: rgba(255,255,255,0.8) !important;
  border-top: 2px solid rgba(167, 139, 250, 0.2);
}

.site-footer a {
  color: var(--itoldu-primary-light) !important;
  background-image: none !important;
}
.site-footer a:hover {
  color: #fde68a !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .itoldu-related-posts__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }
  .page-title h1 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .itoldu-related-posts__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR BLOCKS — styled containers with prominent titles
   ═══════════════════════════════════════════════════════════ */
.region--complementary > *,
.region--complementary-top > *,
.region--complementary-bottom > *,
.region--sidebar-first > *,
.region--sidebar-second > * {
  padding: 10px;
  background: #fff;
  border-radius: var(--itoldu-radius);
  border: 1px solid rgba(124, 58, 237, 0.1);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.07);
  margin-bottom: 1rem;
  overflow: hidden;
}

/* Sidebar block title — plain h2 (no collapsiblock) */
.region--complementary .block-title,
.region--complementary-top .block-title,
.region--complementary-bottom .block-title,
.region--complementary .card__title,
.region--complementary-top .card__title,
.region--complementary-bottom .card__title,
.region--sidebar-first .block-title,
.region--sidebar-second .block-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b));
  display: block;
  width: calc(100% + 20px);
  margin: -10px 0 12px -10px;
  padding: 13px 14px;
  border-radius: var(--itoldu-radius) var(--itoldu-radius) 0 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.region--complementary .block-title::after,
.region--complementary-top .block-title::after,
.region--complementary-bottom .block-title::after,
.region--complementary .card__title::after,
.region--sidebar-first .block-title::after,
.region--sidebar-second .block-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.15) 60%, transparent 80%);
  pointer-events: none;
}

/* Collapsiblock title wrapper — gradient lives here, not on the inner h2 */
.region--complementary .collapsiblockTitle,
.region--complementary-top .collapsiblockTitle,
.region--complementary-bottom .collapsiblockTitle,
.region--sidebar-first .collapsiblockTitle,
.region--sidebar-second .collapsiblockTitle {
  display: block;
  width: calc(100% + 20px);
  margin: -10px 0 12px -10px;
  border-radius: var(--itoldu-radius) var(--itoldu-radius) 0 0;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(135deg, var(--itoldu-grad-a), var(--itoldu-grad-b));
  position: relative;
}

/* Shimmer on the collapsiblockTitle wrapper */
.region--complementary .collapsiblockTitle::after,
.region--sidebar-first .collapsiblockTitle::after,
.region--sidebar-second .collapsiblockTitle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.15) 60%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Reset the h2 inside collapsiblockTitle — gradient is on the wrapper */
.region--complementary .collapsiblockTitle .block-title,
.region--complementary-top .collapsiblockTitle .block-title,
.region--complementary-bottom .collapsiblockTitle .block-title,
.region--complementary .collapsiblockTitle .card__title,
.region--sidebar-first .collapsiblockTitle .block-title,
.region--sidebar-second .collapsiblockTitle .block-title {
  background: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  color: #fff !important;
  display: inline !important;
}

.region--complementary .collapsiblockTitle .block-title::after,
.region--sidebar-first .collapsiblockTitle .block-title::after {
  display: none !important;
}

/* The toggle button: transparent bg, white arrow on the right */
.region--complementary .collapsiblockTitle button,
.region--complementary-top .collapsiblockTitle button,
.region--complementary-bottom .collapsiblockTitle button,
.region--sidebar-first .collapsiblockTitle button,
.region--sidebar-second .collapsiblockTitle button {
  display: block !important;
  width: 100% !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.728 15.795L3.728 7.795C3.104 6.796 3.822 5.5 5 5.5H15c1.178 0 1.896 1.296 1.272 2.295l-5 8c-.587.94-1.957.94-2.544 0Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 13px 44px 13px 14px !important;
  border: none !important;
  text-align: left !important;
  cursor: pointer !important;
  position: relative;
  z-index: 1;
}

/* Collapsed state: arrow points right */
.region--complementary .collapsiblockTitleCollapsed button,
.region--complementary-top .collapsiblockTitleCollapsed button,
.region--complementary-bottom .collapsiblockTitleCollapsed button,
.region--sidebar-first .collapsiblockTitleCollapsed button,
.region--sidebar-second .collapsiblockTitleCollapsed button {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.205 8.728L12.205 3.728C13.204 3.104 14.5 3.822 14.5 5V15c0 1.178-1.296 1.896-2.295 1.272l-8-5c-.94-.587-.94-1.957 0-2.544Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM CONTROL WIDTH — remove socialbase's 23rem cap so
   title and other full-width inputs use the full container.
   ═══════════════════════════════════════════════════════════ */
form:not(.layout-builder-configure-block) .form-control,
form:not(.layout-builder-configure-block) .select2-container .select2-selection {
  max-width: 100%;
}