/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Hello Elementor Child Theme – built on Hello Elementor 3.4.9.
               Includes local Slick Slider integration and custom front-end styles.
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     hello-elementor
 Version:      1.0.0
 Requires at least: 6.0
 Tested up to: 6.8
 Requires PHP: 7.4
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  hello-elementor-child
 Tags:         accessibility-ready, flexible-header, custom-colors, custom-menu,
               custom-logo, featured-images, rtl-language-support
*/

/* =========================================================
   CHILD THEME – CUSTOM FRONT-END STYLES
   These rules load after the parent theme and override it.
   ========================================================= */

/* ----- CSS Custom Properties ----- */
:root {
	--child-primary:       #4a6cf7;
	--child-primary-dark:  #3a56d4;
	--child-secondary:     #f7a04a;
	--child-text:          #2d2d2d;
	--child-text-light:    #6b7280;
	--child-bg:            #ffffff;
	--child-bg-alt:        #f9fafb;
	--child-border:        #e5e7eb;
	--child-radius:        8px;
	--child-radius-lg:     16px;
	--child-shadow:        0 4px 16px rgba(0,0,0,.08);
	--child-transition:    .25s ease;
}

/* ----- Typography ----- */
body {
	color: var(--child-text);
	font-size: 16px;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--child-text);
	line-height: 1.3;
}

a {
	color: var(--child-primary);
	text-decoration: none;
	transition: color var(--child-transition);
}

a:hover {
	color: var(--child-primary-dark);
}

/* ----- Site Header ----- */
#site-header {
	box-shadow: 0 1px 0 var(--child-border);
}

/* ----- Site Footer ----- */
#site-footer {
	background: var(--child-bg-alt);
	border-top: 1px solid var(--child-border);
	padding: 2rem 0;
	color: var(--child-text-light);
	font-size: .9rem;
}

/* ----- Buttons ----- */
.elementor-button,
button,
input[type="submit"] {
	border-radius: var(--child-radius) !important;
	transition: background var(--child-transition), transform var(--child-transition) !important;
}

.elementor-button:hover {
	transform: translateY(-1px);
}

/* ----- Cards / Boxes ----- */
.child-card {
	background: var(--child-bg);
	border: 1px solid var(--child-border);
	border-radius: var(--child-radius-lg);
	box-shadow: var(--child-shadow);
	padding: 2rem;
	transition: box-shadow var(--child-transition);
}

.child-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* =========================================================
   SLICK SLIDER — CUSTOM OVERRIDES
   These sit on top of the bundled slick.css / slick-theme.css
   ========================================================= */

/* Wrapper you add in your templates:
   <div class="child-slick-slider"> … </div>          */
.child-slick-slider {
	position: relative;
	overflow: hidden;
}

/* Each slide */
.child-slick-slider .slick-slide {
	outline: none;
}

/* Navigation dots */
.child-slick-slider .slick-dots {
	bottom: 16px;
}

.child-slick-slider .slick-dots li button::before {
	font-size: 10px;
	color: var(--child-primary);
	opacity: .4;
}

.child-slick-slider .slick-dots li.slick-active button::before {
	opacity: 1;
}

/* Prev / Next arrows */
.child-slick-slider .slick-prev,
.child-slick-slider .slick-next {
	width: 44px;
	height: 44px;
	background: var(--child-primary);
	border-radius: 50%;
	z-index: 10;
	transition: background var(--child-transition);
}

.child-slick-slider .slick-prev:hover,
.child-slick-slider .slick-next:hover {
	background: var(--child-primary-dark);
}

.child-slick-slider .slick-prev { left: 10px; }
.child-slick-slider .slick-next { right: 10px; }

.child-slick-slider .slick-prev::before,
.child-slick-slider .slick-next::before {
	font-size: 20px;
	color: #fff;
	opacity: 1;
}

/* Fade transition variant – add class .is-fade to the wrapper */
.child-slick-slider.is-fade .slick-slide {
	transition: opacity .5s ease;
}

/* Responsive: hide arrows on mobile */
@media (max-width: 600px) {
	.child-slick-slider .slick-prev,
	.child-slick-slider .slick-next {
		display: none !important;
	}
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.text-center { text-align: center; }
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }