/**
 * CaseAid - compatibility utilities
 * ---------------------------------------------------------------------------
 * OPTIONAL. Restores Tailwind utilities that the templates reference but that
 * are absent from the frozen assets/css/app.css bundle.
 *
 * These classes have been dead for as long as the current bundle has shipped,
 * so the live site's appearance evolved around them doing nothing. Loading this
 * file makes the markup render as originally authored, which CHANGES the look
 * of a few components (the hero announcement pill becomes a single truncated
 * line; Insights goes to three columns with clamped text and uppercase badges).
 *
 * Toggle with CASEAID_LOAD_COMPAT_UTILITIES in functions.php.
 */

/* ==========================================================================
   1. Utilities missing from the frozen app.css bundle
   ========================================================================== */

/* --- Typography ---------------------------------------------------------- */
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.font-black { font-weight: 900; }
.text-\[10px\] { font-size: 10px; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Display / sizing ---------------------------------------------------- */
.inline-block { display: inline-block; }
.max-w-5xl { max-width: 64rem; }
.max-w-\[200px\] { max-width: 200px; }
.rounded-2xl { border-radius: 1rem; }

/* --- Spacing ------------------------------------------------------------- */
.mb-5 { margin-bottom: 1.25rem; }
.ml-4 { margin-left: 1rem; }
.p-1\.5 { padding: 0.375rem; }

/* --- Colour -------------------------------------------------------------- */
.text-white\/30 { color: rgb(255 255 255 / 0.3); }
.text-white\/40 { color: rgb(255 255 255 / 0.4); }
.text-white\/60 { color: rgb(255 255 255 / 0.6); }
.text-\[\#d8b4fe\] { color: #d8b4fe; }
.bg-\[\#d8b4fe\] { background-color: #d8b4fe; }
.bg-\[\#09090b\] { background-color: #09090b; }
.bg-white\/\[0\.04\] { background-color: rgb(255 255 255 / 0.04); }
.hover\:bg-white\/\[0\.08\]:hover { background-color: rgb(255 255 255 / 0.08); }

/* --- Gradients (Tailwind's --tw-gradient-* pipeline) --------------------- */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white\/\[0\.08\] {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from),
    rgb(255 255 255 / 0.08) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

/* --- Opacity / transition ------------------------------------------------ */
.opacity-75 { opacity: 0.75; }
.duration-500 { transition-duration: 500ms; }

/* --- Transforms ---------------------------------------------------------- */
/* Same composition string the bundle's .transform utility uses. */
.-translate-x-full,
.group:hover .group-hover\:translate-x-1,
.hover\:-translate-y-0\.5:hover {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full { --tw-translate-x: -100%; }
.group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; }
.hover\:-translate-y-0\.5:hover { --tw-translate-y: -0.125rem; }

/* --- Flex gap on hover --------------------------------------------------- */
.hover\:gap-3:hover,
.group:hover .group-hover\:gap-3 { gap: 0.75rem; }

/* --- Group-hover colour -------------------------------------------------- */
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:text-primary { color: hsl(var(--primary)); }
.group:hover .group-hover\:text-purple-300 { color: #d8b4fe; }

/* --- Shadows (same var pipeline as the bundle) --------------------------- */
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-purple-500\/10:hover {
  --tw-shadow-color: rgb(168 85 247 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[0_4px_15px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  --tw-shadow-colored: 0 4px 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_6px_25px_rgba\(139\2c 92\2c 246\2c 0\.15\)\]:hover {
  --tw-shadow: 0 6px 25px rgba(139, 92, 246, 0.15);
  --tw-shadow-colored: 0 6px 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* --- Animation ----------------------------------------------------------- */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.group:hover .group-hover\:animate-\[shimmer_1\.5s_infinite\] {
  animation: shimmer 1.5s infinite;
}

/* --- Responsive variants ------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:max-w-\[400px\] { max-width: 400px; }
  .sm\:px-16 { padding-left: 4rem; padding-right: 4rem; }
  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
}

@media (min-width: 768px) {
  .md\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:px-20 { padding-left: 5rem; padding-right: 5rem; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}