/**
 * Archive Page Plugin - Main Styles
 * 主样式文件：包含所有组件的样式定义
 */

/* ===================================================================
   1. 基础样式
   =================================================================== */
.hk-archive-active::before,
html.hk-archive-active::before {
    display: none !important;
    content: none !important;
}

html.hk-archive-active,
html.hk-archive-active body {
    overflow-x: hidden !important;
}

.archive-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.archive-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
}

.archive-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.archive-subtitle {
    font-size: 1rem;
    color: #666;
    margin: 10px 0 0 0;
}

/* ===================================================================
   2. 筛选侧边栏样式
   =================================================================== */
.archive-filter-sidebar {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

/* Elementor sometimes injects inline styles; use higher specificity + !important for key wrapper styles. */
body .archive-filter-sidebar.archive-filter-sidebar {
    background: #f8f9fa !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
    margin-bottom: 20px !important;
}

/* University archive filter wrapper has custom chrome; keep it stable under Elementor. */
body .university-filter-container.archive-filter-sidebar {
    background: #f9f9f9 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    border: 0 !important;
}

/* University top bar alignment: unify control heights so search/reset align with buttons. */
body .university-filter-container .uni-filter-toggle,
body .university-filter-container #hk-favorites-btn,
body .university-filter-container #university-search-input,
body .university-filter-container .archive-filter-reset {
    height: 36px !important;
    box-sizing: border-box !important;
}

body .university-filter-container #university-search-input {
    padding: 0 10px !important;
    line-height: 36px !important;
}

body .university-filter-container .uni-filter-toggle,
body .university-filter-container #hk-favorites-btn,
body .university-filter-container .archive-filter-reset {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 36px !important;
}

body .university-filter-container .archive-filter-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* University ranking panel: 4 columns, each with min/max inputs. */
.university-filter-container .uni-rank-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.university-filter-container .uni-rank-col {
    flex: 1 1 220px;
    min-width: 200px;
}

.university-filter-container .uni-rank-input-row {
    display: flex;
    gap: 8px;
}

.university-filter-container .uni-rank-input {
    width: 100%;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.archive-filter-sidebar h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
}

.archive-filter-group {
    margin-bottom: 20px;
}

.archive-filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #555;
}

.archive-filter-select,
.archive-filter-select-multi {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.archive-filter-select:focus,
.archive-filter-select-multi:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px rgba(0, 124, 186, 0.1);
}

.archive-filter-btn {
    background: #007cba;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.archive-filter-btn:hover {
    background: #005a87;
}

.archive-filter-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.archive-filter-reset {
    background: #6c757d;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 0px;
    width: 100%;
    transition: background-color 0.2s ease;
}

.archive-filter-reset:hover {
    background: #545b62;
}

/* Inline action row (search + buttons): ensure CSS isn't overridden by theme/button defaults */
.archive-filter-form .archive-filter-actions .archive-filter-btn,
.archive-filter-form .archive-filter-actions .archive-filter-reset {
    width: auto !important;
    margin-top: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
}

.archive-filter-form .archive-filter-actions .archive-filter-btn {
    background: #007cba !important;
    color: #fff !important;
}

.archive-filter-form .archive-filter-actions .archive-filter-btn:hover {
    background: #005a87 !important;
}

.archive-filter-form .archive-filter-actions .archive-filter-reset {
    background: #94a3b8 !important;
    color: #fff !important;
}

.archive-filter-form .archive-filter-actions .archive-filter-reset:hover {
    background: #64748b !important;
}

/* University top bar uses the same reset button class; keep it compact. */
body .university-filter-container .archive-filter-reset {
    width: auto !important;
}

/* ===================================================================
   3. 结果容器样式
   =================================================================== */
.archive-results-container {
    margin-top: 20px;
}

.archive-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
}

.archive-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* ===================================================================
   4. 内容项样式
   =================================================================== */
.archive-archive-item,
.archive-profile-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease;
}

.archive-archive-item:hover,
.archive-profile-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.archive-item-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #333;
}

.archive-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.archive-item-title a:hover {
    color: #007cba;
}

