/* ============================================
   Guno - Mobile Responsive CSS
   Add to all pages:
   <link rel="stylesheet" href="/css/responsive.css">
   ============================================ */

/* ── Base mobile resets ── */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   INDEX.HTML - Search page
   ============================================ */

/* Logo shrinks on small screens */
@media (max-width: 600px) {
    .logo {
        font-size: 48px !important;
    }

    .header {
        padding: 30px 15px !important;
    }

    /* Search input + buttons stack vertically */
    .search-box input[type="text"] {
        width: 90% !important;
        display: block !important;
        margin: 0 auto 10px auto !important;
        font-size: 16px !important;
    }

    .search-box input[type="submit"],
    .search-box button {
        width: 90% !important;
        display: block !important;
        margin: 5px auto !important;
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Nav links wrap nicely */
    .search-box p {
        line-height: 2.2 !important;
        padding: 0 15px !important;
    }

    /* Results */
    #results {
        padding: 0 10px !important;
    }

    .result-item {
        margin: 15px 5px !important;
        padding: 10px 5px !important;
    }

    .result-item a {
        font-size: 16px !important;
    }
}

/* ============================================
   BROWSE.HTML
   ============================================ */

@media (max-width: 600px) {
    .site-list {
        padding: 0 10px !important;
    }

    .site-item {
        padding: 12px 5px !important;
    }

    .site-item a {
        font-size: 16px !important;
    }

    /* Pagination wraps on small screens */
    .pagination {
        padding: 15px 5px !important;
    }

    .pagination a,
    .pagination .current {
        padding: 6px 10px !important;
        margin: 3px 2px !important;
        display: inline-block !important;
    }
}

/* ============================================
   ABOUT.HTML / GENERAL CONTENT PAGES
   (blog.html, news.html, guestbook.html,
    privacy.html, terms.html, contact.html)
   ============================================ */

@media (max-width: 600px) {
    body {
        margin: 10px !important;
        padding: 10px !important;
    }

    .content,
    .container,
    .site-list {
        max-width: 100% !important;
        padding: 0 5px !important;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    /* Blog posts */
    .post {
        padding: 20px 15px !important;
        margin: 15px 0 !important;
    }

    .post-title {
        font-size: 20px !important;
    }

    /* News items */
    .news-item {
        padding: 15px !important;
        margin: 15px 0 !important;
    }

    .news-title {
        font-size: 18px !important;
    }

    /* Guestbook form */
    .sign-form {
        padding: 15px !important;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    button {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Entries */
    .entry {
        padding: 15px !important;
    }
}

/* ============================================
   ADMIN PANEL
   ============================================ */

@media (max-width: 768px) {
    /* Header */
    .header {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    /* Stats cards stack */
    .stats {
        grid-template-columns: 1fr !important;
    }

    /* Menu grid goes single column */
    .menu-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables scroll horizontally */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* Filters stack */
    .filters {
        grid-template-columns: 1fr !important;
    }

    /* Modals full width */
    .modal-content {
        margin: 20px !important;
        padding: 20px !important;
        max-width: calc(100% - 40px) !important;
    }

    /* Buttons don't overflow */
    .btn {
        margin: 3px 1px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   TABLET (601px - 900px)
   ============================================ */

@media (min-width: 601px) and (max-width: 900px) {
    .logo {
        font-size: 56px !important;
    }

    .search-box input[type="text"] {
        width: 60% !important;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}