/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/**=== Read More Truncation ===*/
.read-more-text {
    display: block;
    overflow: hidden !important;
    max-height: 3em !important; /* Adjust this to control initial visible lines */
    transition: max-height 0.4s ease-in-out;
}

/* When expanded, open up smoothly */
.read-more-text.expanded {
    max-height: 1000px !important; 
}

/* Style for the dynamically injected button */
.read-more-toggle-btn {
    display: inline-block;
    margin-top: 0.5em;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}

/*HEading styling*/
.gradient-text {
  background: linear-gradient(90deg, #014925 50%, #c3dfdb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #cd7d4c; 
}

/* --- GLOBAL STYLES --- */
.hover-box-parent {
    position: relative;
    overflow: hidden;
    height: 70vh;
}

.hover-box-front, .hover-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
}

/* --- FRONT STATE --- */
.hover-box-front {
    z-index: 2;
    opacity: 1;
    pointer-events: auto; /* Clickable */
}

/* --- BACK STATE (Default Hidden) --- */
.hover-box-back {
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    
    /* CRITICAL: Disables link when hidden so you don't accidental click it */
    pointer-events: none; 
    
    /* Ensure link looks like a block for styling */
    /*display: block; */
    text-decoration: none; 
    color: inherit;
}

/* --- INTERACTION LOGIC (Desktop Hover + Mobile Tap/Class) --- */

/* When Hovered OR when class "in-view" is added via JS */
.hover-box-parent:hover .hover-box-front,
.hover-box-parent.in-view .hover-box-front {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; /* Front no longer clickable */
}

.hover-box-parent:hover .hover-box-back,
.hover-box-parent.in-view .hover-box-back {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Back becomes clickable now */
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 600px){
    .hover-box-parent {
        height: auto; 
        min-height: 80vh; 
    }
    
    /* DEFAULT STATE MOBILE */
    .hover-box-front {
        position: relative; /* Takes up space */
        height: auto; 
        min-height: 50vh;
    }
    
    .hover-box-back {
        position: absolute; /* Floats hidden */
        height: auto;
    }

    /* ACTIVE STATE MOBILE (Hover or JS Class) */
    .hover-box-parent:hover .hover-box-front,
    .hover-box-parent.in-view .hover-box-front {
        position: absolute; /* Removes from flow */
        height: 100%;
    }

    .hover-box-parent:hover .hover-box-back,
    .hover-box-parent.in-view .hover-box-back {
        position: relative; /* Pushes parent open */
        height: auto;
    }
}
.process-block-height {
    min-height: 180px;
}