/* JKTCL Core — shared front-end component styles.
   Brand palette matches the JKTCL logo sheet: navy, blue, red, cyan.
   The theme's style.css sets page-level layout; these are the
   dynamic, data-driven components (carousels, forms, cards) that the
   plugin's shortcodes render, so they live with the plugin and work
   even if the theme is swapped later. */

:root {
	--jktcl-navy: #0C3D91;
	--jktcl-navy-deep: #081E4A;
	--jktcl-red: #E11D2F;
	--jktcl-red-deep: #B01322;
	--jktcl-cyan: #00CEFF;
	--jktcl-blue: #1467FF;
	--jktcl-cream: #F1F5F9;
	--jktcl-card: #FFFFFF;
	--jktcl-ink: #0B1B33;
	--jktcl-muted: #5B6B80;
	--jktcl-line: #DCE3EC;
}

/* Marquee (team logo carousel) */
.jktcl-marquee-wrap {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.jktcl-marquee-track {
	display: flex;
	gap: 36px;
	width: max-content;
	animation: jktcl-marquee 28s linear infinite;
}
.jktcl-marquee-track:hover { animation-play-state: paused; }
@keyframes jktcl-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.jktcl-team-chip {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 120px;
	text-decoration: none;
	color: inherit;
}
.jktcl-logo-circ {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--jktcl-card); border: 1px solid var(--jktcl-line);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.jktcl-logo-circ img { width: 100%; height: 100%; object-fit: cover; }
.jktcl-fallback { font-size: 22px; color: var(--jktcl-muted); }
.jktcl-chip-name { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; }

/* Sponsor grid */
.jktcl-sponsor-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.jktcl-sponsor-chip {
	flex: 0 0 auto; width: 160px; display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: var(--jktcl-card); border: 1px solid var(--jktcl-line); border-radius: 14px; padding: 16px 14px;
	text-decoration: none; color: inherit;
}
.jktcl-logo-rect { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; }
.jktcl-logo-rect img { max-width: 100%; max-height: 56px; object-fit: contain; }
.jktcl-sponsor-name { font-size: 12.5px; font-weight: 700; text-align: center; }
.jktcl-sponsor-tier { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--jktcl-red); }

/* Events ticker */
.jktcl-events-ticker { background: var(--jktcl-navy); border-radius: 14px; padding: 16px 0; overflow: hidden; }
.jktcl-events-track { display: flex; gap: 50px; width: max-content; animation: jktcl-marquee 22s linear infinite; }
.jktcl-events-track:hover { animation-play-state: paused; }
.jktcl-event-item { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; white-space: nowrap; text-decoration: none; }
.jktcl-event-item.jktcl-muted { color: #B8C2CC; }
.jktcl-edate { background: var(--jktcl-red); color: #fff; font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }

.jktcl-empty-note { font-size: 13.5px; color: var(--jktcl-muted); padding: 18px 0; }

/* Forms */
.jktcl-form { background: var(--jktcl-card); border: 1px solid var(--jktcl-line); border-radius: 18px; padding: 28px; max-width: 640px; }
.jktcl-form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .jktcl-form-grid { grid-template-columns: 1fr; } }
.jktcl-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.jktcl-field.jktcl-full { grid-column: 1 / -1; }
.jktcl-field label { font-size: 12px; font-weight: 600; color: var(--jktcl-muted); display: flex; flex-direction: column; gap: 6px; }
.jktcl-field input, .jktcl-field select, .jktcl-field textarea {
	font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px;
	border: 1px solid var(--jktcl-line); background: var(--jktcl-cream); color: var(--jktcl-ink);
}
.jktcl-field textarea { resize: vertical; min-height: 72px; }
.jktcl-form-msg { font-size: 13px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; }
.jktcl-form-msg.jktcl-ok { background: rgba(20,103,255,0.14); color: var(--jktcl-blue); }
.jktcl-form-msg.jktcl-err { background: rgba(225,29,47,0.12); color: var(--jktcl-red-deep); }

.jktcl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px;
	text-decoration: none; cursor: pointer; border: none; margin-top: 16px;
}
.jktcl-btn-primary { background: linear-gradient(135deg, var(--jktcl-red), var(--jktcl-red-deep)); color: #fff; }