/* Tailwind CDN core build doesn't include the line-clamp / typography
   plugins, so we hand-roll the few utilities this template needs. */

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

/* Minimal "prose" styling for article bodies rendered from stored HTML */
.prose { line-height: 1.75; color: #334155; }
.prose p { margin-bottom: 1em; }
.prose h1, .prose h2, .prose h3 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose ul, .prose ol { margin: 1em 0 1em 1.5em; }
.prose blockquote { border-left: 4px solid var(--color-primary); padding-left: 1em; font-style: italic; color: #64748b; }

/* Extra breathing room + font scaling on very large / TV screens */
@media (min-width: 2560px) {
  html { font-size: 24px; }
}

/* Muted white text on dark surfaces (footer, header language toggle).
   NOTE: Tailwind's "text-white/80" opacity-modifier syntax only works
   on Tailwind's own built-in color utilities — it silently does
   nothing when applied to our custom ".text-on-primary" class (which
   is why that text was invisible before). This class is the fix. */
.text-muted-on-dark {
  color: rgba(255, 255, 255, 0.75);
}

/* Social icon buttons (WhatsApp/Facebook/Instagram) — light up and
   lift on hover, glowing in each platform's own brand color via the
   --glow-color custom property set inline on each link. */
.social-icon-btn {
  height: 2.75rem;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.social-icon-btn svg { height: 1.25rem; width: 1.25rem; }
.social-icon-btn:hover,
.social-icon-btn:focus-visible {
  color: var(--glow-color, #22c55e);
  background-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 0 22px 2px var(--glow-color, #22c55e);
}