/**
 * Product HTML Content Styling
 * Enhances .wp-content styling for product pages
 * Centered boxed layout with enhanced table styling
 *
 * @package Remko_Theme
 * @since 1.0.0
 */

/* Centered Boxed Container for Content */
.pattern-d-html-content,
.full-content,
.custom-content {
    background: #f8f9fa !important;
    padding: 4rem 0 !important;
}

.pattern-d-html-content .container--boxed,
.full-content,
.custom-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: white !important;
    padding: 3rem 2.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 768px) {
    .pattern-d-html-content .container--boxed,
    .full-content,
    .custom-content {
        padding: 2rem 1.5rem !important;
        margin: 0 1rem !important;
    }
}

/* Enhanced Table Styling for Product Specifications */
.wp-content table,
.pattern-d-html-content table,
.full-content table,
.custom-content table,
article table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 2rem 0 !important;
    font-size: 0.9rem !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.wp-content thead,
.pattern-d-html-content thead,
.full-content thead,
.custom-content thead,
article thead {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%) !important;
}

.wp-content th,
.pattern-d-html-content th,
.full-content th,
.custom-content th,
article th {
    padding: 1rem 0.75rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.wp-content td,
.pattern-d-html-content td,
.full-content td,
.custom-content td,
article td {
    padding: 0.875rem 0.75rem !important;
    text-align: left !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    background: transparent !important;
}

.wp-content tbody tr:nth-child(even),
.pattern-d-html-content tbody tr:nth-child(even),
.full-content tbody tr:nth-child(even),
.custom-content tbody tr:nth-child(even),
article tbody tr:nth-child(even) {
    background: #f8f9fa !important;
}

.wp-content tbody tr:hover,
.pattern-d-html-content tbody tr:hover,
.full-content tbody tr:hover,
.custom-content tbody tr:hover,
article tbody tr:hover {
    background: #f0f7ff !important;
}

.wp-content td strong,
.pattern-d-html-content td strong,
.full-content td strong,
.custom-content td strong,
article td strong {
    color: #2c5aa0 !important;
    font-weight: 600 !important;
}

/* Table wrapper for mobile scroll */
.wp-content table,
.pattern-d-html-content table,
.full-content table,
.custom-content table,
article table {
    display: block !important;
    overflow-x: auto !important;
}

@media (max-width: 768px) {
    .wp-content table,
    .pattern-d-html-content table,
    article table {
        font-size: 0.8rem !important;
    }

    .wp-content th,
    .wp-content td,
    .pattern-d-html-content th,
    .pattern-d-html-content td,
    article th,
    article td {
        padding: 0.5rem 0.4rem !important;
    }
}

/* Blockquote Styling */
.wp-content blockquote,
.pattern-d-html-content blockquote,
.full-content blockquote,
.custom-content blockquote,
article blockquote {
    background: rgba(200, 230, 0, 0.1) !important;
    border-left: 4px solid var(--accent, #C8E600) !important;
    padding: 1.25rem 1.5rem !important;
    margin: 2rem 0 !important;
    border-radius: 4px !important;
    font-style: normal !important;
}

.wp-content blockquote p,
.pattern-d-html-content blockquote p,
.full-content blockquote p,
.custom-content blockquote p,
article blockquote p {
    margin: 0 !important;
    color: #374151 !important;
    font-size: 1rem !important;
}

/* Enhanced List Styling */
.wp-content ul,
.pattern-d-html-content ul,
.full-content ul,
.custom-content ul,
article ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.wp-content ul li,
.pattern-d-html-content ul li,
.full-content ul li,
.custom-content ul li,
article ul li {
    padding-left: 1.75rem !important;
    position: relative !important;
    margin-bottom: 0.75rem !important;
}

.wp-content ul li::before,
.pattern-d-html-content ul li::before,
.full-content ul li::before,
.custom-content ul li::before,
article ul li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--accent, #C8E600) !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

/* Section Spacing */
.wp-content h2,
.pattern-d-html-content h2,
.full-content h2,
.custom-content h2,
article h2 {
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid var(--accent, #C8E600) !important;
    color: #2c2c2c !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.wp-content h2:first-child,
.pattern-d-html-content h2:first-child,
.full-content h2:first-child,
.custom-content h2:first-child,
article h2:first-child {
    margin-top: 0 !important;
}

.wp-content h3,
.pattern-d-html-content h3,
.full-content h3,
.custom-content h3,
article h3 {
    color: #2c2c2c !important;
    font-size: 1.1rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

/* Horizontal Rule */
.wp-content hr,
.pattern-d-html-content hr,
.full-content hr,
.custom-content hr,
article hr {
    border: none !important;
    border-top: 2px solid #e5e7eb !important;
    margin: 3rem 0 !important;
}

/* Links Styling */
.wp-content a,
.pattern-d-html-content a,
.full-content a,
.custom-content a,
article a {
    color: var(--accent, #C8E600) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.wp-content a:hover,
.pattern-d-html-content a:hover,
.full-content a:hover,
.custom-content a:hover,
article a:hover {
    color: #2c5aa0 !important;
    text-decoration: underline !important;
}

/* Strong/Bold Text */
.wp-content strong,
.pattern-d-html-content strong,
.full-content strong,
.custom-content strong,
article strong {
    font-weight: 600 !important;
    color: #2c2c2c !important;
}

/* Paragraphs */
.wp-content p,
.pattern-d-html-content p,
.full-content p,
.custom-content p,
article p {
    line-height: 1.7 !important;
    margin-bottom: 1.25rem;
    color: #374151 !important;
}

/* Better spacing for content sections */
.wp-content > * + *,
.pattern-d-html-content > * + *,
.full-content > * + *,
.custom-content > * + *,
article > * + * {
    margin-top: 1rem !important;
}

.wp-content > h2 + *,
.pattern-d-html-content > h2 + *,
.full-content > h2 + *,
.custom-content > h2 + *,
article > h2 + * {
    margin-top: 1.5rem !important;
}

.wp-content > h3 + *,
.pattern-d-html-content > h3 + *,
.full-content > h3 + *,
.custom-content > h3 + *,
article > h3 + * {
    margin-top: 1rem !important;
}