/**
 * Card Header Improvements
 * BoxStory - Brand Color System Integration
 *
 * Improved card headers with:
 * - Smaller, more refined text
 * - Border radius for modern look
 * - Consistent brand colors
 * - Better spacing and typography
 */

/* ============================================================================
   BASE CARD HEADER STYLES
   ============================================================================ */

.card-header {
    background: var(--bg-white);
    border-bottom: 0.125rem solid var(--border-light);
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    border-radius: 0.75rem 0.75rem 0 0 !important;
    letter-spacing: 0.01875rem;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-navy);
}

/* ============================================================================
   CARD HEADER VARIANTS - Brand Colors
   ============================================================================ */

/* Light Header (Default Enhanced) */
.card-header.bg-light {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 0.125rem solid var(--border-light);
}

/* White Header with Border */
.card-header.bg-white {
    background: var(--bg-white);
    color: var(--text-primary);
    border-bottom: 0.125rem solid var(--border-light);
}

/* Primary Header - Aqua */
.card-header.bg-primary {
    background: var(--gradient-primary);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
    color: white;
}

/* Success Header - Green */
.card-header.bg-success {
    background: linear-gradient(135deg, var(--semantic-success) 0%, #059669 100%);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6 {
    color: white;
}

/* Danger Header - Coral */
.card-header.bg-danger {
    background: linear-gradient(135deg, var(--semantic-error) 0%, #dc2626 100%);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6 {
    color: white;
}

/* Warning Header - Orange */
.card-header.bg-warning {
    background: linear-gradient(135deg, var(--semantic-warning) 0%, #f59e0b 100%);
    color: var(--color-navy);
    border-bottom: none;
    font-weight: 600;
}

.card-header.bg-warning h1,
.card-header.bg-warning h2,
.card-header.bg-warning h3,
.card-header.bg-warning h4,
.card-header.bg-warning h5,
.card-header.bg-warning h6 {
    color: var(--color-navy);
}

/* Info Header - Aqua */
.card-header.bg-info {
    background: var(--gradient-primary);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

/* Navy Header */
.card-header.bg-navy {
    background: var(--gradient-secondary);
    color: white;
    border-bottom: none;
    font-weight: 600;
}

.card-header.bg-navy h1,
.card-header.bg-navy h2,
.card-header.bg-navy h3,
.card-header.bg-navy h4,
.card-header.bg-navy h5,
.card-header.bg-navy h6 {
    color: white;
}

/* ============================================================================
   PAGE HEADERS
   ============================================================================ */

.page-header {
    background: var(--gradient-primary);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
    letter-spacing: -0.03125rem;
}

.page-header p {
    font-size: 0.875rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    color: white;
}

/* ============================================================================
   DASHBOARD HEADERS
   ============================================================================ */

.dashboard-header {
    background: var(--gradient-navy-aqua);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

.dashboard-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: white;
    letter-spacing: -0.0625rem;
}

.dashboard-header p {
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    color: white;
}

/* ============================================================================
   ITEM HEADERS (for list items)
   ============================================================================ */

.item-header {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 0.25rem solid var(--color-aqua);
}

/* ============================================================================
   SPECIFIC HEADER TYPES
   ============================================================================ */

/* Form Header */
.form-header {
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 0.125rem solid var(--border-light);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-navy);
}

/* Blog Header */
.blog-header,
.my-blogs-header,
.user-blogs-header {
    background: var(--gradient-primary);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    text-align: center;
}

.blog-header h1,
.my-blogs-header h1,
.user-blogs-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: white;
    letter-spacing: -0.0625rem;
}

/* Category Header */
.category-header {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    border-left: 0.375rem solid var(--color-aqua);
}

.category-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--color-navy);
}

.category-header p {
    font-size: 1rem;
    margin: 0;
    color: var(--text-secondary);
}

/* Store Header */
.store-header-container {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.store-header-mini {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--color-aqua);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Bio Card Header */
.bio-card-header {
    background: var(--gradient-primary);
    color: white;
    padding: 1.25rem;
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Creator Header */
.creator-header {
    background: var(--bg-white);
    padding: 0.875rem 1.25rem;
    border-bottom: 0.125rem solid var(--border-light);
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Response Header */
.response-header {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--color-aqua);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Delete Header */
.delete-header {
    background: linear-gradient(135deg, var(--semantic-error) 0%, #dc2626 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Admin Header */
.admin-header {
    background: var(--gradient-secondary);
    color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

.admin-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

/* Tips Header */
.tips-header {
    background: var(--color-aqua-lightest);
    padding: 0.875rem 1.25rem;
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--color-aqua);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 1rem;
}

.tips-header i {
    color: var(--color-aqua);
    margin-right: 0.5rem;
}

/* ============================================================================
   HEADER BORDER VARIANTS
   ============================================================================ */

.card-header.border-bottom {
    border-bottom: 0.125rem solid var(--border-light);
}

.card-header.border-aqua {
    border-left: 0.25rem solid var(--color-aqua);
}

.card-header.border-coral {
    border-left: 0.25rem solid var(--color-coral);
}

.card-header.border-success {
    border-left: 0.25rem solid var(--semantic-success);
}

.card-header.border-navy {
    border-left: 0.25rem solid var(--color-navy);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 48rem) {
    .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        font-size: 0.9rem;
    }

    .page-header {
        padding: 1.25rem 1.5rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .dashboard-header {
        padding: 1.5rem;
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
    }

    .blog-header h1,
    .my-blogs-header h1,
    .user-blogs-header h1 {
        font-size: 1.5rem;
    }

    .category-header {
        padding: 1.5rem;
    }

    .category-header h1 {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   ACCESSIBILITY & PRINT
   ============================================================================ */

@media print {
    .card-header,
    .page-header,
    .dashboard-header {
        background: white;
        color: black;
        border: 0.0625rem solid black;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-header {
        border-width: 0.1875rem;
    }
}