/*
 * MB10 UI polish — design tokens + targeted fixes for mobile10.ssko.moph.go.th
 * Loaded by mu-plugins/mb10-ui-polish.php after Astra/Elementor styles.
 * Style: "Accessible & Ethical" (gov/healthcare) — high contrast, clear focus, reduced motion.
 */

/* ---------- 1. Tokens (primitive → semantic → component) ---------- */
:root {
	/* primitive */
	--mb-blue-900: #0b1f5c;
	--mb-blue-800: #13107a;   /* existing brand navy */
	--mb-blue-700: #1747a6;
	--mb-blue-600: #045cb4;   /* existing menu blue */
	--mb-blue-50:  #eef4fc;
	--mb-yellow-400: #ffd23f; /* existing brand yellow */
	--mb-slate-900: #0f172a;
	--mb-slate-600: #475569;
	--mb-slate-200: #e2e8f0;
	--mb-slate-50:  #f8fafc;
	--mb-white: #ffffff;

	/* semantic */
	--mb-color-primary: var(--mb-blue-600);
	--mb-color-primary-strong: var(--mb-blue-800);
	--mb-color-accent: var(--mb-yellow-400);
	--mb-color-text: var(--mb-slate-900);
	--mb-color-text-muted: var(--mb-slate-600);
	--mb-color-surface: var(--mb-white);
	--mb-color-surface-alt: var(--mb-slate-50);
	--mb-color-border: var(--mb-slate-200);
	--mb-color-focus: var(--mb-yellow-400);

	--mb-radius-sm: 8px;
	--mb-radius-md: 12px;
	--mb-radius-lg: 16px;
	--mb-shadow-sm: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .08);
	--mb-shadow-md: 0 4px 12px rgb(15 23 42 / .08), 0 12px 32px rgb(15 23 42 / .08);
	--mb-ease: cubic-bezier(.2, .8, .2, 1);
	--mb-dur: 200ms;

	/* component */
	--mb-card-bg: var(--mb-color-surface);
	--mb-card-radius: var(--mb-radius-md);
	--mb-card-border: 1px solid var(--mb-color-border);
	--mb-nav-bg: var(--mb-color-primary);
}

