/*
Theme Name: iTab Solution
Theme URI: https://itabsolution.com/
Author: iTab Solution
Author URI: https://itabsolution.com/
Description: Premium, Awwwards-grade WordPress theme for iTab Solution — laptop, MacBook, iPad and Mac Mini repair in Kolkata. Converted from the original React/TanStack build with the full design system, animations and responsive layouts preserved. Elementor Free compatible.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itab-solution
Tags: business, portfolio, one-column, custom-logo, custom-menu, featured-images, full-width-template, block-styles, translation-ready
*/

/* Compiled design-system styles live in assets/css/theme.css (enqueued from functions.php). */

/* ============================================================
   iTab Premium Design Layer — homepage upgrade
   ============================================================ */

/* ---------- Section background rhythm ---------- */
.itab-bg-white { background: var(--background); }
.itab-bg-soft { background: #F8F9FB; }
.dark .itab-bg-soft { background: oklch(11% .005 260); }
.itab-bg-glass {
	background: linear-gradient(180deg, rgba(248,249,251,.6), rgba(248,249,251,.15));
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}
.dark .itab-bg-glass {
	background: linear-gradient(180deg, rgba(20,20,20,.55), rgba(20,20,20,.15));
}
.itab-bg-dark-red {
	background:
		radial-gradient(80% 60% at 15% 0%, rgba(224,49,49,.10), transparent 60%),
		radial-gradient(60% 60% at 100% 100%, rgba(224,49,49,.06), transparent 60%),
		#141414;
	color: #fff;
}

/* ---------- Reveal (fade-up) ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hover lift + shadow ---------- */
.itab-hover-lift {
	transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
.itab-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px -24px rgba(0,0,0,.28);
}
.dark .itab-hover-lift:hover {
	box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
}

/* ---------- Image zoom on hover ---------- */
.itab-img-zoom { overflow: hidden; }
.itab-img-zoom img {
	transition: transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;
	will-change: transform;
}
.itab-img-zoom:hover img { transform: scale(1.08); }

/* ---------- Glow effects (kept subtle for a sober, everyday-friendly look) ---------- */
.itab-glow-red {
	box-shadow: 0 0 50px -20px rgba(224,49,49,.28);
}
.itab-glow-red-soft {
	box-shadow: 0 0 30px -18px rgba(224,49,49,.18);
}
.itab-text-glow { text-shadow: none; }

/* ---------- Floating UI elements (badges over hero imagery) ---------- */
.itab-float-badge {
	animation: itab-float 5s ease-in-out infinite;
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
}
.itab-float-badge.itab-float-delay { animation-delay: 1.4s; }
@keyframes itab-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.itab-float-badge { animation: none; }
}

/* ---------- Simple scroll parallax (see theme.js parallax()) ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Premium card ---------- */
.itab-card-premium {
	border-radius: 1.75rem;
	border: 1px solid var(--border);
	background: var(--card);
	overflow: hidden;
	position: relative;
}

/* ---------- Before / After comparison slider ---------- */
.itab-compare {
	position: relative;
	overflow: hidden;
	border-radius: 1.75rem;
	aspect-ratio: 4 / 3;
	user-select: none;
	touch-action: pan-y;
}
.itab-compare img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.itab-compare-before { z-index: 1; }
.itab-compare-after {
	z-index: 2;
	clip-path: inset(0 50% 0 0);
}
.itab-compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 3;
	cursor: ew-resize;
	box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.itab-compare-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e03131' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m9 7-5 5 5 5'/><path d='m15 7 5 5-5 5'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}
.itab-compare-label {
	position: absolute;
	top: 1rem;
	z-index: 3;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(0,0,0,.55);
	color: #fff;
	backdrop-filter: blur(6px);
}
.itab-compare-label.itab-compare-label-before { left: 1rem; }
.itab-compare-label.itab-compare-label-after { right: 1rem; }

