/* VNC India Theme CSS - Tailwind Utilities + Custom Styles */

/* ========================================
   TAILWIND CSS CUSTOM UTILITIES
   ======================================== */

/* Custom Colors */
.bg-ink { background-color: #052e16; }
.bg-leaf { background-color: #d9f99d; }
.bg-clay { background-color: #fdba74; }
.bg-lavender { background-color: #e9d5ff; }
.bg-sand { background-color: #f5f5f4; }
.bg-soft-bg { background-color: #fdfcf8; }

.text-ink { color: #052e16; }
.text-leaf { color: #d9f99d; }
.text-clay { color: #fdba74; }

.border-ink { border-color: #052e16; }

/* Typography */
.font-display { font-family: 'Fraunces', serif; }
.font-body { font-family: 'Outfit', sans-serif; }

body {
	font-family: 'Outfit', sans-serif;
	background-color: #fdfcf8;
	color: #052e16;
}

/* Neubrutalist Shadows */
.shadow-hard {
	box-shadow: 4px 4px 0px 0px #052e16;
}

.shadow-pop {
	box-shadow: 4px 4px 0px 0px #052e16;
}

.shadow-pop-lg {
	box-shadow: 8px 8px 0px 0px #052e16;
}

.shadow-pop-hover:hover {
	box-shadow: 4px 4px 0px 0px #052e16;
}

/* Selection */
::selection {
	background-color: #d9f99d;
	color: #052e16;
}

/* Buttons — match original PHP site */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #052e16;
	color: white;
	border: 1.5px solid #052e16;
	box-shadow: 4px 4px 0px 0px #166534;
	transition: all 0.2s;
}

.btn-primary:hover {
	background: #d9f99d;
	color: #052e16;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #166534;
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: white;
	color: #052e16;
	border: 1.5px solid #052e16;
	box-shadow: 4px 4px 0px 0px #052e16;
	transition: all 0.2s;
}

.btn-secondary:hover {
	background: #fdba74;
	color: #052e16;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #052e16;
}

.btn-donate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fdba74;
	color: #052e16;
	font-weight: 700;
	border: 1.5px solid #052e16;
	box-shadow: 4px 4px 0px 0px #052e16;
	transition: all 0.2s;
}

.btn-donate:hover {
	background: #fed7aa;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #052e16;
}

/* Marquee Animation */
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.marquee-container {
	overflow: hidden;
	width: 100%;
}

.marquee-content {
	display: inline-block;
	white-space: nowrap;
	animation: marquee 20s linear infinite;
}

.animate-marquee {
	animation: marquee 20s linear infinite;
}

/* Slow Spin for circle badge */
@keyframes spin-slow {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.animate-spin-slow {
	animation: spin-slow 12s linear infinite;
}

/* Bounce */
@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.animate-bounce {
	animation: bounce 2s ease-in-out infinite;
}

/* Opacity variants for Tailwind v4 compat */
.bg-leaf\/20 { background-color: rgba(217, 249, 157, 0.2); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-leaf\/10 { background-color: rgba(217, 249, 157, 0.1); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-lavender\/50 { background-color: rgba(233, 213, 255, 0.5); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-leaf { border-color: #d9f99d; }
.text-ink\/5 { color: rgba(5, 46, 22, 0.05); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* No Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ========================================
   COMPONENT STYLES
   ======================================== */

/* Form Inputs */
.vnc-input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid #052e16;
	border-radius: 0.75rem;
	font-weight: 500;
	background: white;
	transition: all 0.2s;
}

.vnc-input:focus {
	outline: none;
	box-shadow: 4px 4px 0px 0px #052e16;
	transform: translateY(-1px);
}

.vnc-input::placeholder {
	color: #9ca3af;
}

/* Buttons */
.vnc-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #052e16;
	color: white;
	font-weight: 700;
	border-radius: 9999px;
	border: 1.5px solid #052e16;
	transition: all 0.2s;
	box-shadow: 4px 4px 0px 0px #166534;
}

.vnc-btn-primary:hover {
	background: #d9f99d;
	color: #052e16;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #166534;
}

.vnc-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: white;
	color: #052e16;
	font-weight: 700;
	border-radius: 9999px;
	border: 1.5px solid #052e16;
	transition: all 0.2s;
	box-shadow: 4px 4px 0px 0px #052e16;
}

.vnc-btn-secondary:hover {
	background: #fdba74;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #052e16;
}

.vnc-btn-donate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #fdba74;
	color: #052e16;
	font-weight: 700;
	border-radius: 9999px;
	border: 1.5px solid #052e16;
	transition: all 0.2s;
	box-shadow: 4px 4px 0px 0px #052e16;
}

.vnc-btn-donate:hover {
	background: #fed7aa;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px 0px #052e16;
}

/* Cards */
.vnc-card {
	background: white;
	border: 2px solid #052e16;
	border-radius: 1rem;
	overflow: hidden;
	transition: all 0.3s;
}

.vnc-card:hover {
	transform: translateY(-4px);
	box-shadow: 4px 4px 0px 0px #052e16;
}

/* Tab Navigation */
.vnc-tab {
	padding: 0.5rem 1.5rem;
	font-weight: 700;
	border-radius: 9999px;
	border: 1.5px solid transparent;
	transition: all 0.2s;
	cursor: pointer;
}

.vnc-tab:hover {
	border-color: #052e16;
}

.vnc-tab.active {
	background: #052e16;
	color: white;
	border-color: #052e16;
}

/* Amount Button */
.vnc-amount-btn {
	padding: 0.75rem 1.5rem;
	font-weight: 700;
	border-radius: 0.75rem;
	border: 1.5px solid #052e16;
	background: white;
	transition: all 0.2s;
	cursor: pointer;
}

.vnc-amount-btn:hover {
	background: #f5f5f4;
}

.vnc-amount-btn.selected {
	background: #052e16;
	color: white;
	box-shadow: 4px 4px 0px 0px #d9f99d;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
	.font-display {
		font-size: 2.5rem;
		line-height: 1;
	}
}

/* Print Styles */
@media print {
	.navbar, .footer-section, .donation-widget-section {
		display: none !important;
	}
}

/* Screen Reader Text (Skip to content) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}