/* ==========================================================================
   Khel Kood — base: reset, colours, document defaults
   ========================================================================== */
:root {
	--kk-navy: #1C2463;
	--kk-pink: #D81B52;
	--kk-yellow: #FFCE19;
	--kk-blue: #5FB6E1;
	--kk-ice: #EAF6FC;
	--kk-white: #FFFFFF;
	--kk-shadow: 4px 5px 0 var(--kk-navy);
}
/* No global box-sizing: the design sets it per element. */
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Nunito', system-ui, sans-serif; color: var(--kk-navy); background: var(--kk-navy); -webkit-font-smoothing: antialiased; }
.site-main { display: block; background: #FFFFFF; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
:where(a) { color: var(--kk-navy); }
:where(a:hover) { color: var(--kk-pink); }
a:focus-visible { outline: 3px solid var(--kk-navy); outline-offset: 4px; border-radius: 12px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--kk-pink); outline-offset: 3px; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 12px 20px; border-radius: 999px; background: var(--kk-yellow); color: var(--kk-navy); border: 3px solid var(--kk-navy); font-family: 'Baloo 2', sans-serif; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }