/*
Theme Name: VibeCompared
Theme URI: https://example.com/vibecompared
Author: You
Author URI: https://example.com
Description: Comparison table theme for AI coding tools (manual Activity & Trustpilot stars).
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vibecompared
*/
:root{--vc-card-shadow:0 10px 30px rgba(0,0,0,.35)}
.vc-card{box-shadow:var(--vc-card-shadow)}
.skeleton{position:relative;overflow:hidden;background:#eef2f7}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
table.vc-compact th, table.vc-compact td{padding:.75rem .75rem}
table.vc-compact td .desc{max-width:260px}
table.vc-compact .shot{width:240px;height:135px}
table.vc-compact{font-size:0.95rem}
a.vc-activity{display:inline-flex;align-items:center;gap:.35rem;text-decoration:underline}
.vc-logo{display:inline-block;line-height:1.05;padding:.25rem .5rem;border-radius:.75rem}
/* Trustpilot star wrapper */
.vc-stars{display:inline-flex;gap:2px;vertical-align:middle}
.vc-stars svg{width:16px;height:16px}

/* Pinned card: simple border + pin badge */
.vc-pinned{ position:relative; border:4px solid var(--pin-color, #7c3aed); border-radius:12px; background:#ffffff; color:inherit; }
.vc-pinned.pin-1{ --pin-color:#D4AF37; } /* gold */
.vc-pinned.pin-2{ --pin-color:#C0C0C0; } /* silver */
.vc-pinned.pin-3{ --pin-color:#CD7F32; } /* bronze */
.vc-pinned .vc-pinned-inner{ position:relative; z-index:1; padding:12px; border-radius:inherit; }
.vc-pin-badge{ position:absolute; top:2px; right:2px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:0; box-shadow:none; z-index:2; padding:0; }
.vc-pin-badge svg{ width:64px; height:64px; color:var(--pin-color, #7c3aed); fill:currentColor; display:block; }

/* Responsive sizing tweaks */
@media (max-width: 1024px){
  .vc-pin-badge{ top:2px; right:2px; }
  .vc-pin-badge svg{ width:48px; height:48px; }
}
@media (max-width: 640px){
  .vc-pin-badge{ top:2px; right:2px; }
  .vc-pin-badge svg{ width:40px; height:40px; }
}

/* Stylized VIEW TOOL button */
.cssbuttons-io{ position:relative; font-family:inherit; font-weight:600; font-size:17px; border-radius:.8em; cursor:pointer; border:none; background:linear-gradient(to right,#00bf63,#5ce1e6); color:ghostwhite; overflow:hidden; display:inline-flex; align-items:center; text-decoration:none; }
.cssbuttons-io svg{ width:1.2em; height:1.2em; margin-left:.7em; stroke-width:2px; }
.cssbuttons-io span{ position:relative; z-index:10; transition:color .4s; display:inline-flex; align-items:center; padding:.8em .9em .8em 1.02em; }
.cssbuttons-io::before,.cssbuttons-io::after{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.cssbuttons-io::before{ content:""; background:#000; width:120%; left:-10%; transform:skew(30deg); transition:transform .4s cubic-bezier(.3,1,.8,1); }
.cssbuttons-io:hover::before{ transform:translate3d(100%,0,0); }
.cssbuttons-io:active{ transform:scale(.95); }

@media (max-width: 768px){
  .cssbuttons-io{ font-size:12px; border-radius:.6em; }
  .cssbuttons-io span{ padding:.5em .6em .5em .72em; }
  .cssbuttons-io svg{ width:1em; height:1em; margin-left:.5em; }
}
/* Pinned card inherits normal text colors; no overrides */

/* Typing hero line */
.cursor{
  position: relative;
  display: inline-block;
  --type-ch: 100ch; /* total characters to reveal */
  width: 0; /* animate from 0ch to var(--type-ch) */
  max-width: 100%;
  margin: 0 auto;
  border-right: 2px solid rgba(0,0,0,.75);
  color: #000;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.typewriter-animation{
  animation: typewriter 5s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;
}
@keyframes typewriter{ from{ width:0 } to{ width: var(--type-ch) } }
@keyframes blinkingCursor{ from{ border-right-color: rgba(0,0,0,.75) } to{ border-right-color: transparent } }

/* Vote widget (Uiverse.io by 3bdel3ziz-T, scoped) */
.vc-vote {
  --col-gray: #3f3f3f;
  --col-white: #fff;
  --col-like: #2196f3;
  --col-dislike: #ff3232;
  --transition: 350ms;
  background-color: var(--col-gray);
  width: 130px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px;
  user-select: none;
  /* number transforms from original demo (unused without digit columns) */
  --zero: translateY(calc(50% - 11px));
  --one: translateY(calc(40% - 11px));
  --two: translateY(calc(30% - 11px));
  --three: translateY(calc(20% - 11px));
  --four: translateY(calc(10% - 11px));
  --five: translateY(calc(0% - 11px));
  --six: translateY(calc(-10% - 11px));
  --seven: translateY(calc(-20% - 11px));
  --eight: translateY(calc(-30% - 11px));
  --nine: translateY(calc(-40% - 11px));
  --ten: translateY(calc(-50% - 11px));
}
.vc-vote:has(.vc-like:checked) .count {
  border-left-color: var(--col-like);
  border-right-color: transparent;
}
.vc-vote:has(.vc-dislike:checked) > .count {
  border-right-color: var(--col-dislike);
  border-left-color: transparent;
}
.vc-vote label input { display: none; }
.vc-vote .vc-like:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-like);
}
.vc-vote .vc-dislike:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-dislike);
}
.vc-vote .icon {
  cursor: pointer;
  fill: var(--col-white);
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-vote .icon.like { margin-left: 9px; }
.vc-vote .icon.dislike { margin-right: 9px; }
.vc-vote .count {
  transition: var(--transition);
  flex: 1;
  border-left: 1px solid var(--col-white);
  border-right: 1px solid var(--col-white);
  position: relative;
  height: 24px;
  overflow: hidden;
  margin: auto;
  color: white;
  font-size: 16px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5px;
  flex-direction: row;
}
.vc-vote .count .number {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(50% - 8px));
  transition: 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.vc-vote .count .number:first-child { transition-delay: 200ms; }
.vc-vote .count .number:nth-child(2) { transition-delay: 150ms; }
.vc-vote .count .number:last-child { transition-delay: 50ms; }

@keyframes evaluation-animation {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-10deg);
  }
}

/* CSS-only restyle of existing vc-up/down + vc-score layout to mimic widget */
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) {
  --col-gray: #3f3f3f;
  --col-white: #fff;
  --col-like: #2196f3;
  --col-dislike: #ff3232;
  background-color: var(--col-gray);
  width: 130px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px;
  user-select: none;
  overflow: visible; /* ensure icon tips aren't clipped */
}
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-score {
  flex: 0 0 auto;
  border-left: 1px solid var(--col-white);
  border-right: 1px solid var(--col-white);
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--col-white);
  font-size: 16px;
  font-family: sans-serif;
  margin: 0 6px;
  padding: 0 8px;
  min-width: 32px;
}
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up,
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down {
  background: none;
  border: 0;
  padding: 0;
  width: 24px;
  height: 26px; /* slight headroom to avoid cropping */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: transparent;
  line-height: 1;
}
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up::before,
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down::before {
  content: "";
  display: block;
  width: 22px; /* reduce to keep full hand visible */
  height: 22px;
  background-color: var(--col-white);
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 350ms, background-color 200ms ease;
  margin: 1px; /* micro spacing from borders */
}
/* thumbs-up icon */
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"/></svg>');
}
/* thumbs-down icon */
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 3H6.693A2.01 2.01 0 0 0 4.82 4.298l-2.757 7.351A1 1 0 0 0 2 12v2c0 1.103.897 2 2 2h5.612L8.49 19.367a2.004 2.004 0 0 0 .274 1.802c.376.52.982.831 1.624.831H12c.297 0 .578-.132.769-.36l4.7-5.64H20c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm-8.469 17h-1.145l1.562-4.684A1 1 0 0 0 11 14H4v-1.819L6.693 5H16v9.638L11.531 20zM18 14V5h2l.001 9H18z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 3H6.693A2.01 2.01 0 0 0 4.82 4.298l-2.757 7.351A1 1 0 0 0 2 12v2c0 1.103.897 2 2 2h5.612L8.49 19.367a2.004 2.004 0 0 0 .274 1.802c.376.52.982.831 1.624.831H12c.297 0 .578-.132.769-.36l4.7-5.64H20c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm-8.469 17h-1.145l1.562-4.684A1 1 0 0 0 11 14H4v-1.819L6.693 5H16v9.638L11.531 20zM18 14V5h2l.001 9H18z"/></svg>');
}
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up:hover::before,
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up:focus-visible::before {
  background-color: var(--col-like);
  transform: scale(1.1) rotate(-10deg);
}
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down:hover::before,
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down:focus-visible::before {
  background-color: var(--col-dislike);
  transform: scale(1.1) rotate(-10deg);
}
/* Mobile/tablet layout improvements for content proportions */
@media (max-width: 1024px) {
  /* Outer two-column row: left content vs screenshot */
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 { flex: 0 0 60%; max-width: 60%; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-1/3 { flex: 0 0 30%; max-width: 30%; }

  /* Ensure inner left area splits into small (favicon+vote) and large (text) */
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 { display: flex; align-items: flex-start; gap: 12px; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 > .flex.flex-col.items-center { flex: 0 0 56px; max-width: 56px; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 > div:not(.flex) { flex: 1 1 auto; min-width: 0; }

  /* Make the long text comfortable and not squashed */
  .vc-card .vc-compact .vc-long { white-space: normal; overflow-wrap: anywhere; word-break: normal; display:block; width:100%; max-width:none; text-align:left; }
  .vc-card .vc-compact .vc-long + .vc-long { margin-top: .5rem; }

  /* Screenshot scales within its column */
  .vc-card .vc-compact img.screenshot.shot { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* Tighten the small left column (favicon + vote) to free text width */
  .vc-card .vc-compact .w-2/3 > .flex.flex-col.items-center { flex: 0 0 56px; max-width: 56px; }
  .vc-card .vc-compact .w-2/3 > div:last-child { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 768px) {
  /* Slightly increase text readability on small phones */
  .vc-card .vc-compact .vc-long { font-size: 0.95rem; line-height: 1.45; }
}
.vc-card .vc-compact .flex.items-start.gap-6 {}
/* Stack columns on small phones so long text uses full width */
@media (max-width: 640px){
  .vc-card .vc-compact .flex.items-start.gap-6{ flex-direction: column; gap: 12px; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3,
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-1/3{ flex: 0 0 100%; max-width: 100%; width: 100%; }
  /* Make the left inner area use a fixed icon column and a full-width text column */
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3{ display: grid; grid-template-columns: 56px 1fr; align-items: start; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 > .flex.flex-col.items-center{ grid-column: 1; }
  .vc-card .vc-compact .flex.items-start.gap-6 > .w-2/3 > div:nth-child(2){ grid-column: 2; min-width: 0; width: 100%; }
  /* Ensure long summary really spans available width */
  .vc-card .vc-compact .vc-long{ width: 100%; max-width: none; text-align: left; }
  .vc-card .vc-compact .text-right.w-1/3{ text-align: center; }
  .vc-card .vc-compact img.screenshot.shot{ width: 100%; height: auto; max-width: 100%; }
}
/* Wave text logo (CodePen-inspired) */
.wave-text span { display:inline-block; font-size: clamp(2rem,6vw,3.5rem); font-weight: 800; letter-spacing: .04em; color:#374151; }
.wave-text span { animation: wave 2s ease-in-out infinite; }
.wave-text span:nth-child(1){ animation-delay: 0s; }
.wave-text span:nth-child(2){ animation-delay: .2s; }
.wave-text span:nth-child(3){ animation-delay: .4s; }
.wave-text span:nth-child(4){ animation-delay: .6s; }
@keyframes wave { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }

/* Masked "Compared" text */
.masked-text{
  font-size: clamp(2rem,6.5vw,4rem);
  font-weight: 800;
  color: transparent;
  background-image: url('https://images.unsplash.com/photo-1732535725600-f805d8b33c9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: 200%;
  background-position: 0 50%;
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: animate-background 5s infinite alternate linear;
}
@keyframes animate-background { 0%{ background-position:0 50% } 100%{ background-position:100% 50% } }

/* Hero title stacking: bring VIBE close to Compared */
.vc-hero-title{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; gap:0; margin:0 auto; text-align:center; }
.vc-hero-title .wave-text{ margin:0; display:inline-block; }
.vc-hero-title .masked-text{ margin: -0.25em 0 0 0; display:inline-block; }

/* Minor stacking: vote icons above center count to avoid visual overlap */
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-up,
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-down{ position:relative; z-index:1; }
.vc-card div:has(> .vc-up):has(> .vc-down):has(> .vc-score) .vc-score{ z-index:0; }

/* Mobile tweaks: sizing + typewriter clamp */
@media (max-width: 640px){
  .wave-text span{ font-size: clamp(1.6rem, 10vw, 2.4rem); }
  .masked-text{ font-size: clamp(1.6rem, 9.5vw, 2.2rem); margin-top: -0.2em; }
  .cursor{ --type-ch: 60ch; font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
}