/*
Theme Name: GeneratePress Child
Description: Child theme for GeneratePress with custom tool integration
Author: Your Name
Author URI: https://yourwebsite.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* Tool Container Styling */
.tool-container {
    max-width: 100%;
    margin: 20px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tool-wrapper {
    width: 100%;
    overflow: hidden;
}

.tool-content {
    margin: 30px 0;
    line-height: 1.8;
}

.tool-content h2,
.tool-content h3 {
    margin-top: 25px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .tool-container {
        padding: 15px;
    }
}

/* Header Site Title Positioning */
.site-branding {
    padding-left: 50px !important;
}

.inside-header {
    padding-left: 0 !important;
}
/* ============================================
   MOBILE RESPONSIVE STYLES - Name Generator
   ============================================ */

/* Mobile Devices (phones) */
@media (max-width: 768px) {
    
    /* Form Elements - Make them stack and touch-friendly */
    .name-generator-form input[type="text"],
    .name-generator-form select,
    .name-generator-form input[type="number"],
    .name-generator-form button {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px !important;
        box-sizing: border-box;
    }
    
    /* Generate Button - Make it prominent */
    .name-generator-form button[type="submit"] {
        min-height: 50px;
        font-size: 18px !important;
        font-weight: bold;
        margin-top: 10px;
    }
    
    /* Results Table - Convert to Card Layout */
    .name-generator-results table {
        display: block;
        width: 100%;
    }
    
    .name-generator-results thead {
        display: none; /* Hide headers on mobile */
    }
    
    .name-generator-results tbody,
    .name-generator-results tr,
    .name-generator-results td {
        display: block;
        width: 100%;
    }
    
    .name-generator-results tr {
        margin-bottom: 20px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 15px;
        background: #ffffff;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }
    
    .name-generator-results td {
        text-align: left;
        padding: 10px 0;
        border: none;
        position: relative;
        padding-left: 45%;
        min-height: 30px;
    }
    
    /* Add labels before each cell */
    .name-generator-results td:nth-child(1):before {
        content: "Name:";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #333;
    }
    
    .name-generator-results td:nth-child(2):before {
        content: "Meaning:";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #333;
    }
    
    .name-generator-results td:nth-child(3):before {
        content: "Tribe:";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #333;
    }
    
    .name-generator-results td:nth-child(4):before {
        content: "Type:";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #333;
    }
    
    .name-generator-results td:nth-child(5):before {
        content: "Gender:";
        position: absolute;
        left: 0;
        font-weight: bold;
        color: #333;
    }
    
    /* Big Data Table (below generator) - Make scrollable */
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
    }
    
    .entry-content table thead {
        display: table-header-group; /* Keep headers for reference table */
    }
    
    .entry-content table td,
    .entry-content table th {
        min-width: 100px;
        padding: 8px;
        font-size: 14px;
    }
    
    /* Content Adjustments */
    .entry-content {
        padding: 15px;
    }
    
    .entry-content p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
        text-align: left;
    }
    
    .entry-content h2 {
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .entry-content h3 {
        font-size: 20px;
        margin-top: 25px;
        margin-bottom: 12px;
    }
    
    .entry-content h4 {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    /* Images - Make responsive */
    .entry-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin: 20px auto;
    }
    
    /* Lists - Better spacing */
    .entry-content ul,
    .entry-content ol {
        padding-left: 20px;
        margin-bottom: 20px;
    }
    
    .entry-content li {
        margin-bottom: 10px;
        line-height: 1.6;
    }
    
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }
    
    .site-content,
    .entry-content {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .name-generator-form input,
    .name-generator-form select {
        font-size: 15px;
        padding: 10px;
    }
    
    .entry-content table {
        font-size: 14px;
    }
}

/* Small Phones (iPhone SE, etc) */
@media (max-width: 375px) {
    .entry-content h2 {
        font-size: 22px;
    }
    
    .entry-content p {
        font-size: 15px;
    }
    
    .name-generator-results td {
        padding-left: 40%;
        font-size: 14px;
    }
}