/* =========================================================================
   WhiteSight Banner Carousel — frontend styles
   Light, dependency-free. All animation is CSS/SVG (no video, no libraries).
   ========================================================================= */

/* Montserrat is enqueued by the plugin. */

.wsbc, .wsbc *{ box-sizing:border-box; }

.wsbc{
  --header-h:92px;
  --wave-accent:#3FB79A;
  position:relative;
  width:100%;
  height:calc(100dvh - var(--header-h));
  min-height:460px;
  max-height:100vh;
  overflow:hidden;
  background:#ffffff;
  color:#171A21;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- continuous wave (spans all banners, never resets) ---- */
.wsbc-wave{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  z-index:1; pointer-events:none; overflow:hidden;
}
.wsbc-wave svg{
  position:absolute; bottom:0; left:0; width:200%; height:100%;
}
.wsbc-wave svg.w1{ animation:wsbc-wave 30s linear infinite; }
.wsbc-wave svg.w2{ animation:wsbc-wave 21s linear infinite; }
.wsbc-wave svg.w3{ animation:wsbc-wave 15s linear infinite; }
.wsbc-wave .fill1{ fill:var(--wave-accent); opacity:.08; transition:fill .8s ease; }
.wsbc-wave .fill2{ fill:var(--wave-accent); opacity:.13; transition:fill .8s ease; }
.wsbc-wave .line{ fill:none; stroke:var(--wave-accent); stroke-width:3; stroke-linecap:round; opacity:.9; transition:stroke .8s ease; }

/* ---- slides ---- */
.wsbc-slide{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,5vw,64px) clamp(64px,6vw,96px);
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .7s ease, transform .7s ease;
}
.wsbc-slide.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }

.wsbc-inner{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:1240px; gap:clamp(32px,5vw,80px);
}
.wsbc-inner[data-side="left"]{ flex-direction:row-reverse; }

