/*
Theme Name: WoodJoy
Theme URI: 
Author: WoodJoy
Author URI: 
Description: Ekologichni Arkhitekturni Konstruktory
Version: 1.0.1
Text Domain: woodjoy-structure
*/

/* ================================================================
   JEDNO DZHERELO KOLORIV
   Zminyv tut = zminylos vsyudy na sajti
   ================================================================ */
:root {
    --wj-primary: #7EC46A;
    --wj-primary-dark: #6ab558;
    --wj-bg-light: #f8f9fa;
    --wj-bg-dark: #1a1f18;
    --wj-surface: #ffffff;
    --wj-surface-dark: #232b20;
    --wj-text: #1d231b;
    --wj-text-secondary: #677562;
    --wj-text-light: #f5f8f4;
    --wj-text-secondary-dark: #9ab092;
    --wj-btn-shadow: 0 0 20px rgba(126, 196, 106, 0.3);
    --wj-btn-shadow-hover: 0 0 30px rgba(126, 196, 106, 0.5);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

.slide-up {
    animation: slideUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

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

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wj-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.wj-animate.wj-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Product page — smooth gallery image transitions */
.woocommerce div.product div.images .flex-viewport {
    transition: opacity 0.3s ease;
}

/* Smooth variation change */
.woocommerce div.product .woocommerce-variation {
    transition: opacity 0.3s ease;
}


/* ================================================================
   HERO PRODUCT CARD (horizontal card on homepage)
   ================================================================ */

.wj-hero-product {
    transition: box-shadow 0.3s ease;
}

/* Mobile: unified card with stronger shadow */
@media (max-width: 767px) {
    .wj-hero-product {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }

    .wj-hero-product--dark {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    }
}

.wj-hero-product__img img {
    transition: transform 0.6s ease;
}

.wj-hero-product:hover .wj-hero-product__img img {
    transform: scale(1.05);
}

/* ---- Staggered advantage reveal ---- */
.wj-adv-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Trigger animation when parent section becomes visible */
.wj-visible .wj-adv-item,
.wj-animate.wj-visible .wj-adv-item {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Price styling (light section) ---- */
.wj-price-styled del {
    color: #999 !important;
    font-weight: 500;
    font-size: 0.85em;
    opacity: 0.7;
}

.wj-price-styled ins {
    text-decoration: none !important;
    color: #7EC46A !important;
    font-weight: 800;
}

/* ---- Price styling (dark section) ---- */
.wj-price-styled--dark del {
    color: #777 !important;
}

.wj-price-styled--dark ins {
    color: #7EC46A !important;
}

/* ================================================================
   LOGO ANIMATION — continuous pulse ("breathing")
   ================================================================ */

.wj-logo {
    animation: wjLogoPulse 2.5s ease-in-out infinite;
    transition: transform 0.3s ease;
}

@keyframes wjLogoPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

/* Hover: pause pulse and scale up */
.wj-logo:hover {
    animation-play-state: paused;
    transform: scale(1.1);
}

/* ================================================================
   BLOG CARDS (home.php)
   ================================================================ */
.wj-blog-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wj-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   BLOG HERO (single.php)
   ================================================================ */
.wj-blog-hero {
    border-radius: 0 0 1.5rem 1.5rem;
    overflow: hidden;
}

.wj-blog-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================================
   ARTICLE CONTENT STYLING
   ================================================================ */
.wj-blog-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: #1d231b;
}

.wj-blog-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.wj-blog-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #3a4238;
    margin-bottom: 1.25rem;
}

.wj-blog-content img {
    border-radius: 1rem;
    margin: 1.5rem 0;
    width: 100%;
    height: auto;
}

.wj-blog-content blockquote {
    border-left: 4px solid #7ec46a;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: rgba(126, 196, 106, 0.06);
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: #4a5a44;
}

.wj-blog-content ul,
.wj-blog-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.wj-blog-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
    color: #3a4238;
}

.wj-blog-content strong {
    font-weight: 700;
    color: #1d231b;
}

/* ================================================================
   BLOG VIDEO
   ================================================================ */
.wj-blog-video {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* ================================================================
   STICKY CTA BAR (floating pill)
   ================================================================ */
.wj-sticky-bar.wj-sticky-visible {
    transform: translate(-50%, 0);
}

/* ================================================================
   SCROLL REVEAL ANIMATIONS
   ================================================================ */
.wj-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.wj-reveal.wj-visible {
    opacity: 1;
    transform: translateY(0);
}

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