/*
 * MB10 Premium — layer on top of mb10-ui.css (loaded after it).
 * Direction: "calm authority" for a public-health lab — deep navy, clean white surfaces,
 * restrained gold accent, soft depth, generous whitespace, consistent section rhythm.
 * Remove this file (or run 20-premium-ui.sh --rollback) to return to v1.
 */

/* ---------- 1. Tokens ---------- */
:root {
	--p-navy-950: #071441;
	--p-navy-900: #0b1f5c;
	--p-navy-800: #12307f;
	--p-blue-600: #1d4ed8;
	--p-blue-500: #2f6fe4;
	--p-blue-50:  #eef3fd;
	--p-gold-400: #f6c945;
	--p-gold-500: #e9b31c;
	--p-ink-900:  #0f172a;
	--p-ink-600:  #475569;
	--p-ink-400:  #94a3b8;
	--p-line:     #e3e8f1;
	--p-surface:  #ffffff;
	--p-tint:     #f5f7fc;

	--p-font-body: "IBM Plex Sans Thai", "Kanit", system-ui, sans-serif;
	--p-font-head: "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif;

	--p-radius: 18px;
	--p-radius-sm: 12px;
	--p-shadow-1: 0 1px 2px rgb(11 31 92 / .05), 0 2px 8px rgb(11 31 92 / .06);
	--p-shadow-2: 0 2px 6px rgb(11 31 92 / .06), 0 18px 40px -12px rgb(11 31 92 / .22);
	--p-shadow-3: 0 30px 60px -20px rgb(7 20 65 / .45);
	--p-ease: cubic-bezier(.22, .8, .24, 1);
	--p-section-y: clamp(56px, 4vw + 32px, 96px);
	--p-gutter: clamp(16px, 3vw, 32px);

	/* re-point v1 tokens so older rules follow the new palette */
	--mb-color-primary: var(--p-blue-600);
	--mb-color-primary-strong: var(--p-navy-900);
	--mb-color-accent: var(--p-gold-400);
	--mb-color-focus: var(--p-gold-400);
	--mb-nav-bg: var(--p-navy-900);
}

/* ---------- 2. Type ---------- */
body {
	font-family: var(--p-font-body);
	color: var(--p-ink-900);
	font-size: 16px;
	line-height: 1.7;
}
body :is(p, li, td, th, input, textarea, select, .elementor-widget-text-editor) { font-family: var(--p-font-body); }
h1, h2, h3, h4, h5, h6, .elementor-heading-title, .eael-entry-title, .main-header-menu, .menu-link {
	font-family: var(--p-font-head);
	letter-spacing: 0;
}
::selection { background: var(--p-gold-400); color: var(--p-navy-950); }

/* ---------- 3. Header / navigation ---------- */
.ast-above-header.ast-above-header-bar,
.ast-header-break-point .ast-above-header-bar {
	background: linear-gradient(90deg, var(--p-navy-950), var(--p-navy-800) 60%, var(--p-navy-900)) !important;
	box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 2px 8px -2px rgb(7 20 65 / .45);
	border-bottom: 0 !important;
}
.ast-above-header-bar .main-header-menu > li > a {
	font-size: 15px;
	font-weight: 500;
	color: rgb(255 255 255 / .86) !important;
	border-radius: 10px;
	margin-block: 8px;
	min-height: 40px;
	transition: color .2s var(--p-ease), background-color .2s var(--p-ease);
}
.ast-above-header-bar .main-header-menu > li > a:hover,
.ast-above-header-bar .main-header-menu > li:focus-within > a {
	color: #fff !important;
	background-color: rgb(255 255 255 / .1) !important;
}
.ast-above-header-bar .main-header-menu > .current-menu-item > a,
.ast-above-header-bar .main-header-menu > .current-menu-ancestor > a {
	color: #fff !important;
	background-color: rgb(255 255 255 / .08) !important;
	box-shadow: inset 0 -2px 0 var(--p-gold-400);
}
/* dropdown: white floating card */
.ast-above-header-bar .main-header-menu .sub-menu {
	background: var(--p-surface) !important;
	border: 1px solid var(--p-line) !important;
	border-radius: 14px !important;
	padding: 8px !important;
	box-shadow: var(--p-shadow-2) !important;
	margin-top: 4px;
}
.ast-above-header-bar .main-header-menu .sub-menu .menu-link {
	color: var(--p-ink-900) !important;
	font-size: 14.5px;
	border-radius: 8px;
	padding: 10px 14px !important;
	background: transparent !important;
	border: 0 !important;
}
.ast-above-header-bar .main-header-menu .sub-menu .menu-link:hover,
.ast-above-header-bar .main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--p-blue-50) !important;
	color: var(--p-blue-600) !important;
}
/* login pill → gold outline, fills on hover */
.ast-above-header-bar .main-header-menu > .mb10-login > .menu-link {
	border: 1px solid rgb(246 201 69 / .75) !important;
	color: var(--p-gold-400) !important;
	padding-inline: 16px !important;
	margin-inline-start: 6px;
}
.ast-above-header-bar .main-header-menu > .mb10-login > .menu-link:hover {
	background: var(--p-gold-400) !important;
	color: var(--p-navy-950) !important;
}
/* subtle lift once the page scrolls (class set by mb10-premium.js) */
.mb10-scrolled .ast-above-header-bar { box-shadow: 0 4px 12px -4px rgb(7 20 65 / .55); }

