/* Kohdy Converter Hub - minimal extra styles (Tailwind-first) */

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

/* -------------------------------------------------------------------------- */
/* Brand color fallbacks                                                      */
/* -------------------------------------------------------------------------- */
/* Tailwind CDN should read tailwind.config, but to ensure consistent styling
   across all environments, we provide small CSS fallbacks for brand utilities.
   These only apply when Tailwind does not generate the classes. */

.bg-brand-50 { background-color: #eff6ff; }
.bg-brand-600 { background-color: #2563eb; }
.bg-brand-700 { background-color: #1d4ed8; }

.text-brand-700 { color: #1d4ed8; }
.text-brand-800 { color: #1e40af; }

.border-brand-200\/60 { border-color: rgba(191, 219, 254, 0.6); }
.ring-brand-600\/20 { --tw-ring-color: rgba(37, 99, 235, 0.2); }
.ring-brand-200\/60 { --tw-ring-color: rgba(191, 219, 254, 0.6); }

.from-brand-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(239, 246, 255, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:bg-brand-700:hover { background-color: #1d4ed8; }
.hover\:bg-brand-600:hover { background-color: #2563eb; }
.hover\:text-brand-800:hover { color: #1e40af; }
.hover\:text-brand-700:hover { color: #1d4ed8; }

/* Toast animation (copy feedback) */
.toast {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast--show {
  opacity: 1;
  transform: translateY(0);
}

/* Ad slots: keep visible but non-intrusive (AdSense will replace) */
.ad-slot {
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.00));
}

/* Match reserved AdSense sizes */
.ad-slot--banner {
  width: min(728px, 100%);
  height: 90px;
}

.ad-slot--rect {
  width: 300px;
  height: 250px;
}

.ad-slot--sky {
  width: 300px;
  height: 600px;
}

@media (max-width: 640px) {
  /* On small screens, a 728x90 banner does not fit well. Use 320x50. */
  .ad-slot--banner {
    width: min(320px, 100%);
    height: 50px;
  }
}

/* Ensure rounded cards clip inner header backgrounds */
section.shadow-soft {
  overflow: hidden;
}