:root {
	--color-primary: #FF7A00;
	--color-primary-hover: #DE6900;
	--color-primary-soft: #FFF3EB;

	--color-text: #101923;
	--color-text-secondary: #3A4F67;
	--color-text-muted: #7C9CBF;

	--color-surface: #FFFFFF;
	--color-surface-2: #E1EBF5;
	--color-bg: #F1F6FA;
	--color-border: #E5EAF0;
	--color-border-soft: #EEF2F6;

	--color-tag-bg: #EEF2F6;
	--color-tag-text: #3A4F67;

	--color-success: #6DAA6F;
	--color-success-soft: #99C399;

	--hl-nav-dropdown-bg: #101923;
	--hl-nav-dropdown-bg-hover: #182332;
	--hl-nav-dropdown-text: rgba(255, 255, 255, 0.82);
	--hl-nav-dropdown-text-hover: #FFFFFF;
	--hl-nav-dropdown-accent: #FF7A00;
	--hl-nav-dropdown-border: rgba(255, 255, 255, 0.08);
	--hl-nav-dropdown-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.40);

	--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 9999px;

	--shadow-card: 0 2px 8px rgba(16, 25, 35, 0.04);
	--shadow-hover: 0 4px 12px rgba(16, 25, 35, 0.08);
}

/* =============================
   DARK MODE TOKENS
   IPS: html[data-ips-scheme="dark"]
================================ */

html[data-ips-scheme="dark"] {
	color-scheme: dark;

	--color-primary: #FF7A00;
	--color-primary-hover: #FF8F26;
	--color-primary-soft: #3A2418;

	--color-text: #F6F8FB;
	--color-text-secondary: #B8C7D8;
	--color-text-muted: #7C9CBF;

	--color-surface: #2C2738;
	--color-surface-2: #2C2738;
	--color-bg: #1B1822;
	--color-border: #413953;
	--color-border-soft: #352F43;

	--color-tag-bg: #413953;
	--color-tag-text: #D5DFEA;

	--color-success: #7FBF83;
	--color-success-soft: #2F4A36;

	--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.28);
	--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.38);
}

html[data-ips-scheme="dark"] body {
	background: linear-gradient(
		180deg,
		#221E2C 3%,
		#1B1822 14%
	) !important;
}

/* =============================
   DARK MODE SPECIFIC OVERRIDES
================================ */

html[data-ips-scheme="dark"] .hl-home {
	color: var(--color-text);
}

/* Cards */
html[data-ips-scheme="dark"] .hl-card,
html[data-ips-scheme="dark"] .hl-review-card,
html[data-ips-scheme="dark"] .hl-unanswered-topic,
html[data-ips-scheme="dark"] .hl-trending-item {
	background: var(--color-surface);
	border-color: var(--color-border);
	box-shadow: var(--shadow-card);
}

/* Hero search */
html[data-ips-scheme="dark"] .hl-hero-search {
	background: var(--color-surface);
	border-color: var(--color-border);
}

html[data-ips-scheme="dark"] .hl-hero-search input {
	color: var(--color-text);
}

html[data-ips-scheme="dark"] .hl-hero-search input::placeholder {
	color: var(--color-text-muted);
}

/* Soft blocks */
html[data-ips-scheme="dark"] .hl-image-placeholder,
html[data-ips-scheme="dark"] .hl-stats-grid div,
html[data-ips-scheme="dark"] .hl-tags-card .hl-tags a,
html[data-ips-scheme="dark"] .hl-tag,
html[data-ips-scheme="dark"] .hl-topic-tags span,
html[data-ips-scheme="dark"] .hl-topic-tags a,
html[data-ips-scheme="dark"] .hl-trending-filters button {
	background: var(--color-border-soft);
	color: var(--color-tag-text);
}

/* Tag counters */
html[data-ips-scheme="dark"] .hl-tags-card .hl-tags a span {
	background: var(--color-surface);
	color: var(--color-text-secondary);
}

