/* Theme Name: AEMIDR
 * Theme URI: https://skool2.i.ng/
 * Description: Custom, zero-budget theme for the AEMIDR / Aemid Consult platform. Palette: earth tones + Adire-inspired indigo. Implements the harmonized blueprint (hero "Advancing Knowledge. Delivering Solutions.", research themes, projects, publications, people, case studies, consultancy, forms).
 * Version: 1.2.0
 * Author: AEMIDR Web Team
 * License: GPL-2.0-or-later
 * Text Domain: aemidr
 */

:root {
	--aemidr-primary: #0A4D68;
	--aemidr-secondary: #088395;
	--aemidr-accent: #05BFDB;
	--aemidr-dark: #1A1A1A;
	--aemidr-light: #F8FAFC;
	--aemidr-white: #FFFFFF;
	--aemidr-indigo: #2A2A72; /* Adire-inspired */
	--aemidr-bronze: #B08D57;
	--aemidr-radius: 12px;
	--aemidr-shadow: 0 6px 20px rgba(10, 77, 104, 0.12);
	--aemidr-maxw: 1180px;
	--aemidr-font: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/*
 * Progressive enhancement: re-declare the brand tokens in OKLCH where it is
 * supported. OKLCH is perceptually uniform, so lightness steps stay even and
 * gradients interpolate without muddy mid-tones; it can also address the wider
 * Display-P3 gamut on capable screens. The hex values above remain
 * authoritative and are what every other browser keeps using.
 */
@supports ( color: oklch(0% 0 0) ) {
	:root {
		--aemidr-primary: oklch(39.54% 0.0761 231.8);
		--aemidr-secondary: oklch(56.04% 0.0962 211.6);
		--aemidr-accent: oklch(73.95% 0.1293 213.1);
		--aemidr-dark: oklch(21.77% 0 0);
		--aemidr-light: oklch(98.41% 0.0034 248);
		--aemidr-white: oklch(100% 0 0);
		--aemidr-indigo: oklch(33.24% 0.1209 277.6);
		--aemidr-bronze: oklch(66.41% 0.0831 77.5);
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--aemidr-font);
	color: var(--aemidr-dark);
	background: var(--aemidr-light);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--aemidr-secondary); text-decoration: none; }
a:hover { color: var(--aemidr-primary); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: var(--aemidr-primary); }

