/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Pupiva
Author URI: pupiva.com
Description: Child theme for GeneratePress for Pupiva with robust responsive fixes.
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 1.0.4
Updated: 2025-06-17 14:50:00
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* --- GLOBAL STYLES & BACKGROUND FIXES --- */
body, .site, .site-header, .site-footer, article, .main-navigation, .separate-containers .inside-article {
    background-color: #ffffff !important; /* Force white background everywhere */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll on the body */
}

/* --- MASTER CONTAINER FOR POST CONTENT --- */
/* This is a safety net for all content within a post */
.entry-content {
    overflow-wrap: break-word; /* Break long words or strings to prevent overflow */
    word-wrap: break-word;     /* Legacy support */
    word-break: break-word;    /* More aggressive word breaking */
    max-width: 100%;
}

/* --- SCROLL CONTAINER FOR WIDE ELEMENTS (LIKE TABLES) --- */
/* IMPORTANT: Wrap your wide tables in a <div class="scroll-container"> */
.scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    border: 1px solid #e0e0e0; /* Optional: adds a subtle border */
    border-radius: 4px;
    margin: 25px 0;
}

/* --- ROBUST TABLE STYLING --- */
/* Ensures the table inside the scroll container behaves correctly */
.scroll-container .criteria-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    /* Remove margin/shadow from the table itself, the wrapper will handle it */
    margin: 0;
    box-shadow: none;
}

.criteria-table th,
.criteria-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    white-space: nowrap; /* CRITICAL: Keeps table columns aligned, the wrapper provides the scroll */
}

.criteria-table th {
    background-color: #f8f8f8; /* Light grey for header for readability */
    font-weight: bold;
    color: #333;
}

/* --- GENERAL CONTENT STYLING (Images, Headers, etc.) --- */
.entry-content img,
.entry-content .introduction-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
}

.introduction-hook,
.criteria-headline,
.product-title,
.faq-header,
.guide-header {
    margin-top: 20px;
    margin-bottom: 15px;
}

.introduction-hook {
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    color: #2c3e50;
}

.criteria-headline,
.faq-header,
.guide-header {
    font-size: 1.6em;
    font-weight: bold;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
    color: #3498db;
}

.product-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #16a085;
}

/* --- BUTTONS --- */
.product-button-cta, .entry-content .button, .entry-content button {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #3498db;
    color: #ffffff !important;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 10px 0;
}

.product-button-cta:hover, .entry-content .button:hover, .entry-content button:hover {
    background-color: #2980b9;
}

/* Center-align wrapper for buttons */
.center-button {
    text-align: center;
    margin: 20px 0;
}


/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    /* Reduce padding and font sizes on mobile for better readability */
    .introduction-hook { font-size: 1.6em; }
    .criteria-headline, .faq-header, .guide-header { font-size: 1.4em; }
    .product-title { font-size: 1.3em; }

    .product-button-cta, .entry-content .button, .entry-content button {
        padding: 12px 20px;
        width: 100%; /* Make buttons full-width on mobile for easy tapping */
    }
}