/**
 * math-outreach-core — front styles (map, agenda, cards, filters, badges).
 * Prefix: .mo-  |  License: GPL-2.0-or-later
 *
 * Design direction "Récré géométrique". Colours come from the active theme's
 * tokens (see theme style.css); each value below carries an inline fallback so
 * the plugin still renders sensibly with another theme.
 */

/* ---------- Type-colour system (offer type -> hue) ----------
 * A container (.mo-card / .mo-agenda__item) gets .mo-c-coral|teal|sun and
 * exposes --accent / --accent-text / --accent-10 to its children. */
.mo-c-teal  { --accent: var(--teal, #2A9D8F);  --accent-text: var(--teal-text, #1F7468);  --accent-10: var(--teal-10, #D4EBE7); }
.mo-c-coral { --accent: var(--coral, #E76F51); --accent-text: var(--coral-text, #AE4526); --accent-10: var(--coral-10, #FADFD3); }
.mo-c-sun   { --accent: var(--sun, #E9C46A);   --accent-text: var(--sun-text, #8A6A15);   --accent-10: var(--sun-10, #FAF0D3); }

/* ---------- Map ---------- */

.mo-map-block { margin: 0; }

.mo-map {
	width: 100%;
	height: 380px;
	border-radius: var(--r-block, 24px);
	border: 2px dashed #CBE5E0;
	background: var(--surface, #fff);
	overflow: hidden;
	z-index: 0;
}

@media (min-width: 48em) {
	.mo-map { height: 420px; }
}

.mo-map--mini {
	height: 240px;
	margin-top: 1rem;
	border-style: solid;
	border-color: var(--border-soft, #E8E0CE);
	border-width: 1.5px;
	border-radius: var(--r-card, 20px);
}

/* Map type toggles (pills) */
.mo-map-toggles {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	flex-wrap: wrap;
}

/* Rendered hidden; mo-map.js reveals them once it can wire the layers, so
   no-JS visitors are not shown inert controls (the <noscript> link remains). */
.mo-map-toggles[hidden] { display: none; }

.mo-map-toggle {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-body, sans-serif);
	font-size: 0.8125rem;
	font-weight: 800;
	padding: 8px 16px;
	border-radius: var(--r-pill, 999px);
	background: var(--pill-off, #F3EDE0);
	color: var(--muted, #7C8B90);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Pressed fills use the deep shades so white labels pass AA at 13px. */
.mo-map-toggle--activity[aria-pressed="true"] { background: var(--teal-text, #1F7468); color: #fff; }
.mo-map-toggle--event[aria-pressed="true"] { background: var(--coral-text, #AE4526); color: #fff; }

.mo-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--muted, #7C8B90);
}

.mo-map-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }

.mo-map-legend__dot {
	width: 0.8rem; height: 0.8rem; border-radius: 50%;
	border: 2px solid var(--surface, #fff);
	box-shadow: 0 0 0 1px rgba(38, 70, 83, 0.2);
}

.mo-map-legend__dot--activity { background: var(--teal, #2A9D8F); }
.mo-map-legend__dot--event { background: var(--coral, #E76F51); }

.mo-map-noscript { margin: 0.75rem 0 0; }

/* Markers + clusters (Leaflet DivIcons) */
.mo-marker {
	display: block;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(38, 70, 83, 0.4);
	box-sizing: border-box;
}

.mo-marker--activity { background: var(--teal, #2A9D8F); }
.mo-marker--event { background: var(--coral, #E76F51); }

.mo-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(38, 70, 83, 0.4);
	box-sizing: border-box;
	color: #fff;
	font-family: var(--font-display, sans-serif);
	font-weight: 800;
	font-size: 0.8125rem;
}

.mo-cluster--activity { background: var(--teal, #2A9D8F); }
.mo-cluster--event { background: var(--coral, #E76F51); }

/* Popups */
.mo-popup { font-size: 0.875rem; line-height: 1.45; min-width: 12rem; }

.mo-popup__title {
	font-family: var(--font-display, sans-serif);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink, #264653);
	text-decoration: none;
}

.mo-popup__title:hover { color: var(--teal, #2A9D8F); }

.mo-popup__badges, .mo-popup__meta { margin: 0.4rem 0 0; }

.mo-popup__meta { color: var(--muted, #7C8B90); font-weight: 600; }

/* ---------- Badges ---------- */
.mo-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--r-pill, 999px);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--teal-10, #D4EBE7);
	color: var(--teal-text, #1F7468);
	white-space: nowrap;
}

/* Type badge takes the card/agenda accent hue */
.mo-badge--type { background: var(--accent-10, var(--teal-10, #D4EBE7)); color: var(--accent-text, var(--teal-text, #1F7468)); }

/* Offer languages: plain muted text, dot-separated (no pill) */
.mo-badge--offer-lang {
	background: transparent;
	color: var(--muted, #7C8B90);
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mo-badge--offer-lang + .mo-badge--offer-lang::before {
	content: "·";
	margin: 0 0.3rem 0 0.1rem;
	color: var(--muted, #7C8B90);
}

.mo-badge--free { background: var(--teal-10, #D4EBE7); color: var(--teal-text, #1F7468); }

.mo-badge--teaser { background: var(--sun-10, #FAF0D3); color: var(--sun-text, #8A6A15); }

.mo-badge--lang-src { background: #EFE4FA; color: #5A2CA0; text-transform: none; }

.mo-badge--demo { background: var(--pill-off, #F3EDE0); color: var(--muted, #7C8B90); }

/* ---------- Cards ---------- */
.mo-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.375rem;
	margin: 0;
}

/* .mo-results only ever wraps a .mo-card-grid (archives + AJAX) — plain block. */
.mo-results { margin: 1rem 0; min-width: 0; }

@media (max-width: 1100px) {
	.mo-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.mo-card-grid { grid-template-columns: 1fr; }
}

.mo-card {
	/* Hue comes from the .mo-c-{coral|teal|sun} class (always added by PHP);
	   the inline fallbacks keep it sensible if that class is ever missing. */
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface, #fff);
	border-radius: var(--r-card, 20px);
	border-top: 10px solid var(--accent, var(--teal, #2A9D8F));
	overflow: hidden;
	box-shadow: var(--sh-card, 0 10px 26px rgba(38, 70, 83, 0.08));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mo-card:hover,
.mo-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--sh-hover, 0 16px 34px rgba(38, 70, 83, 0.13));
}

.mo-card:hover .mo-card__title a { color: var(--teal, #2A9D8F); }

.mo-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-alt, #FBF6EA);
}

.mo-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mo-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.375rem;
}

.mo-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.mo-card__canton {
	margin-left: auto;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border: 1.5px solid var(--border-chip, #CBD5D9);
	border-radius: var(--r-pill, 999px);
	padding: 3px 9px;
	color: var(--text, #52616B);
	white-space: nowrap;
}

.mo-card__title {
	margin: 0;
	font-family: var(--font-display, sans-serif);
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.2;
}

.mo-card__title a { color: var(--ink, #264653); text-decoration: none; }

/* Whole-card click target (stretched link) */
.mo-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mo-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--muted, #7C8B90);
}

.mo-card__cantons { font-weight: 800; letter-spacing: 0.03em; }

.mo-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text, #52616B);
	line-height: 1.55;
}

.mo-card__more {
	font-family: var(--font-body, sans-serif);
	font-weight: 800;
	font-size: 0.84rem;
	color: var(--accent-text, var(--teal-text, #1F7468));
	margin-top: 0.25rem;
}

.mo-no-results {
	grid-column: 1 / -1;
	padding: 2rem 1.5rem;
	text-align: center;
	color: var(--muted, #7C8B90);
	background: var(--surface, #fff);
	border: 1px dashed var(--border-soft, #E8E0CE);
	border-radius: var(--r-card, 20px);
}

/* ---------- Agenda ---------- */
.mo-agenda { margin: 0; }

.mo-agenda__group { margin: 0 0 1.5rem; }

.mo-agenda__group:last-child { margin-bottom: 0; }

.mo-agenda__group-title {
	margin: 0 0 0.75rem;
	font-family: var(--font-body, sans-serif);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted, #7C8B90);
}

.mo-agenda__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mo-agenda__item {
	/* Hue comes from the .mo-c-{…} class added by PHP (see .mo-agenda__date). */
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.875rem 1.125rem;
	background: var(--surface, #fff);
	border-radius: var(--r-row, 18px);
	box-shadow: var(--sh-row, 0 6px 18px rgba(38, 70, 83, 0.07));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mo-agenda__item:hover,
.mo-agenda__item:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--sh-hover, 0 16px 34px rgba(38, 70, 83, 0.13));
}

.mo-agenda__date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	background: var(--accent, var(--teal, #2A9D8F));
	color: #fff;
	border-radius: var(--r-date, 16px);
	line-height: 1;
}

.mo-agenda__day { font-family: var(--font-display, sans-serif); font-size: 1.25rem; font-weight: 800; line-height: 1; }

.mo-agenda__month { font-size: 0.59rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.mo-agenda__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.mo-agenda__title {
	font-family: var(--font-body, sans-serif);
	font-weight: 800;
	font-size: 0.97rem;
	color: var(--ink, #264653);
	text-decoration: none;
}

.mo-agenda__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.mo-agenda__item:hover .mo-agenda__title { color: var(--teal, #2A9D8F); }

.mo-agenda__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--muted, #7C8B90);
}

.mo-agenda__meta .mo-badge { position: relative; z-index: 2; }

.mo-agenda__empty { color: var(--muted, #7C8B90); }

/* ---------- Filters (compact chip bar) ---------- */
.mo-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

.mo-filters__title {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mo-filters__search {
	flex: 1 1 280px;
	min-width: 240px;
	margin: 0;
	display: block;
}

.mo-filters__search label {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mo-filters__search input[type="search"] {
	width: 100%;
	padding: 0.8rem 1.375rem;
	border: 2px solid var(--border-soft, #E8E0CE);
	border-radius: var(--r-pill, 999px);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--surface, #fff);
	color: var(--text, #52616B);
}

.mo-filters__search input[type="search"]::placeholder { color: #9AA7AC; }

.mo-filters__search input[type="search"]:focus {
	outline: none;
	border-color: var(--teal, #2A9D8F);
}

.mo-filters__search input[type="search"]:focus-visible {
	outline: 3px solid var(--ink, #264653);
	outline-offset: 2px;
}

/* Let facet + action wrappers flow their children into the chip bar */
.mo-filters__facets,
.mo-filters__actions { display: contents; }

.mo-facet {
	position: relative;
	--chip-bg: var(--teal-10, #D4EBE7);
	--chip-text: var(--teal-text, #1F7468);
}

/* --chip-solid (active/selected fill, white text on it) uses the AA-safe deep
   shade of each hue so white passes 4.5:1 at this small chip size. */
.mo-facet--teal { --chip-bg: var(--teal-10, #D4EBE7); --chip-text: var(--teal-text, #1F7468); --chip-solid: var(--teal-text, #1F7468); }
.mo-facet--sun { --chip-bg: var(--sun-10, #FAF0D3); --chip-text: var(--sun-text, #8A6A15); --chip-solid: var(--sun-text, #8A6A15); }
.mo-facet--coral { --chip-bg: var(--coral-10, #FADFD3); --chip-text: var(--coral-text, #AE4526); --chip-solid: var(--coral-text, #AE4526); }

.mo-facet__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.05rem;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--chip-text);
	background: var(--chip-bg);
	border-radius: var(--r-pill, 999px);
	list-style: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mo-facet__summary::-webkit-details-marker { display: none; }

.mo-facet__summary::after {
	content: "▾";
	font-size: 0.7em;
	transition: transform 0.15s ease;
}

.mo-facet[open] .mo-facet__summary::after { transform: rotate(180deg); }

.mo-facet__summary:hover { background: color-mix(in oklab, var(--chip-bg), var(--ink, #264653) 6%); }

/* Active facet (has a selection): solid fill + white text */
.mo-facet__summary.is-active {
	background: var(--chip-solid, var(--teal, #2A9D8F));
	color: #fff;
}

.mo-facet__summary.is-active:hover { background: color-mix(in oklab, var(--chip-solid, #2A9D8F), #000 8%); }

.mo-facet__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
}

/* Dropdown panel: absolute so opening does NOT reflow the chip bar (no jump);
   floats below the chip and overlays the content underneath. mo-map.js/theme.js
   nudge it left if it would spill past the viewport's right edge. */
.mo-facet__options {
	list-style: none;
	margin: 0;
	padding: 0.85rem;
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 40;
	min-width: 16rem;
	max-width: min(26rem, calc(100vw - 1.5rem));
	max-height: min(60vh, 22rem);
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: 0.1rem 0.75rem;
	background: var(--surface, #fff);
	border-radius: var(--r-card, 20px);
	box-shadow: 0 14px 34px rgba(38, 70, 83, 0.16);
	border: 1px solid var(--border-soft, #E8E0CE);
}

/* Smooth unfold when a facet opens (native <details> toggles display, so this
   runs as an enter animation). */
@keyframes mo-facet-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.mo-facet[open] > .mo-facet__options,
.mo-facet[open] > .mo-facet__dates {
	animation: mo-facet-drop 0.16s ease-out;
	transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
	.mo-facet[open] > .mo-facet__options,
	.mo-facet[open] > .mo-facet__dates { animation: none; }
}

.mo-facet__option {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.5rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text, #52616B);
	cursor: pointer;
}

.mo-facet__option:hover { background: var(--surface-alt, #FBF6EA); }

.mo-facet__option input { accent-color: var(--teal, #2A9D8F); width: 1.05rem; height: 1.05rem; }

.mo-facet__dates {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 40;
	padding: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: min(26rem, calc(100vw - 1.5rem));
	background: var(--surface, #fff);
	border-radius: var(--r-card, 20px);
	box-shadow: 0 14px 34px rgba(38, 70, 83, 0.16);
	border: 1px solid var(--border-soft, #E8E0CE);
}

.mo-facet__dates p { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }

.mo-facet__dates label { font-size: 0.8rem; font-weight: 800; color: var(--text, #52616B); }

.mo-facet__dates input[type="date"] {
	padding: 0.45rem 0.6rem;
	border: 1.5px solid var(--border-soft, #E8E0CE);
	border-radius: 10px;
	font-size: 0.9rem;
	background: var(--surface, #fff);
	color: var(--text, #52616B);
}

/* Submit ("Filtrer") + reset flow into the bar */
.mo-filters .mo-button[type="submit"],
.mo-filters button[type="submit"] {
	padding: 0.7rem 1.35rem;
	font-family: var(--font-body, sans-serif);
	font-size: 0.85rem;
	font-weight: 800;
	border-radius: var(--r-pill, 999px);
	background: var(--ink, #264653);
	color: #fff;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.mo-filters .mo-button[type="submit"]:hover,
.mo-filters button[type="submit"]:hover { background: #1B3541; transform: none; }

.mo-filters__reset {
	color: var(--muted, #7C8B90);
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.mo-filters__reset:hover { color: var(--coral-text, #AE4526); text-decoration: underline; }

.mo-results-count {
	flex-basis: 100%;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--muted, #7C8B90);
	min-height: 1.1rem;
}

/* Mobile: search + chips each take a full row; the panel expands in-flow
   below its chip (natural on a stacked list, no off-screen dropdown). */
@media (max-width: 680px) {
	.mo-filters__search { flex-basis: 100%; }

	.mo-facet { flex-basis: 100%; }

	.mo-facet__summary { width: 100%; justify-content: space-between; }

	.mo-facet__options,
	.mo-facet__dates {
		position: static;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin-top: 0.45rem;
		grid-template-columns: 1fr 1fr;
		box-shadow: none;
	}
}

/* ---------- Buttons (plugin) ---------- */
.mo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--r-pill, 999px);
	font-family: var(--font-display, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.mo-button--primary { background: var(--teal, #2A9D8F); color: #fff; box-shadow: var(--sh-btn, 0 10px 24px rgba(42, 157, 143, 0.28)); }

.mo-button--primary:hover { background: var(--teal-dark, #21867A); color: #fff; transform: translateY(-1px); }

/* ---------- Entry meta block (single sidebar) ---------- */
.mo-entry-meta {
	background: var(--surface, #fff);
	border-radius: var(--r-card, 20px);
	box-shadow: var(--sh-card, 0 10px 26px rgba(38, 70, 83, 0.08));
	padding: 1.5rem;
}

.mo-entry-meta__list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.25rem; }

.mo-entry-meta__list dt {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted, #7C8B90);
	margin-top: 0.75rem;
}

.mo-entry-meta__list dt:first-child { margin-top: 0; }

.mo-entry-meta__list dd { margin: 0; color: var(--text, #52616B); line-height: 1.5; }

.mo-entry-meta__list dd strong { color: var(--ink, #264653); }

.mo-entry-meta__time, .mo-entry-meta__cost-note { color: var(--muted, #7C8B90); font-size: 0.9rem; }

.mo-entry-meta__external { margin: 1.25rem 0 0; }

.mo-entry-meta__external .mo-button { width: 100%; }

/* ---------- Related ---------- */
.mo-related { margin: 2.5rem 0 1rem; }

.mo-related__title { font-size: 1.5rem; margin: 0 0 1.25rem; color: var(--ink, #264653); }

/* ---------- Focus visibility (AA) ---------- */
.mo-filters a:focus-visible,
.mo-filters button:focus-visible,
.mo-filters summary:focus-visible,
.mo-card a:focus-visible,
.mo-agenda a:focus-visible,
.mo-map-toggle:focus-visible,
.mo-button:focus-visible,
.mo-entry-meta a:focus-visible {
	outline: 3px solid var(--ink, #264653);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mo-card, .mo-agenda__item, .mo-button, .mo-map-toggle, .mo-facet__summary {
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.mo-card:hover, .mo-agenda__item:hover, .mo-button:hover { transform: none; }
}