/* ==========================================================================
   Khel Kood — shared components
   Header + menu pills, activity tabs, slider controls, forms, buttons,
   long-form text (.prose), blog bits, pagination.
   ========================================================================== */

/* Header ------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 20;
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.site-header__brand { display: inline-flex; }
.site-header__logo { height: 84px; width: auto; display: block; }
/* On coloured heroes the logo gets a white sticker outline */
.site-header--on-yellow .site-header__logo,
.site-header--on-pink .site-header__logo,
.site-header--on-navy .site-header__logo {
	filter: drop-shadow(2px 0 0 #FFF) drop-shadow(-2px 0 0 #FFF) drop-shadow(0 2px 0 #FFF) drop-shadow(0 -2px 0 #FFF) drop-shadow(4px 5px 0 var(--kk-navy));
}
.site-header--on-navy .site-header__logo {
	filter: drop-shadow(2px 0 0 #FFF) drop-shadow(-2px 0 0 #FFF) drop-shadow(0 2px 0 #FFF) drop-shadow(0 -2px 0 #FFF) drop-shadow(4px 5px 0 var(--kk-pink));
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
}
.site-nav__link,
.site-nav__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--kk-navy);
	border: 3px solid var(--kk-navy);
	box-shadow: var(--kk-shadow);
	text-decoration: none;
}
.site-nav__link:hover { color: var(--kk-navy); }
.site-nav__link.is-active { background: var(--kk-yellow); }
.site-header--on-yellow .site-nav__link.is-active { background: var(--kk-navy); color: #FFFFFF; box-shadow: 4px 5px 0 var(--kk-pink); }
.site-nav__cta { padding: 0 22px; background: var(--kk-pink); color: #FFFFFF; }
.site-nav__cta:hover { color: #FFFFFF; }
.site-header--on-navy .site-nav__cta { box-shadow: 4px 5px 0 var(--kk-yellow); }
.site-nav__cta.is-active { background: var(--kk-navy); box-shadow: 4px 5px 0 var(--kk-pink); }
.site-nav__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--kk-navy);
	border: 3px solid var(--kk-navy);
	box-shadow: var(--kk-shadow);
}
.site-nav__social:hover { color: var(--kk-pink); }
.nav-toggle { display: none; }

/* Footer links ---------------------------------------------------------------- */
.site-footer__menu-link.is-active { color: var(--kk-yellow); }

/* Home: activity picker tabs ---------------------------------------------------- */
.play-tab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 60px;
	padding: 6px 16px 6px 6px;
	border-radius: 18px;
	border: 3px solid var(--kk-navy);
	background: #FFFFFF;
	color: var(--kk-navy);
	box-shadow: none;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 800;
	font-size: 21px;
	line-height: 1.1;
	text-align: left;
	cursor: pointer;
}
.play-tab.is-active { background: var(--kk-navy); color: #FFFFFF; box-shadow: 5px 6px 0 var(--kk-pink); }

/* Gallery sliders ---------------------------------------------------------------- */
.carousel__arrow { cursor: pointer; }
[data-slider-track] { will-change: transform; }

/* Forms ---------------------------------------------------------------------------- */
.form-notice {
	margin: 0;
	padding: 14px 18px;
	border-radius: 16px;
	border: 3px solid var(--kk-navy);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.45;
}
.form-notice--success { background: #DFF5E6; box-shadow: 4px 5px 0 #2E9B57; }
.form-notice--error { background: #FFE3EA; box-shadow: 4px 5px 0 var(--kk-pink); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form[data-form] input:focus, form[data-form] select:focus, form[data-form] textarea:focus { outline: none; box-shadow: 4px 5px 0 var(--kk-pink); }
form[data-form] input, form[data-form] select, form[data-form] textarea { transition: box-shadow .2s ease; }

/* Buttons used by 404 and fallbacks --------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	border: 3px solid var(--kk-navy);
	box-shadow: 5px 6px 0 var(--kk-navy);
	font-family: 'Baloo 2', sans-serif;
	font-weight: 800;
	font-size: 20px;
	text-decoration: none;
}
.btn--pink { background: var(--kk-pink); color: #FFFFFF; }
.btn--pink:hover { color: #FFFFFF; }
.btn--yellow { background: var(--kk-yellow); color: var(--kk-navy); }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 24px 0; }

/* Long-form text: blog posts (.post-body .prose) and default pages ------------- */
.prose { display: flex; flex-direction: column; gap: 20px; font-size: 19px; line-height: 1.7; }
.prose > * { margin: 0; }
.post-body .prose > p:first-child { font-size: 22px; line-height: 1.6; font-weight: 600; }
.prose h2, .prose h3 { margin-top: 28px; font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: 1.15; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); }
.prose h3 { font-size: clamp(22px, 2.2vw, 28px); }
.prose ul, .prose ol { padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.prose a { color: var(--kk-pink); font-weight: 700; }
.prose figure { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.prose img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 24px;
	border: 5px solid #FFFFFF;
	box-shadow: 0 0 0 3px var(--kk-navy), 8px 9px 0 3px var(--kk-navy);
}
.prose figcaption { font-size: 15px; line-height: 1.5; color: rgb(74, 82, 136); text-align: center; }
.prose blockquote,
.prose .wp-block-quote {
	margin: 16px 0;
	padding: 26px 30px;
	background: var(--kk-yellow);
	border: 3px solid var(--kk-navy);
	border-radius: 24px;
	box-shadow: 6px 7px 0 var(--kk-navy);
	font-family: 'Baloo 2', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.35;
}
.prose blockquote p { margin: 0; }
.prose blockquote cite { display: block; margin-top: 8px; font-family: 'Nunito', sans-serif; font-size: 16px; font-style: normal; }
.legal-body__inner--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* Blog ------------------------------------------------------------------------------ */
.post-link { color: var(--kk-navy); text-decoration: none; }
.post-link:hover { color: var(--kk-pink); }
.post-hero__badge { text-decoration: none; }
.blog-list__empty { font-size: 19px; text-align: center; }
.blog-featured__img, .post-card__img, .post-cover__img { background: var(--kk-ice); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.pagination .page-numbers {
	min-width: 48px; height: 48px; padding: 0 16px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; border: 3px solid var(--kk-navy); background: #FFFFFF; box-shadow: var(--kk-shadow);
	font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; color: var(--kk-navy); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--kk-yellow); }
.pagination .dots { border: 0; box-shadow: none; background: none; }

/* Theme-only elements use border-box sizing */
.site-header, .site-header *, .play-tab, .btn, .form-notice, .pagination .page-numbers, .prose img, .nav-toggle { box-sizing: border-box; }
.site-nav__cta--yellow { background: var(--kk-yellow); color: var(--kk-navy); }
.site-nav__cta--yellow:hover { color: var(--kk-navy); }