/* Deze stylesheet laadt alleen op de korte/simpele pagina's (contact,
 * over ons, cookies, account/inloggen/registreren, wachtwoord-pagina's) --
 * die hebben vaak weinig inhoud, waardoor de footer bij het thema's eigen
 * padding-bottom van 0 op .entry-content direct tegen de inhoud aan plakt.
 * Extra lucht eronder, alleen op deze pagina's. */
.entry-content {
	padding-bottom: 64px;
}

.ffun-account-melding {
	font-family: "Public Sans", sans-serif;
	padding: 12px 16px;
	margin-bottom: 16px;
	border: 1px solid #2D5053;
}

.ffun-account-succes {
	background: #16393B;
	color: #F3EFE2;
	border-color: #E8A33B;
}

.ffun-account-fout {
	background: #16393B;
	color: #F3EFE2;
	border-color: #D6634C;
}

.ffun-account-form,
.ffun-inzending-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	font-family: "Public Sans", sans-serif;
}

.ffun-account-form label,
.ffun-inzending-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #F3EFE2;
}

.ffun-account-form input,
.ffun-account-form select,
.ffun-account-form textarea,
.ffun-inzending-form input,
.ffun-inzending-form select,
.ffun-inzending-form textarea {
	background: #16393B;
	border: 1px solid #2D5053;
	color: #F3EFE2;
	padding: 10px 12px;
	font-family: "Public Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
}

.ffun-account-knop {
	background: #E8A33B !important;
	color: #24150A !important;
	/* !important op padding/font-size/text-transform/border-radius: het
	   thema heeft een eigen regel voor [type="submit"] die anders onze
	   eigen opmaak verslaat. */
	border: none;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	font-family: "Public Sans", sans-serif;
	font-weight: 700;
	text-transform: uppercase !important;
	font-size: 14px !important;
	cursor: pointer;
	align-self: flex-start;
}

.ffun-inzending-item {
	border: 1px solid #2D5053;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* [hidden] heeft van zichzelf dezelfde specificiteit als een class-selector
 * -- zonder dit blijft een verborgen item toch in beeld door de
 * 'display:flex' hierboven. */
.ffun-inzending-item[hidden] {
	display: none !important;
}

.ffun-inzending-item legend {
	color: #E8A33B;
	font-weight: 800;
	padding: 0 6px;
}

.ffun-inzending-uitleg {
	color: #A9C4C0;
	font-size: 14px;
}

.ffun-profiel {
	font-family: "Public Sans", sans-serif;
	color: #F3EFE2;
}

.ffun-profiel a {
	color: #E8A33B !important;
}

/* Reacties */
.ffun-reacties {
	margin-top: 12px;
}

.ffun-reacties-toggle {
	background: none;
	border: none;
	color: #A9C4C0;
	font-family: "Public Sans", sans-serif;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
}

.ffun-reacties-lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #2D5053;
}

.ffun-reactie {
	display: flex;
	gap: 10px;
}

/* .ffun-reactie zet hierboven zelf display:flex -- zonder deze regel wint
 * dat van het (user-agent) display:none dat het hidden-attribuut normaal
 * geeft, en blijft een ingeklapte reactie gewoon zichtbaar staan. */
.ffun-reactie[hidden] {
	display: none !important;
}

.ffun-reactie-tekst {
	margin: 0;
}

.ffun-reactie-tekst-vol[hidden] {
	display: none !important;
}

.ffun-reactie-lees-meer {
	display: block;
	background: none;
	border: none;
	color: #E8A33B;
	font-family: "Public Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	padding: 0;
	margin-top: 4px;
}

.ffun-reactie-lees-meer:hover {
	color: #F3EFE2;
}

.ffun-reacties-meer-knop {
	background: none;
	border: 1px solid #2D5053;
	color: #A9C4C0;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	cursor: pointer;
	align-self: flex-start;
}

.ffun-reacties-meer-knop:hover {
	border-color: #E8A33B;
	color: #F3EFE2;
}

.ffun-reactie-stem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;
	padding-top: 1px;
}

.ffun-reactie-stem-knop {
	background: none;
	border: none;
	color: #4B6C6E;
	cursor: pointer;
	font-size: 10px;
	line-height: 1;
	padding: 2px;
}

.ffun-reactie-stem-knop:hover {
	color: #A9C4C0;
}

.ffun-reactie-omhoog.actief {
	color: #E8A33B;
}

.ffun-reactie-omlaag.actief {
	color: #D6634C;
}

.ffun-reactie-score {
	color: #A9C4C0;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
}

.ffun-reactie-inhoud {
	flex: 1;
	min-width: 0;
}

.ffun-reactie strong {
	color: #E8A33B;
	font-size: 13px;
}

.ffun-reactie p {
	color: #F3EFE2;
	font-size: 14px;
	margin: 2px 0 0;
	overflow-wrap: break-word;
}

