/*
 Theme Name:   Spring Plant Child Theme
 Theme URI:    http://themes.g5plus.net/spring/
 Description:  Spring Plant Child Theme
 Author:       G5plus
 Author URI:   http://g5plus.net
 Template:     spring-plant
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: 				two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: 		spring-plant
*/
/************************************************************************************
Put your custom CSS below this block :)
*************************************************************************************/

/* Custom Country Code Dropdown Styles */
        .country-code-dropdown-container {
            position: relative;
        }

        #countryCodeDropdown {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: slideDown 0.2s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #countryCodeList::-webkit-scrollbar {
            width: 6px;
        }

        #countryCodeList::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        #countryCodeList::-webkit-scrollbar-thumb {
            background: #D0D5DD;
            border-radius: 4px;
        }

        #countryCodeList::-webkit-scrollbar-thumb:hover {
            background: #B0B5BD;
        }

        .country-code-option {
            transition: background-color 0.15s ease;
        }

        .country-code-option:active {
            background-color: #F4551B !important;
            color: white;
        }

        #countryCodeSearch {
            width: 110px;
        }

        #countryCodeDropdown {
            min-width: 280px;
        }

        .country-code-chevron {
            transition: transform 0.2s ease;
            transform-origin: center center;
        }

        /* Contact Info Card Hover Effect */
        .contact-info-card {
            transition: all 0.3s ease;
        }

        .contact-info-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        /* Contact Form Tabs */
        .contact-tab {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .contact-tab.active {
            background-color: #FFF4ED !important;
        }

        .contact-tab.active .tab-radio-outer {
            border-color: #F4551B !important;
        }

        .contact-tab.active .tab-radio-inner {
            background-color: #F4551B !important;
        }

        .contact-tab.active .tab-text {
            color: #F4551B !important;
        }

        /* Mobile tabs container - similar to rust section */
        .contact-tabs-container {
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .contact-tabs-container::-webkit-scrollbar {
            display: none;
        }

        .contact-tab {
            scroll-snap-align: center;
            flex-shrink: 0;
        }

        /* Desktop: Show tabs as stacked list */
        @media (min-width: 1024px) {
            .contact-tabs-container {
                display: grid !important;
                gap: 8px;
                overflow-x: visible !important;
            }

            .contact-tab {
                scroll-snap-align: unset;
            }
        }

        /* Mobile: Show tabs as horizontal scrollable */
        @media (max-width: 1023px) {
            .contact-tabs-container {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                padding-bottom: 8px;
            }

            .contact-tab {
                border: 1px solid #D1D1D1 !important;
                border-radius: 100px !important;
                padding: 6px 24px !important;
                background-color: white !important;
                white-space: nowrap;
            }

            .contact-tab:hover {
                background-color: #FFF4ED !important;
            }

            .contact-tab.active {
                border-color: #F4551B !important;
                background-color: rgba(244, 85, 27, 0.05) !important;
            }

            .contact-tab .tab-radio-outer,
            .contact-tab .tab-radio-inner {
                display: none !important;
            }

            .contact-tab .tab-text {
                color: #3D3D3D;
                font-weight: 500;
                font-size: 16px;
            }

            .contact-tab.active .tab-text {
                color: #F4551B !important;
            }
        }
        
        blog-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.blog-card img {
    transition: transform 0.3s ease;
}

.blog-card:hover img {
    transform: scale(1.05);
}

/* ========================================
   CATEGORY FILTER TABS
   ======================================== */

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.category-tab {
    padding: 8px 20px;
    background-color: white;
    color: #313131;
    border: 1px solid #E7E7E7;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.category-tab:hover {
    background-color: #FFF4ED;
    color: #F4551B;
    border-color: #F4551B;
}

.category-tab.active {
    background-color: #F4551B;
    color: white;
    border-color: #F4551B;
}

/* ========================================
   PAGINATION STYLES
   ======================================== */

.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination a,
.pagination span {
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination a {
    background-color: white;
    color: #313131;
    border: 1px solid #D0D5DD;
}

.pagination a:hover {
    background-color: #F4551B;
    color: white;
    border-color: #F4551B;
}

.pagination .current {
    background-color: #F4551B;
    color: white;
    border: 1px solid #F4551B;
}

.pagination .prev,
.pagination .next {
    font-weight: 500;
}

/* ========================================
   SINGLE POST - BLOG CONTENT STYLES
   ======================================== */

.blog-content {
    font-size: 16px;
    line-height: 1.7;
    color: #313131;
}

.blog-content h2 {
    font-family: 'Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #042A1A;
}

.blog-content h3 {
    font-family: 'Grotesk', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    margin-top: 32px;
    margin-bottom: 16px;
    color: #042A1A;
}

.blog-content p {
    margin-bottom: 20px;
}

.blog-content ul,
.blog-content ol {
    margin-bottom: 20px;
    padding-left: 28px;
}

.blog-content li {
    margin-bottom: 10px;
}

.blog-content a {
    color: #F4551B;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.blog-content a:hover {
    color: #E63B11;
}

.blog-content img {
    border-radius: 8px;
    margin: 24px 0;
    max-width: 100%;
    height: auto;
}

.blog-content blockquote {
    border-left: 4px solid #F4551B;
    padding-left: 20px;
    margin: 24px 0;
    font-style: italic;
    color: #454545;
}

/* ========================================
   RELATED POSTS CARD
   ======================================== */

.related-post-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.related-post-card img {
    transition: transform 0.3s ease;
}

.related-post-card:hover img {
    transform: scale(1.05);
}

/* ========================================
   BACK BUTTON
   ======================================== */

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #313131;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.back-button:hover {
    color: #F4551B;
    gap: 12px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .blog-content {
        font-size: 15px;
    }
    
    .blog-content h2 {
        font-size: 24px;
    }
    
    .blog-content h3 {
        font-size: 20px;
    }
    
    .category-tabs {
        gap: 8px;
    }
    
    .category-tab {
        padding: 6px 16px;
        font-size: 13px;
    }
}

/* ========================================
   COLOR VARIABLES (Customize Here)
   ======================================== */

:root {
    --primary-orange: #F4551B;
    --dark-green: #042A1A;
    --light-peach: #FFF4ED;
    --border-gray: #E7E7E7;
    --text-dark: #313131;
    --text-medium: #454545;
    --text-light: #666666;
}

/* Apply color variables (optional - uncomment to use) */
/*
.blog-card:hover {
    box-shadow: 0 8px 20px rgba(244, 85, 27, 0.15);
}

.category-tab.active,
.pagination .current {
    background-color: var(--primary-orange);
}

.blog-content h2,
.blog-content h3 {
    color: var(--dark-green);
}
*/