/*
Theme Name:   FLLoCA (Egovt Child)
Theme URI:    https://climatefinanceken.go.ke
Description:  Child theme of Egovt for the Financing Locally-Led Climate Action (FLLoCA) Program.
Author:       Shemi Ignatious Ingavo
Template:     egovt
Version:      0.2.8
Text Domain:  flloca-child
*/

/* ---------------------------------------------------------------------------
   Brand tokens — from "FLLoCa Brand Guideline - Page View.pdf", Brand Color
   Pantone spread. Two primaries supported by four secondaries.
   --------------------------------------------------------------------------- */

:root {
	/* Primary */
	--flloca-forest:  #00625F; /* Deep Forest Green — PMS 7720 C — hero primary */
	--flloca-flora:   #62BB46; /* Flora Green — PMS 360 C */

	/* Secondary */
	--flloca-rose:    #ED1C24; /* Rose Red — PMS 1788 C */
	--flloca-maroon:  #8B0E1A; /* Maroon — PMS 188 C */
	--flloca-turq:    #16BECF; /* Turquoise Blue — PMS 311 C */
	--flloca-marine:  #00758C; /* Deep Marine Blue — PMS 633 C */

	/* Neutrals */
	--flloca-black:   #000000; /* Pure Black — PMS 6 C */
	--flloca-white:   #FFFFFF; /* Pure White */

	/* Approved tints (guideline permits 75% / 50% / 25% of any corporate colour).
	   Expressed as flat hex so they survive Elementor's colour pickers. */
	--flloca-forest-75: #408987;
	--flloca-forest-50: #80B1AF;
	--flloca-forest-25: #BFD8D7;
	--flloca-flora-25:  #D8EED1;
	--flloca-marine-25: #BFDCE2;

	/* Type — parent theme ships Cabin (headings) + Nunito Sans (body) */
	--flloca-font-head: 'Cabin', sans-serif;
	--flloca-font-body: 'Nunito Sans', sans-serif;
}

/* ---------------------------------------------------------------------------
   Interim overrides — plugin-baked demo colour

   primary_color (now #00625F) recolours everything the theme draws, but two
   things hard-code Egovt's demo orange #ff3514 in plugin content instead:
   Slider Revolution slide buttons, and the carousel active pagination bullet.

   Slider Revolution writes "background: rgb(255,53,20)" as an inline style on
   each button, so !important is required — a stylesheet declaration marked
   !important outranks a normal inline one. Note sr7-module is a custom element
   tag, not a class, so do not write it as ".sr7-module".

   The hero slider is due to be rebuilt with real FLLoCA slides — delete the
   .sr7 rules at that point rather than leaving them to rot.
   --------------------------------------------------------------------------- */

.sr7-btn,
a.sr7-btn {
	background: var(--flloca-forest) !important;
}

.sr7-btn:hover,
a.sr7-btn:hover {
	background: var(--flloca-forest-75) !important;
}

.swiper-pagination-bullet-active {
	background-color: var(--flloca-forest) !important;
}

/* ---------------------------------------------------------------------------
   Inner page components

   Markup for these lives in page content (Leadership, Gallery, and the
   Resources document pages), so the styling belongs here rather than in
   Elementor. Images on these pages are served from climatefinanceken.go.ke
   until the site moves to that domain, at which point they become same-origin.
   --------------------------------------------------------------------------- */

.flloca-team,
.flloca-gallery {
	display: grid;
	gap: 32px;
	margin: 32px 0;
}

.flloca-team { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.flloca-gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

.flloca-team__member,
.flloca-gallery__item {
	margin: 0;
}

.flloca-team__member img,
.flloca-gallery__item img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.flloca-team__member img { height: 300px; object-position: top center; }
.flloca-gallery__item img { height: 220px; }

.flloca-team__member figcaption { padding-top: 14px; }

.flloca-team__member strong {
	display: block;
	color: var(--flloca-forest);
	font-family: var(--flloca-font-head);
	font-size: 18px;
	line-height: 1.3;
}

.flloca-team__member span {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	opacity: .75;
}

.flloca-gallery__item figcaption {
	padding-top: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--flloca-forest);
}

/* Resources document lists */
.flloca-doc-list {
	list-style: none;
	padding-left: 0;
	margin: 24px 0;
}

.flloca-doc-list li {
	border-bottom: 1px solid var(--flloca-forest-25);
	padding: 12px 0;
}

.flloca-doc-list li a {
	color: var(--flloca-forest);
	font-weight: 600;
}

.flloca-doc-list li span {
	font-size: 14px;
	opacity: .6;
}

/* ---------------------------------------------------------------------------
   Team card watermark

   The Egovt team card prints a decorative Flaticon glyph (flaticon-bank, a
   classical bank building) bottom-right of the profile card. Swapped for the
   FLLoCA stroke mark. Set on .icon_bg rather than editing each team post, so
   it applies to every profile including any added later.
   --------------------------------------------------------------------------- */