/* Separators */
html[data-ips-scheme="dark"] .hl-topic,
html[data-ips-scheme="dark"] .hl-trending-item .hl-topic-tags,
html[data-ips-scheme="dark"] .hl-review-bottom {
	border-color: var(--color-border);
}

/* Member/rank highlight */
html[data-ips-scheme="dark"] .hl-member-highlight {
	background: var(--color-primary-soft);
}

/* Poll options */
html[data-ips-scheme="dark"] .hl-poll-card .ipsFieldList--radio > li {
	background: var(--color-primary-soft);
	color: var(--color-text);
}

/* Poll badge */
html[data-ips-scheme="dark"] .hl-poll-card .ipsWidget__header-secondary {
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

/* Buttons */
html[data-ips-scheme="dark"] .hl-primary-btn,
html[data-ips-scheme="dark"] .hl-poll-card button,
html[data-ips-scheme="dark"] .hl-hero-search button {
	background: var(--color-primary);
	color: #fff;
}

/* Join card blijft oranje */
html[data-ips-scheme="dark"] .hl-home-join,
html[data-ips-scheme="dark"] .hl-join-card {
	background: var(--color-primary);
	color: #fff;
	border-color: transparent;
}

/* Witte CTA in join card */
html[data-ips-scheme="dark"] .hl-home-join a:first-of-type,
html[data-ips-scheme="dark"] .hl-join-card a:first-of-type {
	background: #fff;
	color: var(--color-primary) !important;
}

/* Review avatars blijven zichtbaar */
html[data-ips-scheme="dark"] .hl-review-avatar {
	color: #fff;
}

/* Hover */
html[data-ips-scheme="dark"] .hl-trending-item:hover {
	border-color: var(--color-text-muted);
	box-shadow: var(--shadow-hover);
}

/* =============================
   BASE / LAYOUT
================================ */

.hl-home {
	max-width: 1200px;
	margin: 0 auto;
	color: var(--color-text);
	font-family: var(--font-sans);
}

.hl-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 280px;
	grid-template-areas:
		"leftTop main right"
		"leftBottom trending trending"
		"reviews reviews reviews";
	gap: var(--space-6);
	align-items: stretch;
}

.hl-left-top {
	grid-area: leftTop;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	height: 100%;
}

