/* MOBILE FIXES + CACHE BUSTING FOR THE OSINT VAULT */

/* FORCE BROWSER TO UPDATE ALL FILES */
* {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    content-visibility: auto !important;
}

@media (max-width: 650px) {

    /* Shrink the logo and center it */
    .vault-logo,
    .logo-banner,
    img[src*="logo"],
    img[src*="vault"],
    img[src*="osint"] {
        width: 70% !important;
        max-width: 280px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 15px auto !important;
    }
    
    /* Main header mobile padding */
    .main-header {
        padding: 25px 0 !important;
    }
    
    .tagline-section {
        padding: 15px 0 25px 0 !important;
    }

    /* Fix the hero text under the logo */
    .hero,
    p,
    .description,
    .tagline {
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 0 20px !important;
        margin-top: 10px !important;
    }

    /* Fix the category buttons */
    button,
    .tab,
    .filter-button,
    .category-button {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        margin: 5px !important;
    }

    /* Make button section behave */
    div[class*="tabs"],
    div[class*="category"],
    div[class*="filters"] {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    /* Fix the search bar */
    input[type="search"],
    input[type="text"],
    .search,
    .search-bar input {
        width: 90% !important;
        margin: 15px auto !important;
        display: block !important;
        font-size: 15px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Add spacing so nothing sits on top of each other */
    section,
    div,
    .container {
        margin-bottom: 10px !important;
    }
}