/* mobile header + off-canvas menu */
@media (max-width: 921.98px) {
	.ast-mobile-header-wrap .menu-toggle {
		background: var(--p-navy-900) !important;
		border-radius: 12px !important;
		box-shadow: var(--p-shadow-2);
	}
	.ast-mobile-header-content, .ast-mobile-popup-drawer .ast-mobile-popup-inner {
		background: var(--p-surface) !important;
	}
	.ast-mobile-header-content .main-header-menu .menu-link,
	.ast-mobile-popup-drawer .main-header-menu .menu-link {
		color: var(--p-ink-900) !important;
		font-size: 16px;
		min-height: 48px;
		display: flex !important;
		align-items: center;
		border-color: var(--p-line) !important;
	}
	.ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link { color: var(--p-blue-600) !important; font-weight: 600; }
}

/* ---------- 4. Section rhythm on the home page ---------- */
/* consistent section titles: centred, navy, gold rule */
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .elementor-widget-heading .elementor-heading-title,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) .e-con-inner > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
	font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.375rem) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--p-navy-900) !important;
	text-align: center !important;
}
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .elementor-widget-heading,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .e-con-inner > .elementor-widget-heading,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) .e-con-inner > .e-con > .elementor-widget-heading:first-child { width: 100%; }
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .elementor-widget-heading .elementor-heading-title::after,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) > .e-con-inner > .elementor-widget-heading .elementor-heading-title::after,
.home .elementor > .e-con:not(.elementor-element-ab9d77a):not(.elementor-element-e05e795):not(.elementor-element-01bb936) .e-con-inner > .e-con > .elementor-widget-heading:first-child .elementor-heading-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 14px auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--p-gold-400), var(--p-gold-500));
}

/* section backgrounds: white / soft tint alternation */
.elementor-element-52c7d26 { padding-top: var(--p-section-y) !important; }
.elementor-element-d3d968f,
.elementor-element-1f639e4,
.elementor-element-30630ad { background-color: var(--p-tint) !important; }
.elementor-element-d3d968f { padding-block: var(--p-section-y) !important; }
.elementor-element-79253f6 { padding-top: var(--p-section-y) !important; }
.elementor-element-1f639e4 { padding-top: var(--p-section-y) !important; }
.elementor-element-30630ad { padding-bottom: var(--p-section-y) !important; }
.elementor-element-10de471 { padding-top: var(--p-section-y) !important; }

/* ---------- 5. Staff quick links ---------- */
.elementor-element-ff76027 { padding-bottom: var(--p-section-y) !important; }
.elementor-element-ff76027 > .e-con-inner { gap: clamp(12px, 2vw, 24px) !important; }
.elementor-element-ff76027 .elementor-widget-image img {
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-2) !important;
	transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease) !important;
}
.elementor-element-ff76027 .elementor-widget-image a:hover img,
.elementor-element-ff76027 .elementor-widget-image a:focus-visible img {
	transform: translateY(-6px);
	box-shadow: var(--p-shadow-3) !important;
}
@media (max-width: 767px) {
	.elementor-element-ff76027 .elementor-element-d74ba89 {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
		padding-inline: 4px;
	}
	.elementor-element-ff76027 .elementor-widget-image img { border-radius: var(--p-radius-sm) !important; width: 100% !important; }
}

