/*
Theme Name: Versatility Theme
Theme URI: https://versatilityllc.com/
Description: Premium, optimized standalone theme tailored for Elementor, speed, SEO, and security.
Author: Versatility LLC
Author URI: https://versatilityllc.com/
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: versatility-theme
*/

/* ==========================================================================
   Global Base Design System
   ========================================================================== */

body {
	font-family: "Manrope", Sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Skip link styling for accessibility */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 50%;
	transform: translateX(-50%);
	background: #00ABF4;
	color: #fff;
	padding: 10px 20px;
	z-index: 99999;
	border-radius: 0 0 8px 8px;
	font-weight: bold;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Breadcrumbs Styling */
.versatility-breadcrumbs {
	font-size: 14px;
	color: #64748b;
	padding: 12px 16px;
	background: #f8fafc;
	border-radius: 8px;
	margin-bottom: 24px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.versatility-breadcrumbs a {
	color: #00ABF4;
	text-decoration: none;
	transition: color 0.2s ease;
}

.versatility-breadcrumbs a:hover {
	color: #0089d1;
}

.versatility-breadcrumbs .separator {
	margin: 0 8px;
	color: #94a3b8;
}

.versatility-breadcrumbs .current {
	color: #334155;
	font-weight: 500;
}

/* ==========================================================================
   Full-Screen Preloader Overlay (GSAP Powered)
   ========================================================================== */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #050505;
	z-index: 99999; /* Higher than WP Admin Bar */
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Manrope', sans-serif;
	box-sizing: border-box;
}

.preloader-content {
	text-align: center;
}

.counter-wrapper {
	font-size: 8rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -3px;
	color: #ffffff;
}

.counter-wrapper .percent {
	font-size: 3rem;
	font-weight: 600;
	color: #00ABF4;
	margin-left: 4px;
	vertical-align: super;
}

.loading-text {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #64748B;
	margin-top: 1.5rem;
}

/* Initially hide header and main content for smooth fade-in */
body.preloader-active {
	overflow: hidden !important;
}

body.preloader-active .site-header {
	opacity: 0;
	transform: translateY(-20px);
}

body.preloader-active .site-content {
	opacity: 0;
	transform: translateY(20px);
}

/* ==========================================================================
   Back to Top Button Styling (Premium Circular Progress)
   ========================================================================== */
.versatility-back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #031E2C;
	border: none;
	cursor: pointer;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	padding: 0;
	outline: none;
}

.versatility-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

/* SVG circle styling */
.versatility-back-to-top .progress-circle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* Start progress at the top center */
	pointer-events: none;
}

.versatility-back-to-top .progress-circle path {
	fill: none;
	stroke: #00ABF4; /* Brand accent blue */
	stroke-width: 4;
	stroke-linecap: round;
	box-sizing: border-box;
	transition: stroke-dashoffset 10ms linear;
}

/* Arrow interior icon styling */
.versatility-back-to-top .arrow-up {
	color: #ffffff;
	font-size: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, color 0.3s ease;
}

.versatility-back-to-top:hover {
	background-color: #00ABF4;
	box-shadow: 0 15px 30px rgba(0, 171, 244, 0.25);
}

.versatility-back-to-top:hover .arrow-up {
	transform: translateY(-3px);
	color: #ffffff;
}

.versatility-back-to-top:hover .progress-circle path {
	stroke: #ffffff; /* Turns white on hover */
}