/**
 * Theme Custom CSS — Deepak&Agnivesh Calculator Theme
 * Animations, print styles, utility overrides
 */

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
	animation: fadeIn 0.5s ease-out both;
}

.animate-fade-in-up {
	animation: fadeInUp 0.6s ease-out both;
}

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.40s; }
.stagger > *:nth-child(9) { animation-delay: 0.45s; }

/* ─── Smooth details/summary ─────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary ~ * {
	animation: slideDown 0.2s ease-out;
}

/* ─── Custom scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Input number arrows hide ───────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}

/* ─── Select custom arrow ────────────────────────────── */
select.appearance-none {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

/* ─── Line clamp ─────────────────────────────────────── */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Prose tweaks ───────────────────────────────────── */
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose table { font-size: 0.875rem; }
.prose img { border-radius: 0.75rem; }

/* ─── Print Styles ───────────────────────────────────── */
@media print {
	header, footer, nav, aside,
	#searchBar, #mobileMenu,
	button, .no-print { display: none !important; }

	body { background: white !important; color: black !important; }

	.bg-white, .bg-surface-50 { background: white !important; }

	#calcResults { border: 1px solid #ddd !important; break-inside: avoid; }

	canvas { max-height: 300px !important; }

	a::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; }
}