/* CMCI theme additions — kept separate from the extracted builder CSS. */

/* ---- Header ----------------------------------------------------------
   Shape and typography only. Every COLOUR and SIZE in the header is set
   from Appearance → Customize and emitted by inc/dynamic-css.php, so don't
   hardcode them here — they'd fight the Customizer.
   -------------------------------------------------------------------- */

/* Clip the logo to the bar, so a future logo swap can't spill artwork
   past the header onto the page below. */
.navigation-5 .kv-ee-logo { overflow: hidden; padding-top: .5rem !important; padding-bottom: .5rem !important; }
.navigation-5 .kv-ee-logo-medium .kv-ee-logo-image,
.navigation-5 .kv-scrolled .kv-ee-logo-medium .kv-ee-logo-image { margin-top: 0 !important; }

/* Bar separation (colour-independent). */
.navigation-5 .kv-ee-navigation-position.kv-check-scroll,
.navigation-5 .kv-ee-navigation-position.kv-check-scroll.kv-scrolled {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 2px 16px rgba(0, 0, 0, .06) !important;
}

/* Menu typography. */
.navigation-5 .kv-ee-menu-item-wrapper > li > a,
.navigation-5 .kv-scrolled .kv-ee-menu-item-wrapper > li > a {
	text-shadow: none !important;
	text-transform: uppercase;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 10px 15px !important;
	position: relative;
}

/* Current-page underline (its colour comes from the Customizer). */
.navigation-5 .kv-ee-menu-item-wrapper > li > a.kv-ee-active::after {
	content: "";
	position: absolute;
	left: 15px; right: 15px; bottom: 2px;
	height: 2px;
	border-radius: 2px;
}

/* "Call" call-to-action: pill shape; colours come from the Customizer. */
.navigation-5 .kv-ee-call-to-action {
	border-radius: 999px !important;
	min-height: 2.5rem !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 0 1.4rem !important;
}

/* --- Mobile ---
   The mobile menu is a full-screen slide-in panel over a DARK translucent
   backdrop, so the navy nav color above would be unreadable there — the
   links revert to white at menu sizes. The logo also returns to the
   builder's smaller mobile cap so it fits the shorter mobile bar. */
/* Keyed off .kv-ee-mobile (added by theme.js below 992px) rather than a
   media query, so it can't fall out of sync with the JS breakpoint — this
   is how the builder's own mobile nav rules are written too. */
.navigation-5 .kv-ee-mobile .kv-ee-menu-item-wrapper > li > a,
.navigation-5 .kv-ee-mobile .kv-scrolled .kv-ee-menu-item-wrapper > li > a {
	font-size: 1.15rem !important;
	letter-spacing: .06em;
	padding: 14px 15px !important;
}
/* centred underline, since mobile menu items are centre-aligned */
.navigation-5 .kv-ee-mobile .kv-ee-menu-item-wrapper > li > a.kv-ee-active::after {
	left: 50%; right: auto;
	width: 28px;
	transform: translateX(-50%);
}
@media (max-width: 767px) {
	.navigation-5 .kv-ee-logo-medium .kv-ee-logo-image,
	.navigation-5 .kv-scrolled .kv-ee-logo-medium .kv-ee-logo-image {
		max-height: 48px !important;
	}
}

/* Reveal scroll-in elements once JS marks them (mimics the builder observer).
   The original only hides these on the contact section (.waruze92); this makes
   the reveal work without the builder runtime, and the <noscript> fallback in
   header.php keeps them visible when JavaScript is disabled. */
.kv-notify-inview.kv-inview {
	opacity: 1 !important;
	transform: translateX(0) !important;
}

/* ---- Gallery / ministry image lightbox ---- */
.cmci-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	z-index: 99999;
}
.cmci-lightbox.open { display: flex; }
.cmci-lightbox img {
	max-width: 90vw;
	max-height: 88vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.cmci-lightbox button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.cmci-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.cmci-lb-close { top: 1rem; right: 1rem; }
.cmci-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.cmci-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
	.cmci-lightbox button { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
}