/* Critical CSS Tokens - Inline for reliability */
:root {
    --pca-primary: #3b82f6;
    --pca-surface: #ffffff;
    --pca-border: #e4e4e4;
    --pca-border-light: #f3f4f6;
    --pca-text-primary: #111827;
    --pca-text-secondary: #6b7280;
    --pca-text-muted: #9ca3af;
    --pca-spacing-xs: 4px;
    --pca-spacing-sm: 8px;
    --pca-spacing-md: 16px;
    --pca-spacing-lg: 24px;
    --pca-spacing-xl: 32px;
    --pca-radius-pill: 9999px;
}

/* Header Section Container */
.pca-header-section {
    background: var(--pca-surface);
    border-bottom: 1px solid var(--pca-border);
    margin-bottom: 0;
}

.pca-header-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Breadcrumbs - Consistent with landing.php */
#pca-breadcrumbs-nav,
#pca-breadcrumbs-nav.pca-breadcrumbs {
    padding: var(--pca-spacing-sm) 0;
    font-size: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #6c757d;
    font-weight: 400;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

#pca-breadcrumbs-nav a,
#pca-breadcrumbs-nav.pca-breadcrumbs a {
    color: #6c757d !important;
    font-size: 12px !important;
    font-family: inherit !important;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

#pca-breadcrumbs-nav a:hover,
#pca-breadcrumbs-nav.pca-breadcrumbs a:hover {
    color: #495057 !important;
    background-color: rgba(108, 117, 125, 0.1) !important;
    text-decoration: none;
}

#pca-breadcrumbs-nav span,
#pca-breadcrumbs-nav.pca-breadcrumbs span {
    font-size: 12px !important;
    font-family: inherit !important;
}

.pca-breadcrumb-separator {
    margin: 0 0.5rem;
    color: #adb5bd;
    font-weight: 600;
    flex-shrink: 0;
}

/* Filter Pills Bar */
.pca-pills-section {
    padding: var(--pca-spacing-md) 0;
    border-bottom: 1px solid var(--pca-border-light);
    position: relative;
}

.pca-pills-wrapper {
    position: relative;
    overflow: hidden;
}

.pca-pills-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: var(--pca-spacing-xs) 40px var(--pca-spacing-xs) 0;
}

.pca-pills-container::-webkit-scrollbar {
    display: none;
}

/* Scroll arrow buttons */
.pca-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--pca-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.pca-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.pca-scroll-arrow:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pca-scroll-arrow-left {
    left: 0;
}

.pca-scroll-arrow-right {
    right: 0;
}

.pca-scroll-arrow i {
    font-size: 12px;
    color: #666;
}

/* Ghost Pills - Using ID for higher specificity */
#pca-pills-toolbar .pca-filter-pill,
.pca-filter-pill {
    display: inline-flex;
    white-space: nowrap;
    height: 2.5rem;
    flex-flow: row nowrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 14px !important;
    border-radius: 2.8125rem;
    cursor: pointer;
    background-color: #f5f5f5;
    border: 1px solid var(--pca-border);
    padding: 0.6875rem 0.9375rem;
    color: #333333;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

/* Ensure font size for all text inside pills */
#pca-pills-toolbar .pca-filter-pill span,
#pca-pills-toolbar .pca-filter-pill i,
.pca-filter-pill span,
.pca-filter-pill i {
    font-size: 14px !important;
    line-height: 14px !important;
}

.pca-filter-pill:hover {
    border-color: var(--pca-text-secondary);
    background: #e8e8e8;
    color: #333333;
    text-decoration: none;
}

.pca-filter-pill.active {
    background: #ff9900;
    border-color: #ff9900;
    color: #ffffff;
}

.pca-filter-pill:focus {
    outline: 2px solid #ff9900;
    outline-offset: 2px;
}

.pca-filter-pill i {
    font-size: 14px;
    transition: transform 0.15s ease;
}

/* Special styling for Filters pill button */
.pca-filter-pill#pca-filters-btn {
    cursor: pointer;
    background: #fff;
    border: 2px solid #000;
    position: relative;
    margin-right: 20px; /* Add right margin for separator space */
}

/* Vertical separator after Filters button */
.pca-filter-pill#pca-filters-btn::after {
    content: '';
    position: absolute;
    right: -24px; /* Add more spacing between Filters and separator */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: #c3c3c3; /* Lighter gray color */
    pointer-events: none;
    z-index: 1; /* Ensure separator is behind the next pill */
}

/* Filter count badge */
.pca-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: #ff9900;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    line-height: 1;
}

/* Title & Sort Section */
.pca-title-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--pca-spacing-md) 0;
    gap: var(--pca-spacing-lg);
}

.pca-title-content {
    flex: 1;
}

.pca-main-title {
    font-size: 26px !important;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    margin: 0 0 var(--pca-spacing-sm) 0;
}

.pca-page-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pca-text-secondary);
    margin: 0;
    max-width: 600px;
}

.pca-sort-control {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--pca-spacing-md);
    background: var(--pca-surface);
    border: unset !important;
    border-radius: var(--pca-spacing-sm);
    color: #505765;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 0px;
    flex-shrink: 0;
    text-decoration: underline;
}

