/* Our Kenyan Kids: header, footer, photo grid, lightbox, typed headline. */

:root {
	--okk-red: #821b1f;
	--okk-red-hover: #9a2227;
	--okk-green: #10402a;
	--okk-dark: #211d1e;
	--okk-white: #fff;
	--okk-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--okk-wrap: 1430px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.okk-skip:focus {
	background: var(--okk-white);
	clip: auto;
	clip-path: none;
	color: var(--okk-green);
	height: auto;
	left: 8px;
	padding: 10px 16px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

body.okk-site {
	margin: 0;
}

.okk-wrap {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--okk-wrap);
	padding: 0 10px;
	width: 100%;
}

/* ---------- Header ----------
   Measurements taken from the original Elementor header at 1519px wide: 1430px container,
   68px top bar, 77px menu bar, 166px logo, 18px bold menu, 14px light top bar text.
   The whole header stays pinned to the top while scrolling, as it did before. */

.okk-header.okk-header {
	font-family: var(--okk-font);
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar .okk-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .okk-header {
		top: 0;
	}
}

.okk-icon {
	display: inline-block;
	flex: none;
	height: 1.35em;
	vertical-align: middle;
	width: 1.35em;
}

.okk-topbar {
	background: var(--okk-red);
	color: var(--okk-white);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
}

.okk-topbar__inner {
	align-items: center;
	display: flex;
	gap: 12px 62px;
	min-height: 68px;
	padding-left: 216px;
	padding-right: 20px;
}

.okk-topbar__item {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 15px;
	text-decoration: none;
}

.okk-topbar__item .okk-icon {
	height: 22px;
	width: 22px;
}

a.okk-topbar__item:hover,
a.okk-topbar__item:focus-visible {
	text-decoration: underline;
}

.okk-topbar__charity {
	font-size: 16px;
	margin-left: auto;
}

.okk-navbar {
	background: var(--okk-green);
}

.okk-navbar__inner {
	align-items: center;
	display: flex;
	min-height: 77px;
	padding-left: 261px;
	position: relative;
}

.okk-logo {
	left: 17px;
	line-height: 0;
	position: absolute;
	top: -69px;
}

.okk-logo__img {
	display: block;
	height: auto;
	width: 166px;
}

.okk-nav {
	flex: 1;
}

.okk-menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 33px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.okk-menu a {
	color: var(--okk-white);
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	padding: 0 0 0 15px;
	text-decoration: none;
	transition: color 0.2s;
	white-space: nowrap;
}

.okk-menu a:hover,
.okk-menu a:focus-visible,
.okk-menu .current-menu-item > a {
	color: var(--okk-red);
}

/* The red Donate button sits beside the menu on desktop, so the menu's own Donate item is hidden there. */
.okk-menu .menu-item a[href$="/donate/"],
.okk-menu .menu-item a[href$="/donate"] {
	display: none;
}

.okk-donate {
	background: var(--okk-red);
	border-radius: 30px;
	color: var(--okk-white);
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	margin-left: auto;
	padding: 15px 30px;
	text-decoration: none;
	transition: background 0.2s;
	white-space: nowrap;
}

.okk-donate:hover,
.okk-donate:focus-visible {
	background: var(--okk-red-hover);
	color: var(--okk-white);
}

.okk-menu-toggle {
	background: none;
	border: 0;
	color: var(--okk-white);
	cursor: pointer;
	display: none;
	margin-left: auto;
	padding: 8px;
}

.okk-menu-toggle .okk-icon {
	height: 34px;
	width: 34px;
}

.okk-menu-toggle__close {
	display: none;
}

/* Between 1101px and 1500px everything shrinks in step with the window, as the original did. */
@media (max-width: 1500px) {
	.okk-topbar__inner {
		column-gap: 4vw;
		padding-left: 14.2vw;
	}

	.okk-navbar__inner {
		padding-left: 17.2vw;
	}

	.okk-logo__img {
		width: 11vw;
	}

	.okk-menu {
		gap: 0 1.9vw;
	}

	.okk-menu a {
		font-size: max(15px, 1.2vw);
		padding-left: 1vw;
	}

	.okk-donate {
		font-size: max(15px, 1.2vw);
		padding: 13px 1.9vw;
	}
}

/* Tablets and phones: charity number only in the top bar, logo and menu button below. */
@media (max-width: 1100px) {
	.okk-topbar__inner {
		justify-content: center;
		min-height: 62px;
		padding: 0 16px;
	}

	.okk-topbar__item {
		display: none;
	}

	.okk-topbar__charity {
		font-size: 13px;
		margin: 0;
		text-align: center;
	}

	.okk-navbar__inner {
		min-height: 72px;
		padding: 0 12px;
	}

	.okk-logo {
		position: static;
	}

	.okk-logo__img {
		width: 74px;
	}

	.okk-menu-toggle {
		display: block;
	}

	.okk-donate {
		display: none;
	}

	.okk-nav {
		background: var(--okk-green);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		display: none;
		left: 0;
		max-height: calc(100vh - 134px);
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 100%;
	}

	.okk-menu-open .okk-nav {
		display: block;
	}

	.okk-menu-open .okk-menu-toggle__open {
		display: none;
	}

	.okk-menu-open .okk-menu-toggle__close {
		display: inline;
	}

	.okk-menu {
		display: block;
		padding: 6px 0 14px;
	}

	.okk-menu a {
		font-size: 16px;
		padding: 13px 24px;
	}

	.okk-menu .menu-item a[href$="/donate/"],
	.okk-menu .menu-item a[href$="/donate"] {
		display: block;
	}
}

/* ---------- Footer ---------- */

.okk-footer {
	background: var(--okk-dark);
	color: var(--okk-white);
	font-family: var(--okk-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	padding: 70px 0 50px;
	text-align: center;
}

.okk-footer__logo {
	display: inline-block;
	line-height: 0;
}

.okk-footer__logo img {
	height: auto;
	max-width: 90vw;
	width: 582px;
}

.okk-footer__copy {
	margin: 40px 0 20px;
}

.okk-footer a {
	color: inherit;
	text-decoration: none;
}

.okk-footer a:hover,
.okk-footer a:focus-visible {
	text-decoration: underline;
}

.okk-footer__mail {
	display: none;
	margin: 0 0 20px;
}

.okk-footer__mail a {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
}

.okk-footer__mail .okk-icon {
	height: 24px;
	width: 24px;
}

/* The original footer showed the email address on tablets and phones only. */
@media (max-width: 1024px) {
	.okk-footer__mail {
		display: block;
	}
}

.okk-social {
	display: flex;
	gap: 7px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.okk-social a {
	align-items: center;
	background: var(--okk-red);
	display: flex;
	height: 34px;
	justify-content: center;
	transition: background 0.2s;
	width: 34px;
}

.okk-social a:hover,
.okk-social a:focus-visible {
	background: var(--okk-red-hover);
}

.okk-social .okk-icon {
	height: 17px;
	width: 17px;
}

/* ---------- 404 ---------- */

.okk-404 {
	font-family: var(--okk-font);
	padding: 90px 0 110px;
	text-align: center;
}

.okk-404 h1 {
	color: var(--okk-green);
	font-size: clamp(28px, 4vw, 42px);
	margin: 0 0 16px;
}

.okk-button {
	background: var(--okk-red);
	border-radius: 30px;
	color: var(--okk-white);
	display: inline-block;
	font-weight: 600;
	padding: 14px 28px;
	text-decoration: none;
}

/* ---------- Photo grid ---------- */

.okk-photos {
	--okk-cols: 4;
	--okk-gap: 10px;
	--okk-ratio: 1 / 1;
}

.okk-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 30px;
}

/* Square red buttons, as on the original gallery page. */
.okk-filter__btn {
	background: transparent;
	border: 2px solid var(--okk-red);
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
	color: var(--okk-red);
	cursor: pointer;
	font: 500 18px/1.3 var(--okk-font);
	padding: 12px 30px;
	text-transform: capitalize;
	transition: background 0.2s, color 0.2s;
}

.okk-filter__btn:hover,
.okk-filter__btn:focus-visible,
.okk-filter__btn[aria-pressed="true"] {
	background: var(--okk-red);
	color: var(--okk-white);
}

@media (max-width: 767px) {
	.okk-filter__btn {
		font-size: 15px;
		padding: 9px 16px;
	}
}

.okk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.okk-grid__item[hidden] {
	display: none !important;
}

.okk-grid__item img {
	display: block;
	height: auto;
	width: 100%;
}

.okk-grid__link {
	display: block;
	overflow: hidden;
}

.okk-grid--even {
	display: grid;
	gap: var(--okk-gap);
	grid-template-columns: repeat(var(--okk-cols), minmax(0, 1fr));
}

.okk-grid--even img {
	aspect-ratio: var(--okk-ratio);
	height: 100%;
	object-fit: cover;
}

.okk-grid--masonry {
	column-count: var(--okk-cols);
	column-gap: var(--okk-gap);
}

.okk-grid--masonry .okk-grid__item {
	break-inside: avoid;
	margin: 0 0 var(--okk-gap);
}

.okk-grid--grow img {
	transition: transform 0.3s;
}

.okk-grid--grow .okk-grid__link:hover img,
.okk-grid--grow .okk-grid__link:focus-visible img {
	transform: scale(1.05);
}

/* ---------- Lightbox ---------- */

.okk-lb-open {
	overflow: hidden;
}

.okk-lb {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	max-height: none;
	max-width: none;
	padding: 56px 64px;
	width: 100%;
}

.okk-lb::backdrop {
	background: rgba(10, 10, 10, 0.92);
}

.okk-lb__fig {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	margin: 0;
}

.okk-lb__img {
	max-height: calc(100% - 40px);
	max-width: 100%;
	object-fit: contain;
}

.okk-lb__cap,
.okk-lb__count {
	color: #eee;
	font: 14px/1.4 var(--okk-font);
	margin: 10px 0 0;
	text-align: center;
}

.okk-lb__count {
	left: 0;
	position: absolute;
	right: 0;
	top: 14px;
}

.okk-lb__btn {
	background: rgba(0, 0, 0, 0.35);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font: 34px/1 system-ui, sans-serif;
	height: 48px;
	position: absolute;
	width: 48px;
}

.okk-lb__btn:hover,
.okk-lb__btn:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

.okk-lb__close {
	right: 12px;
	top: 8px;
}

.okk-lb__prev,
.okk-lb__next {
	top: calc(50% - 24px);
}

.okk-lb__prev {
	left: 8px;
}

.okk-lb__next {
	right: 8px;
}

@media (max-width: 767px) {
	.okk-lb {
		padding: 56px 8px;
	}

	.okk-lb__prev,
	.okk-lb__next {
		top: auto;
		bottom: 10px;
	}
}

/* ---------- Typed headline ----------
   The whole phrase is laid out from the start and the untyped part is simply invisible, so letters
   appear in place without the line moving (a moving line counts against the page in Google's
   layout-shift score). The blinking cursor is the right edge of the typed text. */

.okk-typed {
	display: grid;
	margin: 0;
}

.okk-typed > span {
	grid-area: 1 / 1;
}

.okk-typed__sizer,
.okk-typed__rest {
	visibility: hidden;
}

.okk-typed__live {
	position: relative;
}

/* The cursor floats over the text and is moved with a transform, so it never shifts the line. */
.okk-typed__cursor {
	animation: okk-blink 0.9s steps(1) infinite;
	border-left: 0.06em solid currentColor;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 0;
}

@keyframes okk-blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.okk-typed__cursor {
		animation: none;
	}

	.okk-grid--grow img {
		transition: none;
	}
}

/* ---------- Elementor's older Tabs widget ----------
   It only opens its first tab once its script has run, which on a slow phone pushed everything
   below it off the screen many seconds after the page appeared. The first tab is shown from the
   start instead, until a different tab is chosen. */

.elementor-widget-tabs .elementor-tabs:not(:has(.elementor-tab-title.elementor-active:not([data-tab="1"]))) .elementor-tab-content[data-tab="1"] {
	display: block;
}

/* ---------- Phones: comfortable tap targets ---------- */

@media (max-width: 767px) {
	.okk-social {
		gap: 10px;
	}

	.okk-social a {
		height: 44px;
		width: 44px;
	}

	.okk-social .okk-icon {
		height: 20px;
		width: 20px;
	}

	.okk-filter__btn {
		min-height: 44px;
	}
}