/*
Theme Name: Multipurpose for Elementor
Author: DiThemes
Author URI: https://dithemes.com
Description: Multipurpose for Elementor is a modern, feature-rich child theme designed to supercharge the Di Multipurpose WordPress theme. Built perfectly for the Elementor page builder, it adds premium design enhancements, beautiful hover animations, and dynamic widgets to make your website stand out. Perfect for blogs, portfolios, and WooCommerce stores, it introduces native features like a customizable Reading Progress Bar, an elegant Author Bio Box, and a smart Related Posts grid to keep your visitors engaged. With full WordPress Customizer integration, you can easily toggle features and match colors to your brand in real-time. Lightweight, SEO-friendly, and fully responsive, Multipurpose for Elementor is the ultimate toolkit for building fast, beautiful websites.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, flexible-header, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks, blog, e-commerce, portfolio
Text Domain: multipurpose-for-elementor
Template: di-multipurpose
*/


/* ==========================================================================
   Multipurpose for Elementor Child Theme — Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	--me-accent:        #f66f66;
	--me-accent-dark:   #d94f4f;
	--me-text:          #1a1a2e;
	--me-text-muted:    #6b7280;
	--me-bg:            #ffffff;
	--me-bg-alt:        #f8f9fa;
	--me-border:        #e5e7eb;
	--me-card-shadow:   0 2px 12px rgba(0, 0, 0, 0.08);
	--me-radius:        6px;
	--me-transition:    0.25s ease;
}


/* --------------------------------------------------------------------------
   1. Reading Progress Bar
   (dynamic height/color set via inline CSS from inc/reading-progress.php)
   -------------------------------------------------------------------------- */
#multipurpose-for-elementor-reading-progress {
	position:    fixed;
	top:         0;
	left:        0;
	width:       0%;
	z-index:     99999;
	transition:  width 0.1s linear;
}


/* --------------------------------------------------------------------------
   2. Related Posts
   -------------------------------------------------------------------------- */
.me-related-posts {
	margin:      48px 0 32px;
	padding-top: 32px;
	border-top:  2px solid var(--me-border);
	clear:       both;
}

.me-related-posts__title {
	font-size:     18px;
	font-weight:   700;
	margin-bottom: 24px;
	display:       flex;
	align-items:   center;
	gap:           12px;
	color:         var(--me-text);
}

.me-related-posts__title::before,
.me-related-posts__title::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: var(--me-border);
}

.me-related-posts__title::before {
	max-width: 40px;
}

.me-related-posts__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   20px;
}