/* ---------- 6. Lab introduction band ---------- */
.elementor-element-01bb936 {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	background:
		radial-gradient(900px 400px at 85% 0%, rgb(47 111 228 / .35), transparent 60%),
		radial-gradient(700px 380px at 0% 100%, rgb(246 201 69 / .12), transparent 60%),
		linear-gradient(135deg, var(--p-navy-950), var(--p-navy-800)) !important;
	padding: var(--p-section-y) max(var(--p-gutter), calc((100% - 1240px) / 2)) !important;
	gap: clamp(24px, 4vw, 64px) !important;
	align-items: center !important;
}
.elementor-element-01bb936 .elementor-widget-video .elementor-wrapper {
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-3), 0 0 0 1px rgb(255 255 255 / .08) !important;
}
.elementor-element-01bb936 .elementor-heading-title {
	color: var(--p-gold-400) !important;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem) !important;
	font-weight: 600 !important;
	text-align: start !important;
}
.elementor-element-01bb936 .elementor-widget-text-editor,
.elementor-element-01bb936 .elementor-widget-text-editor p {
	color: rgb(255 255 255 / .86) !important;
	font-size: 1.0625rem !important;
	line-height: 1.85 !important;
	text-align: start !important;
}
@media (max-width: 767px) {
	.elementor-element-01bb936 .elementor-heading-title,
	.elementor-element-01bb936 .elementor-widget-text-editor p { text-align: center !important; }
}

/* ---------- 7. Post cards (news, activities, awards) ---------- */
.eael-post-grid-container .eael-post-grid { row-gap: 24px; }
.eael-grid-post-holder {
	border: 1px solid var(--p-line) !important;
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-1) !important;
	transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease), border-color .35s var(--p-ease) !important;
}
.eael-grid-post-holder:hover,
.eael-grid-post-holder:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--p-shadow-2) !important;
	border-color: transparent !important;
}
.eael-grid-post-holder-inner { height: 100%; display: flex; flex-direction: column; }
.eael-entry-media { position: relative; }
.eael-entry-thumbnail { aspect-ratio: 4 / 3 !important; background: var(--p-blue-50); }
.eael-grid-post-holder:hover .eael-entry-thumbnail > img { transform: scale(1.05); }
.eael-entry-wrapper { padding: 18px 20px 20px !important; display: flex; flex-direction: column; flex: 1; }
.eael-entry-title,
.eael-entry-title a {
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
}
.eael-entry-title a { color: var(--p-navy-900) !important; -webkit-line-clamp: 2 !important; }
.eael-entry-title a:hover { color: var(--p-blue-600) !important; text-decoration: none !important; }
/* whole card clickable (title link stretches over the card) */
.eael-grid-post-holder { position: relative; }
.eael-entry-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.eael-grid-post-excerpt p { color: var(--p-ink-600) !important; font-size: 14.5px; }
.eael-post-elements-readmore-btn {
	margin-top: auto;
	color: var(--p-blue-600) !important;
	text-decoration: none !important;
	font-size: 14px !important;
}
.eael-entry-footer, .eael-entry-meta { margin-top: auto; }
.eael-meta-posted-on, .eael-posted-on {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--p-ink-600) !important;
	font-size: 13px !important;
}
/* load-more button */
.eael-load-more-button {
	background: var(--p-navy-900) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-weight: 500 !important;
	box-shadow: var(--p-shadow-2) !important;
	transition: background-color .2s var(--p-ease), transform .2s var(--p-ease) !important;
}
.eael-load-more-button:hover { background: var(--p-blue-600) !important; transform: translateY(-1px); }