.wsbc-text{
  flex:1 1 46%; max-width:620px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.wsbc-meta{ display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.wsbc-logo{ height:30px; width:auto; display:block; }
.wsbc-eyebrow{
  font-size:clamp(11px,.95vw,14px); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acc);
}
.wsbc-tag{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:var(--acc); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.wsbc-tag .dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:wsbc-pulse 2s ease-in-out infinite; }

.wsbc-title{
  margin:0 0 20px; font-size:clamp(30px,4.4vw,58px); line-height:1.05;
  font-weight:800; letter-spacing:-.02em; color:#171A21; text-wrap:balance;
}
.wsbc-desc{
  margin:0 0 32px; font-size:clamp(15px,1.45vw,21px); line-height:1.55;
  font-weight:400; color:#5C6472; max-width:46ch; text-wrap:pretty;
}
.wsbc-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

.wsbc-cta{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
  font-family:inherit; font-size:clamp(14px,1.05vw,17px); font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.wsbc-cta--primary{ background:#171A21; color:#fff; }
.wsbc-cta--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(23,26,33,.22); }
.wsbc-cta--ghost{ background:transparent; color:#171A21; border:1.5px solid #171A21; }
.wsbc-cta--ghost:hover{ transform:translateY(-2px); }
.wsbc-cta .arr{ font-size:1.1em; line-height:1; }

.wsbc-visual{ flex:1 1 42%; display:flex; align-items:center; justify-content:center; }
.wsbc-visual > *{ max-width:100%; }

/* ---- arrows ---- */
.wsbc-arrow{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid #E7EAF0;
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 22px rgba(23,26,33,.08); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.wsbc-arrow--prev{ left:clamp(6px,1.2vw,18px); }
.wsbc-arrow--next{ right:clamp(6px,1.2vw,18px); }
.wsbc-arrow:hover{ transform:translateY(-50%) scale(1.06); }

/* ---- dots ---- */
.wsbc-dots{
  position:absolute; z-index:5; bottom:clamp(20px,3.5vh,40px); left:50%;
  transform:translateX(-50%); display:flex; align-items:center; gap:10px;
}
.wsbc-dot{
  height:10px; width:10px; border-radius:999px; border:none; padding:0;
  background:#D3D8E0; cursor:pointer; transition:width .4s ease, background .4s ease;
}
.wsbc-dot.is-active{ width:30px; }

/* ---- responsive: stack on narrow screens ---- */
@media (max-width:820px){
  .wsbc-inner,
  .wsbc-inner[data-side="left"]{ flex-direction:column; gap:clamp(16px,3.5vh,32px); }
  .wsbc-slide{ padding:clamp(24px,5vw,40px) clamp(22px,6vw,44px); }
  .wsbc-text{ text-align:center; align-items:center; flex:0 0 auto; order:1; }
  .wsbc-visual{ order:2; flex:0 0 auto; width:min(62vw,240px); }
  .wsbc-ctas{ justify-content:center; }
  .wsbc-arrow{ display:none; }
}
/* hide visual when there isn't enough vertical room (short landscape / small phones) */
@media (max-height:620px) and (max-width:820px){
  .wsbc-visual{ display:none; }
}

/* ---- keyframes ---- */
@keyframes wsbc-wave{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes wsbc-spin{ to{ transform:rotate(360deg); } }
@keyframes wsbc-spinR{ to{ transform:rotate(-360deg); } }
@keyframes wsbc-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.16); opacity:.55; } }
@keyframes wsbc-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
@keyframes wsbc-bob2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@keyframes wsbc-rise{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
@keyframes wsbc-blip{ 0%{ transform:scale(.4); opacity:0; } 25%{ opacity:.9; } 100%{ transform:scale(2.1); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .wsbc *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .wsbc-slide{ transition:opacity .2s ease !important; }
}

/* =========================================================================
   Theme-override hardening + additions (v1.1)
   ========================================================================= */

/* CTA colours — forced so the WordPress theme's link colours can't leak in. */
.wsbc .wsbc-cta{ text-decoration:none !important; }
.wsbc .wsbc-cta--primary,
.wsbc .wsbc-cta--primary:link,
.wsbc .wsbc-cta--primary:visited,
.wsbc .wsbc-cta--primary:hover,
.wsbc .wsbc-cta--primary:focus,
.wsbc .wsbc-cta--primary:active,
.wsbc .wsbc-cta--primary *{ color:#ffffff !important; }
.wsbc .wsbc-cta--primary{ background:#171A21 !important; }
.wsbc .wsbc-cta--ghost,
.wsbc .wsbc-cta--ghost:link,
.wsbc .wsbc-cta--ghost:visited,
.wsbc .wsbc-cta--ghost:hover,
.wsbc .wsbc-cta--ghost:focus,
.wsbc .wsbc-cta--ghost:active,
.wsbc .wsbc-cta--ghost *{ color:#171A21 !important; }
.wsbc .wsbc-cta--ghost{ background:transparent !important; border:1.5px solid #171A21 !important; }

/* Fill the container. Make the Elementor section Full-Width with 0 padding
   for a true edge-to-edge hero (no 100vw trick — that causes horizontal scroll). */
.wsbc{ width:100%; max-width:100%; }

/* Content position: "upper" pins the block near the top, just under the header. */
.wsbc--valign-upper .wsbc-slide{ align-items:flex-start; }
.wsbc--valign-upper .wsbc-inner{ margin-top:clamp(20px,6vh,80px); }

/* Uploaded cover image (report covers etc.) */
.wsbc-cover{ height:auto; border-radius:20px; box-shadow:0 30px 60px rgba(23,26,33,.16); animation:wsbc-bob2 6s ease-in-out infinite; }

/* Sized custom-HTML visual box */
.wsbc-visual-box{ display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* Structured stats + company chips */
.wsbc-visual--stats{ flex:1 1 46%; max-width:540px; }
.wsbc-stats{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px); width:100%; }
.wsbc-stats-row{ display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,28px); }
.wsbc-stat{ flex:1 1 120px; }
.wsbc-stat-num{ font-size:clamp(30px,3.4vw,46px); font-weight:800; line-height:1; color:var(--acc); letter-spacing:-.02em; }
.wsbc-stat-label{ margin-top:8px; font-size:clamp(12px,1vw,14px); font-weight:500; color:#5C6472; line-height:1.35; }
.wsbc-rule{ height:1px; background:#ECEEF3; }
.wsbc-chips{ display:flex; flex-wrap:wrap; gap:10px; animation:wsbc-bob 7s ease-in-out infinite; }
.wsbc-chip{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid #E7E1F6; color:#3A3550; font-size:clamp(13px,1vw,15px); font-weight:600; box-shadow:0 4px 14px rgba(23,26,33,.04); }
.wsbc-chip--more{ display:inline-flex; align-items:center; padding:9px 6px; color:#9AA2B0; font-size:clamp(13px,1vw,15px); font-weight:600; }

@media (max-width:820px){
  /* stats block should use the full width when stacked, not the narrow visual cap */
  .wsbc-visual--stats{ width:100% !important; max-width:440px; }
  .wsbc-chips{ gap:7px; justify-content:center; }
  .wsbc-chip{ padding:7px 12px; font-size:12px; }
  .wsbc-chip--m-hide{ display:none; }        /* keep only the first N chips on mobile */
  .wsbc-stats-row{ justify-content:center; text-align:center; }
  .wsbc-stat{ text-align:center; }
}