/* ============================================================================ ANSPRESS CATEGORY PAGES Uses Design System Variables for Consistency ============================================================================ */ /* Prevent layout shift - ensure width constraints are applied immediately */ /* The actual issue: parent theme or WordPress is wrapping content in a container with max-width */ body.ap-page-category .site-main, body.ap-page-category .page-content, body.tax-question_category .site-main, body.tax-question_category .page-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; display: block !important; overflow: visible !important; } /* Special case: some valid category pages are rendered with Hello's error-page layout. When that happens, gets id="error-page" which can constrain and misalign the content. These rules explicitly neutralize that layout ONLY for question_category archive pages. */ body.tax-question_category#error-page, body.tax-question_category#error-page #content, body.tax-question_category#error-page main.site-main, body.tax-question_category#error-page .page-content, body.tax-question_category#error-page #ap-category-page, body.tax-question_category#error-page .ap-category-page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; text-align: left !important; } /* Ensure the category page container itself is full width */ body.ap-page-category #ap-category-page, body.ap-page-category .ap-category-page, body.tax-question_category #ap-category-page, body.tax-question_category .ap-category-page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; display: block !important; overflow: visible !important; } /* Override ANY container constraints on category pages - target all possible selectors */ body.ap-page-category .container, body.ap-page-category .site-main .container, body.ap-page-category .page-content .container, body.ap-page-category main .container, body.ap-page-category #content .container, body.tax-question_category .container, body.tax-question_category .site-main .container, body.tax-question_category .page-content .container, body.tax-question_category main .container, body.tax-question_category #content .container, .tax-question_category .container, .tax-question_category .site-main .container, .tax-question_category .page-content .container, .tax-question_category main .container, .tax-question_category #content .container { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Prevent any wrapper from constraining width */ body.ap-page-category > *, body.tax-question_category > *, body.ap-page-category #content, body.tax-question_category #content { max-width: 100% !important; width: 100% !important; } /* Category Page Header */ body.ap-page-category .page-header, body.ap-page-category .category-header { background: var(--gradient-purple-light) !important; border-radius: var(--radius-lg) !important; padding: var(--space-8) !important; margin-bottom: var(--space-8) !important; box-shadow: var(--shadow-sm) !important; } body.ap-page-category .page-title, body.ap-page-category .category-title { font-size: var(--font-size-4xl) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-primary-dark) !important; margin: 0 0 var(--space-2) 0 !important; font-family: var(--font-family) !important; } body.ap-page-category .category-description { font-size: var(--font-size-lg) !important; color: var(--color-gray-700) !important; line-height: var(--line-height-relaxed) !important; margin: 0 !important; } /* Category Stats */ body.ap-page-category .category-stats { display: flex !important; gap: var(--space-6) !important; margin-top: var(--space-4) !important; flex-wrap: wrap !important; } body.ap-page-category .category-stat { display: flex !important; align-items: center !important; gap: var(--space-2) !important; padding: var(--space-2) var(--space-4) !important; background: white !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-xs) !important; } body.ap-page-category .category-stat-value { font-size: var(--font-size-xl) !important; font-weight: var(--font-weight-bold) !important; color: var(--color-primary) !important; } body.ap-page-category .category-stat-label { font-size: var(--font-size-sm) !important; color: var(--color-gray-600) !important; } /* Hide sidebar on category pages */ body.ap-page-category #ap-lists aside, body.ap-page-category .ap-question-right, body.ap-page-category .widget-area { display: none !important; } /* Make main content full width */ body.ap-page-category .ap-question-lr .ap-q-left, body.ap-page-category .ap-question-lr .ap-col-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Question Cards in Category */ body.ap-page-category .ap-questions-item { background: white !important; border-radius: var(--radius-lg) !important; padding: var(--space-6) !important; margin-bottom: var(--space-6) !important; border: 2px solid var(--color-gray-200) !important; transition: all var(--transition-base) !important; box-shadow: var(--shadow-sm) !important; } body.ap-page-category .ap-questions-item:hover { border-color: var(--color-primary) !important; box-shadow: var(--shadow-lg) !important; transform: translateY(-2px) !important; } /* Question Inner Layout */ body.ap-page-category .ap-questions-inner, body.tax-question_category .ap-questions-inner { display: flex !important; gap: var(--space-4) !important; align-items: flex-start !important; } /* Avatar Column */ body.ap-page-category .ap-avatar.ap-pull-left, body.tax-question_category .ap-avatar.ap-pull-left { flex-shrink: 0 !important; float: none !important; } /* Badges Column */ body.ap-page-category .ap-list-counts, body.tax-question_category .ap-list-counts { flex-shrink: 0 !important; display: flex !important; flex-direction: row !important; /* Side by side, not stacked */ flex-wrap: nowrap !important; /* Prevent wrapping */ gap: var(--space-2, 0.5rem) !important; /* Horizontal gap */ align-items: center !important; padding-top: 0 !important; /* Remove top padding */ margin-right: var(--space-4, 1rem) !important; /* Space between badges and question */ width: auto !important; } /* Force badges to be inline on category pages */ body.ap-page-category .ap-list-counts .ap-questions-vcount, body.ap-page-category .ap-list-counts .ap-questions-acount, body.tax-question_category .ap-list-counts .ap-questions-vcount, body.tax-question_category .ap-list-counts .ap-questions-acount { display: inline-flex !important; flex-direction: row !important; flex-shrink: 0 !important; width: auto !important; } /* Content Column */ body.ap-page-category .ap-questions-summery, body.tax-question_category .ap-questions-summery { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; /* No gap - using margins on children instead */ } /* Question Title - ensures proper baseline alignment */ body.ap-page-category .ap-questions-title, body.tax-question_category .ap-questions-title { margin-top: 0 !important; margin-bottom: var(--space-2) !important; padding-left: 0 !important; /* Ensure no left padding to align view count with first letter */ } /* View Count Alignment - aligns with first letter of title */ body.ap-page-category .ap-display-question-meta, body.tax-question_category .ap-display-question-meta { margin-top: var(--space-3) !important; padding-left: 0 !important; } /* Question Title in Category */ body.ap-page-category .ap-questions-title a, body.ap-page-category .ap-questions-hyperlink { font-size: var(--font-size-xl) !important; font-weight: var(--font-weight-semibold) !important; color: var(--color-gray-900) !important; line-height: var(--line-height-tight) !important; transition: color var(--transition-fast) !important; } body.ap-page-category .ap-questions-title a:hover { color: var(--color-primary) !important; } /* Vote and Answer Count Badges */ body.ap-page-category .ap-questions-vcount, body.ap-page-category .ap-questions-acount { background: var(--gradient-purple) !important; color: white !important; border-radius: var(--radius-md) !important; padding: var(--space-2) var(--space-4) !important; font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-semibold) !important; box-shadow: var(--shadow-sm) !important; transition: all var(--transition-fast) !important; } body.ap-page-category .ap-questions-acount { background: var(--gradient-gold) !important; } body.ap-page-category .ap-questions-vcount:hover, body.ap-page-category .ap-questions-acount:hover { transform: scale(1.05) !important; box-shadow: var(--shadow-md) !important; } /* Question Metadata */ body.ap-page-category .ap-display-question-meta { font-size: var(--font-size-sm) !important; color: var(--color-gray-600) !important; margin-top: var(--space-3) !important; } body.ap-page-category .ap-display-meta-item { margin-right: var(--space-4) !important; } /* Pagination */ body.ap-page-category .ap-pagination { margin-top: var(--space-8) !important; display: flex !important; justify-content: center !important; gap: var(--space-2) !important; } body.ap-page-category .ap-pagination a, body.ap-page-category .ap-pagination span { padding: var(--space-2) var(--space-4) !important; border-radius: var(--radius-md) !important; border: 2px solid var(--color-gray-300) !important; color: var(--color-gray-700) !important; font-weight: var(--font-weight-medium) !important; transition: all var(--transition-fast) !important; } body.ap-page-category .ap-pagination a:hover { border-color: var(--color-primary) !important; background: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; } body.ap-page-category .ap-pagination .current { background: var(--gradient-purple) !important; color: white !important; border-color: var(--color-primary) !important; } /* Empty State */ body.ap-page-category .ap-no-questions { text-align: center !important; padding: var(--space-16) var(--space-8) !important; background: var(--gradient-purple-light) !important; border-radius: var(--radius-lg) !important; margin: var(--space-8) 0 !important; } body.ap-page-category .ap-no-questions p { font-size: var(--font-size-lg) !important; color: var(--color-gray-600) !important; margin-bottom: var(--space-6) !important; } body.ap-page-category .ap-no-questions .ap-btn-ask { background: var(--gradient-purple) !important; color: white !important; padding: var(--space-4) var(--space-8) !important; border-radius: var(--radius-md) !important; font-size: var(--font-size-lg) !important; font-weight: var(--font-weight-semibold) !important; text-decoration: none !important; display: inline-block !important; transition: all var(--transition-base) !important; box-shadow: var(--shadow-md) !important; } body.ap-page-category .ap-no-questions .ap-btn-ask:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important; color: white !important; } /* ============================================================================ VIRAL CATEGORY PAGE FEATURES ============================================================================ */ /* Category Hero Section */ .ap-category-hero { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(251, 191, 36, 0.15)); border-radius: 20px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .ap-category-hero-content { max-width: 1400px; margin: 0 auto; padding: 0 96px !important; /* Match main content padding for alignment */ box-sizing: border-box !important; } .ap-category-hero-main { display: flex; gap: 1rem !important; /* Reduced spacing */ align-items: flex-start; /* Removed justify-content: space-between to prevent pushing to far right */ } .ap-category-hero-left { flex: 1; max-width: 900px !important; /* Prevent excessive expansion */ text-align: left; margin-right: 0 !important; padding-right: 0 !important; } .ap-category-title { font-size: 3rem; font-weight: 800; color: #1a202c; margin-bottom: 0.75rem; line-height: 1.2; text-align: left; } .ap-category-description { font-size: 1.25rem; color: #4a5568; margin-bottom: 1.5rem; max-width: 800px; text-align: left; } .ap-category-stats { display: flex; justify-content: flex-start; gap: 1.5rem; margin: 1.5rem 0; flex-wrap: wrap; } .ap-category-stat { background: white; padding: 1rem 2rem; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; min-width: 120px; transition: transform 0.2s, box-shadow 0.2s; } .ap-category-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .ap-stat-value { font-size: 2rem; font-weight: 700; color: #8b5cf6; line-height: 1; } .ap-stat-label { font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; } .ap-category-actions { display: flex; gap: 1rem; justify-content: flex-start; margin: 1.5rem 0; flex-wrap: wrap; } .ap-btn { padding: 0.875rem 2rem; border-radius: 12px; font-weight: 600; text-decoration: none; display: inline-block; transition: all 0.3s; border: none; cursor: pointer; font-size: 1rem; } .ap-btn-primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; box-shadow: 0 4px 6px rgba(139, 92, 246, 0.3); } .ap-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4); color: white !important; background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; } .ap-btn-follow { background: white; color: #8b5cf6; border: 2px solid #8b5cf6; } .ap-btn-follow:hover, .ap-btn-follow.ap-following { background: #8b5cf6; color: white !important; } .ap-category-share { display: flex; gap: 0.5rem; justify-content: flex-start; align-items: center; margin-top: 1rem; flex-wrap: wrap; } .ap-share-label { font-size: 0.875rem; color: #6b7280; margin-right: 0.5rem; } .ap-share-btn { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; text-decoration: none; color: white; transition: transform 0.2s; font-weight: 500; } .ap-share-twitter { background: #1da1f2; } .ap-share-facebook { background: #1877f2; } .ap-share-linkedin { background: #0077b5; } .ap-share-reddit { background: #ff4500; } .ap-share-btn:hover { transform: translateY(-2px); color: white; opacity: 0.9; } /* Experts Section */ .ap-category-experts { flex: 0 0 280px !important; /* Fixed width */ width: 280px !important; max-width: 280px !important; margin: 0 !important; padding: 1rem !important; background: #f8fafc; border-radius: 16px; min-height: 200px; } .ap-no-experts-cta { text-align: center; padding: 1rem 0; } .ap-no-experts-title { font-size: 1.25rem; font-weight: 700; color: #1a202c; margin-bottom: 0.75rem; line-height: 1.3; } .ap-no-experts-text { font-size: 0.9375rem; color: #4a5568; margin-bottom: 1rem; line-height: 1.5; } .ap-btn-expert-signup { display: inline-block; margin-top: 0.5rem; } .ap-personalized-cta { text-align: center; padding: 1rem 0; } /* Ensure all buttons in CTA sections have proper hover states */ .ap-personalized-cta .ap-btn, .ap-personalized-cta .ap-btn-primary, .ap-no-experts-cta .ap-btn, .ap-no-experts-cta .ap-btn-primary, .ap-no-experts-cta .ap-btn-expert-signup { color: white !important; } .ap-personalized-cta .ap-btn:hover, .ap-personalized-cta .ap-btn-primary:hover, .ap-no-experts-cta .ap-btn:hover, .ap-no-experts-cta .ap-btn-primary:hover, .ap-no-experts-cta .ap-btn-expert-signup:hover { color: white !important; background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; } .ap-cta-title { font-size: 1.25rem; font-weight: 700; color: #1a202c; margin-bottom: 0.75rem; line-height: 1.3; } .ap-cta-text { font-size: 0.9375rem; color: #4a5568; margin-bottom: 1rem; line-height: 1.5; } /* Prompts Section */ .ap-category-prompts { margin-bottom: 2rem; padding: 2rem 0; } .ap-prompts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .ap-prompt-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #e5e7eb; } .ap-prompt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .ap-prompt-header { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .ap-prompt-tier-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .ap-prompt-tier-badge.tier-free { background: #f0f9ff; color: #0369a1; } .ap-prompt-tier-badge.tier-basic { background: #fef3c7; color: #92400e; } .ap-prompt-tier-badge.tier-premium { background: #f3e8ff; color: #6b21a8; } .ap-prompt-tier-badge.tier-enterprise { background: #e0e7ff; color: #3730a3; } .ap-prompt-validated { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: #d1fae5; color: #065f46; } .ap-prompt-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.4; } .ap-prompt-title a { color: #1a202c; text-decoration: none; } .ap-prompt-title a:hover { color: #8B5CF6; } .ap-prompt-description { font-size: 0.9375rem; color: #4a5568; margin-bottom: 1rem; line-height: 1.5; } .ap-prompt-stats { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: #6b7280; flex-wrap: wrap; } .ap-prompt-stat { display: flex; align-items: center; gap: 0.25rem; } .ap-no-prompts { text-align: center; padding: 2rem; color: #6b7280; font-style: italic; } .ap-loading-prompts { text-align: center; padding: 2rem; color: #6b7280; } .ap-section-title { font-size: 1.75rem; font-weight: 700; color: #1a202c; margin-bottom: 1.5rem; margin-left: 0 !important; /* Ensure no left margin for alignment */ padding-left: 0 !important; /* Ensure no left padding for alignment */ } .ap-experts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .ap-expert-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s; display: flex; gap: 1rem; align-items: flex-start; } .ap-expert-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ap-expert-avatar { flex-shrink: 0; position: relative; } .ap-expert-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .ap-ai-badge { position: absolute; bottom: -4px; right: -4px; background: #f59e0b; color: white; font-size: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700; } .ap-expert-info { flex: 1; } .ap-expert-info h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem 0; } .ap-expert-info h3 a { color: #1a202c; text-decoration: none; } .ap-expert-info h3 a:hover { color: #8b5cf6; } .ap-expert-tags { font-size: 0.875rem; color: #6b7280; margin: 0.5rem 0; } .ap-expert-stats { font-size: 0.875rem; color: #8b5cf6; font-weight: 500; margin: 0.5rem 0; } .ap-btn-small { padding: 0.5rem 1rem; font-size: 0.875rem; margin-top: 0.5rem; } .ap-btn-small:hover { color: white !important; } .ap-btn-small.ap-btn-primary:hover { color: white !important; background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; } .ap-ai-card { border: 2px solid #fbbf24; } /* Main Content Layout with Sidebar */ .ap-category-content-layout { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 2rem !important; max-width: 1400px !important; margin: 1.5rem auto !important; padding: 0 96px !important; /* 1 inch margin on both sides */ align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; clear: both !important; position: relative !important; overflow: visible !important; } /* Force flex layout to work - override parent constraints */ #ap-category-page .ap-category-content-layout, .ap-category-page .ap-category-content-layout, .page-content .ap-category-content-layout { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 96px !important; padding-right: 96px !important; box-sizing: border-box !important; } .ap-category-main-content { flex: 1 !important; order: 1 !important; margin: 0 !important; padding: 0 !important; padding-left: 0 !important; /* Explicitly ensure no left padding */ } /* Sidebar - Single Consolidated Rule Block */ .ap-category-sidebar, #ap-category-page .ap-category-sidebar, .ap-category-page .ap-category-sidebar, .ap-category-content-layout .ap-category-sidebar { /* Flex properties */ flex: 0 0 300px !important; flex-shrink: 0 !important; flex-grow: 0 !important; /* Dimensions */ width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: fit-content !important; /* Position and layout */ position: relative !important; top: 0 !important; order: 2 !important; align-self: flex-start !important; display: block !important; /* Spacing */ margin: 0 !important; padding: 0 !important; /* Reset unwanted properties */ float: none !important; clear: none !important; } /* Learning Paths */ .ap-category-learning-paths { display: none; /* Hidden by default, shown via JS when paths exist */ margin: 1.5rem 0; margin-left: -6px !important; /* Fine-tune alignment with hero title */ padding: 1.5rem 0; /* Remove horizontal padding to align with hero */ background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(251, 191, 36, 0.05)); border-radius: 16px; } .ap-learning-paths-intro { font-size: 1.125rem; color: #4a5568; margin-bottom: 2rem; } .ap-learning-progress { margin-bottom: 2rem; } .ap-progress-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; } .ap-progress-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #f59e0b); transition: width 0.3s; } .ap-progress-text { font-size: 0.875rem; color: #6b7280; margin: 0; } .ap-learning-path-items { display: flex; flex-direction: column; gap: 1rem; } .ap-learning-path-item { background: white; border-radius: 12px; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; border: 2px solid #e5e7eb; transition: all 0.2s; } .ap-learning-path-item.ap-next { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); } .ap-learning-path-item.ap-completed { background: #f0fdf4; border-color: #10b981; } .ap-learning-path-item.ap-locked { opacity: 0.6; cursor: not-allowed; } .ap-path-number { width: 40px; height: 40px; border-radius: 50%; background: #8b5cf6; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .ap-learning-path-item.ap-completed .ap-path-number { background: #10b981; } .ap-learning-path-item.ap-locked .ap-path-number { background: #9ca3af; } .ap-path-content { flex: 1; } .ap-path-check { color: #10b981; font-size: 1.5rem; margin-right: 0.5rem; } .ap-path-lock { color: #9ca3af; font-size: 1.25rem; margin-right: 0.5rem; } .ap-path-content h4 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem 0; } .ap-path-content h4 a { color: #1a202c; text-decoration: none; } .ap-path-content h4 a:hover { color: #8b5cf6; } .ap-path-meta { font-size: 0.875rem; color: #6b7280; margin: 0.25rem 0; } .ap-path-locked-text { font-size: 0.875rem; color: #9ca3af; font-style: italic; margin: 0.5rem 0 0 0; } .ap-learning-actions { margin-top: 2rem; text-align: center; } /* Filtering & Sorting - Compact */ .ap-category-filters { display: flex; justify-content: space-between; align-items: center; margin: 0.5rem 0; padding: 0.375rem 0.75rem; background: #f8fafc; border-radius: 8px; flex-wrap: wrap; gap: 0.5rem; min-height: auto; } .ap-sort-controls { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; } .ap-sort-select { padding: 0.25rem 0.75rem; border-radius: 6px; border: 1px solid #e5e7eb; background: white; font-size: 0.8125rem; cursor: pointer; height: 28px; line-height: 1.2; min-width: 100px; } .ap-filter-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ap-filter-btn { padding: 0.25rem 0.75rem; border-radius: 6px; border: 1px solid #e5e7eb; background: white; color: #6b7280; font-size: 0.8125rem; cursor: pointer; transition: all 0.2s; height: 28px; line-height: 1.2; } .ap-filter-btn:hover, .ap-filter-btn.ap-active { border-color: #8b5cf6; background: #8b5cf6; color: white; } /* Question Badges */ .ap-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-right: 0.5rem; margin-bottom: 0.5rem; } .ap-badge-trending { background: #fef3c7; color: #92400e; } .ap-badge-solved { background: #d1fae5; color: #065f46; } .ap-badge-unanswered { background: #fee2e2; color: #991b1b; } /* Question Actions */ .ap-question-actions { display: none; gap: 0.5rem; margin-top: 1rem; } .ap-questions-item:hover .ap-question-actions { display: flex; } .ap-action-btn { padding: 0.375rem 0.75rem; border-radius: 6px; border: 1px solid #e5e7eb; background: white; color: #6b7280; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; } .ap-action-btn:hover { border-color: #8b5cf6; color: #8b5cf6; } /* Trending Section */ .ap-category-trending { margin: 1.5rem 0 !important; /* Consistent with other sections */ margin-left: -6px !important; /* Align with hero title */ padding: 1.5rem !important; background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(245, 158, 11, 0.05)) !important; /* Subtle gradient matching design system */ border-radius: var(--radius-lg, 16px) !important; /* Standardized border radius */ border-left: 4px solid var(--color-accent-orange, #f59e0b) !important; display: none; /* Hidden by default, shown via JS when content exists */ } /* Ad Placeholder Styles */ .ap-ads-placeholder { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 1rem; text-align: center; } .ap-ads-placeholder-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ap-ads-label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; } .ap-ads-box { background: white; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ap-ads-placeholder-img { width: 100% !important; height: auto !important; display: block !important; border-radius: 4px; max-width: 300px !important; } .ap-ads-size { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; } .ap-trending-list { display: flex; flex-direction: column; gap: var(--spacing-sm, 0.75rem) !important; margin-top: var(--spacing-md, 1rem) !important; } .ap-trending-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md, 1rem) !important; background: white; border-radius: var(--radius-md, 12px) !important; /* Standardized border radius */ transition: var(--transition-base, all 0.3s ease) !important; border: 1px solid rgba(245, 158, 11, 0.1) !important; /* Subtle border */ } .ap-trending-item:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05)) !important; border-color: rgba(245, 158, 11, 0.2) !important; } .ap-trending-item a { color: var(--color-text-primary, #1a202c) !important; text-decoration: none; font-weight: 500; flex: 1; line-height: 1.5; } .ap-trending-item a:hover { color: var(--color-primary-purple, #8b5cf6) !important; } .ap-trending-meta { font-size: var(--font-size-sm, 0.875rem) !important; color: var(--color-text-tertiary, #6b7280) !important; margin-left: var(--spacing-md, 1rem) !important; white-space: nowrap; } /* Activity Feed */ .ap-category-activity { margin: 1.5rem 0 !important; /* Consistent with other sections */ margin-left: -6px !important; /* Align with hero title */ padding: 1.5rem !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.05)) !important; /* Subtle gradient matching design system */ border-radius: var(--radius-lg, 16px) !important; /* Standardized border radius */ } .ap-activity-feed { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.75rem; } .ap-activity-item { padding: 0.625rem 0.75rem; background: white; border-radius: 8px; font-size: 0.875rem; color: #4a5568; line-height: 1.5; } .ap-activity-item strong { color: #1a202c; font-weight: 600; } .ap-activity-action { color: #6b7280; margin: 0 0.25rem; } .ap-activity-item a { color: #8b5cf6; text-decoration: none; margin-left: 0.25rem; } .ap-activity-item a:hover { text-decoration: underline; } .ap-activity-time { color: #9ca3af; font-size: 0.8125rem; margin-left: 0.5rem; } /* Related Categories */ .ap-related-categories { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid #e5e7eb; } .ap-related-categories h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #1a202c; } .ap-related-categories-list { display: flex; flex-wrap: wrap; gap: 0.75rem; } .ap-related-category { padding: 0.75rem 1.25rem; background: white; border: 2px solid #e5e7eb; border-radius: 8px; text-decoration: none; display: flex; flex-direction: column; transition: all 0.2s; min-width: 150px; } .ap-related-category:hover { border-color: #8b5cf6; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .ap-category-name { font-weight: 600; color: #1a202c; margin-bottom: 0.25rem; } .ap-category-count { font-size: 0.875rem; color: #6b7280; } /* Loading States */ .ap-loading { opacity: 0.6; pointer-events: none; } .ap-loading-experts { text-align: center; padding: 2rem; color: #6b7280; } /* Toast Notifications */ .ap-toast { position: fixed; bottom: 2rem; right: 2rem; background: #1a202c; color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(20px); transition: all 0.3s; z-index: 10000; } .ap-toast.ap-show { opacity: 1; transform: translateY(0); } /* Mobile Responsive */ @media (max-width: 1200px) { .ap-category-content-layout { padding: 0 48px; /* Reduce margins on smaller screens */ } } @media (max-width: 1024px) { .ap-category-content-layout { flex-direction: column; padding: 0 24px; } .ap-category-sidebar { flex: 1 1 100%; width: 100%; position: static; max-width: 300px; margin: 1rem auto; } } @media (max-width: 768px) { .ap-category-content-layout { padding: 0 16px; } .ap-category-hero-main { flex-direction: column; gap: 1.5rem; } .ap-category-experts { flex: 1 1 100%; width: 100%; } .ap-category-title { font-size: 2rem; } .ap-category-stats { gap: 1rem; } .ap-category-stat { min-width: 100px; padding: 0.75rem 1rem; } .ap-stat-value { font-size: 1.5rem; } .ap-category-actions { flex-direction: column; } .ap-btn { width: 100%; text-align: center; } .ap-experts-list { grid-template-columns: 1fr; } .ap-category-filters { flex-direction: column; align-items: stretch; } .ap-filter-controls { width: 100%; } .ap-filter-btn { flex: 1; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ap-questions-item { animation: fadeIn 0.3s ease-out; } .ap-expert-card { animation: fadeIn 0.3s ease-out; }