/**
 * Global Override Styles for Cryptoatics Help Center
 * These styles are meant to take precedence over theme styles
 * Unified naming scheme for both article and category pages
 * 
 * IMPORTANT: The spacing between help-center-navigation and help-center-layout
 * must be consistent across all page types (article, category, search results).
 * This is achieved by setting a standardized padding-top of 60px on .help-center-layout.
 * Do not override this with inline styles in templates or JavaScript.
 */

/* Base container styling */
.help-center {
    margin-top: 0 !important;
    width: 100% !important;
}

/* IMPORTANT: Do not add extra classes to the help-center div on different page types.
   The search page, category page, and article page should all use identical class structure:
   <div class="help-center">
   Any page-specific styling should be added in the global-override.css file.
*/


/* Layout structure - Updated with !important for padding-top to ensure consistency */
.help-center-layout {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 60px 20px 40px !important; /* Set consistent 60px top padding */
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Common grid layout - used for both article and category pages */
.chc-content-layout,
.help-center .chc-content-layout,
.help-center-layout .chc-content-layout,
.search-results-template .chc-content-layout,
.article-layout,
.category-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 40px !important;
    width: 100% !important;
}




/* Main content area */
.chc-main {
    width: 100% !important;
    margin-top: 0 !important; 
    padding-top: 0 !important;
}


.nav-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* Breadcrumbs - unified for both article and category */
.chc-breadcrumbs {
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
}

.chc-breadcrumbs a {
    color: var(--chc-text-muted, #888) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.chc-breadcrumbs a:hover {
    color: var(--chc-primary, #00ff9d) !important;
}

/* Support all separator and current page class names for backward compatibility */
.breadcrumb-separator,
.chc-breadcrumb-separator {
    color: var(--chc-text-muted, #888) !important;
}

.current-page,
.chc-current {
    color: var(--chc-text-light, #fff) !important;
    font-weight: 500 !important;
}

/* Items list - used for both article list and category list */
.chc-items-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
}

/* Item card - used for both article card and category card */
.chc-item-card {
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.chc-item-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Global title styles for all help center pages - consolidated from both files */
.chc-item-title,
h1,
.chc-help-center h1,
.chc-article h1,
.chc-article-header h1,
.chc-category h1,
.chc-category-header h1,
.chc-help-center-container h1,
.help-center-navigation h1,
.chc-article-title,
h1.category-title,
h1.chc-item-title {
    font-size: 30px !important;
    color: var(--chc-text-primary, #ffffff) !important; /* Using CSS variable with fallback */
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

/* Exception for hero title which should be larger */
.chc-hero-title {
    font-size: 2.5rem !important;
}

/* For non-h1 item titles (like in listings) */
h2.chc-item-title,
h3.chc-item-title,
h4.chc-item-title,
.chc-item-card .chc-item-title {
    font-size: 20px !important;
    margin: 0 0 12px !important;
    font-weight: 600 !important;
    color: var(--chc-text-light, #fff) !important;
}

.chc-item-title a {
    color: var(--chc-text-light, #fff) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.chc-item-title a:hover {
    color: var(--chc-primary, #00ff9d) !important;
}

/* Item excerpt */
.chc-item-excerpt {
    color: var(--chc-text-muted, #888) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
}

/* Item meta */
.chc-item-meta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: var(--chc-text-muted, #888) !important;
}

.chc-item-meta i {
    margin-right: 6px !important;
}

/* Sidebar styling */
.chc-sidebar {
    position: sticky !important;
    top: 24px !important;
    width: 300px !important;
}

.chc-sidebar-section {
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 24px !important;
}

.chc-sidebar-section h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 16px !important;
    color: var(--chc-text-light, #fff) !important;
}

.chc-sidebar-section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chc-sidebar-section li {
    margin-bottom: 16px !important;
}

.chc-sidebar-section li:last-child {
    margin-bottom: 0 !important;
}

.chc-sidebar-section a {
    color: var(--chc-text-light, #fff) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    display: block !important;
    transition: color 0.3s ease !important;
}

.chc-sidebar-section a:hover {
    color: var(--chc-primary, #00ff9d) !important;
}

/* Item header */
.chc-item-header {
    margin-bottom: 40px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

/* Category icon styling */
.chc-category-icon {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 255, 157, 0.1) !important;
    border-radius: 12px !important;
    color: #00ff9d !important;
    transition: all 0.3s ease !important;
}

.chc-category-icon i {
    font-size: 22px !important;
}

/* Item info container */
.chc-item-info {
    flex-grow: 1 !important;
}

/* Item count badge */
.chc-item-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Item content */
.chc-item-content {
    color: var(--chc-text-muted, #888) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 40px !important;
}

/* Item feedback */
.chc-item-feedback {
    margin-top: 40px !important;
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
}

.chc-item-feedback h3 {
    color: var(--chc-text-light, #fff) !important;
    margin-bottom: 16px !important;
}

/* Feedback buttons */
.feedback-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

.feedback-btn {
    padding: 12px 24px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--chc-text-light, #fff) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.feedback-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Feedback states - only applied after selection */
.feedback-btn.helpful.selected {
    background: var(--chc-success, #00ff9d) !important;
    color: #000 !important;
    border-color: var(--chc-success, #00ff9d) !important;
}

.feedback-btn.not-helpful.selected {
    background: var(--chc-error, #ff3d00) !important;
    color: #fff !important;
    border-color: var(--chc-error, #ff3d00) !important;
}

.feedback-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.feedback-message {
    margin-top: 16px !important;
    color: var(--chc-text-muted, #888) !important;
}

.success-message h3 {
    color: var(--chc-success, #00ff9d) !important;
}

.error-message p {
    color: var(--chc-error, #ff3d00) !important;
}

/* Count badges for categories and items */
.chc-count-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    color: var(--chc-text-muted, #888) !important;
}

/* Remove any external padding */
body .site-content-wrap {
    padding-top: 0 !important;
}

/* Responsive design */
@media (max-width: 1024px) {
    .chc-content-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .chc-sidebar {
        position: static !important;
        margin-top: 40px !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .help-center-layout {
        padding: 20px 15px 30px !important;
    }

    .nav-content {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .nav-search {
        width: 100% !important;
    }
    
    /* Consolidated responsive heading styles */
    .chc-item-title,
    h1,
    .chc-help-center h1,
    .chc-article h1,
    .chc-article-header h1,
    .chc-category h1,
    .chc-category-header h1,
    .chc-help-center-container h1,
    .help-center-navigation h1,
    .chc-article-title {
        font-size: 26px !important;
    }
    
    .chc-hero-title {
        font-size: 2rem !important;
    }
}

@media (max-width: 576px) {
    /* Consolidated responsive heading styles */
    .chc-item-title,
    h1,
    .chc-help-center h1,
    .chc-article h1,
    .chc-article-header h1,
    .chc-category h1,
    .chc-category-header h1,
    .chc-help-center-container h1,
    .help-center-navigation h1,
    .chc-article-title {
        font-size: 24px !important;
    }
    
    .chc-hero-title {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 480px) {
    .chc-container {
        padding: 16px 12px !important;
        border-radius: 8px !important;
        border: none !important;
    }
}


/* Fix for any inline styles that might be overriding our layout */
body .help-center-layout {
    padding-top: 60px !important;
}