/**
 * IFM Platform — public layout and components.
 * Design tokens aligned with react/src/styles.css (Inter, oklch brand, shadcn-like scale).
 */

.ifm-platform-page,
.ifm-archive,
.ifm-tax-archive,
.ifm-single-publication,
.ifm-single-output {
	/* Typography (match React) */
	--ifm-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
	--ifm-font-mono: "JetBrains Mono", ui-monospace, monospace;

	--ifm-radius-sm: 4px;
	--ifm-radius-md: 8px;
	--ifm-radius-lg: 12px;
	--ifm-radius-xl: 16px;
	--ifm-radius: 0.5rem;

	/* Core palette — :root from react/src/styles.css */
	--ifm-background: oklch(1 0 0);
	--ifm-foreground: oklch(0.18 0.02 155);

	--ifm-card: oklch(1 0 0);
	--ifm-card-foreground: oklch(0.18 0.02 155);
	--ifm-popover: oklch(1 0 0);
	--ifm-popover-foreground: oklch(0.18 0.02 155);

	/* Brand pair — hub template may override via inline style (must stay distinct from UI tokens). */
	--ifm-primary: #1c5425;
	--ifm-secondary: #3da442;
	--ifm-primary-foreground: oklch(1 0 0);
	--ifm-primary-soft: oklch(0.96 0.02 155);

	/* React tokens: secondary surface equals muted in styles.css */
	--ifm-muted: oklch(0.97 0.005 155);
	--ifm-muted-foreground: oklch(0.5 0.015 155);

	--ifm-accent: oklch(0.95 0.025 155);
	--ifm-accent-foreground: oklch(0.32 0.05 155);

	--ifm-destructive: oklch(0.6 0.2 25);
	--ifm-destructive-foreground: oklch(1 0 0);

	--ifm-border: oklch(0.92 0.008 155);
	--ifm-input: oklch(0.92 0.008 155);
	--ifm-ring: oklch(0.42 0.07 155);

	/* Content-type tag tokens */
	--ifm-tag-report: oklch(0.95 0.04 235);
	--ifm-tag-report-fg: oklch(0.4 0.15 235);
	--ifm-tag-guide: oklch(0.95 0.05 155);
	--ifm-tag-guide-fg: oklch(0.38 0.1 155);
	--ifm-tag-policy: oklch(0.96 0.05 60);
	--ifm-tag-policy-fg: oklch(0.45 0.12 60);
	--ifm-tag-map: oklch(0.94 0.05 280);
	--ifm-tag-map-fg: oklch(0.42 0.15 280);
	--ifm-tag-info: oklch(0.95 0.06 25);
	--ifm-tag-info-fg: oklch(0.48 0.16 25);

	--ifm-shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 3px oklch(0 0 0 / 0.04);
	--ifm-shadow-card-hover: 0 10px 30px -10px oklch(0.32 0.08 155 / 0.18),
		0 4px 12px -4px oklch(0 0 0 / 0.06);
	margin: 0 auto;
	font-family: var(--ifm-font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: var(--ifm-foreground);
}

.ifm-single-publication,
.ifm-single-output {
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--cnvp-color-text, #020307);
	background: transparent;
}

.ifm-archive.ifm-archive-outputs,
.ifm-tax-archive {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}



.ifm-hero-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.ifm-tagline {
	opacity: 0.95;
	margin-bottom: 1.5rem;
	color: var(--ifm-primary-foreground);
}

html, 
body {
    overflow-x: hidden;
}

section.ifm-hero {
    position: relative;
    overflow: visible; 
}

section.ifm-hero:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
      background: linear-gradient(135deg, var(--ifm-primary), var(--ifm-secondary));
    z-index: -1;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}


/* Hero search bar -------------------------------------------------------- */
.ifm-hero-search-bar {
	min-height: 52px;
}
.ifm-hero-search-input {
	font-family: var(--ifm-font-sans);
	font-size: 0.9375rem;
	min-height: 44px;
}
.ifm-hero-search-input:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
/* Remove webkit search cancel button */
.ifm-hero-search-input::-webkit-search-cancel-button,
.ifm-hero-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.ifm-hero-search-btn {
	font-family: var(--ifm-font-sans);
}

.ifm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}

.ifm-layout-list .ifm-grid {
	grid-template-columns: 1fr;
}

.ifm-card {
	border: 1px solid var(--ifm-border);
	border-radius: var(--ifm-radius-lg);
	overflow: hidden;
	background: var(--ifm-card);
	color: var(--ifm-card-foreground);
	box-shadow: var(--ifm-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ifm-card:hover,
.ifm-card:focus-within {
	box-shadow: var(--ifm-shadow-card-hover);
	transform: translateY(-2px);
}

.ifm-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
	height: 100%;
}

.ifm-card-thumb img {
	width: 100%;
	/* height: 180px; */
	object-fit: cover;
	display: block;
}

.ifm-card-title {
	font-size: 1.05rem;
	font-weight: 600;
}

.ifm-card-excerpt {
	margin: 0 1rem 1rem;
	color: var(--ifm-muted-foreground);
	font-size: 0.9rem;
}

.ifm-topic-grid,
.ifm-geo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.ifm-topic-card,
.ifm-geo-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1rem;
	border-radius: var(--ifm-radius-lg);
	border: 1px solid var(--ifm-border);
	background: var(--ifm-card);
	text-decoration: none;
	color: var(--ifm-foreground);
	min-height: 44px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ifm-topic-card:hover,
.ifm-geo-card:hover {
	border-color: var(--ifm-ring);
	box-shadow: var(--ifm-shadow-card);
}

.ifm-topic-icon {
	font-size: 1.5rem;
	color: var(--ifm-primary);
}

.ifm-topic-count,
.ifm-geo-count {
	font-size: 0.85rem;
	color: var(--ifm-muted-foreground);
}

.ifm-search-app {
	margin-top: 1rem;
}

.ifm-search-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	position: relative;
}

