/* ============================================================
   VNC India — WP-specific overrides
   These styles are applied AFTER tailwind-original.css so they
   win over the Tailwind utilities where needed. They cover:
   - WP body classes (.admin-bar, .logged-in)
   - WP core markup (wp-block-*, .alignwide, etc.)
   - Search form, comment form
   - Gutenberg editor content (front-end)
   - Form state transitions not in the original (form-content,
     tab-active/inactive, fade-content, etc.)
   ============================================================ */

/* --- WP admin bar offset ------------------------------- */
body.admin-bar #nav-wrapper { top: 36px; }
@media (max-width: 782px) {
	body.admin-bar #nav-wrapper { top: 50px; }
}

/* --- WP generated body classes -------------------------- */
.alignwide { max-width: var(--wp--style--global--wide-size, 1280px); margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; width: 100%; }
.wp-block-image img { border-radius: 1.5rem; }

/* --- Skip link ------------------------------------------ */
.screen-reader-text,
.vnc-sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}
.screen-reader-text:focus,
.vnc-sr-only:focus {
	position: static !important;
	width: auto !important; height: auto !important;
	clip: auto !important;
	background: var(--color-ink, #052e16);
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

/* --- Form content tab transitions (Get Involved) ------- */
.form-content {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out;
	pointer-events: none;
}
.form-content.active {
	opacity: 1;
	height: auto;
	overflow: visible;
	pointer-events: auto;
}

/* --- Tab styling (matches original extra CSS) ----------- */
.tab-active {
	background-color: #ffffff;
	border-bottom-color: #ffffff;
	z-index: 20;
	position: relative;
}
.tab-inactive {
	background-color: #f1f5f9;
	color: #64748b;
	border-bottom-color: #052e16;
	z-index: 10;
	position: relative;
}
.tab-inactive:hover { background-color: #e2e8f0; }

/* --- Plan radio cards (membership tier) ----------------- */
.plan-radio:checked + div {
	background-color: #bef264;
	border-color: #052e16;
	color: #052e16;
	box-shadow: 2px 2px 0px 0px #052e16;
	transform: translate(-1px, -1px);
}
.interest-checkbox:checked + div {
	background-color: #bef264;
	border-color: #052e16;
	color: #052e16;
	box-shadow: 2px 2px 0px 0px #052e16;
	transform: translate(-1px, -1px);
}

/* --- Donate page: type-tab and amt-btn states ----------- */
.type-tab.active { background-color: #052e16; color: white; border-color: #052e16; }
.type-tab { background-color: #f5f5f4; color: #052e16; border: 1.5px solid #052e16; }

.amt-btn.selected { background-color: #d9f99d; border-color: #052e16; color: #052e16; box-shadow: 4px 4px 0px 0px #052e16; transform: translate(-2px, -2px); }
.amt-btn { background-color: white; border: 1.5px solid #052e16; transition: all 0.2s; }
.amt-btn:hover { background-color: #fdfcf8; transform: translate(-1px, -1px); box-shadow: 2px 2px 0px 0px #052e16; }

/* --- Sticky horizontal nav (about page) ----------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.active-state { background-color: #052e16; color: white; border-color: #052e16; }

/* --- Fade content (info card on Get Involved) ----------- */
.fade-content { opacity: 0; transition: opacity 0.4s ease-in-out; }
.fade-content.visible { opacity: 1; }

/* --- Search form (uses get_search_form) ----------------- */
.vnc-search-form input[type="search"] {
	width: 100%;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1.5px solid var(--color-ink, #052e16);
	border-radius: 1rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--color-ink, #052e16);
	box-shadow: 2px 2px 0 0 var(--color-ink, #052e16);
}
.vnc-search-form input[type="search"]:focus {
	outline: none;
	box-shadow: 4px 4px 0 0 var(--color-ink, #052e16);
	transform: translate(-1px, -1px);
}

/* --- Comment form --------------------------------------- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1.5px solid var(--color-ink, #052e16);
	border-radius: 1rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--color-ink, #052e16);
	box-shadow: 2px 2px 0 0 var(--color-ink, #052e16);
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	box-shadow: 4px 4px 0 0 var(--color-ink, #052e16);
	transform: translate(-1px, -1px);
}
.comment-form .submit,
.comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.75rem;
	background: var(--color-ink, #052e16);
	color: #fff;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	border: 1.5px solid var(--color-ink, #052e16);
	border-radius: 9999px;
	box-shadow: 4px 4px 0 0 var(--color-ink, #052e16);
	cursor: pointer;
	transition: all 0.2s;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 var(--color-ink, #052e16);
}
.comment-list { list-style: none; padding: 0; }
.comment-list li { margin: 0 0 1rem 0; padding: 1rem; background: #f5f5f4; border-radius: 1rem; }
.comment-author { font-weight: 700; }

/* --- Marquee animation (re-defined for WP since the
   original uses .marquee-container / .marquee-content classes;
   we keep that for templates that use them) ------------- */
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.marquee-container { white-space: nowrap; overflow: hidden; }
.marquee-content { animation: 30s linear infinite marquee; display: inline-block; }

/* --- Custom checkbox on donate page --------------------- */
input[type="checkbox"].custom-checkbox:checked,
input[type="checkbox"]:checked.w-\[5\] {
	background-color: #052e16;
	border-color: #052e16;
}

/* --- Map frame (contact page) --------------------------- */
.map-frame iframe { filter: grayscale(0%); transition: filter 0.5s; }
.map-frame:hover iframe { filter: grayscale(0%); }

/* --- Prose content (single posts) ---------------------- */
.prose { color: #374151; line-height: 1.7; }
.prose p { margin-bottom: 1rem; }
.prose h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.875rem; margin: 2rem 0 1rem 0; color: var(--color-ink, #052e16); }
.prose h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.5rem; margin: 1.5rem 0 0.75rem 0; color: var(--color-ink, #052e16); }
.prose h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.25rem; margin: 1.5rem 0 0.5rem 0; color: var(--color-ink, #052e16); }
.prose ul, .prose ol { margin: 0 0 1rem 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: #b45309; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-ink, #052e16); }
.prose blockquote { border-left: 4px solid var(--color-ink, #052e16); padding: 0.5rem 0 0.5rem 1rem; margin: 1.5rem 0; font-style: italic; color: #4b5563; }
.prose img { border-radius: 1rem; margin: 1.5rem 0; }
.prose strong { color: var(--color-ink, #052e16); font-weight: 700; }

/* --- Helper: post meta line (used in single.php) -------- */
.vnc-post-meta { display: inline-flex; align-items: center; gap: 0.5rem; color: #6b7280; font-size: 0.875rem; }

/* --- Helper: pagination links -------------------------- */
.vnc-pagination {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	justify-content: center; align-items: center;
	margin-top: 3rem;
}
.vnc-pagination .page-numbers {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	border: 1.5px solid var(--color-ink, #052e16);
	border-radius: 9999px;
	background: #fff;
	font-weight: 500;
	box-shadow: 2px 2px 0 0 var(--color-ink, #052e16);
	color: var(--color-ink, #052e16);
}
.vnc-pagination .page-numbers.current {
	background: var(--color-ink, #052e16);
	color: #fff;
}
.vnc-pagination a.page-numbers:hover {
	background: var(--color-clay, #fdba74);
}

/* --- Helper: image fallback onerror -------------------- */
img.vnc-hide-on-fail[onerror] { display: block; }
img.vnc-hide-on-fail[onerror].failed { display: none; }

/* --- Helper: ensure file input button works (CSS-only,
   the original used `.file:bg-ink` arbitrary class which
   the static Tailwind build may not always compile when
   the input is dynamically rendered) -------------------- */
input[type="file"]::file-selector-button {
	margin-right: 1rem;
	padding: 0.25rem 1rem;
	border-radius: 9999px;
	border: 0;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--color-ink, #052e16);
	color: #fff;
	cursor: pointer;
}