/*
 * ToolsBox Labs — custom styles
 * Tailwind CSS (via CDN) handles the heavy lifting.
 * This file adds only what Tailwind utilities can't easily express.
 */

/* ── Smooth transitions ─────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Prose overrides (Tailwind prose plugin via CDN doesn't exist,
      so we style article/SEO content sections manually) ──────── */
.prose h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.prose ul {
    list-style: disc;
    padding-left: 1.5rem;
    color: #4b5563;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.35rem;
    line-height: 1.7;
}

.prose strong {
    color: #111827;
}

/* ── Line-clamp fallback for older browsers ──────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Ad slot responsive tweak ────────────────────────────────── */
@media (max-width: 767px) {
    .ad-header {
        max-width: 100% !important;
        height: 60px !important;
    }
}

/* ── Focus-visible ring for keyboard users ───────────────────── */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}