.hl-left-bottom {
	grid-area: leftBottom;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.hl-main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hl-right {
	grid-area: right;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	height: 100%;
}

.hl-trending-card {
	grid-area: trending;
	margin-top: 0 !important;
}

.hl-home-reviews {
	grid-area: reviews;
}

.hl-left-top > *,
.hl-left-bottom > *,
.hl-right > * {
	margin-top: 0 !important;
}

.hl-left-top .hl-media-card {
	flex: 1 1 auto;
}

.hl-right .hl-unanswered-card {
	margin-top: auto !important;
}

/* =============================
   HERO
================================ */

.hl-welcome {
	margin-bottom: var(--space-6);
}

.hl-welcome h1 {
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-welcome p {
	margin: var(--space-2) 0 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

.hl-guest-hero {
	padding: 0 0 52px;
	text-align: center;
}

.hl-guest-hero h1 {
	margin: 0;
	font-size: 42px;
	line-height: 48px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.hl-guest-hero p {
	max-width: 760px;
	margin: var(--space-3) auto 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-secondary);
}

.hl-hero-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 620px;
	min-height: 48px;
	margin: var(--space-10) auto 0;
	padding: 5px;
	border: 1px solid #9FB8D3;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: none;
}

.hl-hero-search::before {
	content: "\f002";
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--color-text-secondary);
	pointer-events: none;
}

.hl-hero-search input {
	flex: 1 1 auto;
	width: 100%;
	height: 38px;
	padding: 0 var(--space-4) 0 40px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 18px;
}

.hl-hero-search input::placeholder {
	color: var(--color-text-secondary);
	opacity: .9;
}

.hl-hero-search button {
	flex: 0 0 auto;
	height: 38px;
	min-width: 88px;
	padding: 0 var(--space-5);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.hl-hero-search button:hover {
	background: var(--color-primary-hover);
}

/* =============================
   CARDS
================================ */

.hl-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.hl-current-card,
.hl-community-card,
.hl-tags-card,
.hl-unanswered-card,
.hl-trending-card,
.hl-poll-card {
	/* padding: var(--space-6); */
	padding: var(--space-5) var(--space-6);
}

.hl-card h2 {
	margin: 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-card p {
	margin: 5px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

.hl-section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

/* =============================
   MEDIA CARDS
================================ */

.hl-media-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hl-image-placeholder {
	height: 170px;
	width: 100%;
	flex: 0 0 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	color: var(--color-text-muted);
	font-weight: 700;
	object-fit: cover;
}

.hl-card-body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.hl-eyebrow {
	display: block;
	margin-bottom: var(--space-3);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.hl-card-body h3,
.hl-card-body h3 a,
.hl-poll-card h3{
	margin: 0 0 var(--space-2);
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	padding-top: 0;
}

.hl-card-body a {
	display: inline-block;
	margin-top: auto;
	margin-left: auto;
	padding-top: var(--space-4);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
}

.hl-card-link {
	display: block;
	width: 100%;
	margin-top: var(--space-4);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-align: right;
	text-decoration: none;
}

.hl-card-body a:hover,
.hl-card-link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* =============================
   TOPIC LIST
================================ */
/* =============================
   TOPIC LIST
================================ */

.hl-current-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hl-main > .hl-current-card {
	flex: 1 1 auto;
}

.hl-topic-list {
	flex: 1 1 auto;
	margin-top: 26px;
}

.hl-topic {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 18px;
	align-items: flex-start;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-border);
	color: inherit;
	text-decoration: none;
}

.hl-topic:first-child {
	padding-top: 0;
}

.hl-topic:last-child {
	border-bottom: 0;
}

.hl-topic-status {
	padding-top: 3px;
}

.hl-topic-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	line-height: 1;
	color: #fff;
}

.hl-topic-badge i {
	font-size: 11px;
	color: #fff;
}

.hl-topic-badge--solved {
	background: var(--color-success-soft);
}

.hl-topic-badge--question {
	background: var(--color-primary);
}

.hl-topic-badge--locked,
.hl-topic-badge--closed {
	background: var(--color-text-secondary);
}

.hl-topic-badge--reaction {
	background: var(--color-text-muted);
}

.hl-topic-content {
	min-width: 0;
	width: 100%;
}

.hl-topic-mainline {
	position: relative;
	padding-right: 100px;
}

.hl-topic-content h3 {
	margin: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-topic-content h3 a {
	color: var(--color-text);
	text-decoration: none;
}

.hl-topic-content h3 a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.hl-topic-submeta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;

	margin-top: 8px;
	margin-bottom: 8px;

	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-secondary);
	opacity: .75;
}

.hl-topic-submeta span:last-child {
	text-align: right;
	/* white-space: nowrap; */
}

.hl-topic-submeta a {
	font-weight: 600;
}

.hl-topic-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.hl-tag,
.hl-topic-tags span,
.hl-topic-tags a {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 5px 8px;
	border-radius: var(--radius-sm);
	background: var(--color-tag-bg);
	color: var(--color-tag-text);
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	text-decoration: none;
}

.hl-tag:hover,
.hl-topic-tags a:hover {
	color: var(--color-primary);
	background: var(--color-border-soft);
	text-decoration: none;
}

.hl-topic-meta {
	position: absolute;
	top: 0;
	right: 0;

	display: flex;
	align-items: center;
	gap: 10px;

	color: var(--color-text-secondary);
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
}

.hl-topic-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
}

@media screen and (max-width: 700px) {

	.hl-topic {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.hl-topic-mainline {
		padding-right: 0;
	}

	.hl-topic-meta {
		position: static;
		margin-top: 6px;
	}

	.hl-topic-submeta {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.hl-topic-submeta span:last-child {
		text-align: left;
		white-space: normal;
	}
}

/* =============================
   BUTTONS
================================ */
.ipsHeader__end .hl-primary-btn {
	padding: 5px 18px;
	height: 32px;
	margin-top: 0;
}

.hl-primary-btn,
.hl-poll-card button,
.hl-hero-search button {
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.hl-primary-btn {
	display: block;
	margin-top: var(--space-5);
	padding: 14px 18px;
	text-align: center;
	font-size: 13px;
	line-height: 19px;
}

.hl-current-card .hl-primary-btn {
	margin-top: auto;
}

.hl-primary-btn:hover,
.hl-poll-card button:hover,
.hl-hero-search button:hover {
	background: var(--color-primary-hover);
	color: #fff;
}

/* =============================
   COMMUNITY
================================ */

.hl-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 6px;
	margin-top: 16px;
}

.hl-stats-grid div,
.hl-stat-item {
	padding: 6px 18px 9px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg);
}

.hl-stats-grid strong {
	display: block;
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	color: var(--color-text);
}

.hl-stats-grid span {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-text-secondary);
}

.hl-member-highlight {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 9px;
	padding: 14px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-soft);
}