@media (max-width: 767px) {
	.me-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.me-related-posts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.me-related-posts__item {
	background:  var(--me-bg);
	border:      1px solid var(--me-border);
	border-radius: var(--me-radius);
	overflow:    hidden;
	box-shadow:  var(--me-card-shadow);
	transition:  transform var(--me-transition), box-shadow var(--me-transition);
}

.me-related-posts__item:hover {
	transform:  translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.me-related-posts__thumb {
	display:      block;
	overflow:     hidden;
	aspect-ratio: 16 / 9;
}

.me-related-posts__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.me-related-posts__item:hover .me-related-posts__thumb img {
	transform: scale(1.05);
}

.me-related-posts__body {
	padding: 14px 16px 16px;
}

.me-related-posts__item-title {
	font-size:   14px;
	font-weight: 700;
	line-height: 1.45;
	margin:      8px 0 6px;
}

.me-related-posts__item-title a {
	color:           var(--me-text);
	text-decoration: none;
}

.me-related-posts__item-title a:hover {
	color: var(--me-accent);
}

.me-related-posts__meta {
	font-size: 12px;
	color:     var(--me-text-muted);
	margin:    0;
}

.me-related-posts__meta .fa {
	margin-right: 4px;
}


/* --------------------------------------------------------------------------
   3. Author Bio Box
   -------------------------------------------------------------------------- */
.me-author-box {
	display:       flex;
	align-items:   flex-start;
	gap:           24px;
	margin:        36px 0 32px;
	padding:       28px;
	background:    var(--me-bg-alt);
	border:        1px solid var(--me-border);
	border-left:   4px solid var(--me-accent);
	border-radius: var(--me-radius);
	clear:         both;
}

@media (max-width: 575px) {
	.me-author-box {
		flex-direction: column;
		align-items:    center;
		text-align:     center;
	}
}

.me-author-box__avatar {
	flex-shrink: 0;
}

.me-author-box__avatar img {
	width:         90px;
	height:        90px;
	border-radius: 50%;
	object-fit:    cover;
	border:        3px solid var(--me-accent);
}

.me-author-box__label {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          var(--me-accent);
	margin-bottom:  4px;
}

.me-author-box__name {
	font-size:   18px;
	font-weight: 700;
	margin:      0 0 10px;
}

.me-author-box__name a {
	color:           var(--me-text);
	text-decoration: none;
}

.me-author-box__name a:hover {
	color: var(--me-accent);
}

.me-author-box__bio {
	font-size:     14px;
	color:         var(--me-text-muted);
	line-height:   1.65;
	margin-bottom: 14px;
}

.me-author-box__links {
	display:   flex;
	gap:       12px;
	flex-wrap: wrap;
}

.me-author-box__all-posts,
.me-author-box__website {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-size:       13px;
	font-weight:     600;
	padding:         6px 14px;
	border-radius:   4px;
	text-decoration: none;
	transition:      background var(--me-transition), color var(--me-transition);
}

.me-author-box__all-posts {
	background: var(--me-accent);
	color:      #fff;
}

.me-author-box__all-posts:hover {
	background: var(--me-accent-dark);
	color:      #fff;
}

.me-author-box__website {
	background: transparent;
	color:      var(--me-text-muted);
	border:     1px solid var(--me-border);
}

.me-author-box__website:hover {
	background: var(--me-bg);
	color:      var(--me-text);
}


/* ==========================================================================
   Elementor Design Enhancements
   Pure CSS — targets Elementor's generated classes, no plugin code touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   E1. Icon Box — Card Hover Lift
   Targets: .elementor-widget-icon-box
   Effect: card rises + left accent border appears on hover.
   -------------------------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	border:        1px solid transparent;
	border-radius: var(--me-radius);
	padding:       24px 20px;
	transition:    transform var(--me-transition),
	               box-shadow var(--me-transition),
	               border-color var(--me-transition);
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	transform:    translateY(-6px);
	box-shadow:   0 12px 32px rgba(0, 0, 0, 0.10);
	border-color: var(--me-border);
	border-left:  3px solid var(--me-accent);
}

/* Icon color transition */
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
	transition: color var(--me-transition), fill var(--me-transition);
}

.elementor-widget-icon-box:hover .elementor-icon i {
	color: var(--me-accent) !important;
}

.elementor-widget-icon-box:hover .elementor-icon svg {
	fill: var(--me-accent) !important;
}

/* Title color transition */
.elementor-widget-icon-box .elementor-icon-box-title {
	transition: color var(--me-transition);
}

.elementor-widget-icon-box:hover .elementor-icon-box-title a,
.elementor-widget-icon-box:hover .elementor-icon-box-title {
	color: var(--me-accent) !important;
}


/* --------------------------------------------------------------------------
   E2. Image Box — Thumbnail Zoom + Heading Colour Transition
   Targets: .elementor-widget-image-box
   Effect: thumbnail scales up on hover; heading colour shifts to accent.
   -------------------------------------------------------------------------- */
.elementor-widget-image-box .elementor-image-box-img {
	overflow:      hidden;
	border-radius: var(--me-radius);
}

.elementor-widget-image-box .elementor-image-box-img img {
	transition:  transform 0.45s ease;
	display:     block;
	width:       100%;
}

.elementor-widget-image-box:hover .elementor-image-box-img img {
	transform: scale(1.07);
}

.elementor-widget-image-box .elementor-image-box-title {
	transition: color var(--me-transition);
}

.elementor-widget-image-box:hover .elementor-image-box-title {
	color: var(--me-accent) !important;
}

/* Subtle lift on the whole widget */
.elementor-widget-image-box {
	transition: transform var(--me-transition), box-shadow var(--me-transition);
}

.elementor-widget-image-box:hover {
	transform:  translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}


/* --------------------------------------------------------------------------
   E3. Testimonial Widget — Card Polish
   Targets: .elementor-widget-testimonial, .elementor-widget-testimonial-carousel
   Effect: refined card with shadow, styled quote icon, left accent border.
   -------------------------------------------------------------------------- */
.elementor-widget-testimonial .elementor-testimonial-wrapper,
.elementor-testimonial-carousel .elementor-testimonial-wrapper {
	background:    var(--me-bg-alt);
	border:        1px solid var(--me-border);
	border-left:   4px solid var(--me-accent);
	border-radius: var(--me-radius);
	padding:       28px 28px 24px;
	box-shadow:    var(--me-card-shadow);
	position:      relative;
	transition:    box-shadow var(--me-transition), transform var(--me-transition);
}

.elementor-widget-testimonial .elementor-testimonial-wrapper:hover,
.elementor-testimonial-carousel .elementor-testimonial-wrapper:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	transform:  translateY(-3px);
}

