/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Ensure full-width sections */
body {
    margin: 0;
    padding: 0;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2em !important;
    }
    
    .hero-section p {
        font-size: 1.1em !important;
    }
    
    /* Make grids single column on mobile */
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust padding on mobile */
    [style*="padding: 80px"] {
        padding: 40px 20px !important;
    }
    
    /* Make table scrollable on mobile */
    table {
        font-size: 0.9em !important;
    }
}

/* Ensure sections flow naturally */
.entry-content > div {
    margin: 0;
}

/* Better link hover effects */
a[style*="background: white"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Additional purple styling and responsive fixes */
@media (max-width: 768px) {
    /* Ensure grid items don't overflow on mobile */
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix text overflow in age cards */
    [style*="Age 18"], [style*="Age 25"], [style*="Age 30"], [style*="Age 65"] {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Purple accent enhancements */
[style*="background: linear-gradient(135deg, #f0f4ff"] {
    background-attachment: fixed;
}

/* Smooth transitions for interactive elements */
[style*="border: 1px solid rgba(102, 126, 234, 0.1)"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transition: all 0.3s ease;
}

/* Remove sidebar and make content full-width */
body.home .site-main,
body.page .site-main {
    width: 100% !important;
    max-width: 100% !important;
}

body.home .content-area,
body.page .content-area {
    width: 100% !important;
    float: none !important;
}

body.home .sidebar,
body.page .sidebar,
body.home #secondary,
body.page #secondary {
    display: none !important;
}

/* Full-width container */
body.home .site-content,
body.page .site-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure entry content is full-width */
body.home .entry-content,
body.page .entry-content {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Remove any container constraints */
body.home .container,
body.page .container,
body.home .site-container,
body.page .site-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Additional full-width overrides for GeneratePress */
body.home .inside-article,
body.page-id-5 .inside-article {
    max-width: 100% !important;
    padding: 0 !important;
}

body.home .entry-content > *,
body.page-id-5 .entry-content > * {
    max-width: 100% !important;
}

/* Remove any padding/margins that constrain width */
body.home .site-main,
body.page-id-5 .site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove bullets from compliance section */
div[style*="justify-content: center"][style*="gap: 40px"] span::before {
    content: none !important;
}

div[style*="justify-content: center"][style*="gap: 40px"] {
    display: flex !important;
    list-style: none !important;
}

/* Also target any ul in compliance area */
p:contains("Compliance built on IRS") + ul,
p:contains("Compliance built on IRS") + div {
    list-style: none !important;
}

p:contains("Compliance built on IRS") + ul li::before,
p:contains("Compliance built on IRS") + ul li::marker {
    content: none !important;
    display: none !important;
}

/* Force flex display for compliance section */
div[style*="justify-content: center"][style*="gap: 40px"] {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
    margin: 20px 0 !important;
}

/* Ensure no list styling */
div[style*="justify-content: center"] span {
    list-style: none !important;
    display: inline-block !important;
}

/* Fix Compliant by design section - hide default bullets and add custom ones */
ul[style*="padding: 0"][style*="line-height: 2"] {
    list-style: none !important;
}

ul[style*="padding: 0"][style*="line-height: 2"] li {
    list-style: none !important;
}

ul[style*="padding: 0"][style*="line-height: 2"] li span[style*="position: absolute"][style*="color: #667eea"]::before {
    content: "•" !important;
}

/* Global shadcn-inspired styling for all pages */
body.page .entry-content a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s;
}

body.page .entry-content a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Style lists with purple accents */
body.page .entry-content ul li::marker {
    color: #667eea;
}

body.page .entry-content ul {
    list-style-position: outside;
    padding-left: 30px;
}

/* Style code/email links */
body.page .entry-content a[href^="mailto:"] {
    color: #667eea;
    font-weight: 600;
}

/* Add subtle shadows to cards */
body.page .entry-content div[style*="background: white"][style*="border-radius"] {
    transition: transform 0.2s, box-shadow 0.2s;
}

body.page .entry-content div[style*="background: white"][style*="border-radius"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

/* Add rounded bottom border to hero section */
.hero-section,
div[class*="hero-section"],
div[style*="Save on taxes and build your child"][style*="background: linear-gradient(135deg, #667eea"] {
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
}

/* Make the business comparison table responsive on mobile */
@media (max-width: 768px) {
    /* Table container - make it scrollable */
    div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Table styling for mobile */
    table[style*="min-width: 800px"] {
        font-size: 0.85em !important;
    }
    
    table[style*="min-width: 800px"] th,
    table[style*="min-width: 800px"] td {
        padding: 12px 8px !important;
        white-space: nowrap !important;
    }
    
    /* Make table header sticky on scroll */
    table[style*="min-width: 800px"] thead {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    /* Alternative: Stack table on very small screens */
    @media (max-width: 480px) {
        table[style*="min-width: 800px"] {
            display: block !important;
        }
        
        table[style*="min-width: 800px"] thead,
        table[style*="min-width: 800px"] tbody,
        table[style*="min-width: 800px"] tr {
            display: block !important;
        }
        
        table[style*="min-width: 800px"] th,
        table[style*="min-width: 800px"] td {
            display: block !important;
            width: 100% !important;
            text-align: left !important;
            padding: 10px !important;
            border-bottom: 1px solid #eee !important;
        }
        
        table[style*="min-width: 800px"] th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            font-weight: 600 !important;
        }
        
        table[style*="min-width: 800px"] td::before {
            content: attr(data-label) ": " !important;
            font-weight: 600 !important;
            color: #667eea !important;
            display: inline-block !important;
            width: 120px !important;
        }
    }
}

/* Ensure table container doesn't overflow parent */
div[style*="max-width: 1200px"][style*="margin: 0 auto"] {
    overflow: hidden !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Additional mobile table fixes */
@media (max-width: 768px) {
    /* Constrain parent containers */
    div[style*="max-width: 1200px"][style*="margin: 0 auto"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden !important;
    }
    
    /* Table container - ensure it scrolls within parent */
    div[style*="background: white"][style*="padding: 40px"][style*="border-radius: 16px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Fix Download on App Store text wrapping on mobile */
a[href*="apps.apple.com"],
a[href*="app/rothwizards"] {
    white-space: nowrap !important;
    display: inline-block !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Ensure button text doesn't wrap */
a[style*="background: white"][style*="color: #667eea"][style*="padding"],
a[style*="background: linear-gradient"][style*="color: white"][style*="padding"] {
    white-space: nowrap !important;
    text-align: center !important;
}

/* Mobile-specific fixes for App Store buttons */
@media (max-width: 768px) {
    a[href*="apps.apple.com"],
    a[href*="app/rothwizards"] {
        font-size: 1em !important;
        padding: 15px 30px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure parent containers allow button to be full width if needed */
    div[style*="text-align: center"] a[href*="apps.apple.com"] {
        width: auto !important;
        min-width: fit-content !important;
    }
}

/* Fix table container bleeding on mobile */
@media (max-width: 768px) {
    /* Constrain the parent section container */
    div[style*="max-width: 1200px"][style*="margin: 0 auto"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Make table container scrollable and constrained */
    div[style*="background: white"][style*="padding: 40px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 10px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Make table more compact on mobile */
    table[style*="min-width: 800px"] {
        font-size: 0.75em !important;
        min-width: 700px !important;
    }
    
    table[style*="min-width: 800px"] th,
    table[style*="min-width: 800px"] td {
        padding: 10px 6px !important;
        font-size: 0.9em !important;
        line-height: 1.3 !important;
    }
    
    /* Make first column (Your Situation) more compact */
    table[style*="min-width: 800px"] th:first-child,
    table[style*="min-width: 800px"] td:first-child {
        max-width: 200px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Ensure other columns are compact too */
    table[style*="min-width: 800px"] th:not(:first-child),
    table[style*="min-width: 800px"] td:not(:first-child) {
        min-width: 80px !important;
        text-align: center !important;
    }
}

/* Very small screens - make table even more compact */
@media (max-width: 480px) {
    table[style*="min-width: 800px"] {
        font-size: 0.7em !important;
        min-width: 600px !important;
    }
    
    table[style*="min-width: 800px"] th,
    table[style*="min-width: 800px"] td {
        padding: 8px 4px !important;
        font-size: 0.85em !important;
    }
    
    table[style*="min-width: 800px"] th:first-child,
    table[style*="min-width: 800px"] td:first-child {
        max-width: 150px !important;
        font-size: 0.8em !important;
    }
}

/* Additional fixes for table first column on mobile */
@media (max-width: 768px) {
    /* Ensure table container doesn't allow content to bleed */
    div[style*="background: white"][style*="padding: 40px"] {
        position: relative !important;
    }
    
    /* Make sure table respects container bounds */
    table[style*="min-width: 800px"] {
        table-layout: auto !important;
    }
    
    /* First column should wrap text properly */
    table[style*="min-width: 800px"] td:first-child,
    table[style*="min-width: 800px"] th:first-child {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 180px !important;
    }
    
    /* Remove any negative margins that could cause bleeding */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure parent containers are constrained */
    body .site-content,
    body .entry-content,
    body .content-area {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* Mobile-friendly card grid for business situations */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
    
    /* Ensure cards don't overflow */
    div[style*="background: white"][style*="padding: 25px"][style*="border-radius: 16px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* Make flex items stack properly on very small screens */
    div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
    }
    
    div[style*="display: flex"][style*="justify-content: space-between"] span:first-child {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}

/* Ensure card grid displays properly */
div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
    display: grid !important;
}

/* Ensure flex containers display properly */
div[style*="flex-direction: column"][style*="gap: 12px"] {
    display: flex !important;
}

div[style*="justify-content: space-between"][style*="align-items: center"][style*="background: #f8f9fa"] {
    display: flex !important;
}

/* Mobile: Stack cards vertically */
@media (max-width: 768px) {
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
}

/* FAQ page styling */
body.page-id-49 .entry-content a[href*="/how-to-get-an-ein/"] {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

body.page-id-49 .entry-content a[href*="/how-to-get-an-ein/"]:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Blog post styling */
body.single-post .entry-content {
    max-width: 800px;
    margin: 0 auto;
}

body.single-post .entry-content h2 {
    color: #667eea;
    font-weight: 600;
    padding-top: 20px;
    border-top: 2px solid rgba(102, 126, 234, 0.1);
    margin-top: 40px;
}