/**
 * Titan Theme — Centralized Color Variables & Utility Classes
 *
 * Source of truth for non-WordPress-preset colors used throughout the theme.
 * Edit this file to retheme dark surfaces, social brand colors, and recurring
 * accent shades without hunting through PHP/templates.
 *
 * The corresponding Tailwind tokens are mirrored in tailwind/tailwind-theme.css
 * for when the CSS is recompiled.
 */
:root {
	/* Dark surfaces */
	--titan-dark: #050505;
	--titan-dark-soft: #0a0a0a;

	/* Social brand colors */
	--titan-whatsapp: #25D366;
	--titan-whatsapp-dark: #1da851;
	--titan-facebook: #1877F2;
	--titan-facebook-dark: #0d65d9;
	--titan-youtube: #FF0000;
	--titan-youtube-dark: #cc0000;
	--titan-tiktok-cyan: #00f2ea;
	--titan-tiktok-red: #ff0050;
	--titan-ig-1: #f09433;
	--titan-ig-2: #e6683c;
	--titan-ig-3: #dc2743;
	--titan-ig-4: #cc2366;
	--titan-ig-5: #bc1888;

	/* Convenience aliases that mirror the gold palette but are independent of Tailwind rebuilds */
	--titan-gold-200: #FFE8B4;
	--titan-gold-500: #C9A961;
	--titan-gold-600: #B8860B;
	--titan-gold-700: #9A7209;
	--titan-gold-800: #87654A;
}

/* ============================================================
   Background utilities
   ============================================================ */
.bg-titan-dark        { background-color: var(--titan-dark); }
.bg-titan-dark-soft   { background-color: var(--titan-dark-soft); }
.bg-titan-whatsapp    { background-color: var(--titan-whatsapp); }
.bg-titan-facebook    { background-color: var(--titan-facebook); }
.bg-titan-youtube     { background-color: var(--titan-youtube); }
.bg-titan-tiktok-cyan { background-color: var(--titan-tiktok-cyan); }
.bg-titan-tiktok-red  { background-color: var(--titan-tiktok-red); }

.hover\:bg-titan-whatsapp-dark:hover { background-color: var(--titan-whatsapp-dark); }
.hover\:bg-titan-facebook-dark:hover { background-color: var(--titan-facebook-dark); }
.hover\:bg-titan-youtube-dark:hover  { background-color: var(--titan-youtube-dark); }

/* Text utilities */
.text-titan-gold-200 { color: var(--titan-gold-200); }
.text-titan-gold-500 { color: var(--titan-gold-500); }
.hover\:text-titan-gold-200:hover { color: var(--titan-gold-200); }

/* Border utilities */
.border-titan-gold-500    { border-color: var(--titan-gold-500); }
.border-titan-gold-500\/50 { border-color: rgb(201 169 97 / 0.5); }
.hover\:border-titan-gold-200:hover { border-color: var(--titan-gold-200); }
.group:hover .group-hover\:border-titan-gold-200 { border-color: var(--titan-gold-200); }

/* Gradient utility (from gold-200 → gold-500) */
.bg-gradient-titan-gold {
	background-image: linear-gradient(to right, var(--titan-gold-200), var(--titan-gold-500));
}
.bg-gradient-titan-gold-v {
	background-image: linear-gradient(to bottom, var(--titan-gold-200), var(--titan-gold-500));
}
/* Instagram gradient (4-stop) used in social buttons */
.bg-gradient-titan-instagram {
	background-image: linear-gradient(135deg,
		var(--titan-ig-1),
		var(--titan-ig-2),
		var(--titan-ig-3),
		var(--titan-ig-4),
		var(--titan-ig-5));
}
.bg-gradient-titan-instagram-r {
	background-image: linear-gradient(to right, var(--titan-ig-1), var(--titan-ig-3));
}

/* ============================================================
   Service step image cluster (rotated tiles)
   Used by single-titan_service.php
   ============================================================ */
.step-images .img-tile {
	position: absolute;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	overflow: hidden;
	background: #111;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	transform: rotate(45deg);
}
.step-images .img-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: rotate(-45deg) scale(1.25);
	display: block;
}
.step-images .img-main {
	width: 65%;
	top: 17%;
	left: 17%;
	z-index: 3;
}
.step-images .img-sub-1 {
	width: 40%;
	top: -4%;
	right: 0;
	opacity: 0.85;
	z-index: 2;
}
.step-images .img-sub-2 {
	width: 40%;
	bottom: -4%;
	left: 0;
	opacity: 0.75;
	z-index: 1;
}

/* Reveal animation for step sections */
.step-section {
	opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.step-section {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 0.9s ease, transform 0.9s ease;
	}
	.step-section.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Service intro typography polish */
.service-intro p,
.service-step-content p {
	margin-bottom: 1rem;
}
.service-intro p:last-child,
.service-step-content p:last-child {
	margin-bottom: 0;
}
.service-intro strong,
.service-step-content strong {
	color: var(--titan-gold-200);
	font-weight: 600;
}

@media (max-width: 767px) {
	.step-images {
		max-width: 280px !important;
	}
	.step-images .img-sub-1,
	.step-images .img-sub-2 {
		width: 42%;
		opacity: 0.65;
	}
}