.hl-member-highlight .hl-rank-image {
	width: 27px;
	height: 27px;
	object-fit: contain;
	flex: 0 0 27px;
}

.hl-member-highlight > div {
	min-width: 0;
}

.hl-member-highlight strong {
	display: block;
	margin: 0 0 2px;
	font-size: 13px;
	line-height: 13px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-member-highlight span {
	display: block;
	font-size: 11px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

/* =============================
   POPULAIRE ONDERWERPEN
================================ */

.hl-tags {
	margin-top: var(--space-4);
}

.hl-tags-card .hl-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 6px;
}

.hl-tags-card .hl-tags a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 5px 8px;
	border-radius: var(--radius-sm);
	background: var(--color-tag-bg);
	color: var(--color-tag-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	text-decoration: none;
}

.hl-tags-card .hl-tags a:hover {
	background: var(--color-border-soft);
	color: var(--color-primary);
}

.hl-tags-card .hl-tags a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-tag-text);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

/* =============================
   UNANSWERED CARD
================================ */

/* =============================
   UNANSWERED CARD
================================ */

.hl-unanswered-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.hl-unanswered-head > div {
	flex: 1 1 auto;
	min-width: 0;
}

.hl-unanswered-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 24px;
	padding: 0 9px;
	border-radius: var(--radius-pill);
	background: var(--color-text-muted);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.hl-unanswered-topic {
	display: block;
	margin-top: 18px;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hl-unanswered-topic:hover {
	border-color: var(--color-primary);
	text-decoration: none;
}

.hl-unanswered-topic h3 {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-unanswered-meta a {
	color: var(--color-text-secondary);
}

.hl-unanswered-topic p {
	margin: 8px 0 14px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-secondary);
}

.hl-unanswered-topic .hl-topic-tags {
	pointer-events: none;
}

/* =============================
   JOIN CARD
================================ */

.hl-home-join,
.hl-join-card {
	position: relative;
	display: flex;
	flex-direction: column;

	padding: var(--space-6);

	background: var(--color-primary);
	color: var(--color-surface);

	border: 1px solid transparent;
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-card);

	overflow: hidden;
}

/* Eyebrow */
.hl-home-join .hl-eyebrow,
.hl-join-card .hl-eyebrow {
	margin: 0;

	color: rgba(255,255,255,.8);

	font-size: 11px;
	line-height: 16px;
	text-transform: uppercase;
	font-weight: 500;
}

/* Main number */
.hl-home-join h2,
.hl-join-card h2 {
	margin: var(--space-2) 0 0;
	color: var(--color-surface);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
}

/* Description */
.hl-home-join p,
.hl-join-card p {
	margin: var(--space-2) 0 0;

	color: rgba(255,255,255,.9);

	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
}

