/**
 * Simple, colourful homepage (front-page.php only).
 *
 * User instruction (2026-09-15): the homepage must be very colourful and easy
 * for readers with little English. This file deliberately goes beyond the
 * locked subtle palette, and is loaded on the front page only. White text sits
 * on dark enough colours for readable contrast; every tap target is large.
 */

.ifja-easy {
	--easy-blue: #1d4ed8;
	--easy-green: #15803d;
	--easy-red: #b91c1c;
	--easy-purple: #7e22ce;
	--easy-navy: #1e3a8a;
	--easy-orange: #c2410c;
	--easy-teal: #0f766e;
	--easy-slate: #334155;
	--easy-pink: #be185d;
	--easy-indigo: #4338ca;
	--easy-amber: #a16207;
	--easy-rose: #be123c;
	padding-bottom: 2rem;
}

.ifja-easy [lang="hi"] {
	font-family: "Nirmala UI", "Noto Sans Devanagari", "Mangal", Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Welcome banner ------------------------------------------------------ */

.ifja-easy-hero {
	margin: 1rem 0 1.5rem;
	padding: 1.5rem 1.25rem;
	border-radius: 18px;
	background: linear-gradient(135deg, #1d4ed8 0%, #7e22ce 55%, #db2777 100%);
	color: #ffffff;
	text-align: center;
}

.ifja-easy-hero__title {
	margin: 0;
	line-height: 1.2;
}

.ifja-easy-hero__en {
	display: block;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
}

.ifja-easy-hero__hi {
	display: block;
	margin-top: 0.25rem;
	font-size: clamp(1.25rem, 3.5vw, 1.875rem);
	font-weight: 700;
	color: #fde68a;
}

.ifja-easy-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.ifja-easy-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 10rem;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	background: #ffffff;
	color: #0f172a;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.ifja-easy-stat strong {
	font-size: 2rem;
	line-height: 1.1;
}

.ifja-easy-stat--green strong {
	color: var(--easy-green);
}

.ifja-easy-stat--orange strong {
	color: var(--easy-orange);
}

.ifja-easy-hero__tap {
	margin: 1.25rem 0 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.ifja-easy-dot {
	margin: 0 0.25rem;
}

/* Section titles ------------------------------------------------------ */

.ifja-easy-section {
	margin: 0 0 2rem;
}

.ifja-easy-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0 0 1rem;
	padding-left: 0.75rem;
	border-left: 6px solid var(--easy-orange);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
}

.ifja-easy-hi {
	color: var(--easy-orange);
	font-weight: 700;
}

/* Picture tiles ------------------------------------------------------- */

.ifja-easy-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.ifja-easy-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ifja-easy-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ifja-easy-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 9.5rem;
	height: 100%;
	padding: 1rem 0.75rem;
	border-radius: 16px;
	background: var(--tile, var(--easy-blue));
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 0 rgba(15, 23, 42, 0.18);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ifja-easy-tile:hover,
.ifja-easy-tile:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 7px 0 rgba(15, 23, 42, 0.2);
}

.ifja-easy-tile:focus-visible {
	outline: 4px solid #facc15;
	outline-offset: 3px;
}

.ifja-easy-tile__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.25rem;
	border-radius: 50%;
	background: #ffffff;
	font-size: 2rem;
	line-height: 1;
}

.ifja-easy-tile__en {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
}

.ifja-easy-tile__hi {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fef3c7;
}

.ifja-easy-tile__count {
	margin-top: 0.25rem;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 0.875rem;
	font-weight: 700;
}

.ifja-easy-tiles--compact .ifja-easy-tile {
	min-height: 8.5rem;
}

.ifja-easy-c-blue { --tile: var(--easy-blue); }
.ifja-easy-c-green { --tile: var(--easy-green); }
.ifja-easy-c-red { --tile: var(--easy-red); }
.ifja-easy-c-purple { --tile: var(--easy-purple); }
.ifja-easy-c-navy { --tile: var(--easy-navy); }
.ifja-easy-c-orange { --tile: var(--easy-orange); }
.ifja-easy-c-teal { --tile: var(--easy-teal); }
.ifja-easy-c-slate { --tile: var(--easy-slate); }
.ifja-easy-c-pink { --tile: var(--easy-pink); }
.ifja-easy-c-indigo { --tile: var(--easy-indigo); }
.ifja-easy-c-amber { --tile: var(--easy-amber); }
.ifja-easy-c-rose { --tile: var(--easy-rose); }

/* Closing soon / new jobs panels -------------------------------------- */

.ifja-easy-two {
	display: grid;
	gap: 1rem;
	margin: 0 0 2rem;
}

@media (min-width: 900px) {
	.ifja-easy-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ifja-easy-two--single {
	grid-template-columns: minmax(0, 1fr) !important;
}

.ifja-easy-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 3px solid var(--panel);
	border-radius: 16px;
	background: #ffffff;
}

.ifja-easy-panel--red { --panel: var(--easy-red); --panel-tint: #fef2f2; }
.ifja-easy-panel--green { --panel: var(--easy-green); --panel-tint: #f0fdf4; }

.ifja-easy-panel__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.625rem;
	margin: 0;
	padding: 0.875rem 1rem;
	background: var(--panel);
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
}

.ifja-easy-panel__title .ifja-easy-hi {
	color: #fde68a;
}

.ifja-easy-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifja-easy-list li + li {
	border-top: 1px solid #e2e8f0;
}

.ifja-easy-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 4rem;
	padding: 0.75rem 1rem;
	color: #0f172a;
	text-decoration: none;
}

.ifja-easy-row:hover,
.ifja-easy-row:focus-visible {
	background: var(--panel-tint);
	color: #0f172a;
}