/* Opening quote pseudo-element */
.elementor-widget-testimonial .elementor-testimonial-wrapper::before,
.elementor-testimonial-carousel .elementor-testimonial-wrapper::before {
	content:     '\201C';
	font-size:   72px;
	line-height: 1;
	color:       var(--me-accent);
	opacity:     0.18;
	position:    absolute;
	top:         10px;
	left:        18px;
	font-family: Georgia, serif;
	pointer-events: none;
}

/* Testimonial content text */
.elementor-widget-testimonial .elementor-testimonial-content,
.elementor-testimonial-carousel .elementor-testimonial-content {
	font-size:   15px;
	line-height: 1.7;
	color:       var(--me-text-muted);
	font-style:  italic;
}

/* Author name */
.elementor-widget-testimonial .elementor-testimonial-name,
.elementor-testimonial-carousel .elementor-testimonial-name {
	font-size:   14px;
	font-weight: 700;
	color:       var(--me-text);
}

/* Job title */
.elementor-widget-testimonial .elementor-testimonial-job,
.elementor-testimonial-carousel .elementor-testimonial-job {
	font-size:  12px;
	color:      var(--me-accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Avatar styling */
.elementor-widget-testimonial .elementor-testimonial-image img,
.elementor-testimonial-carousel .elementor-testimonial-image img {
	border-radius: 50%;
	border:        3px solid var(--me-accent);
	object-fit:    cover;
}


/* --------------------------------------------------------------------------
   E4. Counter Widget — Accent Number + Animated Underline
   Targets: .elementor-widget-counter
   Effect: large accent-colored number, animated underline on the title.
   -------------------------------------------------------------------------- */
.elementor-widget-counter {
	text-align: center;
}

/* The big number */
.elementor-widget-counter .elementor-counter-number-wrapper {
	display:     inline-block;
	position:    relative;
	padding-bottom: 10px;
}

.elementor-widget-counter .elementor-counter-number {
	color:       var(--me-accent) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	line-height: 1 !important;
}

/* Prefix / suffix inherit accent colour */
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix {
	color: var(--me-accent) !important;
}

/* Animated underline beneath the number */
.elementor-widget-counter .elementor-counter-number-wrapper::after {
	content:    '';
	display:    block;
	width:      0%;
	height:     3px;
	background: var(--me-accent);
	border-radius: 2px;
	margin:     8px auto 0;
	transition: width 0.6s ease 0.2s;
}

/* Trigger underline when Elementor marks it as animated */
.elementor-widget-counter.elementor-invisible .elementor-counter-number-wrapper::after,
.elementor-widget-counter .elementor-counter-number-wrapper::after {
	width: 48px;
}

/* Counter title below the number */
.elementor-widget-counter .elementor-counter-title {
	font-size:      13px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--me-text-muted);
	margin-top:     10px;
}