/* CTA button */
.hl-home-join a:first-of-type,
.hl-join-card a:first-of-type {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 48px;

	margin-top: var(--space-8);
	padding: 0 var(--space-5);

	border-radius: var(--radius-lg);

	background: var(--color-surface);

	color: var(--color-primary) !important;

	font-size: 14px;
	line-height: 22px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background .2s ease,
		transform .2s ease;
}

.hl-home-join a:first-of-type:hover,
.hl-join-card a:first-of-type:hover {
	background: var(--color-primary-soft);
	transform: translateY(-1px);
}

.hl-home-join .hl-join-login,
.hl-join-card .hl-join-login  {
	text-align: center;
	margin-top: var(--space-2);
	font-size: 12px;
}

.hl-home-join .hl-join-login a,
.hl-join-card .hl-join-login a {
	background: transparent !important;
	padding: 0 !important;
	color: rgba(255,255,255,.85) !important;

	display: inline !important;
	width: auto !important;
	min-height: 0 !important;

	font-weight: normal !important;
	font-size: 12px;

	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Login link */
.hl-home-join a:first-of-type + a,
.hl-join-card a:first-of-type + a {
	display: block;

	margin-top: var(--space-4);

	color: rgba(255,255,255,.95) !important;

	font-size: 13px;
	line-height: 18px;
	font-weight: 500;

	text-align: center;
	text-decoration: none;
}

.hl-home-join a:first-of-type + a:hover,
.hl-join-card a:first-of-type + a:hover {
	text-decoration: underline;
}

/* =============================
   REVIEWS
================================ */

.hl-home-reviews {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.hl-home-reviews-head {
	margin-bottom: var(--space-6);
}

.hl-home-reviews-head h2 {
	margin: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-home-reviews-head p {
	margin-top: var(--space-1);
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text-secondary);
}

.hl-home-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}

.hl-review-card {
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: none;
}

.hl-review-top {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.hl-review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: var(--radius-pill);
	background: #6875F5;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	font-weight: 800;
}

.hl-review-card:nth-child(2) .hl-review-avatar {
	background: #8F9398;
}

.hl-review-card:nth-child(3) .hl-review-avatar {
	background: #82A9CB;
}

.hl-review-author {
	min-width: 0;
}

.hl-review-author strong {
	display: block;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-review-author span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-muted);
}

.hl-review-text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 15px;
	line-height: 24px;
	font-style: italic;
	color: var(--color-text);
}

.hl-review-bottom {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.hl-review-topic-label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-muted);
}

.hl-review-topic {
	display: inline-block;
	margin-bottom: var(--space-3);
	color: var(--color-primary);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	text-decoration: none;
}

.hl-review-topic:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.hl-review-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* =============================
   TRENDING
================================ */

.hl-trending-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.hl-trending-filters {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.hl-trending-filters button {
	border: 0;
	outline: 0;
	padding: 6px 20px;
	border-radius: var(--radius-pill);
	background: var(--color-tag-bg);
	color: var(--color-text-secondary);
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.hl-trending-filters button.is-active,
.hl-trending-filters button:hover {
	background: var(--color-border);
	color: var(--color-text);
}

.hl-trending-grid {
	display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: var(--space-6);
}

.hl-trending-grid.is-active {
	display: grid;
}

.hl-trending-item {
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 22px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hl-trending-item:hover {
	transform: translateY(-2px);
	border-color: #CFDDEA;
	box-shadow: var(--shadow-hover);
}

.hl-trending-rank {
	display: block;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: var(--color-text-muted);
}

.hl-trending-item h3 {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: var(--color-text);
}

.hl-trending-item h3 a {
	color: inherit;
	text-decoration: none;
}

.hl-trending-item h3 a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.hl-trending-item .hl-topic-tags {
	margin-top: auto;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-border);
}

.hl-trending-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text-secondary);
}

.hl-trending-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-weight: 500;
}

