/**
 * Tabbalk onderin (alleen telefoon) + de volg-sterren.
 *
 * De balk zweeft los boven de pagina, als een afgeronde pil met matglas, zoals
 * je dat van NOS, nu.nl en Instagram kent. Het actieve tabblad krijgt een
 * groene chip. Waar de browser geen blur kan, valt hij terug op een vrijwel
 * dekkende witte pil.
 */

.njgt-tabbar { display: none; }

@media (max-width: 720px) {
	.njgt-tabbar {
		position: fixed;
		isolation: isolate;
		left: 12px;
		right: 12px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 9980;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 2px;
		max-width: 440px;
		margin: 0 auto;
		padding: 5px 6px;
		background: rgba(255, 255, 255, .93);
		border: 1px solid rgba(255, 255, 255, .8);
		border-radius: 28px;
		box-shadow: 0 10px 34px rgba(16, 36, 20, .18), 0 2px 8px rgba(16, 36, 20, .08);
		font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.njgt-tabbar {
			background: rgba(255, 255, 255, .68);
			-webkit-backdrop-filter: saturate(180%) blur(22px);
			backdrop-filter: saturate(180%) blur(22px);
		}
	}

	.njgt-tabbar__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		min-height: 46px;
		padding: 6px 2px 5px;
		border-radius: 22px;
		text-decoration: none;
		color: #46564B;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .01em;
		line-height: 1;
		white-space: nowrap;
		transition: background-color .18s ease, color .18s ease;
	}
	.njgt-tabbar__item svg { width: 22px; height: 22px; }
	/* Het groene vlak achter het actieve tabblad schuift mee in plaats van te
	   springen. Zolang het script nog niet geladen is blijft het verborgen en
	   krijgt het actieve tabblad gewoon zijn eigen achtergrond. */
	.njgt-tabbar__vlak {
		position: absolute;
		top: 5px;
		bottom: 5px;
		left: 6px;
		border-radius: 22px;
		background: rgba(27, 94, 32, .11);
		transition: transform .34s cubic-bezier(.34, 1.4, .64, 1);
		pointer-events: none;
	}
	.njgt-tabbar__vlak[hidden] { display: none; }
	.njgt-tabbar__item.is-actief {
		background: rgba(27, 94, 32, .11);
		color: #1B5E20;
	}
	/* Met het schuivende vlak hoeft het tabblad zelf geen achtergrond meer. */
	.njgt-tabbar.heeft-vlak .njgt-tabbar__item.is-actief { background: none; }
	.njgt-tabbar__item.is-actief svg { stroke-width: 2.1; }
	.njgt-tabbar__item:active { background: rgba(27, 94, 32, .16); }

	/* Ruimte onder de pagina, zodat de zwevende balk niets afdekt. */
	body { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

	/* De zwevende terugknop van de app schuift mee omhoog. */
	.njgt-terug { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
	/* Ook de uitnodigingskaarten mogen de balk niet raken. */
	.njgt-pwa { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media print {
	.njgt-tabbar { display: none !important; }
}

/* ---------- Volg-ster ---------- */

.njgt-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: -3px 1px -3px -3px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Zichtbaar genoeg om op te tikken: lichtgroen vlakje met een groene ster. */
	background: rgba(27, 94, 32, .07);
	color: #7A9480;
	cursor: pointer;
	vertical-align: -6px;
	flex: 0 0 auto;
}
.njgt-fav svg { width: 17px; height: 17px; }
.njgt-fav.is-fav { color: #E8A317; background: rgba(232, 163, 23, .14); }
.njgt-fav:active { background: rgba(27, 94, 32, .18); }
.njgt-fav:focus-visible { outline: 2px solid #1B5E20; outline-offset: 1px; }

/* De regel die uitlegt waar die ster voor is. Verdwijnt zodra je iemand volgt. */
.njgt-favhint {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	max-width: 1180px;
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	background: #F4F8F3;
	border: 1px solid #E0EADE;
	border-radius: 12px;
	font-size: .85rem;
	line-height: 1.45;
	color: #3D5A45;
}
.njgt-favhint svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: .1rem;
	color: #E8A317;
}
.njgt-favhint a { color: #1B5E20; }
/* display:flex hierboven wint het van het hidden-attribuut; daarom expliciet. */
.njgt-favhint[hidden] { display: none; }

@media print {
	.njgt-favhint { display: none; }
}

@media print {
	.njgt-fav { display: none; }
}

/* ---------- Mijn NJGT ---------- */

.njgt-mijn {
	max-width: 620px;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.njgt-mijn__leeg {
	padding: 1.4rem 1.3rem;
	background: #F4F8F3;
	border: 1px solid #E0EADE;
	border-radius: 14px;
}
.njgt-mijn__leeg h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: #1B5E20; }
.njgt-mijn__leeg p { margin: 0; color: #5A6B5F; line-height: 1.5; }
.njgt-mijn__bezig,
.njgt-mijn__wacht { color: #5A6B5F; font-style: italic; margin: .3rem 0 0; }

.njgt-mijn__kaart {
	padding: 1rem 1.1rem;
	margin-bottom: .8rem;
	background: #fff;
	border: 1px solid #E0EADE;
	border-radius: 14px;
}
.njgt-mijn__kaart header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.njgt-mijn__kaart h3 { margin: 0; font-size: 1.1rem; color: #12211A; }
.njgt-mijn__club { margin: .1rem 0 0; font-size: .88rem; color: #5A6B5F; }

.njgt-mijn__blok {
	margin-top: .9rem;
	padding-top: .8rem;
	border-top: 1px solid #EEF3EC;
}
.njgt-mijn__label {
	display: block;
	margin-bottom: .25rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7D70;
}
.njgt-mijn__blok p { margin: .1rem 0; line-height: 1.4; }
.njgt-mijn__start { color: #1B5E20; }
.njgt-mijn__wed { font-size: .88rem; color: #5A6B5F; }


/* ============================================================
   Het menu onderin: de knop "Menu" en het paneel eronder
   ============================================================ */

/* Een knop in plaats van een link, maar hij moet er precies zo uitzien als de
   tabbladen ernaast. Daarom alleen de knop-eigen opmaak weghalen en de
   lettergrootte uit .njgt-tabbar__item laten staan. */
.njgt-tabbar__menu {
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Drie streepjes die bij het openen een kruis worden. */
.njgt-burger {
	position: relative;
	display: block;
	width: 20px;
	height: 15px;
	margin: 3px 0 4px;
}
.njgt-burger i {
	position: absolute;
	left: 0;
	width: 20px;
	height: 1.8px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease;
}
.njgt-burger i:nth-child(1) { top: 1px; }
.njgt-burger i:nth-child(2) { top: 7px; }
.njgt-burger i:nth-child(3) { top: 12px; }
.njgt-tabbar__menu[aria-expanded="true"] .njgt-burger i:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.njgt-tabbar__menu[aria-expanded="true"] .njgt-burger i:nth-child(2) { transform: scaleX(0); opacity: 0; }
.njgt-tabbar__menu[aria-expanded="true"] .njgt-burger i:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* ---------- Het paneel ---------- */

.njgt-sheet { display: none; }
.njgt-sheet[hidden] { display: none; }

@media (max-width: 720px) {
	.njgt-sheet {
		position: fixed;
		inset: 0;
		z-index: 9970;
		display: block;
		font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
	.njgt-sheet[hidden] { display: none; }

	.njgt-sheet__waas {
		position: absolute;
		inset: 0;
		background: rgba(4, 12, 6, .5);
		opacity: 0;
		transition: opacity .34s ease;
	}
	.njgt-sheet.is-open .njgt-sheet__waas { opacity: 1; }

	.njgt-sheet__paneel {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(56px + env(safe-area-inset-top));
		bottom: 0;
		padding: 26px 16px calc(120px + env(safe-area-inset-bottom));
		background: #143A1A;
		border-radius: 32px 32px 0 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateY(104%);
		transition: transform .52s cubic-bezier(.3, 1.12, .5, 1);
	}
	.njgt-sheet.is-open .njgt-sheet__paneel { transform: translateY(0); }

	.njgt-sheet__titel {
		margin: 0 0 14px;
		font-family: "Playfair Display", Georgia, serif;
		font-size: 30px;
		font-weight: 800;
		line-height: 1.1;
		color: #F3F1E4;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .34s ease .12s, transform .34s ease .12s;
	}
	.njgt-sheet.is-open .njgt-sheet__titel { opacity: 1; transform: none; }

	/* ---------- Snelknoppen ---------- */

	.njgt-sheet__snel {
		display: flex;
		gap: 8px;
		margin-bottom: 14px;
	}
	.njgt-snel {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		min-width: 0;
		padding: 12px 6px;
		background: #2E7A33;
		border-radius: 16px;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		font-weight: 800;
		text-align: center;
		opacity: 0;
		transform: translateY(10px) scale(.9);
		transition: opacity .52s cubic-bezier(.34, 1.56, .64, 1), transform .52s cubic-bezier(.34, 1.56, .64, 1);
		transition-delay: calc(140ms + var(--i, 0) * 24ms);
	}
	.njgt-sheet.is-open .njgt-snel { opacity: 1; transform: none; }
	.njgt-snel svg { width: 20px; height: 20px; }
	.njgt-snel:active { transform: scale(.94); }

	/* ---------- Categorieën ---------- */

	.njgt-cat {
		margin-bottom: 14px;
		border-radius: 20px;
		background: rgba(243, 241, 228, .07);
		color: #F3F1E4;
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .34s cubic-bezier(.34, 1.4, .64, 1),
			transform .34s cubic-bezier(.34, 1.4, .64, 1),
			background-color .34s ease, color .34s ease;
		transition-delay: calc(220ms + var(--i, 0) * 24ms), calc(220ms + var(--i, 0) * 24ms), 0s, 0s;
	}
	.njgt-sheet.is-open .njgt-cat { opacity: 1; transform: none; }
	.njgt-cat.is-open { background: #F3F1E4; color: #143A1A; }

	.njgt-cat__kop {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.njgt-cat__kop:active { transform: scale(.98); }
	.njgt-cat__vak {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		flex: 0 0 auto;
		border-radius: 14px;
		background: rgba(243, 241, 228, .1);
		color: #9FC29A;
		transition: background-color .34s ease, color .34s ease;
	}
	.njgt-cat.is-open .njgt-cat__vak { background: #1F5F23; color: #fff; }
	.njgt-cat__vak svg { width: 20px; height: 20px; }
	.njgt-cat__tekst { flex: 1 1 auto; min-width: 0; }
	.njgt-cat__titel { display: block; font-size: 17px; font-weight: 800; }
	.njgt-cat__aantal {
		display: block;
		margin-top: 2px;
		font-size: 12px;
		font-weight: 600;
		color: rgba(243, 241, 228, .6);
	}
	.njgt-cat.is-open .njgt-cat__aantal { color: #4B5A4F; }
	.njgt-cat__punt { flex: 0 0 auto; transition: transform .34s cubic-bezier(.34, 1.56, .64, 1); }
	.njgt-cat__punt svg { width: 20px; height: 20px; display: block; }
	.njgt-cat.is-open .njgt-cat__punt { transform: rotate(180deg); }

	/* Uitklappen zonder vaste hoogte: 0fr wordt 1fr. */
	.njgt-cat__vouw {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .34s cubic-bezier(.2, .8, .2, 1);
	}
	.njgt-cat.is-open .njgt-cat__vouw { grid-template-rows: 1fr; }
	.njgt-cat__lijst {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		min-height: 0;
		overflow: hidden;
		padding: 0 10px;
	}
	.njgt-cat.is-open .njgt-cat__lijst { padding-bottom: 12px; }
	.njgt-cat__item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 11px 10px;
		background: #fff;
		border-radius: 12px;
		color: #13231A;
		text-decoration: none;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .28s ease, transform .28s ease;
	}
	.njgt-cat.is-open .njgt-cat__item {
		opacity: 1;
		transform: none;
		transition-delay: calc(80ms + var(--n, 0) * 30ms);
	}
	.njgt-cat__item svg { width: 16px; height: 16px; flex: 0 0 auto; color: #1F5F23; }
	.njgt-cat__item:active { transform: scale(.95); }

	/* Zolang het menu open is scrolt de pagina eronder niet mee. */
	body.njgt-menu-open { overflow: hidden; }

	/* Twee menu's naast elkaar is er één te veel: op de telefoon zit alles nu
	   onderin. In de app blijft de hamburger voorlopig wel staan, want die
	   versie heeft de knop "Menu" nog niet. */
	/* Zowel WordPress als het thema zetten hier display:flex met !important,
	   dus onze selector moet zwaarder zijn. Let op: géén :not(.always-shown).
	   Op de startpagina staat die klasse er namelijk wél op en op de andere
	   pagina's niet; met die uitzondering erin verdween de knop dus alleen op
	   de ene helft van de site. */
	body .njgt-header .wp-block-navigation__responsive-container-open { display: none !important; }
	body.njgt-in-app .njgt-header .wp-block-navigation__responsive-container-open { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
	.njgt-sheet__paneel,
	.njgt-sheet__titel,
	.njgt-snel,
	.njgt-cat,
	.njgt-cat__item,
	.njgt-tabbar__vlak,
	.njgt-burger i,
	.njgt-cat__punt {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.njgt-sheet__paneel { transform: none; }
	.njgt-sheet:not(.is-open) .njgt-sheet__paneel { display: none; }
}

@media print {
	.njgt-sheet { display: none !important; }
}