/* ---------- 8. Featured activity ---------- */
.elementor-element-e4285ab {
	max-width: 1240px !important;
	margin-inline: auto !important;
	padding: clamp(16px, 2vw, 28px) !important;
	gap: clamp(20px, 3vw, 48px) !important;
	align-items: center !important;
	background: var(--p-surface);
	border: 1px solid var(--p-line);
	border-radius: calc(var(--p-radius) + 6px);
	box-shadow: var(--p-shadow-2);
	margin-block: 8px var(--p-section-y) !important;
	width: calc(100% - 2 * var(--p-gutter)) !important;
}
.elementor-element-e4285ab > .e-con { min-width: 0 !important; }
.elementor-element-e4285ab > .e-con:first-child { flex: 0 0 38% !important; }
.elementor-element-e4285ab > .e-con:last-child { flex: 1 1 0 !important; width: auto !important; }
.elementor-element-e4285ab .elementor-widget__width-initial { width: 100% !important; max-width: 100% !important; }
.elementor-element-e4285ab .elementor-widget-image { width: 100% !important; }
@media (max-width: 767px) {
	.elementor-element-e4285ab { flex-direction: column !important; }
	.elementor-element-e4285ab > .e-con:first-child { flex: none !important; width: 100% !important; }
}
.elementor-element-e4285ab .elementor-widget-image img { border-radius: var(--p-radius) !important; width: 100%; object-fit: cover; }
.elementor-element-e4285ab .elementor-widget-heading h2,
.elementor-element-e4285ab .elementor-heading-title {
	font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem) !important;
	color: var(--p-navy-900) !important;
	font-weight: 600 !important;
}
.elementor-element-e4285ab .elementor-widget-text-editor { color: var(--p-ink-600) !important; line-height: 1.85 !important; }

/* ---------- 9. Infographics + video ---------- */
.elementor-element-1f639e4 .elementor-image-carousel .swiper-slide-image {
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-2);
}
.elementor-element-1f639e4 .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--p-ink-400); opacity: .6; transition: width .3s var(--p-ease); }
.elementor-element-1f639e4 .swiper-pagination-bullet-active { width: 24px; border-radius: 8px; background: var(--p-navy-900); opacity: 1; }
.elementor-element-30630ad { gap: clamp(12px, 2vw, 24px) !important; }
.elementor-element-30630ad .elementor-widget-video .elementor-wrapper {
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-2) !important;
	overflow: hidden;
}

/* ---------- 10. Surveillance band (was white text on yellow — failed contrast) ---------- */
.elementor-element-ab9d77a {
	background:
		radial-gradient(600px 200px at 50% 0%, rgb(246 201 69 / .22), transparent 70%),
		linear-gradient(135deg, var(--p-navy-900), var(--p-blue-600)) !important;
	padding-block: clamp(36px, 3vw + 20px, 64px) !important;
}
.elementor-element-ab9d77a .elementor-heading-title {
	color: #fff !important;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-shadow: none !important;
}
.elementor-element-ab9d77a .elementor-heading-title::after,
.elementor-element-e05e795 .elementor-heading-title::after {
	content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 4px;
	background: var(--p-gold-400) !important;
}
.elementor-element-8fc6185 {
	max-width: 1240px !important;
	margin: clamp(-40px, -2vw, -16px) auto 0 !important;
	width: calc(100% - 2 * var(--p-gutter)) !important;
	background: var(--p-surface);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow-2);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.elementor-element-8fc6185 iframe { border-radius: 0 !important; display: block; }

/* province report tiles */
.elementor-element-0119826 .elementor-widget-image img,
.elementor-element-10de471 .elementor-widget-image img {
	border-radius: var(--p-radius) !important;
	box-shadow: var(--p-shadow-1);
	transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease);
}
.elementor-element-10de471 .elementor-widget-image a:hover img { transform: translateY(-4px); box-shadow: var(--p-shadow-2); }
.elementor-element-959be8c { padding-bottom: var(--p-section-y) !important; }

/* ---------- 11. Calendar band ---------- */
.elementor-element-e05e795 {
	background:
		radial-gradient(800px 300px at 15% 0%, rgb(47 111 228 / .3), transparent 60%),
		linear-gradient(160deg, var(--p-navy-950), var(--p-navy-900)) !important;
	padding-block: var(--p-section-y) !important;
}
.elementor-element-e05e795 .elementor-heading-title {
	color: #fff !important;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2.125rem) !important;
	font-weight: 600 !important;
}
.elementor-element-e05e795 .elementor-widget-html {
	max-width: 1100px;
	margin-inline: auto;
	width: 100%;
	background: #fff;
	border-radius: var(--p-radius);
	padding: 8px;
	box-shadow: var(--p-shadow-3);
}
.elementor-element-e05e795 iframe { border-radius: calc(var(--p-radius) - 6px) !important; }