.ffun-reactie-acties {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.ffun-reactie-reageren-knop {
	background: none;
	border: none;
	color: #A9C4C0;
	font-family: "Public Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	padding: 0;
}

.ffun-reactie-reageren-knop:hover {
	color: #E8A33B;
}

.ffun-reactie-verbergen {
	color: #D6634C;
	font-size: 11px;
}

.ffun-reactie-antwoord-form {
	margin: 6px 0 0 !important;
}

.ffun-reactie-form {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.ffun-reactie-form textarea {
	flex: 1;
	background: #122F30;
	border: 1px solid #2D5053;
	color: #F3EFE2;
	padding: 8px;
	font-family: "Public Sans", sans-serif;
	font-size: 13px;
	min-height: 40px;
}

.ffun-reactie-form button {
	background: #E8A33B;
	color: #24150A;
	border: none;
	border-radius: 0 !important;
	padding: 0 16px !important;
	font-weight: 700;
	cursor: pointer;
}

.ffun-reactie-melding {
	color: #A9C4C0;
	font-size: 13px;
}

.ffun-ai-knop {
	background: transparent;
	color: #E8A33B;
	border: 1px solid #E8A33B;
	padding: 6px 12px;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-start;
	margin-top: -6px;
}

.ffun-ai-knop:hover:not(:disabled) {
	background: #E8A33B;
	color: #24150A;
}

.ffun-ai-knop:disabled {
	opacity: 0.6;
	cursor: default;
}


/* ==========================================================================
   Profielpagina: kop, statistieken (gamification), reacties, lijstjes.
   ========================================================================== */

.ffun-profiel-kop {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.ffun-profiel-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #16393B;
	border: 1px solid #E8A33B;
	color: #E8A33B;
	font-size: 22px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ffun-profiel-naam {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #F3EFE2;
}

.ffun-profiel-lidsinds {
	margin: 2px 0 0;
	font-size: 13px;
	color: #A9C4C0;
}

.ffun-profiel-statusregel {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
	font-size: 13px;
}

.ffun-profiel-status {
	font-weight: 700;
}

.ffun-profiel-status-ok {
	color: #6FBF9E;
}

.ffun-profiel-status-nok {
	color: #D6634C;
}

.ffun-profiel-statusregel .ffun-account-knop {
	padding: 8px 16px;
	font-size: 12px;
	text-decoration: none;
}

.ffun-profiel-statistieken {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 8px;
}

.ffun-profiel-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: #16393B;
	border: 1px solid #2D5053;
}

.ffun-profiel-stat-punten {
	border-color: #E8A33B;
}

.ffun-profiel-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #A9C4C0;
}

.ffun-profiel-stat-getal {
	font-size: 28px;
	font-weight: 800;
	color: #F3EFE2;
}

.ffun-profiel-stat-punten .ffun-profiel-stat-getal {
	color: #E8A33B;
}

.ffun-profiel-puntenuitleg {
	grid-column: 1 / -1;
	margin: 4px 0 24px;
	font-size: 12px;
	color: #A9C4C0;
}

.ffun-profiel-kopje {
	font-size: 16px;
	font-weight: 700;
	color: #F3EFE2;
	margin: 8px 0 12px;
}

.ffun-profiel-leeg {
	color: #A9C4C0;
	font-size: 14px;
}

.ffun-profiel-reacties {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 32px;
}

.ffun-profiel-reactie {
	display: block;
	padding: 12px 16px;
	background: #16393B;
	border: 1px solid #2D5053;
	text-decoration: none;
}

.ffun-profiel-reactie:hover {
	border-color: #E8A33B;
}

.ffun-profiel-reactie-context {
	margin: 0 0 4px;
	font-size: 12px;
	color: #A9C4C0;
}

.ffun-profiel-reactie-context strong {
	color: #E8A33B !important;
}

.ffun-profiel-reactie-tekst {
	margin: 0 0 6px;
	font-size: 14px;
	font-family: "Public Sans", system-ui, sans-serif;
	color: #F3EFE2;
}

.ffun-profiel-reactie-datum {
	margin: 0;
	font-size: 11px;
	color: #A9C4C0;
}

@media (max-width: 560px) {
	.ffun-profiel-statistieken {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* .ffun-profiel a (0,0,1,1) is specifieker dan .ffun-account-knop
 * (0,0,1,0) -- zonder deze regel wint de algemene marigold-linkkleur van
 * de knoptekst, die dan onleesbaar marigold-op-marigold wordt. */
.ffun-profiel .ffun-account-knop {
	color: #24150A !important;
}

.ffun-wachtwoord-vergeten-link {
	font-size: 13px;
	color: #A9C4C0;
	align-self: flex-start;
	margin-top: -8px;
}

.ffun-wachtwoord-vergeten-link:hover {
	color: #E8A33B;
}