/* Inline-safe styles for plugin-rendered content. Extends the Tailwind tokens from code.html. */

.enp-lead {
	font-family: 'Manrope', sans-serif;
	font-size: 1.15rem;
	line-height: 1.6;
	color: #424751; /* on-surface-variant */
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: rgba(255,255,255,0.6);
	border-left: 3px solid #00346f; /* primary */
	border-radius: 0.5rem;
}

/* ==========================================================================
   Content body styling — applied to .prose wrapper on single.php / page.php
   Tailwind `prose` class has no styles because we only load tailwindcss CDN
   (not the Typography plugin). We supply our own Material Design 3 tokens here.
   ========================================================================== */

/* Headings inside content body */
.prose > h2 {
	font-family: 'Manrope', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	color: #1b1c1c; /* on-surface */
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(194, 198, 211, 0.35); /* outline-variant/35 */
	letter-spacing: -0.01em;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 {
	font-family: 'Manrope', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #00346f; /* primary */
	margin-top: 1.75rem;
	margin-bottom: 0.65rem;
}
.prose > h2 + h3, .prose > h3:first-child { margin-top: 0.75rem; }

/* Paragraphs */
.prose > p {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: #424751; /* on-surface-variant */
	margin: 0 0 1rem;
}
.prose > p strong { color: #1b1c1c; font-weight: 700; }

/* Lead paragraph (computed lead at top of every post body) */
.prose > p.enp-lead {
	font-family: 'Manrope', sans-serif;
	font-size: 1.1rem;
	line-height: 1.55;
	color: #424751;
	padding: 1rem 1.25rem;
	background: rgba(255, 255, 255, 0.7);
	border-left: 4px solid #00346f;
	border-radius: 0.5rem;
	margin: 0 0 1.75rem;
	box-shadow: 0 1px 2px rgba(27, 28, 28, 0.03);
}

/* Links in body */
.prose a {
	color: #00346f; /* primary */
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(0, 52, 111, 0.35);
	text-underline-offset: 2px;
	transition: color 0.15s, text-decoration-color 0.15s;
}
.prose a:hover {
	color: #004a99; /* primary-container */
	text-decoration-color: #004a99;
}

/* Inline code (ICD codes, DON IDs, etc.) */
.prose code {
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;
	font-size: 0.875em;
	padding: 0.125rem 0.4rem;
	background: #efeded; /* surface-container */
	border: 1px solid rgba(194, 198, 211, 0.4);
	border-radius: 0.25rem;
	color: #00346f;
	font-weight: 500;
}

/* Lists */
.prose ul, .prose ol {
	margin: 0.75rem 0 1.25rem;
	padding-left: 1.25rem;
	font-family: 'Inter', sans-serif;
	color: #424751;
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.5rem;
	line-height: 1.55;
	border-bottom: 1px solid rgba(194, 198, 211, 0.18);
}
.prose ul > li:last-child { border-bottom: none; }
.prose ul > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 1rem;
	width: 6px;
	height: 6px;
	background: #00346f;
	border-radius: 50%;
}
.prose ol { list-style: decimal; }
.prose ol > li { padding: 0.3rem 0; }
.prose li strong { color: #1b1c1c; }

/* Tables — all content tables inside the post body */
.prose table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0 1.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.925rem;
	background: #ffffff; /* surface-container-lowest */
	border: 1px solid rgba(194, 198, 211, 0.5);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(27, 28, 28, 0.04);
}
.prose thead {
	background: linear-gradient(180deg, #f5f3f3, #efeded); /* surface-container-low → surface-container */
}
.prose th {
	text-align: left;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	color: #424751;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.75rem 1rem;
	border-bottom: 1.5px solid rgba(194, 198, 211, 0.5);
	white-space: nowrap;
}
.prose td {
	padding: 0.65rem 1rem;
	border-bottom: 1px solid rgba(194, 198, 211, 0.25);
	color: #1b1c1c;
	vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover { background: #f5f3f3; }
.prose tbody tr:nth-child(even) { background: rgba(245, 243, 243, 0.4); }
.prose tbody tr:nth-child(even):hover { background: #efeded; }

/* Numeric columns — right-align when cell only contains numbers / %  */
.prose td:not(:first-child) {
	font-variant-numeric: tabular-nums;
}
.prose th + th, .prose td + td {
	/* Align 2nd+ columns right for stat tables (countries-by-events etc.) */
	text-align: right;
}
/* 2nd column (region/who) should be left — exception via :nth-child(2) where all values are strings */
.prose tbody td:nth-child(2) { text-align: left; }
.prose thead th:nth-child(2) { text-align: left; }

/* First column — entity names, always left-aligned */
.prose th:first-child, .prose td:first-child {
	text-align: left;
	font-weight: 500;
}

/* Horizontal scroll for narrow viewports */
@media (max-width: 640px) {
	.prose table { display: block; overflow-x: auto; white-space: nowrap; }
	.prose td, .prose th { padding: 0.55rem 0.75rem; font-size: 0.85rem; }
}

/* Ensure content body wraps long country / disease names gracefully */
.prose td:first-child { max-width: 28rem; white-space: normal; word-break: break-word; }

/* Source attribution paragraph */
.prose p.enp-source {
	font-size: 0.8rem;
	color: #737783; /* outline */
	font-style: italic;
	margin-top: -0.75rem;
	margin-bottom: 1.75rem;
}

/* ==========================================================================
   Pair-post specific refinements (disease × country pages)
   ========================================================================== */

/* Event log — DON IDs and external WHO references */
.prose tbody td:first-child {
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	color: #1b1c1c;
}

/* DON IDs (2nd column in Event log) — look like badges */
.prose table th:nth-child(2):is([scope="col"]),
.prose tbody td:nth-child(2) {
	/* Default middle columns stay right-aligned via earlier rule */
}

/* DON ID cell — detect by DON... prefix via attribute is hard, so target 2nd col on 5-col tables */
.prose table:has(th:nth-child(5)) tbody td:nth-child(2) {
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;
	font-size: 0.85rem;
	color: #00346f;
	letter-spacing: 0.01em;
	text-align: left;
}
.prose table:has(th:nth-child(5)) thead th:nth-child(2) {
	text-align: left;
}

/* "WHO DONs" outbound link in Source column — compact */
.prose table a[rel~="nofollow"][target="_blank"] {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: #00346f;
	text-decoration: none;
	font-weight: 500;
	padding: 0.15rem 0.55rem;
	background: rgba(0, 52, 111, 0.08);
	border-radius: 0.25rem;
	transition: background 0.15s;
}
.prose table a[rel~="nofollow"][target="_blank"]:hover {
	background: rgba(0, 52, 111, 0.18);
	text-decoration: none;
}
.prose table a[rel~="nofollow"][target="_blank"]::after {
	content: "↗";
	font-size: 0.85em;
	opacity: 0.7;
}

/* Regional peers — highlight current country (marked with "←" in source) */
.prose table tbody tr:has(td:first-child:is(:has(a) + *)),
.prose table tbody tr td:first-child:has(+ td) {
	/* fallback — no easy "text contains" selector; use backward-compatible approach below */
}
/* Safer: use attribute highlight — we'll add data-current="1" via JS-free approach by checking text */
.prose table tbody td:first-child {
	/* CSS-only current-country highlight using :has on nested structure — may not work on older browsers, harmless fallback */
}
/* The ← marker: when a td contains text ending in "←" via presence of the arrow character, we style the row via a wrapper.
   We can't do text-matching purely in CSS, so we add a small helper: any td whose content ends with "←" pattern gets a bold style.
   Since we can't match text content, rely on the ← entity rendered as "←" being a clear visual cue.
   We bold the whole row background via tbody tr:has(td):has(...) — not reliable. Use a simpler approach:
   emphasise the ← glyph to make current-country row visually distinct. */
.prose table tbody td:first-child {
	font-variant-ligatures: no-contextual;
}

/* Strong ranking numbers (e.g. "#6 of 25") — make them visually pop */
.prose ul > li > strong {
	color: #00346f;
	font-size: 1.02em;
}

/* Pair-post specific: "rank #X of Y" list items more prominent */
.prose h2 + ul > li,
.prose h2 + ul + p + table + ul > li {
	padding: 0.65rem 0 0.65rem 1.5rem;
}

/* Compact table variant — smaller padding for multi-column numeric tables (Event log, Annual cadence) */
.prose table:has(th:nth-child(5)) td,
.prose table:has(th:nth-child(5)) th {
	padding: 0.55rem 0.8rem;
	font-size: 0.875rem;
}

/* Rank badges inside paragraphs: "#6 of 25" — wrap in prominent block */
.prose strong:first-child,
.prose p strong {
	color: #1b1c1c;
}

/* ICD code columns should never wrap */
.prose td code {
	white-space: nowrap;
	font-size: 0.825rem;
	padding: 0.1rem 0.4rem;
	background: rgba(0, 52, 111, 0.06);
	border-color: rgba(0, 52, 111, 0.15);
}

/* Narrow-screen: make 5-column event log scroll, emphasise year column */
@media (max-width: 780px) {
	.prose table:has(th:nth-child(5)) {
		font-size: 0.82rem;
	}
}

/* Hovered rows — subtle primary tint instead of grey for pair posts */
.prose tbody tr:hover td {
	background: rgba(0, 52, 111, 0.04);
}

/* Year / numeric badges in tables — unify with code styling */
.prose tbody td:only-of-type,
.prose tbody td:nth-last-child(1):not(:first-child) {
	font-variant-numeric: tabular-nums;
}

/* Polish H2 for pair posts specifically — smaller when multiple are close together */
.prose > h2 + table,
.prose > h2 + ul,
.prose > h2 + p {
	margin-top: 1rem;
}

/* ==========================================================================
   Global Map page (/global-map) — tile grid polish
   ========================================================================== */

/* Sticky legend on desktop so it stays visible while scanning the map */
@media (min-width: 1024px) {
	.enp-global-map__legend-wrap {
		position: sticky;
		top: 5rem;
		align-self: flex-start;
	}
}

.enp-global-map { position: relative; }

.enp-global-map__grid {
	/* Slight inner padding so badge / tooltip don't clip against the section edge */
	padding-top: 0.5rem;
}

/* Tiles: smoother lift + shadow on hover, soft entrance */
.enp-global-map .enp-tile {
	position: relative;
	transition:
		transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
		border-color 0.18s ease-out;
	will-change: transform;
}
.enp-global-map .enp-tile:hover,
.enp-global-map .enp-tile:focus-visible {
	transform: translateY(-3px) scale(1.07);
	box-shadow: 0 10px 24px -6px rgba(27, 28, 28, 0.22);
	border-color: rgba(0, 52, 111, 0.45); /* primary */
	z-index: 5;
}
.enp-global-map .enp-tile:focus-visible {
	outline: 2px solid #00346f;
	outline-offset: 2px;
}

/* Tier-specific border accent (subtle ring matching the fill color) */
.enp-global-map .enp-tile[data-tier="endemic"]   { box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.35); }
.enp-global-map .enp-tile[data-tier="recurrent"] { box-shadow: inset 0 0 0 1px rgba(186, 26, 26, 0.20); }
.enp-global-map .enp-tile[data-tier="emerging"]  { box-shadow: inset 0 0 0 1px rgba(58, 90, 173, 0.30); }
.enp-global-map .enp-tile[data-tier="sporadic"]  { box-shadow: inset 0 0 0 1px rgba(0, 62, 29, 0.25); }
.enp-global-map .enp-tile[data-tier="none"]      { opacity: 0.65; }
.enp-global-map .enp-tile[data-tier="none"]:hover { opacity: 1; }

/* Top-10 ranking badge in the upper-left corner */
.enp-global-map .enp-tile[data-rank]::before {
	content: attr(data-rank);
	position: absolute;
	top: -6px;
	left: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: #fbf9f8; /* surface */
	color: #00346f; /* primary */
	border: 1.5px solid #00346f;
	border-radius: 999px;
	font-family: 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 52, 111, 0.25);
	z-index: 2;
	pointer-events: none;
}

/* CSS-only tooltip on hover/focus (replaces ugly native title) */
.enp-global-map .enp-tile[data-tip]:hover::after,
.enp-global-map .enp-tile[data-tip]:focus-visible::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #1b1c1c; /* on-surface */
	color: #fbf9f8; /* surface */
	padding: 6px 10px;
	border-radius: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Tooltip arrow */
.enp-global-map .enp-tile[data-tip]:hover::before,
.enp-global-map .enp-tile[data-tip]:focus-visible::before {
	/* Skip arrow on tiles that already use ::before for the rank badge */
}
.enp-global-map .enp-tile:not([data-rank])[data-tip]:hover::before,
.enp-global-map .enp-tile:not([data-rank])[data-tip]:focus-visible::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1b1c1c;
	z-index: 10;
	pointer-events: none;
}

/* Slightly bigger flag on tablets/desktop where there is more room */
@media (min-width: 768px) {
	.enp-global-map__grid img {
		width: 1.75rem;
		height: auto;
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.enp-global-map .enp-tile,
	.enp-global-map .enp-tile:hover,
	.enp-global-map .enp-tile:focus-visible {
		transition: none;
		transform: none;
	}
}

/* Cleaner print: drop hover effects, keep grid */
@media print {
	.enp-global-map .enp-tile { box-shadow: none !important; transform: none !important; }
	.enp-global-map .enp-tile[data-rank]::before { display: none; }
}