/*
Theme Name:   Auto Detailing PK
Template:     hello-elementor
Author:       Auto Detailing PK
Version:      1.2.0
Description:  Child theme for autodetailing.com.pk - premium car care, PPF and ceramic coating studio in Multan. All customisation lives here; Hello Elementor stays untouched so it can update safely.
Text Domain:  autodetailing-child
*/

/* ==========================================================================
   1. Design tokens
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
	/* Surfaces - deep automotive black through to raised cards */
	--ad-bg:            #0A0C10;
	--ad-surface:       #141922;
	--ad-surface-2:     #1C232E;
	--ad-line:          rgba(255, 255, 255, 0.08);
	--ad-line-strong:   rgba(255, 255, 255, 0.16);

	/* Text */
	--ad-text:          #F4F7FA;
	--ad-muted:         #9AA7B4;
	--ad-dim:           #6B7885;

	/* Brand accent - deep red.
	   Two tones on purpose: the deep tone is for FILLS (buttons, badges) where
	   white text sits on top, and the lighter tone is for accent TEXT and icons
	   on the dark background, where the deep maroon alone is too low-contrast
	   to read comfortably at small sizes. */
	--ad-accent:        #C1121F;
	--ad-accent-hi:     #E8323F;
	--ad-accent-deep:   #8A0B14;
	--ad-accent-dim:    rgba(193, 18, 31, 0.16);

	/* Text colour to use ON an accent fill */
	--ad-on-accent:     #FFFFFF;

	/* Support */
	--ad-success:       #3DD68C;
	--ad-danger:        #F2555A;

	/* Typography */
	--ad-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;
	--ad-font-display: var(--ad-font);

	/* Spacing scale */
	--ad-s1: 0.5rem;
	--ad-s2: 0.875rem;
	--ad-s3: 1.25rem;
	--ad-s4: 2rem;
	--ad-s5: 3rem;
	--ad-s6: 4.5rem;
	--ad-s7: 7rem;

	/* Shape */
	--ad-radius:    14px;
	--ad-radius-sm: 8px;
	--ad-radius-lg: 22px;

	/* Depth */
	--ad-shadow:    0 10px 30px rgba(0, 0, 0, 0.45);
	--ad-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

	/* Motion */
	--ad-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background: var(--ad-bg);
	color: var(--ad-text);
	font-family: var(--ad-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ad-font-display);
	color: var(--ad-text);
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-weight: 700;
}

p { color: var(--ad-muted); line-height: 1.7; }

a { color: var(--ad-accent-hi); text-decoration: none; transition: color 0.2s var(--ad-ease); }
a:hover { color: var(--ad-accent); }

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ad-accent); color: var(--ad-on-accent); }

/* Keyboard focus stays visible - do not remove */
:focus-visible {
	outline: 2px solid var(--ad-accent-hi);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Section rhythm
   ========================================================================== */

.ad-section { padding-block: var(--ad-s6); }
.ad-section--tight { padding-block: var(--ad-s5); }
.ad-section--alt { background: var(--ad-surface); }

.ad-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ad-accent-hi);
	margin-bottom: var(--ad-s2);
}

.ad-section-title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin-bottom: var(--ad-s3);
}

.ad-section-lede {
	max-width: 60ch;
	font-size: 1.05rem;
	color: var(--ad-muted);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.ad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.9em 1.9em;
	border-radius: var(--ad-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s var(--ad-ease), background 0.2s var(--ad-ease),
	            border-color 0.2s var(--ad-ease), color 0.2s var(--ad-ease);
}

.ad-btn:hover { transform: translateY(-2px); }
.ad-btn:active { transform: translateY(0); }

.ad-btn--primary { background: var(--ad-accent); color: var(--ad-on-accent); }
.ad-btn--primary:hover { background: var(--ad-accent-hi); color: var(--ad-on-accent); }

.ad-btn--ghost {
	background: transparent;
	color: var(--ad-text);
	border-color: var(--ad-line-strong);
}
.ad-btn--ghost:hover { border-color: var(--ad-accent); color: var(--ad-accent-hi); }

/* ==========================================================================
   5. Cards - services, gallery, testimonials
   ========================================================================== */

.ad-card {
	background: var(--ad-surface);
	border: 1px solid var(--ad-line);
	border-radius: var(--ad-radius);
	padding: var(--ad-s4);
	height: 100%;
	transition: transform 0.25s var(--ad-ease), border-color 0.25s var(--ad-ease),
	            box-shadow 0.25s var(--ad-ease);
}

.ad-card:hover {
	transform: translateY(-4px);
	border-color: var(--ad-line-strong);
	box-shadow: var(--ad-shadow);
}

.ad-card__icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--ad-radius-sm);
	background: var(--ad-accent-dim);
	color: var(--ad-accent-hi);
	margin-bottom: var(--ad-s3);
}

.ad-card__title { font-size: 1.2rem; margin-bottom: var(--ad-s1); }
.ad-card__text  { font-size: 0.95rem; margin: 0; }

/* Media card with image on top */
.ad-card--media { padding: 0; overflow: hidden; }
.ad-card--media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ad-card--media .ad-card__body { padding: var(--ad-s3) var(--ad-s4) var(--ad-s4); }

/* ==========================================================================
   6. Badges and ratings
   ========================================================================== */

.ad-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4em 0.85em;
	border-radius: 999px;
	background: var(--ad-surface-2);
	border: 1px solid var(--ad-line);
	font-size: 0.8rem;
	color: var(--ad-muted);
}

.ad-stars { color: var(--ad-accent-hi); letter-spacing: 0.1em; font-size: 0.95rem; }

/* ==========================================================================
   7. Header
   ========================================================================== */

.ad-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 12, 16, 0.82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ad-line);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.ad-footer {
	background: #06080B;
	border-top: 1px solid var(--ad-line);
	padding-block: var(--ad-s5) var(--ad-s4);
}

.ad-footer a { color: var(--ad-muted); }
.ad-footer a:hover { color: var(--ad-accent-hi); }

/* ==========================================================================
   9. Utilities
   ========================================================================== */

.ad-center     { text-align: center; }
.ad-muted      { color: var(--ad-muted); }
.ad-accent     { color: var(--ad-accent-hi); }
.ad-divider    { height: 1px; background: var(--ad-line); border: 0; margin-block: var(--ad-s4); }

/* Subtle red glow behind hero art */
.ad-glow { position: relative; }
.ad-glow::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 60%;
	background: radial-gradient(ellipse at 50% 0%, rgba(193, 18, 31, 0.20), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.ad-glow > * { position: relative; z-index: 1; }

/* ==========================================================================
   10. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.ad-btn:hover,
	.ad-card:hover { transform: none; }
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	:root { --ad-s6: 3.5rem; --ad-s7: 5rem; }
}

@media (max-width: 767px) {
	:root { --ad-s5: 2.25rem; --ad-s6: 2.75rem; }
	.ad-card { padding: var(--ad-s3); }
}