/* ---------- Placeholder image slot (client needs to add a real photo here) ---------- */
.itab-img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-align: center;
	padding: 1.5rem;
	background: repeating-linear-gradient(135deg, rgba(224,49,49,.06), rgba(224,49,49,.06) 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 20px);
	color: var(--muted-foreground);
	font-size: 11px;
	letter-spacing: .04em;
	line-height: 1.5;
}

/* ---------- Accordion (FAQ) ---------- */
/* Driven by the .is-open class toggled in assets/js/theme.js — see accordions(). */
.itab-accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}
.itab-accordion-panel > div {
	overflow: hidden;
	min-height: 0;
}
[data-accordion-item].is-open .itab-accordion-panel {
	grid-template-rows: 1fr;
}
[data-accordion-trigger] .itab-accordion-icon {
	transition: transform 0.3s ease;
}
[data-accordion-item].is-open [data-accordion-trigger] .itab-accordion-icon {
	transform: rotate(45deg);
}

/* ---------- Interaction layer (replaces Framer Motion / Lenis) ---------- */

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
}

html { scroll-behavior: smooth; }
html.nav-open { overflow: hidden; }

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.marquee, .animate-float, .text-shimmer { animation: none !important; }
}

header.fixed { padding-top: 1rem; padding-bottom: 1rem; }
header.fixed.is-scrolled { padding-top: 0.5rem; padding-bottom: 0.5rem; }
header.fixed.is-scrolled .itab-bar {
	background: color-mix(in oklab, var(--background) 65%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-color: color-mix(in oklab, var(--foreground) 8%, transparent);
	box-shadow: 0 10px 40px -10px color-mix(in oklab, black 50%, transparent);
}
header .itab-logo img { height: 2rem; width: auto; }

.itab-mobile-nav { display: none; }
.itab-mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .itab-mobile-nav.is-open { display: none; } }

/* WordPress core content styles inside converted layouts */
.prose-itab > * + * { margin-top: 1.25rem; }
.prose-itab h2 { font-family: var(--font-display); font-size: 1.875rem; margin-top: 2.5rem; }
.prose-itab h3 { font-family: var(--font-display); font-size: 1.375rem; margin-top: 2rem; }
.prose-itab p, .prose-itab li { color: var(--muted-foreground); line-height: 1.75; }
.prose-itab ul { list-style: disc; padding-left: 1.25rem; }
.prose-itab ol { list-style: decimal; padding-left: 1.25rem; }
.prose-itab a { color: var(--primary); text-decoration: underline; }
.prose-itab img, .prose-itab iframe { border-radius: 1.25rem; max-width: 100%; }
.prose-itab blockquote {
	border-left: 3px solid var(--primary);
	padding-left: 1.25rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
}
.alignwide { max-width: 72rem; margin-inline: auto; }
.alignfull { width: 100%; }
.wp-caption-text { font-size: 0.8125rem; color: var(--muted-foreground); }

/* Login / comment / search form controls inherit the design system */
#loginform p, .comment-form p { margin-bottom: 1rem; }
#loginform label, .comment-form label { display: block; font-size: 0.8125rem; margin-bottom: 0.375rem; color: var(--muted-foreground); }
#loginform input[type="text"],
#loginform input[type="password"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border-radius: 0.875rem;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	outline: none;
}
#loginform input:focus, .comment-form input:focus, .comment-form textarea:focus { border-color: var(--primary); }
#loginform .submit input, .comment-form .form-submit input {
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	border: 0;
	cursor: pointer;
}

.pagination .nav-links, .navigation .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers, .navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border-radius: 9999px;
	border: 1px solid var(--border);
	font-size: 0.875rem;
}
.pagination .page-numbers.current { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }

/* Hero shimmer: currentColor resolves to transparent under background-clip:text,
   so pin the gradient to explicit stops for a visible metallic sweep. */
.text-shimmer {
	color: var(--primary);
}

/* ============================================================
   iTab Premium Design Layer v2 — Europe/USA refresh
   4-colour system: Red (primary) · Black · White · Electric Blue (new accent)
   ============================================================ */