.hl-trending-meta i {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.hl-trending-meta .ipsTime__long {
	display: none;
}

/* =============================
   POLL CARD
================================ */

.hl-poll-card {
	padding: 22px;
}

.hl-poll-card .ipsData__item {
	padding: 0;
}

.hl-poll-card > section,
.hl-poll-card .ipsWidget__content,
.hl-poll-card .ipsForm--poll-widget {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.hl-poll-card .ipsWidget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 18px;
	padding: 0;
	background: transparent;
	border: 0;
}

.hl-poll-card .ipsWidget__header > span:first-child {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	color: var(--color-text);
}

.hl-poll-card .ipsWidget__header-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 13px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.hl-poll-card .ipsWidget__header-secondary i {
	font-size: 13px;
	color: var(--color-primary);
}

.hl-poll-card .ipsPollList,
.hl-poll-card .ipsPollList--questions,
.hl-poll-card .ipsFieldList--radio,
.hl-poll-card .ipsButtons {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-poll-card .ipsFieldRow {
	margin: 0;
	padding: 0;
	border: 0;
}

.hl-poll-card .ipsFieldRow h4 {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 800;
	color: var(--color-text);
}

.hl-poll-card .ipsFieldList--radio {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hl-poll-card .ipsFieldList--radio > li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	min-height: 58px;
	margin: 0;
	padding: 0 16px;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	color: var(--color-text);
}

.hl-poll-card .ipsFieldList--radio input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.hl-poll-card .ipsFieldList__content label {
	display: block;
	margin: 0;
	background: transparent;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
}

.hl-poll-card .ipsSubmitRow {
	margin: var(--space-4) 0 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.hl-poll-card .ipsButtons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hl-poll-card .ipsButtons > li {
	margin: 0;
	padding: 0;
}

.hl-poll-card .ipsButton--primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 43px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.hl-poll-card .ipsButton--primary:hover {
	background: var(--color-primary-hover);
	color: #fff;
}

.hl-poll-card .ipsSubmitRow .ipsButtons > li:nth-child(2) {
	display: none;
}

.hl-poll-card .ipsSubmitRow .ipsButtons > li:last-child {
	display: flex;
	justify-content: flex-end;
	margin-left: auto;
	background: transparent;
}

.hl-poll-card .ipsSubmitRow .ipsButtons > li:last-child .ipsButton--inherit,
section.hl-poll-card a.ipsButton {
	display: inline-flex;
	width: auto;
	min-height: auto;
	padding: 0 !important;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	color: var(--color-primary) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-align: right;
	text-decoration: none;
}

.hl-poll-card .ipsSubmitRow .ipsButtons > li:last-child .ipsButton--inherit::after {
	content: " →";
	margin-left: 4px;
}

.hl-poll-card .ipsSubmitRow .ipsButtons > li:last-child .ipsButton--inherit:hover {
	color: var(--color-primary-hover) !important;
	text-decoration: underline;
}

/* =============================
   RESPONSIVE
================================ */

@media screen and (max-width: 1050px) {
	.hl-layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"leftTop"
			"main"
			"right"
			"leftBottom"
			"trending"
			"reviews";
	}

	.hl-left-top,
	.hl-left-bottom,
	.hl-right {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		height: auto;
	}

	.hl-left-top .hl-media-card,
	.hl-right .hl-unanswered-card {
		flex: initial;
		margin-top: 0 !important;
	}

	.hl-trending-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.hl-trending-filters {
		width: 100%;
	}

	.hl-trending-grid,
	.hl-home-reviews-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 700px) {
	.hl-home {
		padding: 24px 14px 36px;
	}

	.hl-welcome h1,
	.hl-guest-hero h1 {
		font-size: 31px;
		line-height: 38px;
	}

	.hl-guest-hero {
		padding: var(--space-10) 0 var(--space-8);
	}

	.hl-left-top,
	.hl-left-bottom,
	.hl-right,
	.hl-trending-grid,
	.hl-home-reviews-grid {
		grid-template-columns: 1fr;
	}

	.hl-topic {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.hl-topic-meta {
		grid-column: 2;
		padding-top: 0;
	}

	.hl-hero-search {
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-2);
	}

	.hl-hero-search::before {
		top: 24px;
		transform: none;
	}

	.hl-hero-search input {
		width: 100%;
		height: 40px;
	}

	.hl-hero-search button {
		width: 100%;
		height: 42px;
	}

	.hl-trending-item {
		min-height: auto;
	}

	.hl-trending-meta {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.hl-review-card {
		min-height: auto;
	}
}

.hl-section-actions .hl-primary-btn {
	padding: 7px 20px;
}

/* =============================
   HEADER / MENU DROPDOWNS ONLY
   ============================= */

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown {
	width: 240px;
	max-width: calc(100vw - 32px);

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	background: var(--hl-nav-dropdown-bg) !important;
	border: 0 !important;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);

	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
	overflow: hidden;

	font-family: var(--font-sans);
	z-index: 9999;
}

.ipsNavBar > li > .ipsNav__dropdown {
	border-radius: 0 0 6px 6px;
	top: 15px !important;
	position-area: bottom span-x-end;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown[popover] {
	border: 0 !important;
	outline: 0 !important;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a {
	position: relative;

	display: flex;
	align-items: center;

	width: 100%;
	min-height: 44px;

	padding: 0 20px !important;

	background: var(--hl-nav-dropdown-bg);
	border: 0 !important;
	border-bottom: 1px solid var(--hl-nav-dropdown-border);

	color: var(--hl-nav-dropdown-text) !important;
	text-decoration: none !important;

	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.01em;

	transition:
		background-color 0.16s ease,
		color 0.16s ease;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li:last-child > a {
	border-bottom: 0 !important;
}

nav.ipsNav li span {
	font-size: 14px;
}

/* Oranje linkerborder */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;

	width: 3px;

	background: var(--hl-nav-dropdown-accent);

	opacity: 0;
	transform: scaleY(0.7);
	transform-origin: center;

	transition:
		opacity 0.16s ease,
		transform 0.16s ease;
}

/* Iconen verbergen in dropdown */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown .ipsNavBar__icon {
	display: none !important;
}

/* Tekst reset */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown .ipsNavBar__text {
	display: block;
	min-width: 0;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown .ipsNavBar__label {
	display: block;
	color: inherit !important;
	font: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
	font-weight: normal !important;
}

/* Hover / focus */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:hover,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:focus-visible {
	background: var(--hl-nav-dropdown-bg-hover) !important;
	color: var(--hl-nav-dropdown-text-hover) !important;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:hover span,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:focus-visible span {
	font-weight: 500 !important;
}

/* Hover / focus linkerborder tonen */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:hover::before,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a:focus-visible::before {
	opacity: 1;
	transform: scaleY(1);
}

/* Active state ondersteuning */
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li.is-active > a,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li.ipsNavBar_active > a,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a.hl-dropdown-active,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a[aria-current="page"] {
	background: var(--hl-nav-dropdown-bg-hover) !important;
	color: var(--hl-nav-dropdown-text-hover) !important;
	font-weight: 500;
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li.is-active > a::before,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li.ipsNavBar_active > a::before,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a.hl-dropdown-active::before,
:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown > li > a[aria-current="page"]::before {
	opacity: 1;
	transform: scaleY(1);
}

:where(.ipsHeader, #ipsLayout_header, header) .ipsNavBar .ipsNav__dropdown {
	box-shadow: var(--hl-nav-dropdown-shadow);
}

.ipsForm--loginForm #remember_me_checkbox {
	margin-top: -19px;
}

.ipsHeader__primary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__icon,
.ipsHeader__primary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .ipsNavBar__label,
.ipsHeader__primary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .fa-angle-down {
	color: var(--color-primary-hover);
}

.ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__icon,
.ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .ipsNavBar__label,
.ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .fa-angle-down {
	color: var(--color-text);
}

html:not([data-ips-scheme="dark"]) .ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__icon,
html:not([data-ips-scheme="dark"]) .ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .ipsNavBar__label,
html:not([data-ips-scheme="dark"]) .ipsHeader__secondary .ipsNavBar > li:hover > :is(button, a) > .ipsNavBar__text > .fa-angle-down {
	color: #D6D6D6;
}