/* ---------- 2. Base typography ---------- */
/* Astra global sets text-transform:capitalize on everything (breaks emails, "Elderlyhealth") */
body,
body * { text-transform: none; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Astra customizer has h2 = 8px; give plain post content a sane scale */
.entry-content :where(h2) { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.entry-content :where(p, li) { line-height: 1.7; }

/* balanced headings, no orphans in paragraphs (progressive enhancement) */
h1, h2, h3, h4, .elementor-heading-title, .eael-entry-title { text-wrap: balance; }
p, li, .elementor-widget-text-editor { text-wrap: pretty; }

/* Thai: never split inside a word */
.elementor-heading-title { word-break: normal; overflow-wrap: normal; }

/* ---------- 3. Accessibility ---------- */
:where(a, button, [role="button"], input, select, textarea, summary, iframe):focus-visible {
	outline: 3px solid var(--mb-color-focus);
	outline-offset: 2px;
	border-radius: 4px;
	box-shadow: 0 0 0 5px var(--mb-color-primary-strong);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 4. Header ---------- */
/* full-width nav bar instead of a blue strip floating in white */
.ast-above-header.ast-above-header-bar,
.ast-header-break-point .ast-above-header-bar { background-color: var(--mb-nav-bg) !important; }
.ast-above-header-bar .main-header-menu,
.ast-above-header-bar .main-header-menu > li > a { background-color: transparent; }
.ast-above-header-bar .main-header-menu > li > a {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-weight: 500;
	transition: background-color var(--mb-dur) var(--mb-ease);
}
.ast-above-header-bar .main-header-menu > li > a:hover,
.ast-above-header-bar .main-header-menu > .current-menu-item > a {
	background-color: rgb(255 255 255 / .14);
}
.ast-above-header-bar .main-header-menu > .current-menu-item > a {
	box-shadow: inset 0 -3px 0 var(--mb-color-accent);
}
.ast-above-header-bar .ast-header-social-1-wrap a,
.ast-above-header-bar .ast-header-social-1-wrap a svg { color: var(--mb-white); fill: var(--mb-white); }
.ast-above-header-bar .ast-header-social-1-wrap a {
	min-width: 32px; min-height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
}
/* 7 top-level items overflow the centre column at ~1366px and the last one
   ("ดาวน์โหลด") wraps under the banner — keep one row and tighten spacing */
@media (min-width: 922px) {
	.ast-above-header-bar .main-header-menu,
	.ast-above-header-bar .header-social-inner-wrap { flex-wrap: nowrap; white-space: nowrap; }
	.ast-above-header-bar .main-header-menu > li > a { padding-inline: clamp(8px, 1vw, 14px); white-space: nowrap; }
}
/* dropdowns — the nav (made fixed by Sticky Menu, z-index 1) must sit above the banner row */
.ast-above-header-wrap { position: relative; z-index: 20; }
#ast-desktop-header .main-header-menu { z-index: 1000 !important; }
.ast-above-header-bar .sub-menu {
	border-radius: 0 0 var(--mb-radius-sm) var(--mb-radius-sm);
	box-shadow: var(--mb-shadow-md);
	overflow: hidden;
}

/* banner: show the whole artwork at every width instead of cropping it */
.ast-primary-header-bar {
	aspect-ratio: 1500 / 449;
	min-height: 0 !important;
	background-size: cover !important;
	background-position: left center !important;
}
@media (max-width: 921.98px) {
	.ast-primary-header-bar { background-size: 100% auto !important; background-position: left top !important; }
	/* keep the hamburger readable on top of the artwork */
	.ast-mobile-header-wrap .menu-toggle {
		background: var(--mb-color-primary) !important;
		color: var(--mb-white) !important;
		border-radius: var(--mb-radius-sm);
		min-width: 44px; min-height: 44px;
	}
	.ast-mobile-header-wrap .menu-toggle svg { fill: currentColor; }
}

/* ---------- 5. Post grid cards (Essential Addons) ---------- */
.eael-grid-post-holder {
	background: var(--mb-card-bg) !important;
	border: var(--mb-card-border) !important;
	border-radius: var(--mb-card-radius) !important;
	box-shadow: var(--mb-shadow-sm) !important;
	overflow: hidden;
	height: 100%;
	transition: box-shadow var(--mb-dur) var(--mb-ease), transform var(--mb-dur) var(--mb-ease);
}
.eael-grid-post-holder:hover,
.eael-grid-post-holder:focus-within {
	box-shadow: var(--mb-shadow-md) !important;
	transform: translateY(-2px);
}
.eael-entry-thumbnail { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; overflow: hidden; }
.eael-entry-thumbnail > img {
	display: block;
	width: 100% !important; max-width: none !important; height: 100% !important;
	object-fit: cover;
	transition: transform 400ms var(--mb-ease);
}
.eael-grid-post-holder:hover .eael-entry-thumbnail > img { transform: scale(1.04); }

.eael-entry-wrapper { padding: 16px 18px 18px !important; }
.eael-entry-title { margin: 0 0 8px !important; line-height: 1.45 !important; }
.eael-entry-title a {
	color: var(--mb-color-primary-strong) !important;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eael-entry-title a:hover { color: var(--mb-color-primary) !important; text-decoration: underline; text-underline-offset: 3px; }

.eael-post-elements-readmore-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	font-size: 14px !important;
	font-weight: 600;
	color: var(--mb-color-primary) !important;
}
.eael-post-elements-readmore-btn::after { content: "→"; transition: transform var(--mb-dur) var(--mb-ease); }
.eael-post-elements-readmore-btn:hover::after { transform: translateX(3px); }

/* hide author (it exposes the admin login name) — keep the date */
.eael-posted-by { display: none !important; }
/* same on single posts (Astra: "By <author> / <date>") — font-size:0 hides the text separators */
.single .entry-header .entry-meta { font-size: 0 !important; }
.single .entry-header .entry-meta .posted-by { display: none !important; }
.single .entry-header .entry-meta .posted-on { font-size: 14px; color: var(--mb-color-text-muted); }
.eael-meta-posted-on, .eael-posted-on { color: var(--mb-color-text-muted) !important; font-size: 13px !important; }

/* ---------- 6. Media & embeds ---------- */
.elementor-widget-video .elementor-wrapper,
.elementor-widget-video iframe {
	border-radius: var(--mb-radius-md);
	overflow: hidden;
}
.elementor-widget-video .elementor-wrapper { box-shadow: var(--mb-shadow-sm); }
.elementor-widget-html iframe { border: 0; border-radius: var(--mb-radius-md); max-width: 100%; }

/* staff quick-link tiles */
.elementor-element-ff76027 .elementor-widget-image img {
	border-radius: var(--mb-radius-md);
	box-shadow: var(--mb-shadow-sm);
	transition: transform var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur) var(--mb-ease);
}
.elementor-element-ff76027 .elementor-widget-image a:hover img {
	transform: translateY(-3px);
	box-shadow: var(--mb-shadow-md);
}

/* province report tiles */
.elementor-element-0119826 .elementor-widget-image img { border-radius: var(--mb-radius-md); }

/* ---------- 7. Layout fixes ---------- */
/* this container is 16px wider than the viewport → horizontal scroll on desktop */
.elementor-element-d4106af { max-width: 100%; }
html, body { overflow-x: clip; }

/* ---------- 8. Footer ---------- */
.site-primary-footer-wrap {
	background: var(--mb-blue-900) !important;
	color: rgb(255 255 255 / .88);
	padding-block: 40px !important;
}
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright span { color: rgb(255 255 255 / .88) !important; }
.site-footer .ast-footer-copyright strong { color: var(--mb-white); }
.site-footer .ast-footer-copyright p { margin-bottom: 4px; text-align: center; }
.site-footer a { color: var(--mb-color-accent); }

/* ---------- 9. Mobile ---------- */
@media (max-width: 767px) {
	.elementor-widget-heading h1.elementor-heading-title,
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: clamp(1.5rem, 1rem + 3.5vw, 2rem) !important;
		line-height: 1.3 !important;
	}
	.elementor-widget-text-editor { font-size: 1rem; line-height: 1.7; }
	.eael-grid-post-holder:hover { transform: none; }
}