/**
 * Category Listing Page - Responsive Button Layout Fix
 * Fixes button alignment issues for all category pages
 * Specifically targets the problematic 768px - 1435px range
 */

/* ============================================
   CONTAINER STRUCTURE
   ============================================ */

/* Main container for view and sort controls */
.view-sort-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* View toggle buttons container */
.view-toggle {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Sorting options container */
.sorting-options {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Search container */
.search-container,
.product-search {
    flex: 1 1 300px;
    min-width: 250px;
    max-width: 400px;
}

/* Search input field */
.search-container input[type="text"],
.product-search input[type="text"],
input[placeholder*="Search bulls"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.3s ease;
}

.search-container input[type="text"]:focus,
.product-search input[type="text"]:focus {
    outline: none;
    border-color: #003c71;
    box-shadow: 0 0 0 2px rgba(22, 65, 112, 0.1);
}

/* ============================================
   DESKTOP (1435px and above)
   ============================================ */
@media (min-width: 1435px) {
    .view-sort-container {
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .view-toggle {
        flex: 0 0 auto;
    }
    
    .sorting-options {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 20px;
    }
    
    .search-container,
    .product-search {
        flex: 0 0 auto;
        width: 350px;
        max-width: none;
    }
}

/* ============================================
   TABLET/MEDIUM SCREENS (768px - 1434px)
   Problem area - needs special attention
   ============================================ */
@media (min-width: 768px) and (max-width: 1434px) {
    .view-sort-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px 15px;
    }
    
    /* First row: View buttons and sorting */
    .view-sort-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    }
    
    /* If view-sort-controls doesn't exist, create virtual grouping */
    .view-toggle {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
    }
    
    .sorting-options {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        gap: 8px;
        margin-left: auto;
    }
    
    /* Second row: Search bar */
    .search-container,
    .product-search {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 5px;
    }
    
    /* Button adjustments for this range */
    .view-toggle-button,
    .view-as-table,
    .view-as-grid,
    .view-as-video,
    .sort-option,
    a[class*="sort-"] {
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* Narrower tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .view-sort-container {
        grid-template-columns: 1fr;
    }
    
    /* Stack view and sort buttons vertically on narrower tablets */
    .view-toggle,
    .sorting-options {
        width: 100%;
        justify-content: flex-start;
    }
    
    .sorting-options {
        margin-left: 0;
        margin-top: 5px;
    }
}

/* Wider tablet (1025px - 1434px) */
@media (min-width: 1025px) and (max-width: 1434px) {
    .view-sort-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* View and sort buttons on same line */
    .view-toggle {
        flex: 0 0 auto;
    }
    
    .sorting-options {
        flex: 0 0 auto;
        margin-left: auto;
    }
    
    /* Search on second line */
    .search-container,
    .product-search {
        flex: 1 1 100%;
        margin-top: 10px;
    }
}

/* ============================================
   MOBILE (below 768px)
   ============================================ */
@media (max-width: 767px) {
    .view-sort-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .view-toggle,
    .sorting-options {
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }
    
    .view-toggle > *,
    .sorting-options > * {
        width: 100%;
        text-align: center;
    }
    
    .search-container,
    .product-search {
        width: 100%;
        max-width: 100%;
    }
    
    /* Full width buttons on mobile */
    .view-toggle-button,
    .view-as-table,
    .view-as-grid,
    .view-as-video,
    .sort-option {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   SORTING BUTTONS STYLING
   ============================================ */

/* Base sorting button styles */
.sort-option,
.sorting-options a,
a[class*="sort-"] {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.sort-option:hover,
.sorting-options a:hover {
    background-color: #e8e8e8;
    border-color: #bbb;
    transform: translateY(-1px);
}

.sort-option.active,
.sorting-options a.active {
    background-color: #003c71;
    color: #fff;
    border-color: #003c71;
}

.sort-option.active:hover {
    background-color: #0f2d4d;
    border-color: #0f2d4d;
}

/* ============================================
   SPECIAL HANDLING FOR DIFFERENT CATEGORIES
   ============================================ */

/* Handle variations in markup across different category pages */
.angus-page-container .view-sort-container,
.australian-sires-container .view-sort-container,
.international-sires-container .view-sort-container,
.beef-sires-container .view-sort-container,
.holsteins-container .view-sort-container,
.jersey-container .view-sort-container,
.wagyu-container .view-sort-container,
.charolais-container .view-sort-container,
.hereford-container .view-sort-container,
.murray-grey-container .view-sort-container,
.simmental-container .view-sort-container,
.red-angus-container .view-sort-container,
.south-devon-container .view-sort-container,
.speckle-park-container .view-sort-container {
    /* Ensure consistent container behavior */
    position: relative;
}

/* ============================================
   FLEXBOX FALLBACKS AND FIXES
   ============================================ */

/* Fix for browsers with partial flexbox support */
.view-sort-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure buttons don't break layout */
.view-toggle > *,
.sorting-options > * {
    flex-shrink: 0;
    min-width: 0;
}

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */

/* Ensure dropdowns and overlays work correctly */
.view-sort-container {
    position: relative;
    z-index: 10;
}

.search-container {
    position: relative;
    z-index: 5;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
.view-toggle-button:focus-visible,
.view-as-table:focus-visible,
.view-as-grid:focus-visible,
.view-as-video:focus-visible,
.sort-option:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .view-sort-container {
        display: none;
    }
}