/* ---------- Electric blue accent utilities ---------- */
.text-electric-blue { color: var(--electric-blue); }
.bg-electric-blue { background: var(--electric-blue); }
.bg-electric-blue-soft { background: var(--electric-blue-soft); }
.border-electric-blue { border-color: var(--electric-blue); }
.itab-badge-blue {
	background: var(--electric-blue-soft);
	color: var(--electric-blue);
}
.itab-glow-blue { box-shadow: 0 0 50px -20px color-mix(in oklab, var(--electric-blue) 55%, transparent); }
.itab-glow-blue-soft { box-shadow: 0 0 30px -18px color-mix(in oklab, var(--electric-blue) 40%, transparent); }

.itab-accent-line {
	height: 3px;
	width: 3.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--primary), var(--electric-blue));
}

.itab-text-duotone {
	background: linear-gradient(90deg, var(--primary), var(--electric-blue));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Magnetic / premium button interaction ---------- */
.itab-btn-magnetic {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.itab-btn-magnetic::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, var(--electric-blue), var(--primary));
	opacity: 0;
	transition: opacity .4s ease;
}
.itab-btn-magnetic:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -16px color-mix(in oklab, var(--primary) 45%, transparent);
}
.itab-btn-magnetic:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.itab-btn-magnetic { transition: none; }
	.itab-btn-magnetic:hover { transform: none; }
}

/* ---------- Animated gradient border (premium card frame) ---------- */
.itab-border-flow { position: relative; border-radius: 1.75rem; }
.itab-border-flow::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(120deg, var(--primary), var(--electric-blue), var(--primary));
	background-size: 200% 200%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: itab-border-flow 6s linear infinite;
	opacity: .55;
	pointer-events: none;
}
@keyframes itab-border-flow { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .itab-border-flow::after { animation: none; } }

/* ---------- Underline-draw nav link ---------- */
.itab-nav-link { position: relative; }
.itab-nav-link::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -4px;
	height: 2px;
	background: linear-gradient(90deg, var(--primary), var(--electric-blue));
	transition: right .35s cubic-bezier(.16,1,.3,1);
}
.itab-nav-link:hover::after,
.itab-nav-link.is-active::after { right: 0; }

/* ---------- Cursor-follow spotlight on premium cards ---------- */
.itab-spotlight { position: relative; overflow: hidden; }
.itab-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), color-mix(in oklab, var(--electric-blue) 16%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.itab-spotlight:hover::before { opacity: 1; }

.itab-counter { font-variant-numeric: tabular-nums; }

.itab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
.itab-eyebrow::before {
	content: "";
	width: 1.25rem;
	height: 2px;
	background: linear-gradient(90deg, var(--primary), var(--electric-blue));
}

@media (prefers-reduced-motion: reduce) {
	.itab-border-flow::after { display: none; }
	.itab-spotlight::before { display: none; }
}

/* ---------- Premium focus states for booking / contact forms ---------- */
main form input:focus,
main form select:focus,
main form textarea:focus {
	border-color: var(--electric-blue);
	box-shadow: 0 0 0 3px var(--electric-blue-soft);
	outline: none;
}

/* Open FAQ items pick up the blue accent for a subtle two-tone rhythm */
[data-accordion-item].is-open .itab-accordion-icon { color: var(--electric-blue); }

/* ---------- Standalone blue glow blob (Tailwind opacity modifiers aren't available for this custom var in the compiled file) ---------- */
.itab-blob-blue {
	background: var(--electric-blue);
	opacity: .16;
	filter: blur(72px);
}

/* Footer blue social icon hover (hand-written since electric-blue isn't part of the compiled Tailwind build) */
.itab-social-blue:hover { background: var(--electric-blue); border-color: var(--electric-blue); }

/* ---------- Product placeholder tiles (buy/sell grid) — duotone gradient instead of flat grey ---------- */
.itab-product-tile {
	background:
		radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 55%),
		radial-gradient(120% 140% at 100% 100%, color-mix(in oklab, var(--electric-blue) 18%, transparent), transparent 55%),
		var(--secondary);
}