/* ==========================================================================
   KWTRP local overrides
   Layered on top of the Zahar parent theme + Elementor header.
   Sections:
     1. Submenu border-radius (round Programme/Subsites like About Us/People)
     2. Programme full-width mega menu (rebuilt from existing items)
     3. Sticky / forgiving submenus (hover grace so nav doesn't flicker)
     4. Responsive across devices
     5. Profile (author) page: uniform font + banner/card overlap
   Scope is kept to the main header menu (.jws_main_menu) to avoid touching
   footer / widget menus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. HEADER SEARCH ICON — hide the redundant jws_search magnifier (the search
   bar + button is kept). CSS hide so no template/DB edit is needed on deploy.
   -------------------------------------------------------------------------- */
.elementor-widget-jws_search,
.elementor-element-276d138 {
	display: none !important;
}

/* --------------------------------------------------------------------------
   1. SUBMENU BORDER-RADIUS — match the rounded dropdowns (About Us / People)
   -------------------------------------------------------------------------- */
.jws_main_menu .sub-menu {
	border-radius: 5px !important;
	overflow: hidden;            /* clip child corners to the rounded panel */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
/* Nested third-level flyouts also rounded */
.jws_main_menu .sub-menu .sub-menu {
	border-radius: 5px !important;
}

/* Hide a stray empty Programme menu item (page ref with no title/url) */
.jws_main_menu #menu-item-14124 {
	display: none !important;
}

/* --------------------------------------------------------------------------
   2. PROGRAMME MEGA MENU (full width, columns from existing items)
   The first-level children (Strategic Focus, Research Themes, Research
   platforms, Scientific Departments) become columns; their sub-items list
   statically beneath each column header instead of flying out.
   -------------------------------------------------------------------------- */

/* The menu row needs a positioned ancestor for the full-width panel. */
.jws_main_menu,
.jws_main_menu .jws_main_menu_inner {
	position: relative;
}

/* Let the mega item span the row rather than anchoring the panel to itself. */
.jws_main_menu li.menu-item-design-mega_menu_full_width {
	position: static;
}

/* The mega panel itself. left/width are set by menu-sticky.js so the panel
   spans the full viewport width regardless of where the (narrow, right-aligned)
   menu container sits. Columns are inset via padding to align under content. */
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	box-sizing: border-box;
	padding: 28px max(6%, calc((100vw - 1240px) / 2)) 32px;
	border-radius: 8px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
	overflow: visible;
}

/* Each first-level child = one column */
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li {
	position: static;
	flex: 1 1 200px;
	min-width: 180px;
	max-width: 320px;
	padding: 0 6px;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li:last-child {
	border-right: 0;
}

/* Column header (Strategic Focus, etc.) */
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > a {
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	padding: 0 0 10px;
	margin-bottom: 8px;
	border-bottom: 2px solid #1a9bd7;        /* KEMRI blue accent */
	white-space: normal;
	pointer-events: auto;
}

/* The column's link list: always visible, static, unstyled flyout */
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	left: auto !important;
	top: auto !important;
}
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu > li {
	width: 100%;
}
.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu a {
	font-weight: 400;
	font-size: 13.5px;
	padding: 6px 0;
	white-space: normal;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   3. STICKY / FORGIVING SUBMENUS
   Keep the dropdown visible briefly after the pointer leaves so users can
   travel diagonally into it, and bridge the gap below the top-level item.
   -------------------------------------------------------------------------- */
.jws_main_menu .menu-item-has-children > .sub-menu {
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	transition-delay: 0.25s;     /* grace period on hide */
}
.jws_main_menu .menu-item-has-children:hover > .sub-menu {
	transition-delay: 0s;        /* show immediately */
}
/* Invisible bridge so the gap between item and panel stays hoverable */
.jws_main_menu .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
	background: transparent;
}
/* Keep the menu sticky-open class (added by menu-sticky.js) visible */
.jws_main_menu .menu-item-has-children.kwtrp-open > .sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   5. USER PROFILE PAGE (WPUF directory single profile, e.g. ?user_id=14)
   -------------------------------------------------------------------------- */

/* (a) BANNER OVERLAP — the profile card's Elementor container is pulled up
   120px over the page banner (vaccine.jpg), so the card covers it. Drop the
   negative margin so the card sits cleanly below the banner. */
.elementor-element-07a0c9b {
	margin-top: 0 !important;
}
/* small breathing room between banner and card */
.people-profile-wrapper {
	margin-top: 24px;
	border-radius: 8px;
}