.ova_team .icon_bg,
.icon_bg {
	background-image: url("https://shem.ironsharpensiron.co.ke/wp-content/uploads/2026/04/FLLoCA-Logo-Primary-Full-Color-Icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 0.16;
}

/* hide the original glyph, keep the box that positions it */
.ova_team .icon_bg i,
.icon_bg i {
	display: none;
}

/* ---------------------------------------------------------------------------
   Footer strip — "Connect With Us" + social icons on one line

   Elementor stacks the heading above the social widget, leaving them
   vertically offset by a few pixels. Flex row, vertically centred, aligned
   to the right of the strip.
   --------------------------------------------------------------------------- */

.elementor-element-781fd56 > .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

/* Elementor writes a per-widget margin (0 20px 20px 0) with an ID-level
   selector, so !important is needed here — without it the heading's 20px
   bottom margin pushes it 10px above the icons in a centred flex row. */
.elementor-element-781fd56 > .elementor-widget-wrap > .elementor-element {
	width: auto;
	margin-bottom: 0 !important;
}

.elementor-element-781fd56 .elementor-widget-heading h1,
.elementor-element-781fd56 .elementor-widget-heading h2,
.elementor-element-781fd56 .elementor-widget-heading h3,
.elementor-element-781fd56 .elementor-widget-heading h4,
.elementor-element-781fd56 .elementor-widget-heading h5 {
	margin: 0;
	white-space: nowrap;
	line-height: 1;
}

.elementor-element-781fd56 .ova-social {
	display: flex;
	align-items: center;
	margin: 0;
}

@media (max-width: 767px) {
	.elementor-element-781fd56 > .elementor-widget-wrap {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Main menu dropdowns

   ova-framework/assets/css/menu.css ships this above 1025px:
       .ova_nav ul.menu .dropdown-menu { z-index: -1; }
   A negative z-index paints the submenu behind the page, so dropdowns were
   computing as visible (display:block, opacity:1) while never appearing.

   Fixed with a more specific selector rather than !important, so it wins on
   specificity regardless of stylesheet load order. The li gets its own
   stacking context so the submenu sits above the hero slider below it.
   --------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ova_nav ul.menu li.dropdown .dropdown-menu {
		z-index: 999;
	}

	.ova_nav ul.menu > li.dropdown {
		position: relative;
		z-index: 20;
	}

	/* The menu widget carries an Elementor transform (scale .9), and a
	   transformed element creates a stacking context that traps the submenu's
	   z-index inside the header. Lifting the whole header section above the
	   page content is what actually lets the dropdown overlay the hero.
	   .ovamenu_shrink is the theme's own header-section class, so this covers
	   Header 1 and Header primary without hard-coding element ids. */
	.elementor-section.ovamenu_shrink {
		position: relative;
		z-index: 100;
	}

}

/* ---------------------------------------------------------------------------
   Homepage colour corrections

   The Egovt demo palette left navy (#202B5D) on headings and a bright blue
   (#0067DA) on job titles. Both replaced with FLLoCA greens.
   --------------------------------------------------------------------------- */

/* The CS quote, its attribution and the "Our Leadership" heading were all
   #202B5D navy. Those are set per-widget in Elementor, so they are corrected
   in the widget settings rather than overridden here — Elementor's generated
   selectors (.elementor-68 .elementor-element.elementor-element-x .title)
   would otherwise need !important to beat. */

/* Impact figures read thin at weight 600 against the green band */
.elementor-element-2bcac02 .elementor-counter-number-wrapper,
.elementor-element-2bcac02 .elementor-counter-number,
.elementor-element-2bcac02 .elementor-counter-number-prefix,
.elementor-element-2bcac02 .elementor-counter-number-suffix {
	font-weight: 800;
}

/* Decorative Flaticon glyphs above each figure (jogging, directions, trees,
   bridge) are Egovt demo leftovers and unrelated to the statistics.
   Scoped to this section so the programme-component icons are untouched. */
.elementor-element-2bcac02 i[class*="flaticon-"] {
	display: none;
}

/* Team job titles — were #0067DA. Flora Green per brand guideline.
   NOTE: #62BB46 on white measures 2.4:1, below the WCAG AA 4.5:1 minimum
   for body text. Flagged to the client; swap to var(--flloca-forest)
   (7.2:1) if accessibility compliance is required. */
/* .ova-info-content .job (ovateam-style.css) sets #0067DA, so this needs one
   more class to win on specificity. */
.ova_team .ova-info-content .job,
.elementor-widget-ova_team .ova-info-content .job,
.ova-info-content .job,
.flloca-team__member span {
	color: var(--flloca-flora);
}

/* ---------------------------------------------------------------------------
   Homepage pillar features — display-only hover.

   The six pillars under the slider are no longer links (see
   flloca_child_unlink_feature in functions.php). The parent theme still forces
   the glyph to #fff on hover, but only ever paints the circle white, and no
   hover background was set on the widgets — so hovering turned a white icon
   onto a white circle and it disappeared. Paint the circle Deep Forest Green
   on hover instead: white on #00625F measures 8.6:1, comfortably past AA.
   --------------------------------------------------------------------------- */

.ova_feature.version_2 .items .icon {
	transition: background-color .25s ease;
}

.ova_feature.version_2 .items:hover .icon {
	background-color: var(--flloca-forest);
	transition: background-color .25s ease;
}

/* The pillars are inert now; don't invite a click that does nothing. */
.ova_feature.version_2 .items span.second_font,
.ova_feature.version_2 .items .title span.second_font {
	cursor: default;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Pages carrying the OVA title banner (see flloca_child_banner_body_class).
   The banner already shows the page title, so drop the duplicate in-content one.
   --------------------------------------------------------------------------- */

.flloca-has-banner #main-content > .page-title {
	display: none;
}

/* Team grid, fixed three-up.
   The default .flloca-team auto-fills, which put five people on one row at
   desktop width. The leadership page needs a deliberate 3 + 3 split. */

.flloca-team--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.flloca-team--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.flloca-team--3 { grid-template-columns: 1fr; }
}

.flloca-team__heading {
	margin: 54px 0 0;
	color: var(--flloca-forest);
	font-size: 30px;
	line-height: 1.2;
}

.flloca-team__heading + .flloca-team { margin-top: 26px; }

/* ---------------------------------------------------------------------------
   Homepage "News and Publications" — equal-height cards.

   .ova-wrap-grid is a flex row, so the article boxes already stretch to the
   tallest. The white panel inside (.evgovt-content) does not: it is only as
   tall as its own text, so a two-line headline leaves the panel ~30px short of
   its neighbours and the white blocks end at different heights.

   Make the chain from article down to the panel a flex column so the panel
   fills the card, and push Read More to the bottom so the links line up.
   --------------------------------------------------------------------------- */

.elementor-element-37470d9 article.post-wrap {
	display: flex;
}

.elementor-element-37470d9 article.post-wrap > .wrap-article {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.elementor-element-37470d9 .wrap-article > .evgovt-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The parent theme sets margin-top:20px via
   .blog-grid article.post-wrap .post-footer, which outranks a plain
   three-class selector — match its element specificity to win. */

.elementor-element-37470d9 article.post-wrap .evgovt-content > .post-footer {
	margin-top: auto;
	padding-top: 20px;
}

/* ---------------------------------------------------------------------------
   Homepage "Upcoming Events" (widget f35c758) — equal-height cards and images.

   Two separate problems:
   1. The cards sat at their natural heights (527px vs 507px) because the slides
      are display:block, so the flex container could not stretch them.
   2. The featured images kept their source aspect ratio, so a 600x476 photo
      rendered 46px taller than a 600x400 one and the text below started at
      different heights.

   Fixing both: flex the chain so every card fills the row, and give the
   thumbnail a fixed 3:2 box that crops with object-fit rather than distorting.
   aspect-ratio is used instead of a pixel height so it holds at every width.
   The widget id scopes this to Upcoming Events — the Documents widget beside
   it in the same section is untouched.
   --------------------------------------------------------------------------- */

.elementor-element-f35c758 .wp-content {
	align-items: stretch;
}

.elementor-element-f35c758 .ovaev-content {
	display: flex;
	height: auto;
}

.elementor-element-f35c758 .ovaev-content > .item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.elementor-element-f35c758 .item > .desc,
.elementor-element-f35c758 .desc > .event_post {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Out-specify the theme's five-class
   .ovaev-content.content-grid .desc .event_post .button_event {margin-top:30px},
   keeping its 30px gap as padding so spacing is unchanged. */

.elementor-element-f35c758 .ovaev-content.content-grid .desc .event_post > .button_event {
	margin-top: auto;
	padding-top: 30px;
	align-self: flex-start;
}

.elementor-element-f35c758 .event-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   flloca mobile menu — make the off-canvas panel full height.

   The menu widget's Elementor container carries a scale(0.9) transform. A
   transformed element becomes the containing block for position:fixed
   descendants, so the off-canvas panel's height:100% resolved against the
   ~30px widget instead of the viewport: tapping the hamburger opened a 27px
   sliver. (Same mechanism that trapped the desktop dropdown z-index.)

   Below the theme's 1024px mobile breakpoint the scale is imperceptible
   anyway, so drop it there and let the panel size against the real viewport.
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.elementor-widget-ova_menu > .elementor-widget-container {
		transform: none !important;
	}
}