/* ---------- 12. Inner pages & single posts ---------- */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .site-main > article { border-radius: var(--p-radius); }
.single .entry-title {
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem) !important;
	line-height: 1.35 !important;
	color: var(--p-navy-900);
	font-weight: 600;
}
.single .entry-content { font-size: 1.0625rem; }
.single .entry-content :is(p, li) { color: #1e293b; line-height: 1.85; }
.single .entry-content a { color: var(--p-blue-600); text-underline-offset: 3px; }
.single .entry-content img { border-radius: var(--p-radius-sm); }
.single .entry-content .gallery img,
.single .entry-content .wp-block-gallery img { box-shadow: var(--p-shadow-1); }
.single .post-thumb-img-content img, .single .ast-single-post-featured-section img { border-radius: var(--p-radius); box-shadow: var(--p-shadow-2); }
.page:not(.home) .elementor > .e-con:first-child .elementor-heading-title {
	color: var(--p-navy-900) !important;
	font-weight: 600 !important;
}
/* post navigation */
.post-navigation .nav-links a {
	display: inline-flex; gap: 8px; align-items: center;
	padding: 12px 18px; border: 1px solid var(--p-line); border-radius: 999px;
	color: var(--p-navy-900); background: #fff; box-shadow: var(--p-shadow-1);
	transition: box-shadow .2s var(--p-ease), transform .2s var(--p-ease);
}
.post-navigation .nav-links a:hover { box-shadow: var(--p-shadow-2); transform: translateY(-1px); }

/* Download Monitor buttons */
.download-link, a.download-link, .dlm-download-link {
	display: inline-flex !important; align-items: center; gap: 8px;
	background: var(--p-navy-900); color: #fff !important;
	padding: 10px 18px; border-radius: 999px; text-decoration: none !important;
	box-shadow: var(--p-shadow-1);
}
.download-link:hover, .dlm-download-link:hover { background: var(--p-blue-600); }

/* ---------- 13. Footer ---------- */
.site-primary-footer-wrap {
	background:
		radial-gradient(700px 240px at 50% 0%, rgb(47 111 228 / .25), transparent 70%),
		linear-gradient(180deg, var(--p-navy-900), var(--p-navy-950)) !important;
	border-top: 3px solid var(--p-gold-400) !important;
	padding-block: clamp(40px, 4vw, 64px) !important;
}
.site-primary-footer-inner-wrap { grid-template-columns: 1fr !important; }
.site-primary-footer-inner-wrap > .site-footer-section:not(:has(*)) { display: none !important; }
.site-primary-footer-inner-wrap > .site-footer-section { justify-content: center !important; }
.site-footer .ast-footer-copyright { max-width: 760px; margin-inline: auto; }
.site-footer .ast-footer-copyright p { line-height: 1.8; font-size: 14.5px; }
.site-footer .ast-footer-copyright strong { font-family: var(--p-font-head); font-weight: 500; font-size: 16px; letter-spacing: .02em; }

/* ---------- 14. Back to top (button injected by mb10-premium.js) ---------- */
.mb10-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 999;
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--p-navy-900); color: #fff; border: 1px solid rgb(255 255 255 / .12);
	box-shadow: var(--p-shadow-2);
	opacity: 0; transform: translateY(12px); pointer-events: none;
	transition: opacity .3s var(--p-ease), transform .3s var(--p-ease), background-color .2s;
	cursor: pointer;
}
.mb10-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mb10-top:hover { background: var(--p-blue-600); }
/* Astra's own scroll-to-top would duplicate ours */
#ast-scroll-top { display: none !important; }

/* ---------- 15. Reveal on scroll (only when JS adds .mb10-reveal-ready; honours reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.mb10-reveal-ready .mb10-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .7s var(--p-ease), transform .7s var(--p-ease);
		transition-delay: var(--mb10-delay, 0ms);
	}
	.mb10-reveal-ready .mb10-reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- 16. Layout safety ---------- */
.elementor-element-d4106af { max-width: 100% !important; width: 100% !important; }