.container { max-width: var(--aemidr-maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header / Nav ---------- */
.site-header {
	background: var(--aemidr-white);
	border-bottom: 1px solid #e6edf2;
	position: sticky; top: 0; z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--aemidr-primary); }
.brand img { height: 44px; width: auto; max-width: 160px; border-radius: 8px; object-fit: contain; }
.brand .brand-text small { display: block; font-weight: 500; color: var(--aemidr-secondary); font-size: 12px; }
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--aemidr-primary); cursor: pointer; }
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--aemidr-primary); }
.main-nav a:hover { background: var(--aemidr-light); }
.main-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: var(--aemidr-shadow); border-radius: 10px; min-width: 220px; padding: 8px; z-index: 60; }
.main-nav li:hover > .sub-menu { display: block; }
.main-nav .sub-menu a { font-weight: 500; }
.header-search { display: flex; align-items: center; }
.header-search input { padding: 7px 10px; border: 1px solid #d6e2e9; border-radius: 8px; }

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(1200px 400px at 80% -10%, rgba(5,191,219,0.18), transparent),
		linear-gradient(135deg, var(--aemidr-primary), var(--aemidr-indigo));
	color: #fff; padding: 90px 0 80px; position: relative; overflow: hidden;
}
.hero::after { /* Adire line motif */
	content: ""; position: absolute; inset: 0; opacity: 0.10; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40h80M40 0v80M0 0l80 80M80 0L0 80' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(28px, 5vw, 50px); margin: 0 0 14px; }
.hero p { font-size: 18px; max-width: 720px; color: #eaf6fb; }
.hero .hero-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.aemidr-btn, .hero .aemidr-btn, button.aemidr-btn {
	display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 700; cursor: pointer; border: 0;
	background: var(--aemidr-accent); color: #04222c; box-shadow: var(--aemidr-shadow);
}
.aemidr-btn:hover { background: #04a7c0; color: #04222c; }
.aemidr-btn.secondary { background: #fff; color: var(--aemidr-primary); }
.aemidr-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.alt { background: #fff; }
.section-title { text-align: center; margin-bottom: 36px; }
.section-title h2 { font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 8px; }
.section-title p { color: #5a6b75; max-width: 720px; margin: 0 auto; }

/* Adire divider */
.adire-divider { height: 24px; background:
	repeating-linear-gradient(90deg, var(--aemidr-indigo) 0 6px, transparent 6px 12px),
	repeating-linear-gradient(90deg, var(--aemidr-accent) 0 2px, transparent 2px 12px);
	opacity: 0.5; }

/* ---------- Grid + Cards ---------- */
.aemidr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.aemidr-card { background: #fff; border: 1px solid #e6edf2; border-radius: var(--aemidr-radius); padding: 22px; box-shadow: var(--aemidr-shadow); position: relative; }
.aemidr-card h3 { margin: 6px 0 8px; font-size: 19px; }
.aemidr-card h3 a { color: var(--aemidr-primary); }
.aemidr-card img { border-radius: 10px; margin-bottom: 10px; }
.aemidr-money-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.aemidr-money-row span { background: #eef4f8; border: 1px solid #e1ebf1; border-radius: 6px; padding: 4px 9px; font-size: 13px; font-weight: 600; }
.aemidr-values { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.aemidr-values li { background: #fff; border: 1px solid #e6edf2; border-radius: 10px; padding: 12px 16px; }
.aemidr-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; background: #0A4D68; color: #fff; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.aemidr-cookie p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.aemidr-cookie a { color: #9fe3f0; text-decoration: underline; }
.aemidr-meta { color: #6b7a82; font-size: 13px; margin: 4px 0; }
.aemidr-badge { display: inline-block; background: var(--aemidr-secondary); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.aemidr-badge-critically { background: #c0392b; }
.aemidr-badge-partial { background: #d98a00; }
.aemidr-badge-secured { background: #1e8e4e; }

/* Funding bar */
.aemidr-funding-bar { height: 12px; background: #e8eef2; border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.aemidr-funding-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--aemidr-secondary), var(--aemidr-accent)); }
.aemidr-funding-meta { font-size: 13px; color: #4a5a63; margin: 0; }

/* Theme pills */
.theme-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.theme-pills a { background: #fff; border: 1px solid #d6e2e9; border-radius: 999px; padding: 10px 18px; font-weight: 600; color: var(--aemidr-primary); box-shadow: var(--aemidr-shadow); }
.theme-pills a:hover { background: var(--aemidr-primary); color: #fff; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 18px; text-align: center; }
.stat-strip .stat { background: #fff; border-radius: var(--aemidr-radius); padding: 22px; box-shadow: var(--aemidr-shadow); }
.stat-strip .stat b { display: block; font-size: 30px; color: var(--aemidr-secondary); }

/* ---------- Forms ---------- */
.aemidr-form { max-width: 640px; }
.aemidr-form label { font-weight: 600; display: block; }
.aemidr-form input[type=text], .aemidr-form input[type=email], .aemidr-form input[type=number], .aemidr-form select, .aemidr-form textarea {
	width: 100%; padding: 10px 12px; border: 1px solid #cfdde4; border-radius: 8px; margin-top: 4px; font-family: inherit; }
.aemidr-form .req { color: #c0392b; }
.aemidr-hp { position: absolute; left: -9999px; }
.aemidr-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.aemidr-notice-success { background: #e4f7ec; color: #11623a; border: 1px solid #9fdcb6; }

/* ---------- Footer ---------- */
.site-footer { background: var(--aemidr-primary); color: #cfe3ec; padding: 48px 0 24px; }
.site-footer a { color: #bfe6f2; }
.site-footer h4 { color: #fff; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 24px; }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 26px; padding-top: 16px; font-size: 13px; }

/* Ad zone */
.ad-zone { background: #fffbea; border: 1px dashed var(--aemidr-bronze); border-radius: 10px; padding: 16px; text-align: center; color: #7a5a16; margin: 26px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 12px; box-shadow: var(--aemidr-shadow); }
	.main-nav.open { display: block; }
	.main-nav ul { flex-direction: column; }
	.main-nav .sub-menu { position: static; box-shadow: none; padding-left: 14px; }
	.header-search { display: none; }
}
@media (max-width: 560px) {
	.hero { padding: 64px 0 56px; }
	.section { padding: 44px 0; }
}