/*
Theme Name: Yoya Puppy Lounge
Author: OneSolu Digital
Description: Puppy Yoga Lounge website theme
Version: 1.0.57
License: GNU General Public License v2 or later
Text Domain: Yoya Puppy Lounge
*/



body {
    margin: 0;
    padding: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
    font-family: "Georgia", serif !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    flex: 1 0 auto;
    /* This pushes the footer to the bottom */
}

:root {
    /* Theme Colors */
    --primary-color: #6387cf;
    --primary-theme-color: #6387cf;

    --secondary-color: #f4880b;
    --secondary-theme-color: #f4880b;

    --text-color: #2d2d2d;
    --primary-text-color: #2d2d2d;

    --container-width: 1200px;
    --container-padding: 200px;
    /* Note: 200px is very large for mobile, consider lowering this */
    --primary-background-color: #ffffff;

    /* Default for Phone (Smallest) */
    --max-container-width: 100%;
    --section-title-font-size: 28px;
    /* Added a default base size */
}

/* Phone (e.g., iPhone 14) */
@media (min-width: 230px) {
    :root {
        --page-title-font-size: 38px;
        --ppy-container-padding-bottom: 0px;
        --header-padding-left: 10px;
        --header-padding-right: 10px;
        --section-margin-bottom: 20px;
        --contact-us-heading-padding: 5px;
        --contact-us-submit-button-width: 100%;
        --theme-border-radius: 40px;
        --puppy-yoga-footer-margin-top: 150px;
    }

    .logo img {
        padding-left: 20px !important;
    }
}


/* Tablet (e.g., iPad) */
@media (min-width: 768px) {
    :root {
        --max-container-width: 720px;
        --section-title-font-size: 32px;
        --page-title-font-size: 48px;
        --ppy-container-padding-bottom: 20px;
        --header-padding-left: 10px;
        --header-padding-right: 10px;
        --section-margin-bottom: 40px;
        --contact-us-heading-padding: 8px;
        --contact-us-submit-button-width: 100%;
        --theme-border-radius: 40px;
        --puppy-yoga-footer-margin-top: 150px;
    }

    /* Standard selectors MUST be outside :root */
    .ppy-container {
        width: 100%;
    }
}

/* Medium Screen (Laptops) */
@media (min-width: 992px) {
    :root {
        --max-container-width: 960px;
        --section-title-font-size: 36px;
        --page-title-font-size: 60px;
        --ppy-container-padding-bottom: 60px;
        --header-padding-left: 30px;
        --header-padding-right: 30px;
        --section-margin-bottom: 60px;
        --contact-us-heading-padding: 15px;
        --theme-border-radius: 60px;
        --puppy-yoga-footer-margin-top: 200px;
    }
}

/* Large Screen (Desktop) */
@media (min-width: 1200px) {
    :root {
        --max-container-width: 1200px;
        --section-title-font-size: 40px;
        --page-title-font-size: 72px;
        --ppy-container-padding-bottom: 80px;
        --header-padding-left: 40px;
        --header-padding-right: 40px;
        --section-margin-bottom: 80px;
        --contact-us-heading-padding: 20px;
        --theme-border-radius: 80px;
        --puppy-yoga-footer-margin-top: 200px;
    }
}

.ppy-container {
    max-width: var(--max-container-width);
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: var(--ppy-container-padding-bottom);
}

/* All standard content gets the container styling EXCEPT for the hero block */
.site-content>*:not(.hero-v2) {
    max-width: var(--max-container-width);
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* The Hero block stays full width */
.hero-v2 {
    width: 100%;
    /* Ensure internal content is centered if needed */
}

.section-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--primary-color);
    color: var(--text-color);
    border-radius: 9999px;
    padding: 8px 24px;
    text-align: center;
}


@media (max-width: 480px) {

    /* Force the container to never exceed the screen width */
    .subscribe-form-inline {
        display: flex !important;
        flex-direction: row !important;
        /* Forces them to stay side-by-side */
        flex-wrap: nowrap !important;
        /* ABSOLUTELY prevents wrapping */
        padding: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Make the input shrink to fit whatever space is left */
    .subscribe-form-inline input[type="email"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        /* Allows the input to get very small if needed */
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Ensure the button stays a consistent size but slightly smaller */
    .subscribe-form-inline button {
        flex: 0 0 auto !important;
        /* Prevents button from shrinking or growing */
        padding: 8px 15px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Fix the text overlap shown in your screenshot */
    .cta-text {
        font-size: 11px !important;
        text-align: center;
        margin-bottom: 8px;
        display: block;
        color: white;
    }
}