/* Intervisiehuis Agenda-blok. Alles hangt onder .iha, zodat het thema en Elementor er geen last van hebben
   (en andersom). Kleuren aanpassen? Overschrijf de variabelen hieronder, bijvoorbeeld in Elementor → Aangepaste CSS:
   .iha { --iha-kleur: #011B56; } */

.iha {
	--iha-kleur: #011b56;       /* knoppen, datum, actieve filter (de blauwe knoppen van de site) */
	--iha-tekst: #1c244b;       /* titels */
	--iha-grijs: #5c6478;       /* tijd, vorm, gespreksleider */
	--iha-vlak: #f1f5fe;        /* achtergrond van een regel (zoals de huidige agenda) */
	--iha-rand: #d6deef;
	--iha-vrij: #1d7a4a;        /* vrije plekken */
	--iha-bijna: #b80000;       /* nog 1 of 2 plekken */
	--iha-radius: 4px;
	font-family: inherit;
	color: var(--iha-tekst);
	line-height: 1.45;
}
.iha *, .iha *::before, .iha *::after { box-sizing: border-box; }
.iha [hidden] { display: none !important; }
.iha .iha-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Filter op rechtsgebied */
.iha .iha-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.iha .iha-chip,
.iha .iha-chip:hover,
.iha .iha-chip:focus {
	appearance: none; margin: 0; padding: 8px 14px; border: 1px solid var(--iha-rand); border-radius: 999px;
	background: #fff; color: var(--iha-tekst); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
	text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
.iha .iha-chip:hover { border-color: var(--iha-kleur); }
.iha .iha-chip[aria-pressed="true"] { background: var(--iha-kleur); border-color: var(--iha-kleur); color: #fff; }
.iha .iha-chip:focus-visible, .iha .iha-meer:focus-visible, .iha a:focus-visible { outline: 3px solid #f5b400; outline-offset: 2px; }

/* De lijst */
.iha .iha-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.iha .iha-item {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center;
	margin: 0; padding: 16px 18px; background: var(--iha-vlak); border-radius: var(--iha-radius);
}
.iha .iha-item::before { content: none; }
.iha .iha-datum {
	display: grid; justify-items: center; padding: 8px 4px; background: #fff; border-radius: var(--iha-radius);
	color: var(--iha-kleur); text-align: center; line-height: 1.1;
}
.iha .iha-dag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--iha-grijs); }
.iha .iha-nr { font-size: 26px; font-weight: 700; }
.iha .iha-maand { font-size: 13px; font-weight: 600; }

.iha .iha-info { min-width: 0; }
.iha .iha-titel { margin: 0 0 4px; padding: 0; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--iha-tekst); text-transform: none; }
.iha .iha-titel a { color: inherit; text-decoration: none; }
.iha .iha-titel a:hover { text-decoration: underline; }
.iha .iha-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--iha-kleur); vertical-align: 2px; }
.iha .iha-wanneer { margin: 0; padding: 0; font-size: 14px; color: var(--iha-grijs); }
/* Tijd · locatie · gespreksleider · punten: gescheiden door een hoge punt, die schermlezers overslaan. */
.iha .iha-deel { white-space: nowrap; }
/* De punt hangt aan het vorige deel, zodat een nieuwe regel (op mobiel) nooit met een punt begint. */
.iha .iha-deel:not(:last-child)::after { content: "\00a0·"; content: "\00a0·" / ""; color: var(--iha-grijs); }
.iha .iha-wanneer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.iha .iha-wanneer a:hover { color: var(--iha-kleur); }

/* Plekken en knop */
.iha .iha-actie { display: grid; justify-items: end; gap: 6px; text-align: right; }
.iha .iha-plek { display: flex; align-items: center; gap: 8px; }
.iha .iha-plekken { font-size: 13px; font-weight: 700; color: var(--iha-vrij); white-space: nowrap; }
.iha .iha-plekken.is-bijna { color: var(--iha-bijna); }
.iha .iha-plekken.is-vol { color: var(--iha-grijs); }
.iha .iha-stoelen { display: flex; gap: 3px; }
.iha .iha-stoelen i { width: 8px; height: 8px; border-radius: 2px; background: var(--iha-kleur); opacity: 0.35; }
.iha .iha-stoelen i.vrij { background: var(--iha-vrij); opacity: 1; }
.iha .iha-prijs { font-size: 13px; color: var(--iha-grijs); white-space: nowrap; }
.iha .iha-prijs small { font-size: inherit; }

