/* ================================================================
   KITOTOOL — Responsive (Vercel/Geist Design System v2.0)
   Version: 2.0 | 2026-04-12
   Mobile-first breakpoints
   ================================================================ */

/* ===== EXTRA SMALL — Mobile Portrait (< 400px) ===== */
@media (max-width: 400px) {
    h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
    h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); }
    h3 { font-size: var(--text-xl); }

    .tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== SMALL — Mobile Landscape (401–640px) ===== */
@media (min-width: 401px) and (max-width: 640px) {
    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ===== MEDIUM — Tablet (641–768px) ===== */
@media (min-width: 641px) and (max-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ===== LARGE TABLET (769–1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .tools-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== EXTRA LARGE (1025–1280px) ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .tools-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== MOBILE MENU TOGGLE ===== */
@media (max-width: 768px) {
    /* Shared tool titles take precedence over individual tool hero sizes. */
    body .tool-page .tool-h1 {
        font-size: 1.575rem;
    }

    /* Keep the full breadcrumb text in the DOM; truncate only its display. */
    body .breadcrumb,
    body .tool-page .breadcrumb,
    body .directory-page .breadcrumb {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }

    body .breadcrumb > a,
    body .breadcrumb > .breadcrumb-current,
    body .breadcrumb > [aria-current="page"] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .breadcrumb > a:first-child,
    body .breadcrumb > .breadcrumb-separator,
    body .breadcrumb > .breadcrumb-sep,
    body .breadcrumb > svg {
        flex: 0 0 auto;
    }

    body .breadcrumb > a:not(:first-child):not(:last-child) { max-width: 40%; }
    body .breadcrumb > :last-child { flex: 1 1 0%; }

    .mobile-menu {
        display: none;
    }
    .mobile-menu.active {
        display: flex;
    }
}

/* ===== HIDE ON MOBILE ===== */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

/* ===== HIDE ON DESKTOP ===== */
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ===== PRINT STYLES ===== */
@media print {
    .no-print { display: none !important; }
    body { background: white; color: black; }
    a { color: black; text-decoration: underline; }
    .site-header,
    .site-footer,
    .sidebar-column { display: none; }
}