/**
 * InoriWeb SEO - Frontend Fixes
 *
 * Global CSS to ensure all content (from any source) displays correctly
 * Especially important for AI-generated content that may have formatting issues
 */

/* =============================================================================
   TABLE FIXES - Make ALL tables responsive on mobile
   ============================================================================= */

/* Target all tables in post content */
.entry-content table,
.post-content table,
article table,
.wp-block-post-content table {
    /* Ensure table doesn't break layout */
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/* If table is NOT already wrapped in overflow div, make it scrollable on mobile */
@media screen and (max-width: 768px) {
    .entry-content table,
    .post-content table,
    article table,
    .wp-block-post-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Ensure table cells have proper padding - EXCLUDE .inoriweb-table (uses custom borders) */
/* Also exclude tables inside div.inoriweb-table wrapper (agent mistake) */
.entry-content table:not(.inoriweb-table):not(.inoriweb-table table) th,
.entry-content table:not(.inoriweb-table):not(.inoriweb-table table) td,
.post-content table:not(.inoriweb-table):not(.inoriweb-table table) th,
.post-content table:not(.inoriweb-table):not(.inoriweb-table table) td,
article table:not(.inoriweb-table):not(.inoriweb-table table) th,
article table:not(.inoriweb-table):not(.inoriweb-table table) td {
    padding: 12px;
    border: 1px solid #e5e7eb;
}

/* Explicitly exclude tables inside div.inoriweb-table wrapper */
.inoriweb-table table th,
.inoriweb-table table td {
    /* Don't apply any styles - let content-classes.css handle it */
}

/* Dark table headers styling - EXCLUDE .inoriweb-table (uses custom colors) */
/* Also exclude tables inside div.inoriweb-table wrapper */
.entry-content table:not(.inoriweb-table) thead tr,
.post-content table:not(.inoriweb-table) thead tr,
article table:not(.inoriweb-table) thead tr {
    background: #374151;
    color: #fff;
}

/* Exclude wrapped tables from header styling */
.entry-content .inoriweb-table table thead tr,
.post-content .inoriweb-table table thead tr,
article .inoriweb-table table thead tr {
    background: none !important; /* Let content-classes.css handle it */
    color: inherit !important;
}

.entry-content table:not(.inoriweb-table) thead th,
.post-content table:not(.inoriweb-table) thead th,
article table:not(.inoriweb-table) thead th {
    color: #fff;
    font-weight: 600;
}

/* Alternating row colors for readability - EXCLUDE .inoriweb-table (uses custom colors) */
/* Also exclude tables inside div.inoriweb-table wrapper */
.entry-content table:not(.inoriweb-table) tbody tr:nth-child(even),
.post-content table:not(.inoriweb-table) tbody tr:nth-child(even),
article table:not(.inoriweb-table) tbody tr:nth-child(even) {
    background: #f9fafb;
}

/* Exclude wrapped tables from alternating row colors */
.entry-content .inoriweb-table table tbody tr,
.post-content .inoriweb-table table tbody tr,
article .inoriweb-table table tbody tr {
    background: none !important; /* Let content-classes.css handle it */
}

/* =============================================================================
   GRID LAYOUT FIXES - Ensure proper spacing and mobile responsiveness
   ============================================================================= */

/* Target divs with grid-template-columns that might be missing display: grid */
.entry-content div[style*="grid-template-columns"],
.post-content div[style*="grid-template-columns"],
article div[style*="grid-template-columns"] {
    display: grid !important; /* Force grid display even if missing */
}

/* Ensure grid items don't overflow on mobile */
@media screen and (max-width: 768px) {
    .entry-content div[style*="grid-template-columns"],
    .post-content div[style*="grid-template-columns"],
    article div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: 24px !important; /* Ensure proper spacing */
    }
}

/* =============================================================================
   CARD FIXES - Ensure proper spacing and box-sizing
   ============================================================================= */

/* Target card-like elements (divs with borders inside grids) */
.entry-content div[style*="grid-template-columns"] > div,
.entry-content div[style*="grid-template-columns"] > article,
.post-content div[style*="grid-template-columns"] > div,
.post-content div[style*="grid-template-columns"] > article,
article div[style*="grid-template-columns"] > div,
article div[style*="grid-template-columns"] > article {
    box-sizing: border-box !important; /* Prevent overflow */
}

/* =============================================================================
   DETAILS/SUMMARY (FAQ) FIXES
   ============================================================================= */

/* Ensure FAQ accordions are styled properly */
.entry-content details,
.post-content details,
article details {
    margin: 15px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

.entry-content details summary,
.post-content details summary,
article details summary {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}

.entry-content details summary:hover,
.post-content details summary:hover,
article details summary:hover {
    opacity: 0.8;
}

/* Remove default disclosure triangle and add custom marker */
.entry-content details summary,
.post-content details summary,
article details summary {
    list-style: none;
}

.entry-content details summary::-webkit-details-marker,
.post-content details summary::-webkit-details-marker,
article details summary::-webkit-details-marker {
    display: none;
}

.entry-content details summary::before,
.post-content details summary::before,
article details summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
}

.entry-content details[open] summary::before,
.post-content details[open] summary::before,
article details[open] summary::before {
    transform: rotate(90deg);
}

/* =============================================================================
   RESPONSIVE IMAGES
   ============================================================================= */

/* Ensure all images in content are responsive */
.entry-content img,
.post-content img,
article img {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   CALLOUT/ASIDE BOXES
   ============================================================================= */

/* Ensure callout boxes are responsive */
.entry-content aside,
.post-content aside,
article aside {
    margin: 30px 0;
    padding: 24px;
    border-radius: 8px;
}

@media screen and (max-width: 768px) {
    .entry-content aside,
    .post-content aside,
    article aside {
        padding: 16px;
        margin: 20px 0;
    }
}

/* =============================================================================
   UTILITY - Fix common spacing issues
   ============================================================================= */

/* Ensure proper line height for readability */
.entry-content p,
.post-content p,
article p {
    line-height: 1.6;
}

/* Ensure headings have proper spacing */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.post-content h2,
.post-content h3,
.post-content h4,
article h2,
article h3,
article h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* First element shouldn't have top margin */
.entry-content > *:first-child,
.post-content > *:first-child,
article > *:first-child {
    margin-top: 0 !important;
}