.iha a.iha-knop,
.iha a.iha-knop:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 11px 22px;
	border: 2px solid var(--iha-kleur); border-radius: var(--iha-radius); background: var(--iha-kleur);
	color: #fff !important; font-family: inherit; font-size: 15px; font-weight: 600; font-style: normal; line-height: 1.2;
	text-decoration: none !important; text-transform: none; white-space: nowrap;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.iha a.iha-knop:hover, .iha a.iha-knop:focus { transform: translateY(-1px); color: #fff !important; background: var(--iha-kleur); }
.iha a.iha-knop.iha-knop-licht, .iha a.iha-knop.iha-knop-licht:hover { background: transparent; color: var(--iha-kleur) !important; }
.iha .is-vol .iha-datum, .iha .is-vol .iha-titel { opacity: 0.7; }
/* Wat WooCommerce toevoegt na "in winkelmand" */
.iha a.iha-knop.loading { opacity: 0.6; pointer-events: none; }
.iha a.iha-knop.added::after { content: "✓"; }
.iha .added_to_cart { font-size: 13px; font-weight: 600; color: var(--iha-kleur); text-decoration: underline; }

/* Onder de lijst */
.iha .iha-meer,
.iha .iha-meer:hover,
.iha .iha-meer:focus {
	display: block; width: 100%; margin: 12px 0 0; padding: 12px 16px; border: 2px solid var(--iha-kleur); border-radius: var(--iha-radius);
	background: #fff; color: var(--iha-kleur); font: inherit; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; box-shadow: none;
}
.iha .iha-meer:hover { background: var(--iha-vlak); }
.iha .iha-leeg { margin: 0; padding: 20px; background: var(--iha-vlak); border-radius: var(--iha-radius); color: var(--iha-grijs); }
.iha .iha-voet { margin: 14px 0 0; }
.iha .iha-alle { color: var(--iha-kleur); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Jaarabonnementen per rechtsgebied */
.iha .iha-abo-kop { margin: 0 0 14px; font-family: inherit; font-size: 22px; font-weight: 600; color: var(--iha-kleur); }
.iha .iha-abo-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.iha .iha-abo-kaart { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px; background: var(--iha-vlak); border-radius: var(--iha-radius); }
.iha .iha-abo-kaart::before { content: none; }
.iha .iha-abo-label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iha-grijs); }
.iha .iha-abo-titel { margin: 0; padding: 0; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--iha-tekst); }
.iha .iha-abo-titel a { color: inherit; text-decoration: none; }
.iha .iha-abo-titel a:hover { text-decoration: underline; }
.iha .iha-abo-prijs { margin: 0; color: var(--iha-grijs); font-size: 14px; }
.iha .iha-abo-prijs del { margin-right: 4px; color: var(--iha-grijs); }
.iha .iha-abo-bedrag { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--iha-kleur); }
.iha .iha-abo-tekst { margin: 0; font-size: 14px; color: var(--iha-grijs); }
.iha .iha-abo-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 6px; }
.iha .iha-abo-meer { color: var(--iha-kleur); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Smal scherm: plekken en knop onder de tekst */
@media (max-width: 600px) {
	.iha .iha-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 2px; scrollbar-width: none; }
	.iha .iha-filters::-webkit-scrollbar { display: none; }
	.iha .iha-chip { flex: none; }
	.iha .iha-item { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
	.iha .iha-nr { font-size: 22px; }
	.iha .iha-actie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; text-align: left; }
	.iha .iha-plek { flex-direction: row; }
	.iha a.iha-knop { flex: 1 0 100%; }
	.iha .iha-prijs { margin-left: auto; }
}