/* Mobile & responsive overrides (centralized) */

@media (max-width: 768px) {

    /* =========================================================
      Header mobile version
   ========================================================= */

        /* Header wrapper */
        .header-wrapper {
            margin-top: 12px;
            text-align: center;
        }

        /* Keep home icon and search on one line on narrow screens */
        .header-buttons.header-search-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            justify-content: center;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        /* Home button */
        .icon-btn {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .icon-btn svg {
                width: 18px;
                height: 18px;
            }

        /* Search form centered with controlled width */
        .search-form {
            width: 260px; /* controls search bar size */
            display: flex;
            justify-content: center;
        }

        /* Override desktop-specific selectors with equal specificity so rules apply on mobile */
        .header-buttons.header-search-row .search-form {
            flex: 1 1 auto !important; /* allow form to grow/shrink beside the icon */
            min-width: 0 !important; /* allow input to shrink as needed */
            max-width: 420px !important; /* cap maximum width */
            display: flex;
            box-sizing: border-box;
        }

        .header-buttons.header-search-row .search-wrapper {
            position: relative !important;
            width: 100% !important;
            box-sizing: border-box;
        }

        .header-buttons.header-search-row .search-input {
            width: 100% !important;
            padding: 0 44px 0 12px !important; /* make room for icon */
            box-sizing: border-box;
        }

        .header-buttons.header-search-row .search-icon-btn {
            position: absolute !important;
            right: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            padding: 0 !important;
        }

        /* ensure the home icon doesn't expand and push the search down */
        .header-buttons.header-search-row .icon-btn {
            flex: 0 0 auto !important;
        }

        .search-wrapper {
            position: relative;
            width: 100%;
        }

        /* Search input */
        .search-input {
            width: 100%;
            height: 42px;
            font-size: 0.9rem;
            padding: 0 36px 0 12px;
            border-radius: 6px;
            border: 1px solid #999;
            box-sizing: border-box;
        }

        /* Search icon inside input */
        .search-icon-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .search-icon-btn svg {
                width: 16px;
                height: 16px;
                stroke: #003399;
            }
    /* =========================================================
      Booklist stack row for mobile
   ========================================================= */

    /* Booklist: stack rows for mobile */
    .booklist-page .book-table thead, .bookclub-page .book-table thead { display:none; }
    .booklist-page .table-wrap, .bookclub-page .table-wrap { overflow-x:visible; border:none; }
    .booklist-page .book-table tbody tr, .bookclub-page .book-table tbody tr { display:block; padding:1rem 0; border-bottom:2px solid #d1d5db; }
    .booklist-page .book-table td, .bookclub-page .book-table td { display:block; width:100%; padding:4px 0; border:none; }
    .booklist-page .book-table td:first-child strong, .bookclub-page .book-table td:first-child strong { display:block; font-size:1.1rem; color:#003399; margin-bottom:2px; }
    .booklist-page .book-table td:nth-child(2), .bookclub-page .book-table td:nth-child(2) { font-size:0.95rem; margin-bottom:4px; }
    .booklist-page .book-table td:nth-child(2)::before, .bookclub-page .book-table td:nth-child(2)::before { content: "by "; font-weight:500; }
    .booklist-page .book-table td:nth-child(3), .bookclub-page .book-table td:nth-child(3) { font-size:0.9rem; color:#444; margin-bottom:10px; }
    .booklist-page .book-table td:nth-child(4), .bookclub-page .book-table td:nth-child(4), .booklist-page .book-table td:nth-child(5), .bookclub-page .book-table td:nth-child(5) { display:inline-block; margin-right:10px; margin-top:6px; }

    .booklist-page .table-link, .bookclub-page .table-link { height:36px; min-width:80px; font-size:0.85rem; padding:0 0.9rem; }
    .booklist-page .book-table, .bookclub-page .book-table { min-width:0; }
}