.ifm-search-input {
	flex: 1 1 220px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--ifm-radius-md);
	border: 1px solid var(--ifm-input);
	background: var(--ifm-background);
	color: var(--ifm-foreground);
	font-family: inherit;
	font-size: 1rem;
}

.ifm-search-input:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ifm-background), 0 0 0 4px var(--ifm-ring);
	border-color: var(--ifm-ring);
}

.ifm-search-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.ifm-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.ifm-filters legend {
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--ifm-foreground);
}

.ifm-filters label {
	margin-bottom: 0.25rem;
	color: var(--ifm-muted-foreground);
	font-size: 0.9rem;
}

.ifm-results.ifm-list .ifm-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.ifm-results.ifm-list .ifm-card-thumb img {
	width: 200px;
	height: 100%;
	min-height: 120px;
}

.ifm-results-count {
	font-weight: 600;
	color: var(--ifm-foreground);
}

.ifm-autocomplete-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--ifm-popover);
	color: var(--ifm-popover-foreground);
	border: 1px solid var(--ifm-border);
	border-radius: 0 0 var(--ifm-radius-md) var(--ifm-radius-md);
	z-index: 20;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: var(--ifm-shadow-card-hover);
}

.ifm-autocomplete-list li {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.ifm-autocomplete-list li:hover,
.ifm-autocomplete-list li[aria-selected="true"] {
	background: var(--ifm-primary-soft);
}

.ifm-breadcrumbs {
	font-size: 0.9rem;
	margin-bottom: 1rem;
	color: var(--ifm-muted-foreground);
}

.ifm-breadcrumbs a {
	color: var(--ifm-primary);
	text-decoration: none;
}

.ifm-breadcrumbs a:hover {
	text-decoration: underline;
}

.ifm-breadcrumbs .sep {
	margin: 0 0.35rem;
	opacity: 0.6;
}

.ifm-meta-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.ifm-meta-list li {
	margin-bottom: 0.35rem;
	color: var(--ifm-muted-foreground);
}

.ifm-share .button,
.ifm-download-btn {
	min-height: 44px;
	min-width: 44px;
	margin: 0 0.35rem 0.35rem 0;
}

.ifm-stats-shortcode {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.ifm-stats-board .ifm-stats-shortcode p {
	margin: 0;
	padding: 1rem;
	background: var(--ifm-muted);
	border: 1px solid var(--ifm-border);
	border-radius: var(--ifm-radius-md);
	flex: 1 1 160px;
	color: var(--ifm-foreground);
}

.ifm-related-grid {
	margin-top: 1rem;
}

/* .ifm-section {
	margin-bottom: 2.5rem;
} */

.ifm-section h2 {
	margin-bottom: 1rem;
	font-weight: 600;
	color: var(--ifm-foreground);
	letter-spacing: -0.01em;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Content-type tags — same tokens as react/src/styles.css */
.ifm-platform-page .ifm-tag,
.ifm-archive .ifm-tag,
.ifm-tax-archive .ifm-tag,
.ifm-single-publication .ifm-tag,
.ifm-single-output .ifm-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: var(--ifm-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
}

.ifm-tag--report {
	background: var(--ifm-tag-report);
	color: var(--ifm-tag-report-fg);
}
.ifm-tag--guide {
	background: var(--ifm-tag-guide);
	color: var(--ifm-tag-guide-fg);
}
.ifm-tag--policy {
	background: var(--ifm-tag-policy);
	color: var(--ifm-tag-policy-fg);
}
.ifm-tag--map {
	background: var(--ifm-tag-map);
	color: var(--ifm-tag-map-fg);
}
.ifm-tag--info {
	background: var(--ifm-tag-info);
	color: var(--ifm-tag-info-fg);
}

/* AJAX search loading overlay */
.ifm-results[data-ifm-results],
.ifm-results {
	position: relative;
	min-height: 8rem;
}

.ifm-results-is-loading {
	pointer-events: none;
}

.ifm-results-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	z-index: 20;
}

.ifm-results-loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.ifm-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 3px solid var(--ifm-border, #e2e8f0);
	border-top-color: var(--ifm-primary, #2d5a3d);
	animation: ifm-spin 0.75s linear infinite;
}

@keyframes ifm-spin {
	to {
		transform: rotate(360deg);
	}
}

.ifm-results-loader-text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ifm-muted-foreground, #64748b);
}

.ifm-search-error {
	padding: 1rem;
	color: var(--ifm-destructive, #b91c1c);
}

.ifm-single-output .ifm-youtube-embed,
.ifm-single-publication .ifm-youtube-embed {
	position: relative;
	width: 100%;
	max-width: 48rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 1rem;
	background: #0f172a;
}

.ifm-single-output .ifm-youtube-embed iframe,
.ifm-single-output .ifm-youtube-embed .ifm-youtube-iframe,
.ifm-single-publication .ifm-youtube-embed iframe,
.ifm-single-publication .ifm-youtube-embed .ifm-youtube-iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	border: 0;
	display: block;
}

.ifm-search-focus-wrap {
	padding-right: 0 !important;
}

@media (max-width: 767px) {
	.ifm-search-app {
		padding: 0;
		margin: 0;
	}

	
}