/*
Theme Name: GeneratePress Child - Frontier
Theme URI: https://frontiertinyhomes.com
Description: Child theme for GeneratePress, used for Frontier Tiny Homes custom content structures.
Author: Dan Kellogg
Author URI: https://frontiertinyhomes.com
Template: generatepress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child-frontier
*/

/* -------------------------------------------------------------------------
   Add your custom CSS below this line.
   ------------------------------------------------------------------------- */

/* EXAMPLE: Basic styling for your custom model cards */

.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.model-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s;
}

.model-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.model-card h2 {
    font-size: 1.5rem;
    padding: 15px 15px 0;
}

/* Styling the Active State using GeneratePress CSS Variables */
.plan-tab-button.active {
    /* Set the background to your theme's Accent Color */
    background-color: var(--accent-2); 
    
    /* Set the text color to contrast against the background. 
       Use the text color defined for the Primary/Accent element. 
       --gpc-text-color is the general body text color. */
    color: #ffffff; /* Use pure white, or find the variable for your accent text color */
    
    border-color: var(--accent-2); 
    font-weight: bold;
    /* Optional: If the variable for the accent's text color is defined: */
    /* color: var(--gpc-accent-text); */ 
}

/* Optional: Make the standard buttons match the non-active elements */
.plan-tab-button {
    background-color: var(--base); /* Use a soft theme gray */
    color: var(--contrast-2); /* Use the default theme text color */
    border: 1px solid var(--base); /* Use the default theme border color */
    /* ... rest of your styling ... */
}

/* Styling for the Floor Plans on the single Model page */
.floor-plan-item {
    padding: 20px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

.floor-plan-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Ensures videos scale responsively on all screens */
.floor-plan-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 25px;
}

/* Forces the iframe to fill the space created by the wrapper */
.floor-plan-video-wrapper iframe,
.floor-plan-video-wrapper object,
.floor-plan-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Custom CSS to handle horizontal tabs on mobile */
@media (max-width: 768px) {
    
    /* Make the button container scrollable for horizontal tabs */
    .plan-selector-tabs {
        display: flex; /* Keeps them in a row */
        overflow-x: scroll; /* Allows horizontal scrolling */
        white-space: nowrap; /* Prevents wrapping */
        padding-bottom: 5px; /* Adds space for scroll bar */
    }

    /* Style for the individual buttons */
    .plan-tab-button {
        /* Prevents the browser from trying to shrink the button */
        flex-shrink: 0; 
        padding: 10px 15px;
        margin-right: 5px;
        font-size: 0.9rem; /* Smaller text on mobile */
    }
    
    /* Ensure all images inside the dynamically revealed content scale */
    .floor-plan-panel img {
        height: auto;
        max-width: 100%; 
    }
}