/*
Theme Name: Glossy Glimpse Auto Studio
Theme URI: https://example.com
Author: Gemmiz
Author URI: https://gemmiz.com
Description: Custom WordPress theme for Glossy Glimpse Auto Studio, built from client-supplied HTML/Tailwind designs. Header, footer, services, packages, testimonials, FAQs and gallery are all editable from wp-admin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: glossyglimpse
Tags: dark, one-page, custom-colors, custom-menu, featured-images
*/

/* ==========================================================================
   Shared component styles (ported from the original static HTML/Tailwind
   designs). Tailwind itself is loaded via CDN + inline config in header.php
   so every utility class used across the site keeps working, and this file
   only carries the small set of hand-written helper classes / animations
   that the designs relied on.
   ========================================================================== */

body {
	background-color: #0b1326;
	color: #dae2fd;
}

.glass-card,
.glass-panel,
.glass {
	background: rgba(30, 41, 59, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.shine-effect,
.shine-button,
.btn-shine,
.glossy-shine {
	position: relative;
	overflow: hidden;
}
.shine-effect::after,
.shine-button::after,
.btn-shine::after,
.glossy-shine::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.12), transparent);
	transform: rotate(45deg);
	transition: 0.5s;
	pointer-events: none;
}
.shine-effect:hover::after,
.shine-button:hover::after,
.btn-shine:hover::after,
.glossy-shine:hover::after {
	left: 100%;
	top: 100%;
}

.btn-primary {
	background: #2a85da;
	color: #fff;
	text-transform: uppercase;
}
.btn-primary:hover {
	box-shadow: 0 0 15px rgba(42, 133, 218, 0.5);
}
.btn-secondary {
	background: transparent;
	border: 2px solid #2a85da;
	color: #fff;
	text-transform: uppercase;
}
.btn-secondary:hover {
	background: rgba(42, 133, 218, 0.1);
}

/* Before / after comparison slider (used on service + gallery pages) */
.gg-compare {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0.5rem;
	user-select: none;
}
.gg-compare .gg-after {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.gg-compare .gg-before {
	position: absolute;
	inset: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	border-right: 2px solid #fff;
}
.gg-compare .gg-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	cursor: ew-resize;
	z-index: 20;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.gg-compare .gg-tag {
	position: absolute;
	top: 1rem;
	z-index: 20;
	padding: 0.25rem 1rem;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	background: rgba(11, 19, 38, 0.7);
	backdrop-filter: blur(6px);
}
.gg-compare .gg-tag.after {
	right: 1rem;
	background: rgba(3, 159, 227, 0.85);
	color: #fff;
}
.gg-compare .gg-tag.before {
	left: 1rem;
}

/* WP core alignment / accessibility helpers */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* Keep the fixed site header below the WP admin toolbar while logged in,
   so nothing overlaps in the editor/preview. */
body.admin-bar header.fixed { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar header.fixed { top: 46px; }
}

/* Fallback nav toggle (mobile) */
#gg-mobile-menu { display: none; }
#gg-mobile-menu.open { display: block; }