.pca-sort-control:hover {
    background-color: #f9fafb;
    border-color: var(--pca-text-secondary);
}

.pca-sort-control:focus {
    outline: 2px solid #ff9900;
    outline-offset: 2px;
}

/* Meta (count) */
.pca-results-line {
    display: flex;
    align-items: center;
    color: var(--pca-text-muted);
    font-size: 0.8125rem;
    padding: 8px 0 4px;
}

/* NOTE: .pca-controls-line removed in V2 toolbar update */

.pca-meta-info {
    display: flex;
    align-items: center;
}

.pca-meta-separator {
    margin: 0 var(--pca-spacing-sm);
}

/* Search component in toolbar */
.pca-toolbar-search {
    flex: 0 1 300px;
    min-width: 200px;
}

/* TOOLBAR SEARCH: kill sidebar spacing and apply correct wrapper styles */
.pca-toolbar-search .pcat-search-component,
.pca-toolbar-search .pcat-search-form,
.pca-toolbar-search .pcat-search-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override any sidebar-specific margin that might leak */
.pca-toolbar-search .sidebar-item .pcat-search-component {
    margin: 0 !important;
}

/* Use the real class name (pcat-), not pca- */
.pca-toolbar-search .pcat-search-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
}

/* Ensure the input behaves inside the wrapper */
.pca-toolbar-search .pcat-search-input {
    height: 38px !important;
    line-height: 20px !important;
    padding: 0 !important;
}

/* Algolia container should not create flow height */
.pca-toolbar-search .algolia-autocomplete {
    display: block !important;
}

.pca-toolbar-search .algolia-autocomplete .aa-dropdown-menu {
    position: fixed !important;
    margin-top: 4px !important;
}

/* Updated input styling for the correct class */
.pca-toolbar-search .pcat-search-input,
.pca-toolbar-search .pcat-search-input:focus,
.pca-toolbar-search .pcat-search-input:active {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 14px !important;
    -webkit-text-fill-color: #111827 !important;
}

.pca-toolbar-search .pcat-search-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
}

.pca-toolbar-search .pcat-search-wrapper:hover {
    border-color: #9ca3af !important;
}

.pca-toolbar-search .pcat-search-wrapper:focus-within {
    border-color: #ff9900 !important;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.1) !important;
}

/* Ensure placeholder is visible */
.pca-toolbar-search .pcat-search-input::placeholder {
    color: #9ca3af !important;
}

/* Clear button alignment in toolbar */
.pca-toolbar-search .pcat-search-clear {
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

/* Force text visibility with highest specificity */
div.pca-toolbar-search input.pcat-search-input {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
}

/* Override any autocomplete styling */
.pca-toolbar-search input.pcat-search-input:-webkit-autofill,
.pca-toolbar-search input.pcat-search-input:-webkit-autofill:hover,
.pca-toolbar-search input.pcat-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* Algolia dropdown positioning for toolbar */
.pca-toolbar-search .algolia-autocomplete .aa-dropdown-menu {
    position: fixed !important;
    margin-top: 4px;
}

/* Responsive Design - Consistent with landing.php */
@media (max-width: 768px) {
    /* Phase 5: Compress title section for above-fold optimization */
    .pca-title-section {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pca-spacing-sm);
        padding: var(--pca-spacing-sm) 0;
    }

    .pca-main-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: var(--pca-spacing-xs);
    }

    .pca-page-excerpt {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 0;
    }
    
    .pca-sort-control {
        align-self: flex-start;
        width: auto;
    }
    
    /* NOTE: .pca-controls-line mobile styles removed in V2 toolbar update */
    
    /* Mobile Touch Targets */
    .pca-filter-pill {
        height: 2.75rem; /* Slightly larger for mobile touch */
        padding: 0.75rem 1rem;
    }
    
    .pca-sort-control {
        height: 44px;
        flex-shrink: 0;
    }
    
    .pca-pills-container {
        gap: var(--pca-spacing-sm);
    }
    
    /* Horizontal scrolling for breadcrumbs on mobile */
    #pca-breadcrumbs-nav,
    #pca-breadcrumbs-nav.pca-breadcrumbs,
    .pca-breadcrumbs {
        font-size: 12px !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    #pca-breadcrumbs-nav::-webkit-scrollbar,
    #pca-breadcrumbs-nav.pca-breadcrumbs::-webkit-scrollbar,
    .pca-breadcrumbs::-webkit-scrollbar {
        display: none;
    }
    
    #pca-breadcrumbs-nav a,
    #pca-breadcrumbs-nav span {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .pca-main-title {
        font-size: 18px !important;
    }
    
    .pca-header-container {
        padding: 0 var(--pca-spacing-sm);
    }
    
    /* Stack search and sort vertically on very small screens */
    .pca-meta-right {
        flex-direction: column;
        gap: var(--pca-spacing-sm);
    }
    
    .pca-toolbar-search,
    .pca-sort-control {
        width: 100%;
    }
}