.ifja-easy-row__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.ifja-easy-days,
.ifja-easy-new,
.ifja-easy-date {
	display: flex;
	flex: 0 0 6.25rem;
	flex-direction: column;
	align-items: center;
	padding: 0.375rem 0.25rem;
	border-radius: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.ifja-easy-days {
	background: #fef3c7;
	color: #92400e;
}

.ifja-easy-days strong,
.ifja-easy-new strong {
	font-size: 0.9375rem;
}

.ifja-easy-days--soon {
	background: #ffedd5;
	color: #9a3412;
}

.ifja-easy-days--today {
	background: var(--easy-red);
	color: #ffffff;
}

.ifja-easy-new {
	background: var(--easy-green);
	color: #ffffff;
}

.ifja-easy-date {
	background: #e0e7ff;
	color: #3730a3;
	font-size: 0.9375rem;
	font-weight: 700;
}

.ifja-easy-more {
	margin-top: auto;
	padding: 0.75rem 1rem;
	background: var(--panel-tint);
	color: var(--panel);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.ifja-easy-more:hover,
.ifja-easy-more:focus-visible {
	background: var(--panel);
	color: #ffffff;
}

/* State tiles --------------------------------------------------------- */

.ifja-easy-states {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ifja-easy-states {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ifja-easy-states {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ifja-easy-state {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	height: 100%;
	min-height: 4.75rem;
	padding: 0.75rem 0.875rem;
	border-left: 8px solid var(--st);
	border-radius: 12px;
	background: var(--st-tint);
	color: #0f172a;
	text-decoration: none;
}

.ifja-easy-state:hover,
.ifja-easy-state:focus-visible {
	background: var(--st);
	color: #ffffff;
	text-decoration: none;
}

.ifja-easy-state:focus-visible {
	outline: 4px solid #facc15;
	outline-offset: 2px;
}

.ifja-easy-state__en {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
}

.ifja-easy-state__hi {
	font-size: 1rem;
	font-weight: 700;
	color: var(--st);
}

.ifja-easy-state:hover .ifja-easy-state__hi,
.ifja-easy-state:focus-visible .ifja-easy-state__hi {
	color: #fef3c7;
}

.ifja-easy-state__count {
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0.85;
}

/* User instruction (2026-09-15): state name buttons are red. Solid red with
   white text; the Hindi name in light yellow; hover deepens the red. */
/* User instruction 2026-09-15: state buttons plain red, no left highlight
   strip. Even border all round; hover/focus deepens the red. */
.ifja-easy-state {
	border: 1px solid #991b1b;
	background: var(--easy-red);
	color: #ffffff;
}

.ifja-easy-state__hi {
	color: #fde68a;
}

.ifja-easy-state:hover,
.ifja-easy-state:focus-visible {
	border-color: #7f1d1d;
	background: #991b1b;
	color: #ffffff;
}

.ifja-easy-state:hover .ifja-easy-state__hi,
.ifja-easy-state:focus-visible .ifja-easy-state__hi {
	color: #fde68a;
}

/* Latest jobs table section and notice on the homepage ---------------- */

.ifja-easy .ifja-home-section {
	margin: 0 0 2rem;
}

.ifja-easy .ifja-section-head__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 800;
}

.ifja-easy .ifja-section-head__link {
	font-size: 1rem;
	font-weight: 700;
}

.ifja-easy .ifja-job-table {
	font-size: 0.9375rem;
}

.ifja-easy .ifja-trust-notice-wrap {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 2px solid #fcd34d;
	border-radius: 14px;
	background: #fffbeb;
}

.ifja-easy .ifja-trust-notice {
	margin: 0;
	color: #78350f;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ifja-easy .ifja-trust-notice--hi {
	margin-top: 0.5rem;
	font-size: 1rem;
}

/* Motion (user instruction 2026-09-15: something moving on every screen).
   The sticky header ticker moves on every page; on the homepage the pointing
   hand bounces, urgent and new badges pulse, and tile icons give a short
   wiggle every few seconds. All of it stops for readers who ask their device
   to reduce motion. */

@keyframes ifja-easy-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@keyframes ifja-easy-pulse-red {
	0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(185, 28, 28, 0); }
	100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
}

@keyframes ifja-easy-pulse-green {
	0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); }
	100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

@keyframes ifja-easy-wiggle {
	0%, 90%, 100% { transform: rotate(0deg); }
	93% { transform: rotate(-10deg); }
	96% { transform: rotate(10deg); }
}

.ifja-easy-hero__tap > span[aria-hidden="true"]:first-child {
	display: inline-block;
	animation: ifja-easy-bounce 1.2s ease-in-out infinite;
}

.ifja-easy-days--today {
	animation: ifja-easy-pulse-red 1.6s ease-out infinite;
}

.ifja-easy-new {
	animation: ifja-easy-pulse-green 1.6s ease-out infinite;
}

.ifja-easy-tile__icon {
	animation: ifja-easy-wiggle 5s ease-in-out infinite;
}

.ifja-easy-tiles li:nth-child(3n + 2) .ifja-easy-tile__icon {
	animation-delay: 1.6s;
}

.ifja-easy-tiles li:nth-child(3n) .ifja-easy-tile__icon {
	animation-delay: 3.2s;
}

@media (prefers-reduced-motion: reduce) {
	.ifja-easy-tile {
		transition: none;
	}

	.ifja-easy-hero__tap > span[aria-hidden="true"]:first-child,
	.ifja-easy-days--today,
	.ifja-easy-new,
	.ifja-easy-tile__icon {
		animation: none;
	}

	.ifja-easy-tile:hover,
	.ifja-easy-tile:focus-visible {
		transform: none;
	}
}