/*
Theme Name: KELA Legacy
Author: KELA Legacy Foundation LBG
Description: Custom block theme for KELA Legacy Foundation LBG, carrying forward the legacy of Dr. Emmanuel Komla Adinkra. Green and gold brand, Sora and Source Sans 3 type, editable homepage sections and page patterns.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kela-legacy
*/

/* Small touches the block editor cannot set on its own. */

.kela-hero {
	padding-bottom: 140px !important;
}

.kela-overlap {
	margin-top: -96px !important;
	position: relative;
	z-index: 2;
}

.kela-card {
	box-shadow: 0 8px 28px rgba(20, 83, 45, 0.14);
}

.kela-round-portrait img {
	width: 100%;
	max-width: 280px;
	border-radius: 50%;
	border: 6px solid var(--wp--preset--color--gold);
	box-sizing: border-box;
}

.kela-pill {
	display: inline-block;
	border-radius: 999px;
	padding: 6px 12px !important;
}

.kela-logo-link {
	text-decoration: none;
}

.kela-wordmark {
	line-height: 1 !important;
}

.kela-gold-bar {
	width: 44px;
	height: 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--gold);
	margin-left: 0 !important;
}

.kela-news-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
}

.kela-news-card .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
}

.kela-utility-bar a {
	color: inherit;
}

.kela-footer a {
	color: var(--wp--preset--color--sage);
}

.kela-footer a:hover,
.kela-footer a:focus {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 6px;
}

:where(.wp-block-button__link):focus-visible,
a:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Photos fill their column or grid cell, even when the original file is small. */
.wp-block-column > .wp-block-image img,
.is-layout-grid > .wp-block-image img,
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

.wp-block-column > .wp-block-image,
.is-layout-grid > .wp-block-image {
	width: 100%;
}

.kela-hero .wp-element-caption {
	color: var(--wp--preset--color--on-dark);
	text-align: center;
}

@media (max-width: 781px) {
	.kela-hero {
		padding-bottom: 120px !important;
	}

	.kela-utility-bar .wp-block-group {
		justify-content: center;
		text-align: center;
	}
}