/**
 * FlexiNet binnen het thema – afgestemd op Salient.
 *
 * Wordt alleen geladen als de pagina's binnen het thema getoond worden. Salient
 * zet veel stijlen op kale elementen (h1 54px, p met padding, ul zonder bullets)
 * en op formulieren via body[data-form-style], body[data-form-submit] en
 * label:has(input[type="checkbox"]). Alles hier hangt aan #fn-app, zodat het
 * daar zonder !important van wint. Alleen padding en border-radius van
 * submitknoppen zet Salient met !important; die krijgen het hier ook.
 *
 * Lettertype en kleuren komen standaard uit het thema (--fn-font: inherit en
 * --fn-primary: var(--nectar-accent-color)), zie Assets::css_variables().
 */

#fn-app {
	color: var(--fn-text);
	font-family: var(--fn-font);
	font-size: 16px;
	line-height: 1.5;
	padding: 0 0 48px;
}

#fn-app .fn-container { padding: 0; }

/* Salient-basisstijlen terugzetten -------------------------------------- */

#fn-app p { padding-bottom: 0; margin: 0 0 1em; }
#fn-app ul, #fn-app ol { margin-left: 0; margin-bottom: 0; }
#fn-app li { list-style: none; } /* Salient: ul li { list-style: disc } */
#fn-app table { font-size: .92rem; margin-bottom: 0; }
#fn-app strong, #fn-app b { font-weight: 700; }
#fn-app a { color: var(--fn-primary); }

#fn-app h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .5rem; }
#fn-app h2 { font-size: 1.2rem; line-height: 1.3; margin: 1.5rem 0 .75rem; }
#fn-app h3 { font-size: 1.05rem; line-height: 1.35; margin: 1rem 0 .5rem; }
#fn-app .fn-card__title { font-size: 1.05rem; margin: 0 0 4px; }
#fn-app .fn-panel > h2:first-child,
#fn-app .fn-panel > input[type="hidden"] + h2,
#fn-app .fn-guest__title { margin-top: 0; }
@media (min-width: 768px) {
	#fn-app h1 { font-size: 2rem; }
}

/* Vrije tekst uit de beheerder (omschrijving evenement) mag wel bullets. */
#fn-app .fn-content ul { list-style: disc; margin: 0 0 1em 1.4em; }
#fn-app .fn-content ol { list-style: decimal; margin: 0 0 1em 1.4em; }
#fn-app .fn-content li, #fn-app .fn-summary li { list-style: inherit; }

/* Submenu (het hoofdmenu is van het thema) ------------------------------- */

#fn-app .fn-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--fn-border);
}
#fn-app .fn-subnav a {
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--fn-text);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.4;
}
#fn-app .fn-subnav a:hover { background: #eef1f5; }
#fn-app .fn-subnav a.is-active { background: var(--fn-primary); color: #fff; }
#fn-app .fn-subnav .fn-subnav__extra { color: var(--fn-muted); }
/* Beheer en uitloggen rechts. */
#fn-app .fn-subnav .fn-subnav__extra:not(.fn-subnav__extra ~ .fn-subnav__extra) { margin-left: auto; }
/* Op de telefoon één rij die horizontaal scrolt. */
@media (max-width: 767px) {
	#fn-app .fn-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	#fn-app .fn-subnav::-webkit-scrollbar { display: none; }
	#fn-app .fn-subnav a { flex: none; white-space: nowrap; }
}

/* Tabbalk alleen in de geïnstalleerde app op de telefoon ----------------- */

#fn-app .fn-tabbar { display: none; z-index: 9990; }
@media (display-mode: standalone) and (max-width: 767px) {
	#fn-app.fn-is-member .fn-tabbar { display: flex; }
	#fn-app.fn-is-member .fn-subnav { display: none; }
	#fn-app.fn-is-member { padding-bottom: calc(var(--fn-tabbar-height) + 32px + env(safe-area-inset-bottom)); }
}

/* Knoppen --------------------------------------------------------------- */

#fn-app .fn-button {
	display: inline-flex;
	width: auto;
	min-height: 46px;
	padding: 10px 20px !important;
	border: 0;
	border-radius: 10px !important;
	background: var(--fn-primary);
	color: #fff !important;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
}
#fn-app .fn-button:hover { filter: brightness(1.08); opacity: 1; transform: none; }
#fn-app .fn-button--ghost { background: transparent; color: var(--fn-primary) !important; box-shadow: inset 0 0 0 1.5px var(--fn-primary); }
#fn-app .fn-button--danger { background: transparent; color: var(--fn-error) !important; box-shadow: inset 0 0 0 1.5px var(--fn-error); }
#fn-app .fn-button--block { width: 100%; }
#fn-app .fn-button[disabled] { opacity: .5; cursor: default; filter: none; }

/* Formuliervelden ------------------------------------------------------- */

#fn-app .fn-field label:not(.fn-choice):not(.fn-option),
#fn-app .fn-label { display: block; color: inherit; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }

#fn-app .fn-field input[type="text"],
#fn-app .fn-field input[type="email"],
#fn-app .fn-field input[type="tel"],
#fn-app .fn-field input[type="password"],
#fn-app .fn-field input[type="number"],
#fn-app .fn-field select,
#fn-app .fn-field textarea {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--fn-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--fn-text);
	font: inherit;
	font-size: 16px; /* voorkomt inzoomen op iOS */
	line-height: 1.4;
}
#fn-app .fn-field textarea { min-height: 80px; }
#fn-app .fn-field input:focus,
#fn-app .fn-field select:focus,
#fn-app .fn-field textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--fn-primary) 35%, transparent);
	border-color: var(--fn-primary);
	box-shadow: none;
}
#fn-app .fn-field.has-error input,
#fn-app .fn-field.has-error select,
#fn-app .fn-field.has-error textarea { border-color: var(--fn-error); }

/* Salients "fancy checkbox" (appearance: none met eigen vinkje) uitzetten. */
#fn-app input[type="checkbox"],
#fn-app input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	display: inline-block;
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	accent-color: var(--fn-primary);
}
#fn-app input[type="checkbox"]::before,
#fn-app input[type="radio"]::before { content: none; display: none; }
#fn-app .fn-option input { margin-top: 4px; }

#fn-app .fn-choice,
#fn-app .fn-option { font-size: 1rem; line-height: 1.4; }
#fn-app .fn-choice { display: flex; font-weight: 400; }
#fn-app .fn-option { display: flex; }

/* Salients "fancy select" (select2) laten aansluiten op de andere velden. */
#fn-app .fancy-select-wrap { padding: 0; margin: 0; }
#fn-app .fancy-select-wrap label { color: inherit !important; opacity: 1; } /* Salient zet hier !important */
#fn-app .select2-container { width: 100% !important; }
#fn-app .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 46px;
	border: 1px solid var(--fn-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
}
#fn-app .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 32px 0 12px;
	color: var(--fn-text);
	font-size: 16px;
	line-height: 44px;
}
#fn-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
#fn-app .fn-field.has-error .select2-selection--single { border-color: var(--fn-error); }

/* Tabellen en lijsten --------------------------------------------------- */

#fn-app .fn-table th,
#fn-app .fn-table td { padding: 10px 14px; border-bottom: 1px solid var(--fn-border); text-align: left; }
#fn-app .fn-table tr:last-child td { border-bottom: 0; }
#fn-app .fn-table .fn-num { text-align: right; }
#fn-app .fn-summary ul { list-style: disc; margin: 4px 0 0; padding-left: 18px; }
#fn-app .fn-summary dd, #fn-app .fn-summary dt { margin: 0; }