.archive-item-excerpt {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.archive-item-meta {
    font-size: 0.85rem;
    color: #999;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.archive-item-meta span {
    margin-right: 15px;
}

/* ===================================================================
   5. 分页样式
   =================================================================== */
.custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.pagination-page {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

.pagination-page:hover {
    background: #f8f9fa;
    border-color: #007cba;
}

.pagination-page.active {
    background: #007cba;
    color: #fff;
    border-color: #007cba;
    font-weight: 600;
}

.pagination-ellipsis {
    padding: 8px 4px;
    color: #999;
}

/* ===================================================================
   6. 响应式设计
   =================================================================== */
@media (max-width: 768px) {
    .archive-archive-container {
        padding: 0 15px;
    }

    .archive-filter-sidebar {
        margin-bottom: 20px;
    }

    .archive-archive-item,
    .archive-profile-item {
        padding: 15px;
    }

    .archive-item-title {
        font-size: 1.1rem;
    }

    .custom-pagination {
        gap: 3px;
    }

    .pagination-page {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

/* ===================================================================
   Mobile layout fixes for Tutorial/University/Profile archives
   =================================================================== */

/* HK Profile archive: filter grid layout.
   Some front-end builders/themes can override or strip inline <style> output from shortcodes.
   Keep the responsive grid behavior here so filter toggles don’t collapse into a single stack. */
body .hk-profile-filter-form .hk-filter-container .hk-filter-grid {
    /* Global safety: hide filter toggles on desktop + tablet for ALL profile archives,
       even if the shortcode inline <style> is stripped. */
    display: none !important;
}

body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid {
    /* Must be hidden on desktop + tablet; only shown on mobile. */
    display: none !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid > div {
    position: relative;
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 220px !important;
}

body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid .hk-filter-toggle {
    width: 100% !important;
}

@media (max-width: 1199px) {
    body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid > div {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 200px !important;
    }
}

@media (max-width: 900px) {
    body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid {
        gap: 8px !important;
    }

    body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid > div {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid .hk-filter-dropdown {
        /* Keep dropdowns in-flow on small screens, but ensure they can stack above
           adjacent buttons so native selects (e.g. 教学语言) remain tappable. */
        position: relative !important;
        z-index: 50 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 8px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 680px) {
    /* HK profile filter buttons: show ONLY on mobile.
       Also handle cases where a builder/theme wraps multiple items in an extra div/section. */
    body .hk-profile-filter-form .hk-filter-container .hk-filter-grid {
        display: flex !important;
    }

    body .hk-profile-archive-layout .hk-filter-container .hk-filter-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* If the DOM ends up as: .hk-filter-grid > section > .hk-filter-item (or div wrapper),
       flatten that wrapper so each item participates in the 2-column flex layout. */
    body .hk-filter-container .hk-filter-grid > :not(.hk-filter-item) {
        display: contents !important;
    }

    body .hk-filter-container .hk-filter-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body .hk-filter-container .hk-filter-grid > .hk-filter-item {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    body .hk-filter-container .hk-filter-grid .hk-filter-toggle {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Mobile overlay dropdown: keep other filter buttons in place. */
    body .hk-filter-container,
    body .hk-filter-container .hk-filter-grid {
        overflow: visible !important;
    }

    body .hk-profile-filter-form .hk-filter-container .hk-filter-grid .hk-filter-item {
        position: relative !important;
        z-index: auto !important;
    }

    body .hk-profile-filter-form .hk-filter-container .hk-filter-grid .hk-filter-item:focus-within {
        z-index: 1000002 !important;
    }

    body .hk-profile-filter-form .hk-filter-container .hk-filter-grid .hk-filter-toggle.active {
        position: relative !important;
        z-index: 1000001 !important;
    }

    body .hk-profile-filter-form .hk-filter-container .hk-filter-grid .hk-filter-toggle.active + .hk-filter-dropdown {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        margin-top: 0 !important;
        z-index: 1000000 !important;
        max-height: 70vh !important;
        overflow: auto !important;
    }

    /* Generic archives: when toggle buttons (taxonomy/meta) exist, show 2 per row on mobile.
       This prevents the common “first two fit, the rest stack one-per-line” behavior caused by
       intrinsic button widths + wrapping. */
    body .archive-filter-sidebar .archive-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body .archive-filter-sidebar .archive-filter-actions .archive-tax-toggle,
    body .archive-filter-sidebar .archive-filter-actions .archive-meta-toggle {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body .archive-filter-sidebar .archive-filter-actions .archive-filter-search-row {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body .archive-filter-sidebar .archive-filter-actions .archive-filter-search-row .archive-filter-search {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body .archive-filter-sidebar .archive-filter-actions .archive-filter-buttons {
        gap: 6px !important;
    }

    /* Tutorial archive: put “补习类型 / 机构位置” on their own row.
       Keep search + 筛选/重置 on one row (no wrapping). */
    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-tax-toggle,
    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-meta-toggle {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-filter-search-row {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-filter-search-row .archive-filter-search {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body .archive-filter-sidebar[data-post-type="tutorial"] .archive-filter-buttons {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    /* Tutorial cards: add 5px side margins so borders don’t touch screen edges. */
    body .archive-results-wrapper[data-post-type="tutorial"] .archive-results {
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    /* University archive: buttons 2-per-row on mobile; search row stays full width. */
    body .university-filter-container .uni-filter-buttons-row {
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 6px !important;
    }

    body .university-filter-container .uni-filter-buttons-row > * {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body .university-filter-container .uni-filter-buttons-row .uni-filter-toggle,
    body .university-filter-container .uni-filter-buttons-row #hk-favorites-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    body .university-filter-container .uni-filter-buttons-row .uni-filter-toggle span,
    body .university-filter-container .uni-filter-buttons-row #hk-favorites-btn span {
        white-space: nowrap !important;
    }

    /* Use short labels on small screens */
    body .university-filter-container .uni-filter-buttons-row .label-full {
        display: none !important;
    }
    body .university-filter-container .uni-filter-buttons-row .label-short {
        display: inline !important;
    }

    /* Ensure the top bar stacks into two rows cleanly */
    body .university-filter-container form > div[style*="display:flex"][style*="margin-bottom"] {
        flex-wrap: wrap !important;
    }

    body .university-filter-container form > div[style*="display:flex"][style*="margin-bottom"] > div:nth-child(2) {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    body .university-filter-container #university-search-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body .university-filter-container .archive-filter-reset {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    /* HK Profile archive top-row: keep 学校类型 / 入学计算 / 收藏夹 on ONE row (match original behavior). */
    body .hk-profile-archive-layout .hk-filter-buttons-row {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    body .hk-profile-archive-layout .hk-filter-buttons-row > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    body .hk-profile-archive-layout .hk-filter-buttons-row button {
        width: 100% !important;
        justify-content: center !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body .hk-profile-archive-layout .hk-fav-wrapper {
        display: flex !important;
    }

    /* Profile archive: make cards fill the screen width on mobile.
       Some themes center the grid with a max-width; force full width. */
    html.hk-profile-archive-active body .hk-profile-archive-layout,
    html.hk-profile-archive-active body .hk-profile-archive-layout .hk-content,
    html.hk-profile-archive-active body .hk-profile-archive-layout #hk-results-output,
    html.hk-profile-archive-active body .hk-profile-archive-layout .results-grid {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html.hk-profile-archive-active body .hk-profile-archive-layout .results-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.hk-profile-archive-active body .hk-profile-archive-layout .results-grid .profile-card-wrapper {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .archive-archive-title {
        font-size: 1.5rem;
    }

    .archive-filter-sidebar {
        padding: 15px;
    }

    .archive-item-meta span {
        display: block;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* ===================================================================
   7. 动画效果
   =================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.archive-archive-item,
.archive-profile-item {
    animation: fadeIn 0.3s ease-out;
}

/* ===================================================================
   8. 辅助类
   =================================================================== */
.archive-hidden {
    display: none !important;
}

.archive-visible {
    display: block !important;
}

.archive-text-center {
    text-align: center;
}

.archive-mb-10 {
    margin-bottom: 10px;
}

.archive-mb-20 {
    margin-bottom: 20px;
}

.archive-mt-10 {
    margin-top: 10px;
}

.archive-mt-20 {
    margin-top: 20px;
}