/* (b) UNIFORM TYPOGRAPHY — force the whole profile to the Bio write-up's font
   family (Poppins) and a consistent scale, so names/labels/publications no
   longer mix sizes and faces. */
.people-profile-wrapper,
.people-profile-wrapper * {
	font-family: "Poppins", sans-serif !important;
}
/* body / bio / contact / publications text — one consistent size */
.people-profile_user-info,
.people-profile_user-about,
.people-profile_user-publications,
.people-profile_contact-info,
.people-profile-wrapper .bio p,
.people-profile-wrapper .biography-description-text,
.people-profile-wrapper .current-work,
.people-profile-wrapper .pub-article,
.people-profile-wrapper .pub-article a {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
}
/* section headings (Bio, Current Work, Recent publications) */
.people-profile-wrapper .header-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}
/* the person's name — most prominent */
.people-profile_user-info > .header-title:first-of-type {
	font-size: 22px !important;
	font-weight: 600 !important;
}
.people-profile-wrapper .job {
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   5b. HEADER SEARCH BAR — the Elementor search widget has margin-top:-51px,
   which pulls its top edge above the viewport so it looks clipped. Reduce the
   negative offset to leave a clean gap at the top.
   -------------------------------------------------------------------------- */
.elementor-16 .elementor-element-0b72a35.elementor-widget-search {
	margin-top: -12px !important;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE — mobile / tablet navigation
   The Elementor header (post 16) is set to hide on tablet & mobile with no
   replacement, leaving phones/tablets with no nav. Below 1025px we un-hide the
   main header row, lay it out as a slim bar, and drive it with an injected
   hamburger (menu-sticky.js). Submenus become tap-expandable stacked lists and
   the Programme mega reverts to a simple stacked list.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Show the main header row (logo + menus); keep the top utility bar hidden
	   for a clean mobile header. */
	.elementor-16 .elementor-element-d2ad8e5 {
		display: block !important;
	}
	.elementor-16 .elementor-element-d2ad8e5 > .elementor-container {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		min-height: 60px;
		padding: 6px 70px 6px 16px;   /* right padding leaves room for burger */
	}
	/* Stack the header columns full width */
	.elementor-16 .elementor-element-d2ad8e5 .elementor-column {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	/* Logo: make it the FIRST item in the stacked mobile header (it sits in the
	   middle column by default), undo the desktop negative margin (clips it on
	   mobile), left-align, and keep it compact so the menu looks clean. */
	.elementor-16 .elementor-element-3258a9f {
		order: -1 !important;
	}
	.elementor-16 .elementor-element-d2ad8e5 .elementor-widget-jws_logo,
	.elementor-16 .elementor-element-d2ad8e5 .elementor-logo,
	.elementor-16 .elementor-element-d2ad8e5 .logo-inner {
		margin-left: 0 !important;
		text-align: left;
	}
	.elementor-16 .elementor-element-d2ad8e5 .logo-image {
		max-height: 32px;
		width: auto;
		max-width: 100%;
		margin-left: 0 !important;
	}

	/* Menus: collapsed by default, shown when the hamburger is active.
	   !important needed to beat the theme's more-specific horizontal-menu rule. */
	.elementor-16 .jws_main_menu .nav {
		display: none !important;
		flex-direction: column !important;
		width: 100%;
	}
	body.kwtrp-nav-open .elementor-16 .jws_main_menu .nav {
		display: flex !important;
	}
	.elementor-16 .jws_main_menu ul.nav > li,
	.elementor-16 .jws_main_menu ul.nav > li > a {
		width: 100%;
		text-align: left;
	}
	.elementor-16 .jws_main_menu ul.nav > li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}

	/* All submenus: static stacked lists, hidden until the parent is tapped */
	.jws_main_menu .sub-menu {
		position: static !important;
		display: none !important;
		width: 100% !important;
		min-width: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		padding: 0 0 0 16px !important;
		background: #fafafa !important;
	}
	.jws_main_menu li.kwtrp-open > .sub-menu {
		display: block !important;
	}

	/* Programme mega → plain stacked list on mobile (undo desktop columns) */
	.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu {
		display: none !important;
		flex-direction: column;
		gap: 0;
		padding: 0 0 0 16px !important;
	}
	.jws_main_menu li.menu-item-design-mega_menu_full_width.kwtrp-open > .sub-menu {
		display: block !important;
	}
	.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li {
		max-width: none;
		min-width: 0;
		border-right: 0;
	}
	.jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > a {
		border-bottom: 0;
	}

	/* Hamburger button (injected by menu-sticky.js) */
	#kwtrp-burger {
		position: fixed;
		top: 10px;
		right: 14px;
		z-index: 100000;
		width: 44px;
		height: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		padding: 8px;
		background: #1a9bd7;
		border: 0;
		border-radius: 6px;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	}
	#kwtrp-burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	#kwtrp-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	#kwtrp-burger.is-active span:nth-child(2) { opacity: 0; }
	#kwtrp-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Hamburger only exists on small screens */
@media (min-width: 1025px) {
	#kwtrp-burger { display: none !important; }
}


/* --------------------------------------------------------------------------
   7. SMALL-DEVICE CONTENT: gutters, typography rhythm, smooth scroll
   The page content uses Elementor flex containers with no horizontal padding,
   so write-ups (Who we are, Our Anchors, etc.) run edge-to-edge on phones.
   Add consistent side gutters + sensible heading/paragraph spacing, and keep
   scrolling smooth.
   -------------------------------------------------------------------------- */

/* Smooth programmatic / anchor scrolling, with a small offset so in-page
   anchors don't hide under the sticky header. */
html { scroll-behavior: smooth; }
@media (min-width: 1025px) { html { scroll-padding-top: 90px; } }

@media (max-width: 767px) {

	/* (A) Side gutters — pad the outermost content container of each section so
	   text doesn't touch the screen edges, while section backgrounds stay
	   full-width. Inner/nested containers are reset to avoid double gutters. */
	#content .e-con > .e-con-inner,
	#content .elementor-section > .elementor-container {
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box;
	}
	#content .e-con-inner .e-con-inner,
	#content .e-con-inner .elementor-container,
	#content .elementor-container .e-con-inner,
	#content .elementor-container .elementor-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Keep the Slider Revolution hero edge-to-edge (no gutter) */
	#content .e-con > .e-con-inner:has(rs-module-wrap),
	#content .e-con > .e-con-inner:has(.rev_slider),
	#content .elementor-widget-slider_revolution {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* (B) Heading + paragraph rhythm for readability */
	#content h1 { font-size: 26px !important; line-height: 1.25 !important; margin-bottom: 14px !important; }
	#content h2 { font-size: 23px !important; line-height: 1.28 !important; margin-bottom: 12px !important; }
	#content h3 { font-size: 19px !important; line-height: 1.3 !important; margin-bottom: 10px !important; }
	#content h4 { font-size: 17px !important; line-height: 1.3 !important; }
	#content p,
	#content .elementor-widget-text-editor,
	#content li {
		font-size: 15.5px !important;
		line-height: 1.7 !important;
	}
	#content p { margin-bottom: 14px !important; }
	/* prevent long words/URLs from forcing horizontal overflow */
	#content p, #content h1, #content h2, #content h3, #content li {
		overflow-wrap: anywhere;
		word-break: normal;
	}

	/* Gap above the first stat card (Policy Briefs) — it has a -20px margin that
	   pulls it tight against the hero on phones. */
	#content .elementor-element-93dc288 {
		margin-top: 24px !important;
	}

	/* (C) Reduce scroll jank: neutralise Elementor scroll motion-effects /
	   parallax transforms on small screens (they stutter on touch). */
	#content .elementor-motion-effects-element,
	#content [data-settings*="motion_fx"] {
		transform: none !important;
		transition: none !important;
	}

	/* (D) Vision hero (Slider Revolution). The "Vision" card is baked into the
	   left third of the wide 1920x700 slide image, but RevSlider canvas-crops to
	   the centre on phones, hiding the card. Bypass the canvas and paint the full
	   image, centred, so the whole Vision write-up is visible. The fill colour
	   matches the image's cream wall so any letterboxing blends in.
	   (Scoped to phones; the desktop canvas hero is untouched.) */
	#content rs-sbg canvas,
	#content rs-sbg img {
		display: none !important;
	}
	#content rs-sbg,
	#content rs-sbg-wrap,
	#content rs-sbg-px {
		background-image: url("//kwtrp.net/wp-content/uploads/2026/06/Vision-edited.jpg") !important;
		background-size: contain !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-color: #ece6d8 !important;
	}
	/* Trim the tall hero so the centred banner doesn't sit in a big empty box.
	   Match the 1920x700 image aspect (~36.5vw) across every RevSlider height
	   holder so the contained image fills the banner with no dead space. */
	#content rs-fullwidth-wrap,
	#content rs-module-wrap,
	#content rs-module,
	#content rs-slides,
	#content rs-slide,
	#content rs-sbg-wrap,
	#content rs-sbg-px,
	#content rs-sbg,
	#content .rev_slider {
		min-height: 0 !important;
		height: 38vw !important;
		max-height: 320px !important;
	}
}