/*
Theme Name: Cybernieuws
Theme URI: https://cybernieuws.nl
Author: Cybernieuws.nl
Author URI: https://cybernieuws.nl
Description: Zakelijk, licht theme voor ISOs. Toont laatste cybersecurity- en informatiebeveiligingsnieuws. Werkt samen met de Cybernieuws Toolkit plugin.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cybernieuws
Tags: news, clean, one-column, custom-menu, featured-images
*/

/* ---------- Tokens ---------- */
:root {
	--cn-bg:        #f4f6fa;
	--cn-surface:   #ffffff;
	--cn-border:    #dfe4ec;
	--cn-text:      #111827;
	--cn-muted:     #566175;
	--cn-accent:    #0e5563; /* petrol/teal — concept A "Net Operations Center" */
	--cn-accent-2:  #0a4350; /* hover/darker */
	--cn-accent-bg: #e6f0f2; /* tinted background — schaars gebruikt */
	--cn-radius:    8px;
	--cn-shadow:    0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
	--cn-shadow-lg: 0 4px 14px rgba(16,24,40,.08), 0 10px 28px rgba(16,24,40,.06);
	--cn-maxw:      960px;
	--cn-list-maxw: 860px; /* Specifiek voor de nieuwslijst — krapper voor security.nl-look */
	--cn-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Mono-stack voor severity-codes, timestamps en operationele metrics —
	   syslog/SIEM-gloed zonder externe fontload. */
	--cn-mono:      ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--cn-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--cn-text);
	background: var(--cn-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.25; }

a { color: var(--cn-accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--cn-accent-2); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul { list-style: none; margin: 0; padding: 0; }

.cn-container {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.cn-skip {
	position: absolute;
	left: -9999px; top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}
.cn-skip:focus {
	position: fixed;
	left: 1rem; top: 1rem;
	width: auto; height: auto;
	background: #000; color: #fff;
	padding: .5rem 1rem;
	border-radius: var(--cn-radius);
	z-index: 99999;
}

/* ---------- Header ---------- */
.cn-site-header {
	background: var(--cn-surface);
	border-bottom: 1px solid var(--cn-border);
	box-shadow: var(--cn-shadow);
	position: sticky;
	top: 0;
	z-index: 50;
}
.cn-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: .55rem 0;
	flex-wrap: wrap;
}
.cn-brand a { color: var(--cn-text); display: inline-block; }
.cn-brand a:hover { text-decoration: none; }
.cn-brand strong {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.cn-brand strong::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	background: var(--cn-accent);
	border-radius: 50%;
	margin-right: .45rem;
	vertical-align: middle;
	box-shadow: 0 0 0 2px rgba(11,95,255,.18);
}
.cn-tag-line {
	display: block;
	font-size: .7rem;
	color: var(--cn-muted);
	font-weight: 400;
	margin-top: 1px;
}

.cn-menu {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.cn-menu li { margin: 0; }
.cn-menu a {
	color: var(--cn-text);
	font-weight: 500;
	font-size: .95rem;
	padding: .35rem 0;
}
.cn-menu a:hover { color: var(--cn-accent); text-decoration: none; }
.cn-menu .current-menu-item a,
.cn-menu .current_page_item a { color: var(--cn-accent); }

/* ---------- Sector filter ---------- */
.cn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
	padding: .5rem 0 .65rem;
	border-top: 1px solid var(--cn-border);
}
.cn-filter-label {
	font-size: .74rem;
	color: var(--cn-muted);
	margin-right: .25rem;
	font-weight: 500;
}
.cn-filter-item {
	display: inline-block;
	padding: .18rem .65rem;
	font-size: .72rem;
	font-weight: 500;
	border-radius: 999px;
	background: var(--cn-surface);
	color: var(--cn-text);
	border: 1px solid var(--cn-border);
	line-height: 1.3;
	transition: all .15s ease;
}
.cn-filter-item:hover {
	border-color: var(--cn-accent);
	color: var(--cn-accent);
	text-decoration: none;
	background: var(--cn-accent-bg);
}
.cn-filter-item.is-active {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
}
.cn-filter-item.is-active:hover { color: #fff; background: var(--cn-accent-2); }

/* ---------- Search bar (header) ---------- */
.cn-search {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}
.cn-search input[type="search"] {
	width: 200px;
	padding: .3rem .75rem;
	font-size: .78rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-right: none;
	border-radius: 999px 0 0 999px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
}
.cn-search input[type="search"]::placeholder { color: var(--cn-muted); }
.cn-search input[type="search"]:focus {
	background: #fff;
	border-color: var(--cn-accent);
	box-shadow: -3px 0 0 0 rgba(11,95,255,.12);
}
.cn-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .7rem;
	border: 1px solid var(--cn-accent);
	border-radius: 0 999px 999px 0;
	background: var(--cn-accent);
	color: #fff;
	cursor: pointer;
	transition: background .12s ease;
}
.cn-search button:hover { background: var(--cn-accent-2); border-color: var(--cn-accent-2); }
.cn-search button svg { display: block; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; word-wrap: normal !important;
}

/* ---------- CVE-knop in header ---------- */
.cn-cve-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 .7rem;
	border-radius: 999px;
	background: var(--cn-bg);
	color: var(--cn-text);
	border: 1px solid var(--cn-border);
	margin-left: .4rem;
	font-size: .76rem;
	font-weight: 600;
	flex-shrink: 0;
	transition: all .12s ease;
	text-decoration: none;
	white-space: nowrap;
}
.cn-cve-btn:hover {
	background: var(--cn-text);
	color: #fff;
	border-color: var(--cn-text);
	text-decoration: none;
	transform: translateY(-1px);
}

/* ---------- Videos-link (in header, naast CVE-knop) ----------
   Tekstlink, geen knop. Bewust lager in visuele hiërarchie dan CVE: video is
   format-as, niet content-as. De ▶ doet het werk; de tekst is affordance. */
.cn-videos-link {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-left: .6rem;
	padding: 0 .2rem;
	font-size: .8rem;
	font-weight: 500;
	color: var(--cn-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .12s ease;
}
.cn-videos-link:hover,
.cn-videos-link:focus-visible { color: var(--cn-accent); text-decoration: none; }
.cn-videos-link.is-active     { color: var(--cn-accent); font-weight: 600; }
.cn-videos-link span[aria-hidden] {
	font-size: .7rem;
	transform: translateY(-1px);
}
@media (max-width: 640px) {
	.cn-videos-link { margin-left: .3rem; font-size: .72rem; }
}

/* ---------- /videos archive-header ---------- */
.cn-archive-head {
	margin: 1.2rem 0 1.4rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--cn-border);
}
.cn-archive-title {
	margin: 0 0 .25rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--cn-text);
}
.cn-archive-sub {
	margin: 0;
	font-size: .85rem;
	color: var(--cn-muted);
	line-height: 1.5;
	max-width: 60ch;
}
@media (max-width: 640px) {
	.cn-archive-head { margin: .8rem 0 1rem; padding-bottom: .7rem; }
	.cn-archive-title { font-size: 1.2rem; }
	.cn-archive-sub { font-size: .8rem; }
}

/* ---------- CVE-archief: zoekbalk + lijst ---------- */
.cn-cve-search {
	display: flex;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	box-shadow: var(--cn-shadow);
}
.cn-cve-search-input-wrap {
	flex: 1;
	position: relative;
}
.cn-cve-search input[type="search"] {
	width: 100%;
	padding: .55rem .9rem;
	font-size: .95rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	outline: none;
	box-sizing: border-box;
}
.cn-cve-search input[type="search"]:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-cve-search select {
	padding: .55rem .85rem;
	font-size: .9rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	cursor: pointer;
}
.cn-cve-search button {
	padding: .55rem 1.2rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}
.cn-cve-search button:hover { background: var(--cn-accent-2); }

.cn-cve-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	overflow: hidden;
	box-shadow: var(--cn-shadow);
}
.cn-cve-item {
	border-left: 3px solid #e6eaf0;
	border-bottom: 1px solid var(--cn-border);
	transition: background .1s ease;
}
.cn-cve-item:last-child { border-bottom: none; }
.cn-cve-item.severity-critical { border-left-color: #b42318; }
.cn-cve-item.severity-high     { border-left-color: #d9480f; }
.cn-cve-item.severity-medium   { border-left-color: #b08800; }
.cn-cve-item.severity-low      { border-left-color: #4a6a2d; }
.cn-cve-item:nth-child(even) { background: #f7f9fc; }
.cn-cve-item:hover { background: #eef3fa; }

.cn-cve-link {
	display: grid;
	grid-template-columns: 130px auto 1fr auto auto;
	align-items: center;
	gap: .65rem .85rem;
	padding: .65rem .9rem;
	color: inherit;
	text-decoration: none;
}
.cn-cve-link:hover { text-decoration: none; }
.cn-cve-id {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-accent);
}
.cn-cve-score-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 4px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.cn-cve-score-pill.sev-critical { background: #b42318; }
.cn-cve-score-pill.sev-high     { background: #d9480f; }
.cn-cve-score-pill.sev-medium   { background: #b08800; }
.cn-cve-score-pill.sev-low      { background: #4a6a2d; }
.cn-cve-score-pill.sev-none     { background: #8a93a3; }
.cn-cve-title {
	font-size: .9rem;
	color: var(--cn-text);
	min-width: 0;
}
.cn-cve-vendors {
	display: flex;
	gap: .25rem;
	flex-wrap: wrap;
}
.cn-cve-vendor {
	display: inline-block;
	padding: 1px 7px;
	font-size: .7rem;
	background: var(--cn-bg);
	color: var(--cn-muted);
	border-radius: 3px;
}
.cn-cve-date {
	font-size: .76rem;
	color: var(--cn-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* CVE single */
.cn-cve-single .cn-cve-header { margin-bottom: 1.5rem; }
.cn-cve-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem .85rem;
	align-items: center;
	margin-top: .5rem;
}
.cn-cve-date-meta { font-size: .85rem; color: var(--cn-muted); }
.cn-cve-cwe {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .78rem;
	background: var(--cn-bg);
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--cn-muted);
}
.cn-cve-section {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	background: #fafbfd;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
}
.cn-cve-section h2 {
	margin: 0 0 .55rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-cve-translated-badge {
	display: inline-block;
	padding: 1px 7px;
	background: #e8f0ff;
	color: var(--cn-accent);
	border: 1px solid rgba(11,95,255,.25);
	border-radius: 3px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.cn-cve-original {
	margin-top: .85rem;
	padding-top: .7rem;
	border-top: 1px dashed var(--cn-border);
	font-size: .9rem;
}
.cn-cve-original summary {
	cursor: pointer;
	color: var(--cn-muted);
	font-weight: 500;
	font-size: .82rem;
	user-select: none;
}
.cn-cve-original summary:hover { color: var(--cn-accent); }
.cn-cve-original-text {
	margin-top: .5rem;
	padding: .65rem .9rem;
	background: #fafbfd;
	border-radius: 6px;
	color: var(--cn-muted);
	font-size: .88rem;
	line-height: 1.5;
}
.cn-cve-tags {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}
.cn-cve-tag {
	display: inline-block;
	padding: 3px 10px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 500;
}
.cn-cve-tag-product {
	background: var(--cn-bg);
	color: var(--cn-text);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .76rem;
}
.cn-cve-refs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-cve-refs li { padding: .25rem 0; }
.cn-cve-refs a {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .82rem;
	word-break: break-all;
}

@media (max-width: 720px) {
	.cn-cve-btn { height: 36px; padding: 0 .65rem; font-size: .82rem; }
	.cn-cve-search { flex-direction: column; padding: .85rem; }
	.cn-cve-search button { width: 100%; }
	.cn-cve-link {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto;
		gap: .15rem .55rem;
		padding: .65rem .85rem;
	}
	.cn-cve-id { grid-column: 1; grid-row: 1; }
	.cn-cve-score-pill { grid-column: 2; grid-row: 1; justify-self: end; }
	.cn-cve-title { grid-column: 1 / -1; grid-row: 2; font-size: .88rem; }
	.cn-cve-vendors { grid-column: 1 / -1; grid-row: 3; }
	.cn-cve-date { grid-column: 2; grid-row: 1; display: none; } /* tijd niet relevant op mobiel */
}

/* ---------- Newsletter envelope-knop in header ---------- */
.cn-newsletter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cn-bg);
	color: var(--cn-accent);
	border: 1px solid var(--cn-border);
	margin-left: .5rem;
	flex-shrink: 0;
	transition: all .12s ease;
	text-decoration: none;
}
.cn-newsletter-btn:hover {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
	text-decoration: none;
	transform: translateY(-1px);
}
.cn-newsletter-btn svg { display: block; }

/* ---------- Newsletter modal (CSS-only via :target) ---------- */
.cn-newsletter-modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 100;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.cn-newsletter-modal:target {
	display: flex;
	animation: cn-fade-in .18s ease;
}
@keyframes cn-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.cn-newsletter-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .6);
	backdrop-filter: blur(2px);
}
.cn-newsletter-inner {
	position: relative;
	background: var(--cn-surface);
	border-radius: 12px;
	padding: 2rem 2.2rem;
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--cn-shadow-lg);
	z-index: 1;
	animation: cn-slide-up .25s ease;
}
@keyframes cn-slide-up {
	from { transform: translateY(15px); opacity: .7; }
	to { transform: translateY(0); opacity: 1; }
}
.cn-newsletter-close {
	position: absolute;
	top: .85rem;
	right: 1.1rem;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--cn-muted);
	text-decoration: none;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .12s ease;
}
.cn-newsletter-close:hover {
	background: var(--cn-bg);
	color: var(--cn-text);
	text-decoration: none;
}
.cn-newsletter-title {
	margin: 0 0 .6rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cn-text);
	padding-right: 1.5rem;
}
.cn-newsletter-lede {
	margin: 0 0 1.3rem;
	color: var(--cn-muted);
	font-size: .95rem;
	line-height: 1.5;
}
.cn-newsletter-form,
.cn-newsletter-form-extended {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin-bottom: .85rem;
}
.cn-newsletter-form input[type="email"],
.cn-newsletter-form-extended input[type="email"] {
	width: 100%;
	padding: .65rem .9rem;
	font-size: .95rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
}
.cn-newsletter-form input[type="email"]:focus,
.cn-newsletter-form-extended input[type="email"]:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-newsletter-form button,
.cn-newsletter-form-extended .cn-prefs-submit,
.cn-prefs-page-form .cn-prefs-submit {
	padding: .7rem 1.2rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	width: 100%;
}
.cn-newsletter-form button:hover,
.cn-newsletter-form-extended .cn-prefs-submit:hover,
.cn-prefs-page-form .cn-prefs-submit:hover {
	background: var(--cn-accent-2);
	border-color: var(--cn-accent-2);
}

/* ---------- Prefs-checkboxes (modal + prefs-pagina) ---------- */
.cn-prefs-label-block {
	display: block;
}
.cn-prefs-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--cn-muted);
	margin-bottom: .3rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cn-prefs-group {
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .85rem 1rem .9rem;
	margin: 0;
	background: var(--cn-bg);
}
.cn-prefs-group legend {
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-text);
	padding: 0 .35rem;
	margin-left: -.35rem;
}
.cn-prefs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .35rem .65rem;
	margin-top: .4rem;
}
.cn-prefs-check {
	display: flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
	font-size: .88rem;
	padding: .15rem 0;
}
.cn-prefs-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cn-accent);
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
}
.cn-prefs-check-block {
	flex-direction: row;
	align-items: flex-start;
	padding: .5rem 0;
	border-bottom: 1px solid var(--cn-border);
}
.cn-prefs-check-block:last-child { border-bottom: none; }
.cn-prefs-check-block input[type="checkbox"] { margin-top: .15rem; }
.cn-prefs-check-block span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.cn-prefs-check-block strong { font-weight: 600; font-size: .9rem; color: var(--cn-text); }
.cn-prefs-check-block small { font-size: .76rem; color: var(--cn-muted); line-height: 1.4; }
.cn-prefs-hint {
	margin: .55rem 0 0;
	font-size: .72rem;
	color: var(--cn-muted);
	font-style: italic;
}
.cn-prefs-watchlist {
	width: 100%;
	padding: .55rem .75rem;
	font-size: .85rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	background: #fff;
	color: var(--cn-text);
	resize: vertical;
	min-height: 70px;
	box-sizing: border-box;
	outline: none;
}
.cn-prefs-watchlist:focus {
	border-color: var(--cn-accent);
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}

/* ---------- Typeahead (autocomplete uit CVE-database) ---------- */
.cn-typeahead {
	position: relative;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .5rem .55rem;
	min-height: 44px;
}
.cn-typeahead:focus-within {
	border-color: var(--cn-accent);
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-typeahead-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}
.cn-typeahead-pills:empty { display: none; }
.cn-typeahead-pill {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 3px 4px 3px 10px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	border: 1px solid rgba(11,95,255,.25);
}
.cn-typeahead-pill-x {
	background: transparent;
	border: none;
	color: var(--cn-accent);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 5px;
	border-radius: 50%;
	font-family: inherit;
}
.cn-typeahead-pill-x:hover { background: var(--cn-accent); color: #fff; }
.cn-typeahead-input-wrap {
	position: relative;
	margin-top: .25rem;
}
.cn-typeahead-input {
	width: 100%;
	padding: .45rem .6rem;
	border: none;
	background: transparent;
	font-size: .92rem;
	font-family: inherit;
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.cn-typeahead-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	box-shadow: var(--cn-shadow-lg);
	list-style: none;
	margin: 0;
	padding: .25rem 0;
	max-height: 280px;
	overflow-y: auto;
	z-index: 10;
}
.cn-typeahead-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .55rem .85rem;
	cursor: pointer;
	font-size: .9rem;
	gap: .85rem;
}
.cn-typeahead-item:hover,
.cn-typeahead-item.is-active {
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
}
.cn-typeahead-count {
	font-size: .72rem;
	color: var(--cn-muted);
	font-variant-numeric: tabular-nums;
	background: var(--cn-bg);
	padding: 1px 7px;
	border-radius: 999px;
	flex-shrink: 0;
}
.cn-typeahead-item.is-active .cn-typeahead-count { background: rgba(11,95,255,.15); color: var(--cn-accent-2); }
.cn-typeahead-empty {
	padding: .6rem .9rem;
	color: var(--cn-muted);
	font-size: .85rem;
	font-style: italic;
}

/* ---------- Wizard promo (lancering-actie) ---------- */
.cn-wizard-promo {
	background: linear-gradient(135deg, #fff7e6 0%, #ffeac4 100%);
	border: 1px solid #f0d89b;
	border-radius: 10px;
	padding: 1rem 1.2rem 1.1rem;
	margin: 0 0 1.4rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(184, 134, 11, .12);
}
.cn-wizard-promo-full {
	background: var(--cn-bg);
	border-color: var(--cn-border);
	box-shadow: none;
}
.cn-wizard-promo-badge {
	display: inline-block;
	background: #b08800;
	color: #fff;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.cn-wizard-promo-full .cn-wizard-promo-badge {
	background: var(--cn-muted);
}
.cn-wizard-promo-headline {
	margin: .15rem 0 .25rem;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .55rem;
	flex-wrap: wrap;
}
.cn-wizard-promo-strike {
	color: #8a5a00;
	font-size: 1rem;
	text-decoration: line-through;
	font-weight: 500;
	opacity: .8;
}
.cn-wizard-promo-strike-unit {
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .01em;
}
.cn-wizard-promo-now {
	color: #6a4400;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.01em;
}
.cn-wizard-promo-sub {
	margin: 0 0 .75rem;
	font-size: .82rem;
	color: #6a4400;
}
.cn-wizard-promo-full .cn-wizard-promo-sub { color: var(--cn-muted); }
.cn-wizard-promo-meter {
	height: 6px;
	background: rgba(184, 134, 11, .15);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 .55rem;
}
.cn-wizard-promo-meter-bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #d9480f, #b08800);
	border-radius: 999px;
	transition: width .4s ease;
}
.cn-wizard-promo-counter {
	margin: 0;
	font-size: .82rem;
	color: #6a4400;
	font-weight: 500;
}
.cn-wizard-promo-counter strong { color: #b42318; font-weight: 700; }

@media (max-width: 480px) {
	.cn-wizard-promo { padding: .85rem 1rem 1rem; }
	.cn-wizard-promo-now { font-size: 1.2rem; }
	.cn-wizard-promo-strike { font-size: .9rem; }
}

/* ---------- Wizard (multi-step modal) ---------- */
.cn-wizard { padding-top: 1.4rem; }
.cn-wizard-progress {
	height: 3px;
	background: var(--cn-bg);
	border-radius: 999px;
	margin-bottom: 1.4rem;
	overflow: hidden;
}
.cn-wizard-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--cn-accent), #4b8dff);
	border-radius: 999px;
	transition: width .3s ease;
}
.cn-wizard-step {
	display: none;
	animation: cn-step-in .25s ease;
}
.cn-wizard-step.is-active { display: block; }
@keyframes cn-step-in {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.cn-wizard-q {
	margin: 0 0 .35rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cn-text);
	line-height: 1.3;
	padding-right: 1.5rem;
}
.cn-wizard-help {
	margin: 0 0 1.2rem;
	color: var(--cn-muted);
	font-size: .92rem;
	line-height: 1.55;
}
.cn-wizard-input {
	width: 100%;
	padding: .8rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.cn-wizard-input:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-wizard-choices {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-bottom: 1rem;
}
.cn-wizard-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 3px;
	padding: 1rem 1.2rem;
	background: var(--cn-bg);
	border: 1px solid var(--cn-border);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
	width: 100%;
}
.cn-wizard-choice:hover {
	border-color: var(--cn-accent);
	background: var(--cn-accent-bg);
	transform: translateY(-1px);
}
.cn-wizard-choice-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--cn-text);
}
.cn-wizard-choice-sub {
	font-size: .82rem;
	color: var(--cn-muted);
}
.cn-wizard-choice:hover .cn-wizard-choice-title { color: var(--cn-accent); }

.cn-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .65rem;
	margin-top: 1.3rem;
}
.cn-wizard-back {
	background: transparent;
	border: none;
	color: var(--cn-muted);
	font-family: inherit;
	font-size: .9rem;
	cursor: pointer;
	padding: .55rem .2rem;
}
.cn-wizard-back:hover { color: var(--cn-accent); }
.cn-wizard-next,
.cn-wizard-submit-new,
.cn-wizard-form-existing button[type="submit"] {
	padding: .75rem 1.4rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-left: auto;
}
.cn-wizard-next:hover,
.cn-wizard-submit-new:hover,
.cn-wizard-form-existing button[type="submit"]:hover {
	background: var(--cn-accent-2);
	border-color: var(--cn-accent-2);
}

.cn-wizard-summary {
	background: var(--cn-bg);
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: .25rem 0 .8rem;
}
.cn-wizard-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-wizard-summary li {
	padding: .25rem 0;
	font-size: .88rem;
	color: var(--cn-text);
	border-bottom: 1px solid var(--cn-border);
}
.cn-wizard-summary li:last-child { border-bottom: none; }
.cn-wizard-summary strong { color: var(--cn-muted); font-weight: 600; margin-right: .35rem; }

/* Wizard zelf compact op mobiel */
@media (max-width: 480px) {
	.cn-wizard-q { font-size: 1.15rem; }
	.cn-wizard-help { font-size: .88rem; }
	.cn-wizard-choice { padding: .85rem 1rem; }
	.cn-wizard-choice-title { font-size: .94rem; }
	.cn-wizard-next, .cn-wizard-submit-new { padding: .7rem 1rem; font-size: .9rem; width: auto; }
}

/* Prefs-pagina (token-protected, op cn-single template) */
.cn-prefs-page-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;
}
.cn-prefs-page-form .cn-prefs-grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 480px) {
	.cn-prefs-grid { grid-template-columns: 1fr; }
}
.cn-newsletter-note {
	margin: 0;
	font-size: .78rem;
	color: var(--cn-muted);
	line-height: 1.5;
}

@media (max-width: 480px) {
	.cn-newsletter-inner { padding: 1.6rem 1.4rem; border-radius: 10px; }
	.cn-newsletter-title { font-size: 1.2rem; }
	.cn-newsletter-form { flex-direction: column; }
	.cn-newsletter-form button { width: 100%; }
}

/* ---------- Severity-codes in lijst-titels ----------
   Concept A "Net Operations Center": geen bolle pill met fill, maar een
   monospace 3-letter code in syslog-stijl ([KRT], [HOG], [MID]). De code
   draagt de severity-codering via tekstkleur — geen achtergrond, geen
   ronding, geen ruis. Voelt als log-output, niet als retail-badge. */
.cn-sev-pill {
	display: inline-block;
	margin-right: .35rem;
	padding: 0;
	font-family: var(--cn-mono);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	background: transparent;
	color: var(--cn-text);
	line-height: 1.55;
}
.cn-sev-pill.sev-kritiek { color: #b42318; }
.cn-sev-pill.sev-hoog    { color: #d9480f; }
.cn-sev-pill.sev-middel  { color: #b08800; }

/* ---------- Video-marker (YouTube-bronnen) ----------
   Neutraal ▶-driehoekje in muted-tint. Voorheen een rode "▶ VIDEO"-chip,
   maar die botste visueel met de rode KRT-severity-codes — twee rode
   pillen naast elkaar bij een kritieke video. Format en severity zijn
   verschillende assen; format krijgt nu een kleurloze marker.
   De ▶-vorm is universeel herkend, een tekstlabel voegt niets toe. */
.cn-video-badge {
	display: inline-block;
	margin-right: .3rem;
	padding: 0;
	font-size: .7rem;
	color: var(--cn-muted);
	background: transparent;
	vertical-align: middle;
	line-height: 1;
	transform: translateY(-1px);
}
.cn-video-badge:hover { color: var(--cn-accent); }

/* ---------- YouTube embed-modal ---------- */
/* Overlay verschijnt bij klik op een [data-yt-id]-link. iframe speelt
   direct af binnen cybernieuws.nl zodat bezoeker niet wegnavigeert. */
.cn-yt-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cn-yt-modal[hidden] { display: none; }
.cn-yt-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.85);
	cursor: pointer;
	backdrop-filter: blur(2px);
}
.cn-yt-frame-wrap {
	position: relative;
	width: min(90vw, 1100px);
	max-width: 1100px;
	margin: 0 auto;
}
.cn-yt-topbar {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 0 0 .55rem;
	color: #fff;
	min-height: 32px;
}
.cn-yt-counter {
	flex-shrink: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	background: rgba(255,255,255,.15);
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cn-yt-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .9rem;
	font-weight: 500;
	color: rgba(255,255,255,.92);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cn-yt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cn-yt-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.cn-yt-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .12s ease, transform .12s ease;
}
.cn-yt-close:hover { background: rgba(255,255,255,.3); transform: scale(1.05); }
.cn-yt-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Prev/next-knoppen: dichtbij de iframe — positioned tegen de frame-wrap.
   Op breed scherm staan ze buiten de iframe-rand (compact en goed bereikbaar),
   op smal scherm overlappen ze de iframe-randen (semi-transparant). */
.cn-yt-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.cn-yt-nav:hover:not(:disabled) {
	background: rgba(255,255,255,.32);
	transform: translateY(-50%) scale(1.08);
}
.cn-yt-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cn-yt-nav:disabled {
	opacity: .25;
	cursor: not-allowed;
}
/* Plaats buiten de iframe-randen: −56px = knop (44px) + 12px speling */
.cn-yt-prev { left: -56px; }
.cn-yt-next { right: -56px; }

/* Smal scherm: overlap de iframe-randen met halftransparante donkere bg
   zodat de pijltjes leesbaar blijven op video-content */
@media (max-width: 1100px) {
	.cn-yt-prev { left: 8px; background: rgba(0,0,0,.55); }
	.cn-yt-next { right: 8px; background: rgba(0,0,0,.55); }
	.cn-yt-nav:hover:not(:disabled) { background: rgba(0,0,0,.75); }
}

/* Vergrendel body-scroll als modal open is */
html.cn-yt-open, html.cn-yt-open body { overflow: hidden; }

@media (max-width: 720px) {
	.cn-yt-frame-wrap { width: 96vw; }
	.cn-yt-topbar { gap: .5rem; padding-bottom: .4rem; }
	.cn-yt-title { font-size: .8rem; }
	.cn-yt-counter { font-size: .65rem; padding: 2px 8px; }
	.cn-yt-close { width: 28px; height: 28px; font-size: 1.2rem; }
	.cn-yt-nav {
		width: 38px;
		height: 38px;
		font-size: 1.5rem;
		background: rgba(0,0,0,.6);
	}
	.cn-yt-prev { left: 6px; }
	.cn-yt-next { right: 6px; }
}

/* Severity dim/highlight in newslist — uitgeschakeld.
   Reden: de KRITIEK/HOOG-pills naast de titel dragen al de severity-codering
   met de conventionele rood/oranje-tinten. Een tweede laag (rij-achtergrond)
   was duplicatie en de pastel-tinten lagen zó dicht bij elkaar dat het
   onderscheid KRITIEK ↔ HOOG juist verloren ging op rij-niveau.
   Alle rijen blijven nu wit; de pill doet het severity-werk. */
.cn-newslist-item.severity-kritiek,
.cn-newslist-item.severity-kritiek:nth-child(even),
.cn-newslist-item.severity-hoog,
.cn-newslist-item.severity-hoog:nth-child(even) { background: transparent; }

/* ---------- Live-indicator → operationele metrics-strip ----------
   Concept A "Net Operations Center": de header-strip toont niet alleen "live ·
   X min geleden", maar ook live-cijfers (actieve bronnen, kritieke meldingen,
   items vandaag). Mono-font op de getallen geeft de syslog/SIEM-gloed.
   Cijfers worden 5 min gecached zodat dit geen DB-belasting wordt. */
.cn-live-indicator {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: 2px;
	font-size: .7rem;
	color: var(--cn-muted);
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.4;
}
.cn-live-dot {
	width: 7px;
	height: 7px;
	background: #1f8a4c;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(31, 138, 76, .7);
	animation: cn-live-pulse 2s infinite;
	flex-shrink: 0;
}
.cn-live-text { color: var(--cn-muted); }
.cn-live-sep  { color: var(--cn-border); margin: 0 .05rem; }
.cn-live-metric {
	color: var(--cn-muted);
	white-space: nowrap;
}
.cn-live-metric.is-crit { color: #b42318; font-weight: 600; }
.cn-live-num {
	font-family: var(--cn-mono);
	font-weight: 600;
	color: var(--cn-text);
	font-variant-numeric: tabular-nums;
	margin-right: .1rem;
}
.cn-live-metric.is-crit .cn-live-num { color: #b42318; }
@keyframes cn-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 138, 76, .7); }
	70%  { box-shadow: 0 0 0 6px rgba(31, 138, 76, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 138, 76, 0); }
}
/* Op mobiel collapsen we tot alleen "● live · X min" — header-ruimte is
   schaars en de metrics duwen anders het zoekveld onder een tweede regel. */
@media (max-width: 640px) {
	.cn-live-indicator { font-size: .62rem; gap: .25rem; }
	.cn-live-indicator .cn-live-sep,
	.cn-live-indicator .cn-live-metric { display: none; }
}

/* ---------- Trust-strip (onder header) ----------
   Slanke balk met onderscheidende cijfers: 180+ bronnen, real-time, gratis,
   geen tracking. Subtiel maar zichtbaar — bouwt vertrouwen bij nieuwe bezoekers. */
.cn-trust-strip {
	background: #f5f8fc;
	border-bottom: 1px solid var(--cn-border);
	color: var(--cn-muted);
	font-size: .72rem;
	line-height: 1.4;
}
.cn-trust-strip-inner {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: .35rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .45rem .8rem;
}
.cn-trust-item {
	color: var(--cn-text);
	font-weight: 500;
}
.cn-trust-item strong { font-weight: 700; color: var(--cn-accent); }
.cn-trust-sep { color: var(--cn-border); }

/* Mobiel: trust-strip volledig verbergen — boodschap zit al in de
   announcement-bar erboven, op klein scherm is dit te veel chrome. */
@media (max-width: 640px) {
	.cn-trust-strip { display: none; }
}

/* ---------- Top announcement-bar (killer-feature CTA) ----------
   Slanke balk boven de site-header. Compact, altijd zichtbaar.
   Donkere navy met goudgele accent-knop voor sterke kleurcontrast. */
.cn-announcement-bar {
	background: #0d1b2a;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: .82rem;
	line-height: 1.4;
}
.cn-announcement-bar-inner {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: .5rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	position: relative;
}
.cn-announcement-bar-text {
	color: rgba(255,255,255,.92);
}
.cn-announcement-bar-text strong {
	color: #fff;
	font-weight: 700;
}
.cn-announcement-bar-accent {
	color: #ffd84a !important; /* goudgeel — accent op het personalisatie-aspect */
}
.cn-announcement-bar-cta {
	flex-shrink: 0;
	background: #ffd84a;
	color: #0d1b2a;
	padding: .25rem .85rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: .78rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s ease, transform .12s ease;
}
.cn-announcement-bar-cta:hover {
	background: #ffe57a;
	color: #0d1b2a;
	text-decoration: none;
	transform: translateY(-1px);
}
.cn-announcement-bar-close {
	position: absolute;
	right: .65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: transparent;
	color: rgba(255,255,255,.6);
	border: none;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background .12s ease, color .12s ease;
}
.cn-announcement-bar-close:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

@media (max-width: 640px) {
	.cn-announcement-bar { font-size: .7rem; }
	.cn-announcement-bar-inner {
		padding: .35rem 2rem .35rem .65rem;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: .4rem;
		align-items: center;
	}
	.cn-announcement-bar-text {
		font-size: .68rem;
		line-height: 1.25;
		flex: 1 1 auto;
		min-width: 0;
		/* Toon korte versie op mobiel */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.cn-announcement-bar-cta {
		font-size: .66rem;
		padding: .22rem .55rem;
		flex-shrink: 0;
	}
	.cn-announcement-bar-close {
		width: 18px;
		height: 18px;
		font-size: .85rem;
		right: .35rem;
	}
}

/* ---------- Watchlist hero-strip (legacy — niet meer in gebruik) ----------
   Above-the-fold prominentste positie. Communiceert dat cybernieuws.nl niet
   gewoon RSS-aggregatie is maar gepersonaliseerde CVE-alerts levert.
   Dismissible via localStorage zodat power-users hem niet steeds zien. */
.cn-watchlist-hero {
	position: relative;
	background: linear-gradient(135deg, #0b3d91 0%, #0b5fff 50%, #4b8dff 100%);
	color: #fff;
	border-radius: 8px;
	padding: 1rem 1.2rem 1rem 1.1rem;
	margin: 0 auto 1rem;
	max-width: var(--cn-list-maxw);
	box-shadow: 0 4px 14px rgba(11, 95, 255, .15);
	overflow: hidden;
}
.cn-watchlist-hero::before {
	content: "";
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
	pointer-events: none;
}
.cn-watchlist-hero-close {
	position: absolute;
	top: .35rem;
	right: .5rem;
	width: 24px;
	height: 24px;
	background: rgba(255,255,255,.18);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s ease;
}
.cn-watchlist-hero-close:hover { background: rgba(255,255,255,.32); }
.cn-watchlist-hero-inner {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 1rem;
	position: relative;
}
.cn-watchlist-hero-icon {
	font-size: 2rem;
	line-height: 1;
	text-align: center;
}
.cn-watchlist-hero-title {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin-bottom: .15rem;
}
.cn-watchlist-hero-title em {
	background: rgba(255,255,255,.18);
	padding: 0 .35rem;
	border-radius: 3px;
	font-style: normal;
}
.cn-watchlist-hero-sub {
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: rgba(255,255,255,.95);
}
.cn-watchlist-hero-feat {
	display: block;
	font-size: .8rem;
	margin-top: .2rem;
	padding-left: .15rem;
}
.cn-watchlist-hero-feat strong {
	color: #fff;
	font-weight: 700;
}
.cn-watchlist-hero-meta {
	display: block;
	font-size: .7rem;
	color: rgba(255,255,255,.75);
	font-style: italic;
	margin-top: .4rem;
}
.cn-watchlist-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: #fff;
	color: #0b3d91;
	padding: .55rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .82rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cn-watchlist-hero-cta:hover {
	color: #0b3d91;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
	text-decoration: none;
}

@media (max-width: 640px) {
	.cn-watchlist-hero {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		padding: .75rem .9rem;
	}
	.cn-watchlist-hero-inner {
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto;
		gap: .5rem;
	}
	.cn-watchlist-hero-icon { font-size: 1.5rem; }
	.cn-watchlist-hero-title { font-size: .98rem; }
	.cn-watchlist-hero-sub { font-size: .76rem; }
	.cn-watchlist-hero-meta { font-size: .65rem; }
	.cn-watchlist-hero-cta {
		grid-column: 1 / -1;
		justify-content: center;
		padding: .55rem .85rem;
		font-size: .8rem;
	}
}

/* ---------- "Aankomend" sectie (gepinde events) ----------
   Verschijnt bovenaan de homepage voor items met _cyber_pinned_until > now.
   Lichtblauw kader, datum + countdown links, klik op titel = naar bron. */
.cn-upcoming {
	background: #f0f7ff;
	border: 1px solid #c5dafa;
	border-left: 3px solid #0b5fff;
	border-radius: 6px;
	padding: .65rem .9rem .55rem;
	margin: 0 auto 1rem;
	max-width: var(--cn-list-maxw);
}
.cn-upcoming-head {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-bottom: .35rem;
}
.cn-upcoming-kicker {
	display: inline-block;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #0b4ad1;
}
.cn-upcoming-meta {
	font-size: .65rem;
	color: var(--cn-muted);
	font-style: italic;
}
.cn-upcoming-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-upcoming-item {
	display: grid;
	grid-template-columns: minmax(150px, auto) 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .18rem 0;
	font-size: .82rem;
	line-height: 1.25;
	border-bottom: 1px solid rgba(11, 95, 255, .08);
}
.cn-upcoming-item:last-child { border-bottom: none; }
.cn-upcoming-date {
	color: #0b4ad1;
	font-weight: 600;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cn-upcoming-when {
	color: var(--cn-muted);
	font-weight: 400;
	font-style: italic;
}
.cn-upcoming-title {
	color: var(--cn-accent);
	font-weight: 600;
	font-size: .82rem;
	text-decoration: none;
	line-height: 1.25;
	min-width: 0;
}
.cn-upcoming-title:hover {
	color: var(--cn-accent-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cn-upcoming-source {
	font-size: .65rem;
	color: var(--cn-muted);
	white-space: nowrap;
	font-style: italic;
	opacity: .7;
}

@media (max-width: 640px) {
	.cn-upcoming { padding: .55rem .7rem; }
	.cn-upcoming-item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: .05rem;
	}
	.cn-upcoming-source { grid-column: 1; }
}

/* ---------- "Vandaag" hero-blok (homepage top) ---------- */
.cn-today {
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	padding: .85rem 1.1rem;
	margin: 0 auto 1.1rem;
	max-width: var(--cn-list-maxw);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	border-left: 3px solid var(--cn-accent);
}
/* Priority-state houdt accentkleur op de linker-balk; geen gradient/rose
   achtergrond meer — dubbele rood-laag met de KRITIEK-badges weggehaald. */
.cn-today.is-priority {
	border-left-color: #b42318;
	background: #fff;
}
.cn-today-head {
	margin: 0 0 .55rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem .65rem;
}
.cn-today-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cn-today.is-priority .cn-today-kicker { background: #b42318; }
.cn-today-meta {
	font-size: .66rem;
	color: var(--cn-muted);
	font-style: italic;
}
@media (max-width: 720px) {
	.cn-today-meta { font-size: .68rem; line-height: 1.35; }
}
.cn-today-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: today;
}
.cn-today-item {
	counter-increment: today;
	display: grid;
	grid-template-columns: 22px 40px 1fr auto;
	align-items: center;
	gap: .6rem;
	padding: .25rem 0;
	border-bottom: 1px solid var(--cn-border);
	font-size: .86rem;
}
.cn-today-item:last-child { border-bottom: none; }
.cn-today-item::before {
	content: counter(today);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	background: var(--cn-bg);
	border-radius: 50%;
	font-size: .65rem;
	font-weight: 700;
	color: var(--cn-muted);
}
.cn-today.is-priority .cn-today-item::before {
	background: #ffe5e5;
	color: #b42318;
}
.cn-today-time {
	color: var(--cn-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cn-today-title {
	color: var(--cn-text);
	font-weight: 600;
	font-size: .84rem;
	line-height: 1.28;
	text-decoration: none;
	min-width: 0;
}
.cn-today-title:hover { color: var(--cn-accent); text-decoration: underline; text-underline-offset: 2px; }
.cn-today-src {
	color: var(--cn-muted);
	font-size: .66rem;
	white-space: nowrap;
	font-style: italic;
}

@media (max-width: 720px) {
	.cn-today { padding: 1.15rem 1.1rem; border-radius: 10px; }
	.cn-today-item {
		grid-template-columns: 24px 42px 1fr;
		grid-template-rows: auto;
		gap: .15rem .55rem;
		padding: .55rem 0;
	}
	.cn-today-item::before { width: 20px; height: 20px; font-size: .7rem; }
	.cn-today-title { grid-column: 3; grid-row: 1; font-size: .98rem; }
	/* Bron-label ("via Computable", "via Security.nl") verbergen op mobiel
	   voor de app-look — bron is alsnog zichtbaar bij hover/tap via tooltip. */
	.cn-today-src { display: none; }
}

/* Ook in "Aankomend" sectie de bron verbergen op mobiel */
@media (max-width: 640px) {
	.cn-upcoming-source { display: none; }
}

/* ---------- Main ---------- */
.cn-main { padding: 1.2rem 1rem 2rem; max-width: var(--cn-maxw); margin: 0 auto; }

/* ---------- Inline cluster chip + children-row ---------- */
.cn-newslist-item.has-cluster {
	grid-template-columns: 38px 1fr auto auto;
}
.cn-cluster-chip {
	display: inline-block;
	background: transparent;
	color: var(--cn-muted);
	border: none;
	border-radius: 0;
	padding: 0 .15rem;
	font-size: .68rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
	font-family: inherit;
	transition: all .12s ease;
	font-family: inherit;
}
.cn-cluster-chip:hover { color: var(--cn-accent); }
.cn-cluster-chip.is-open { color: var(--cn-accent); font-weight: 600; }

/* Children-row: een li die volledige breedte spant met een ingesprongen sublijst */
.cn-cluster-children-row {
	display: block;
	padding: 0;
	background: #fafbfd;
	border-left: 3px solid #d4dbe6;
	margin: 0 0 0 0;
}
.cn-cluster-children-row[hidden] {
	display: none !important;
}
.cn-cluster-children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-cluster-children .cn-newslist-item {
	padding-left: 1.6rem;
	background: transparent;
	border-left-width: 0;
	font-size: .8rem;
	grid-template-columns: 48px 1fr auto;
}
.cn-cluster-children .cn-newslist-item:nth-child(even) { background: rgba(0,0,0,.025); }
.cn-cluster-children .cn-newslist-item .cn-newslist-time::before {
	content: "└ ";
	color: var(--cn-muted);
	margin-right: .15rem;
}

@media (max-width: 720px) {
	.cn-newslist-item.has-cluster {
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto auto;
	}
	.cn-cluster-chip {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		font-size: .68rem;
		padding: 2px 8px;
		margin-top: .15rem;
	}
	.cn-cluster-children .cn-newslist-item {
		padding-left: 1.5rem;
		grid-template-columns: 44px 1fr;
	}
}

/* ---------- Freshness indicator (cache-debug + manuele vernieuwen) ---------- */
.cn-freshness {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem .8rem;
	margin: 0 0 1.25rem;
	padding: .55rem .85rem;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	font-size: .82rem;
	color: var(--cn-muted);
}
.cn-freshness-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #1f8a4c;
	box-shadow: 0 0 0 2px rgba(31,138,76,.18);
	flex-shrink: 0;
	animation: cn-pulse 2.5s ease-in-out infinite;
}
@keyframes cn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}
.cn-freshness-time { font-weight: 500; color: var(--cn-text); }
.cn-freshness-debug {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .76rem;
	background: var(--cn-bg);
	padding: 1px 8px;
	border-radius: 4px;
}
.cn-freshness-refresh {
	font-weight: 600;
	margin-left: auto;
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--cn-border);
	color: var(--cn-accent);
	border-radius: 999px;
	padding: 3px 11px;
	font-size: .78rem;
	cursor: pointer;
	font-family: inherit;
}
.cn-freshness-refresh:hover {
	background: var(--cn-accent-bg);
	border-color: var(--cn-accent);
	color: var(--cn-accent-2);
}
@media (max-width: 480px) {
	.cn-freshness { font-size: .76rem; padding: .5rem .7rem; gap: .3rem .55rem; }
	.cn-freshness-debug { font-size: .7rem; }
	.cn-freshness-refresh { margin-left: 0; }
}

.cn-intro {
	background: linear-gradient(135deg, #0b5fff, #2c7bff);
	color: #fff;
	border-radius: var(--cn-radius);
	padding: 2.2rem 2.3rem;
	margin-bottom: 2.5rem;
	box-shadow: var(--cn-shadow-lg);
	position: relative;
	overflow: hidden;
}
.cn-intro::before {
	content: "";
	position: absolute;
	right: -60px; top: -60px;
	width: 240px; height: 240px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
}
.cn-intro h1 {
	margin: 0 0 .6rem;
	font-size: 1.75rem;
	font-weight: 700;
	position: relative;
}
.cn-intro p {
	margin: 0;
	color: rgba(255,255,255,.92);
	max-width: 62ch;
	font-size: 1.02rem;
	position: relative;
}

.cn-archive-header { margin-bottom: 1.8rem; }
.cn-archive-header h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 700; }
.cn-archive-desc { color: var(--cn-muted); margin: 0; }

/* ---------- Hero briefing (vandaag, homepage) ---------- */
.cn-hero-briefing {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 2rem 2.2rem;
	margin-bottom: 2.5rem;
	box-shadow: var(--cn-shadow-lg);
	border-left: 5px solid #8a93a3;
}
.cn-hero-briefing.severity-kritiek     { border-left-color: #b42318; }
.cn-hero-briefing.severity-hoog        { border-left-color: #d9480f; }
.cn-hero-briefing.severity-middel      { border-left-color: #b08800; }
.cn-hero-briefing.severity-laag        { border-left-color: #4a6a2d; }
.cn-hero-briefing.severity-informatief { border-left-color: #4a5260; }

.cn-hero-top {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .8rem;
}
.cn-hero-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cn-hero-title {
	margin: 0 0 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.015em;
}
.cn-hero-title a {
	color: var(--cn-text);
	text-decoration: none;
}
.cn-hero-title a:hover {
	color: var(--cn-accent);
	text-decoration: none;
}
.cn-hero-exec p {
	margin: 0 0 1.3rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--cn-text);
}
.cn-hero-highlights {
	background: #f7f9fc;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
}
.cn-hero-highlights-label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cn-muted);
	margin-bottom: .5rem;
}
.cn-hero-highlights ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-hero-highlights li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem 0;
	border-bottom: 1px solid var(--cn-border);
	font-size: .95rem;
}
.cn-hero-highlights li:last-child { border-bottom: none; }
.cn-hero-highlight-title {
	color: var(--cn-text);
	font-weight: 500;
}
.cn-hero-cta {
	margin: 0;
}
.cn-hero-cta a {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: .65rem 1.3rem;
	border-radius: var(--cn-radius);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.cn-hero-cta a:hover {
	background: var(--cn-accent-2);
	text-decoration: none;
}

@media (max-width: 640px) {
	.cn-hero-briefing { padding: 1.4rem 1.3rem; }
	.cn-hero-title { font-size: 1.35rem; }
	.cn-hero-exec p { font-size: 1rem; }
}

/* ---------- Vorige briefings heading ---------- */
.cn-past-briefings {
	margin-top: 2rem;
}
.cn-past-heading {
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cn-muted);
	margin: 0 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--cn-border);
}

/* Nieuwslijst-title kan nu ook een tease-regel bevatten */
.cn-newslist-tease {
	display: block;
	font-size: .78rem;
	font-weight: 400;
	color: var(--cn-muted);
	margin-top: 2px;
	line-height: 1.35;
}

/* ---------- Nieuwslijst (compact, Security.nl-stijl) ---------- */
.cn-newslist {
	margin: 0 auto;
	max-width: var(--cn-list-maxw);
}

.cn-newslist-date {
	font-size: .78rem;
	font-weight: 600;
	color: var(--cn-muted);
	margin: 1rem 0 .2rem;
	padding: 0 .25rem .1rem;
	text-transform: lowercase;
}
.cn-newslist-date:first-child { margin-top: 0; }

.cn-newslist-items {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* DESKTOP: extra compact — Security.nl-density. Mobiele media query (640px)
   onderaan blijft ruim voor tap-targets. */
.cn-newslist-item {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .1rem .7rem .1rem .55rem;
	border-left: 2px solid #e6eaf0;
	transition: background .1s ease;
	font-size: .82rem;
	line-height: 1.25;
}
/* Alternerende rijen — subtiel ritme zonder visuele drukte */
.cn-newslist-item:nth-child(even) { background: #fafbfd; }
.cn-newslist-item:hover { background: #eef3fa; }

/* Sector-borders weggehaald: dubbel-codering met KRITIEK/HOOG-badges
   creëerde visuele drukte. Alle items krijgen nu één neutrale linker-rand.
   Sector-context blijft beschikbaar via filter-pills + sector-tag. */
.cn-newslist-item.sector-zorg,
.cn-newslist-item.sector-overheid,
.cn-newslist-item.sector-financieel,
.cn-newslist-item.sector-onderwijs,
.cn-newslist-item.sector-industrie,
.cn-newslist-item.sector-algemeen { border-left-color: #e6eaf0; }

.cn-newslist-time {
	color: var(--cn-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cn-newslist-title {
	color: var(--cn-text);
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.25;
	text-decoration: none;
	min-width: 0;
	/* Single-line truncate: alle rijen worden ~gelijke hoogte. */
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color .12s ease;
}
.cn-newslist-title:hover,
.cn-newslist-title:focus-visible {
	color: var(--cn-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-newslist-meta {
	display: flex;
	gap: .3rem;
	align-items: center;
	flex-shrink: 0;
	color: var(--cn-muted);
}

.cn-newslist-source {
	font-size: .65rem;
	color: var(--cn-muted);
	white-space: nowrap;
	font-weight: 400;
	font-style: italic;
	opacity: .65;
}

/* Sector-badges in de lijst verbergen: de gekleurde left-border
   toont de sector al. Rustiger beeld. Wel beschikbaar als screenreader-tekst. */
.cn-newslist-meta .cn-tag {
	display: none;
}

/* Mobile: app-feel — full-width edge-to-edge, geen bron-label voor minder
   noise, alleen tijd + titel. Titel mag tot 2 regels wrappen met ellipsis. */
@media (max-width: 640px) {
	/* Container full-width, geen rounded corners, geen side-padding */
	.cn-newslist { max-width: 100%; margin: 0; }
	.cn-newslist-items {
		border-radius: 0;
		border-left: none;
		border-right: none;
		box-shadow: none;
	}
	/* Date-header iets dichter naar links */
	.cn-newslist-date {
		padding: .25rem .9rem .15rem;
		margin: 1rem 0 .15rem;
	}

	.cn-newslist-item {
		grid-template-columns: 42px 1fr;
		grid-template-rows: auto;
		gap: .1rem .55rem;
		padding: .5rem .9rem .5rem .7rem;
	}
	.cn-newslist-title {
		font-size: .95rem;
		font-weight: 500;
		line-height: 1.3;
		color: var(--cn-text);
		/* Laat titel wrappen tot 2 regels, daarna ellipsis */
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.cn-newslist-time {
		font-size: .72rem;
		color: var(--cn-muted);
	}
	/* Bron-label verbergen op mobiel — minder clutter, app-feel */
	.cn-newslist-source { display: none; }
	.cn-newslist-meta { display: none; }
}

/* Kleine extra: ook op mobiel het main-padding en de hero-blokken
   full-width maken zodat alles aan elkaar plakt zoals in een app.
   Specifieker selector om .cn-container 1rem-padding te beat'en op <main>. */
@media (max-width: 640px) {
	main.cn-main.cn-container {
		padding: .5rem 0 1.5rem;
		max-width: 100%;
	}
	.cn-today, .cn-upcoming {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		border-left: 3px solid var(--cn-accent);
		border-right: none;
	}
	.cn-today.is-priority { border-left-color: #b42318; }
	.cn-upcoming { border-left-color: #0b5fff; }
}

/* ============================================================
   MOBIELE HEADER — compacte app-balk
   ============================================================
   Eén horizontale 48px-balk: klein logo + zoekveld + CVE-icoon + mail-icoon.
   Tagline verbergen, sector-filter daaronder horizontaal scrollbaar als
   tab-balk. Geen rondingen, geen schaduwen — strakke app-look. */
@media (max-width: 640px) {
	.cn-site-header {
		box-shadow: 0 1px 0 var(--cn-border);
		border-bottom: none;
	}
	.cn-container.cn-header-inner {
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		align-items: center;
		gap: .5rem;
		padding: .35rem .6rem;
		flex-wrap: nowrap;
	}
	/* Brand: alleen titel, kleiner, tagline verbergen */
	.cn-brand strong {
		font-size: .92rem;
		font-weight: 700;
		letter-spacing: -.01em;
	}
	.cn-brand strong::before {
		width: 6px; height: 6px;
		margin-right: .35rem;
		box-shadow: 0 0 0 1.5px rgba(11,95,255,.18);
	}
	.cn-tag-line { display: none; }

	/* Zoekveld: compact, vult resterende ruimte */
	.cn-search {
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}
	.cn-search input[type="search"] {
		width: 100%;
		padding: .35rem .65rem;
		font-size: .78rem;
		border-radius: 999px 0 0 999px;
		background: #f1f4f9;
		border-color: transparent;
	}
	.cn-search input[type="search"]:focus {
		background: #fff;
		border-color: var(--cn-accent);
	}
	.cn-search button {
		padding: .35rem .55rem;
		border-radius: 0 999px 999px 0;
	}
	.cn-search button svg { width: 12px; height: 12px; }

	/* CVE als compacte pill (tekst-zichtbaar), mail als icon-cirkel */
	.cn-cve-btn {
		height: 32px;
		padding: 0 .75rem;
		margin-left: 0;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .02em;
		border-radius: 999px;
		background: #f1f4f9;
		border-color: transparent;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.cn-newsletter-btn {
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 50%;
		background: #f1f4f9;
		border-color: transparent;
		flex-shrink: 0;
	}
	.cn-newsletter-btn svg { width: 16px; height: 16px; }

	/* Sector-filter als app-tabs: horizontaal scrollbaar, geen wrap */
	.cn-filter {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: .35rem;
		padding: .35rem .6rem .45rem;
		border-top: 1px solid var(--cn-border);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cn-filter::-webkit-scrollbar { display: none; }
	.cn-filter-label {
		display: none; /* "Sector:" label weg op mobiel — context is duidelijk */
	}
	.cn-filter-item {
		flex-shrink: 0;
		font-size: .75rem;
		padding: .25rem .7rem;
		border-radius: 999px;
		font-weight: 500;
	}
}

/* Voor smalle tablets (640-900px) ook iets meer ruimte: 2 regels max */
@media (min-width: 641px) and (max-width: 900px) {
	.cn-newslist-title {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* Voor smalle tablets (640-900px) ook iets meer ruimte: 2 regels max */
@media (min-width: 641px) and (max-width: 900px) {
	.cn-newslist-title {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* ---------- Hero (laatste nieuws) ---------- */
.cn-hero {
	background: linear-gradient(135deg, #0b5fff 0%, #2c7bff 60%, #4b8dff 100%);
	color: #fff;
	border-radius: var(--cn-radius);
	padding: 2.5rem 2.5rem 2.2rem;
	margin-bottom: 2rem;
	box-shadow: var(--cn-shadow-lg);
	position: relative;
	overflow: hidden;
}
.cn-hero::before {
	content: "";
	position: absolute;
	right: -80px; top: -80px;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
}
.cn-hero::after {
	content: "";
	position: absolute;
	right: 40px; bottom: -60px;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.cn-hero > * { position: relative; }
.cn-hero-label {
	display: inline-block;
	background: rgba(255,255,255,.22);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	backdrop-filter: blur(4px);
}
.cn-hero-title {
	font-size: 2.1rem;
	line-height: 1.2;
	margin: 0 0 .7rem;
	font-weight: 700;
	max-width: 22ch;
}
.cn-hero-title a {
	color: #fff;
	text-decoration: none;
}
.cn-hero-title a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.cn-hero-excerpt {
	font-size: 1.05rem;
	color: rgba(255,255,255,.93);
	max-width: 65ch;
	margin-bottom: 1rem;
	line-height: 1.55;
}
.cn-hero .cn-meta,
.cn-hero .cn-meta a,
.cn-hero .cn-meta time {
	color: rgba(255,255,255,.82);
}
.cn-hero .cn-meta a:hover { color: #fff; }
.cn-hero .cn-tag {
	background: rgba(255,255,255,.22);
	color: #fff;
	border-color: rgba(255,255,255,.3);
}
.cn-hero .cn-read-more {
	display: inline-block;
	color: #fff;
	font-weight: 700;
	padding: .5rem 1.1rem;
	background: rgba(255,255,255,.18);
	border-radius: var(--cn-radius);
	border: 1px solid rgba(255,255,255,.3);
	margin-top: .5rem;
}
.cn-hero .cn-read-more:hover {
	background: #fff;
	color: var(--cn-accent);
	text-decoration: none;
}
.cn-hero .cn-sep { color: rgba(255,255,255,.5); }

.cn-empty {
	background: var(--cn-surface);
	border: 1px dashed var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 3rem 2rem;
	text-align: center;
	color: var(--cn-muted);
}
.cn-empty h2 { margin: 0 0 .5rem; color: var(--cn-text); }
.cn-empty p { margin: 0; }

/* ---------- Cards ---------- */
.cn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}
.cn-card {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.35rem 1.4rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	box-shadow: var(--cn-shadow);
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.cn-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cn-shadow-lg);
	border-color: #c9d2e0;
}
.cn-card-title { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.cn-card-title a { color: var(--cn-text); }
.cn-card-title a:hover { color: var(--cn-accent); text-decoration: none; }

.cn-card-excerpt {
	color: var(--cn-muted);
	font-size: .94rem;
	flex: 1 1 auto;
	margin: 0;
}
.cn-card-excerpt p { margin: 0; }

.cn-read-more {
	font-weight: 600;
	font-size: .92rem;
}

/* ---------- Meta ---------- */
.cn-meta {
	margin: 0;
	font-size: .81rem;
	color: var(--cn-muted);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .55rem;
	align-items: center;
}
.cn-meta a { color: var(--cn-muted); }
.cn-meta a:hover { color: var(--cn-accent); text-decoration: none; }
.cn-sep { opacity: .4; }

.cn-tag {
	display: inline-block;
	padding: 2px 9px;
	font-size: .72rem;
	font-weight: 600;
	border-radius: 4px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent);
	text-decoration: none;
	border: 1px solid transparent;
	letter-spacing: .01em;
}
.cn-tag:hover { text-decoration: none; border-color: currentColor; }

/* Sector-tag-kleuren: alle pills in filter-balk krijgen één neutrale stijl.
   Alleen de actieve sector is gehighlight (via .is-active in basis-filter).
   Geeft visuele rust — labels zeggen al wat de sector is. */
.cn-tag-zorg,
.cn-tag-overheid,
.cn-tag-financieel,
.cn-tag-onderwijs,
.cn-tag-industrie,
.cn-tag-algemeen { background: var(--cn-surface); color: var(--cn-text); }
/* Article-page sector-pill blijft gekleurd voor hi-fi context (eenmalig
   per pagina, niet meervoudig naast elkaar in een rij). */
.cn-single .cn-tag-zorg        { background: #ffe8ea; color: #b42318; }
.cn-single .cn-tag-overheid    { background: #e0ecff; color: #0b4a9e; }
.cn-single .cn-tag-financieel  { background: #e4f7eb; color: #1f8a4c; }
.cn-single .cn-tag-onderwijs   { background: #fff2d6; color: #a15c07; }
.cn-single .cn-tag-industrie   { background: #ede7ff; color: #5b35c2; }
.cn-single .cn-tag-algemeen    { background: #e6eaf0; color: #3a4250; }

/* ---------- Single (samenvatting-pagina) ---------- */
.cn-single {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 2.3rem 2.3rem;
	max-width: 760px;
	margin: 0 auto;
	box-shadow: var(--cn-shadow);
	border-left: 4px solid #e6eaf0;
}
.cn-single.sector-zorg       { border-left-color: #b42318; }
.cn-single.sector-overheid   { border-left-color: #0b4a9e; }
.cn-single.sector-financieel { border-left-color: #1f8a4c; }
.cn-single.sector-onderwijs  { border-left-color: #a15c07; }
.cn-single.sector-industrie  { border-left-color: #5b35c2; }
.cn-single.sector-algemeen   { border-left-color: #8a93a3; }

.cn-single-back {
	margin: 0 0 1rem;
	font-size: .88rem;
}
.cn-single-back a {
	color: var(--cn-muted);
	text-decoration: none;
}
.cn-single-back a:hover { color: var(--cn-accent); text-decoration: underline; }

.cn-single-title { margin: 0 0 .6rem; font-size: 1.85rem; font-weight: 700; line-height: 1.22; letter-spacing: -.015em; }
.cn-single-thumb { margin: 1.5rem 0; border-radius: var(--cn-radius); overflow: hidden; }

.cn-single-summary {
	font-size: 1.04rem;
	margin: 1.5rem 0;
	color: var(--cn-text);
}
.cn-single-summary p { margin: 0 0 1rem; }
.cn-single-summary p:last-child { margin-bottom: 0; }

.cn-summary-attribution {
	font-size: .8rem !important;
	color: var(--cn-muted);
	border-top: 1px solid var(--cn-border);
	padding-top: .75rem;
	margin-top: 1.5rem !important;
}

/* ---------- Daily Briefing (management samenvatting per sector per dag) ---------- */
.cn-daily-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--cn-border);
}
.cn-daily-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .75rem;
}
.cn-daily-title {
	margin: 0 0 .4rem;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
}
.cn-daily-date {
	margin: 0;
	color: var(--cn-muted);
	font-size: .95rem;
	text-transform: capitalize;
}

/* Executive summary — hero-achtig, management tone */
.cn-daily-exec {
	background: linear-gradient(135deg, #f8fafd 0%, #eef3fb 100%);
	border: 1px solid #d9e2ee;
	border-radius: var(--cn-radius);
	padding: 1.8rem 2rem;
	margin-bottom: 2rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-exec h2 {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--cn-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cn-daily-exec p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--cn-text);
}

/* Highlights lijst */
.cn-daily-highlights {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-highlights h2,
.cn-daily-actions h2,
.cn-daily-trend h2 {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-highlights-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: highlight;
}
.cn-highlight {
	counter-increment: highlight;
	border-left: 3px solid #e6eaf0;
	padding: .85rem 0 .85rem 1.25rem;
	margin-bottom: .5rem;
	position: relative;
}
.cn-highlight::before {
	content: counter(highlight);
	position: absolute;
	left: -12px;
	top: 1rem;
	width: 22px;
	height: 22px;
	background: #fff;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: .72rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: var(--cn-muted);
}
.cn-highlight:last-child { margin-bottom: 0; }

.cn-highlight.severity-kritiek     { border-left-color: #b42318; color: #b42318; }
.cn-highlight.severity-hoog        { border-left-color: #d9480f; color: #d9480f; }
.cn-highlight.severity-middel      { border-left-color: #b08800; color: #b08800; }
.cn-highlight.severity-laag        { border-left-color: #4a6a2d; color: #4a6a2d; }
.cn-highlight.severity-informatief { border-left-color: #4a5260; color: #4a5260; }

.cn-highlight-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	margin-bottom: .4rem;
}
.cn-highlight-title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--cn-text);
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}
.cn-highlight-what {
	margin: 0 0 .5rem;
	color: var(--cn-text);
	font-size: .98rem;
	line-height: 1.5;
}
.cn-highlight-action {
	margin: 0;
	padding: .55rem .8rem;
	background: #f0f5ff;
	border-left: 3px solid var(--cn-accent);
	border-radius: 4px;
	font-size: .94rem;
	color: var(--cn-text);
}
.cn-action-label {
	font-weight: 700;
	color: var(--cn-accent);
	margin-right: .3rem;
}

/* Business impact + Compliance grid per highlight */
.cn-highlight-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin-bottom: .6rem;
}
.cn-highlight-meta {
	padding: .55rem .7rem;
	border-radius: 4px;
	font-size: .88rem;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.cn-meta-impact {
	background: #fff8e6;
	border: 1px solid #f0d89b;
}
.cn-meta-compliance {
	background: #f3ebff;
	border: 1px solid #d9c0f5;
}
.cn-meta-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
}
.cn-meta-body { color: var(--cn-text); }

@media (max-width: 640px) {
	.cn-highlight-meta-grid { grid-template-columns: 1fr; }
}

/* Board talking points */
.cn-daily-board {
	background: #fdf6e8;
	border: 2px solid #e6c876;
	border-radius: var(--cn-radius);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-board h2 {
	margin: 0 0 .75rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a5a00;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-board-list li {
	position: relative;
	padding: .6rem 0 .6rem 1.8rem;
	border-bottom: 1px solid rgba(230, 200, 118, .4);
	color: #3a2e10;
	font-size: 1rem;
	line-height: 1.5;
}
.cn-board-list li:last-child { border-bottom: none; }
.cn-board-list li::before {
	content: "▸";
	position: absolute;
	left: .3rem;
	top: .55rem;
	color: #8a5a00;
	font-weight: 700;
	font-size: 1.1rem;
}

/* Peer context */
.cn-daily-peer {
	background: #eef7fd;
	border: 1px solid #b8dcf0;
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.5rem;
}
.cn-daily-peer h2 {
	margin: 0 0 .6rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #0b4a9e;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-daily-peer p {
	margin: 0;
	color: #1a3558;
	font-size: 1rem;
	line-height: 1.55;
}

/* Weekly actions */
.cn-daily-actions {
	background: #f1faf4;
	border: 1px solid #c0e4ce;
	border-radius: var(--cn-radius);
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.5rem;
}

/* Trend */
.cn-daily-trend {
	background: #faf7ff;
	border: 1px solid #ddd0f5;
	border-radius: var(--cn-radius);
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.5rem;
}
.cn-daily-trend p {
	margin: 0;
	font-size: 1.02rem;
	font-style: italic;
	color: #4a3a7a;
	line-height: 1.55;
}

@media (max-width: 640px) {
	.cn-daily-title { font-size: 1.45rem; }
	.cn-daily-exec { padding: 1.3rem 1.3rem; }
	.cn-daily-exec p { font-size: 1rem; }
	.cn-daily-highlights { padding: 1.1rem 1.2rem; }
	.cn-highlight { padding-left: 1rem; }
	.cn-highlight::before { left: -10px; width: 18px; height: 18px; font-size: .68rem; line-height: 14px; }
}

/* ---------- AI Briefing (legacy per-item, fallback) ---------- */
.cn-briefing {
	margin: 1.5rem 0;
}

.cn-briefing-section {
	background: #fafbfd;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.3rem;
	margin-bottom: 1rem;
}
.cn-briefing-section h2 {
	margin: 0 0 .6rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-briefing-ico {
	font-size: 1.15rem;
	line-height: 1;
}
.cn-briefing-section p {
	margin: 0;
	font-size: 1.04rem;
	line-height: 1.55;
	color: var(--cn-text);
}

/* Accent per sectie */
.cn-briefing-what {
	background: #fff8f5;
	border-color: #ffd7c5;
}
.cn-briefing-relevance {
	background: #f3f7ff;
	border-color: #cde0ff;
}
.cn-briefing-actions {
	background: #f1faf4;
	border-color: #c0e4ce;
}
.cn-briefing-context {
	background: #faf7ff;
	border-color: #ddd0f5;
}
.cn-briefing-context p {
	font-style: italic;
	color: #4a3a7a;
}
.cn-briefing-sources {
	background: #f7f9fc;
	border-color: #d4dbe6;
}
.cn-source-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.cn-source-list li { margin: 0; }
.cn-source-list a {
	display: inline-block;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 4px;
	font-size: .85rem;
	color: var(--cn-accent);
	text-decoration: none;
	font-family: var(--cn-mono, ui-monospace, Menlo, monospace);
}
.cn-source-list a:hover {
	border-color: var(--cn-accent);
	background: var(--cn-accent-bg);
}

/* Relevance-grid (tech / sectoren / urgentie) */
.cn-briefing-grid {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: .6rem 1rem;
	margin: 0;
}
.cn-briefing-grid dt {
	font-size: .82rem;
	font-weight: 600;
	color: var(--cn-muted);
	padding-top: .25rem;
}
.cn-briefing-grid dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.cn-chip {
	display: inline-block;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 500;
	color: var(--cn-text);
}
.cn-chip-tech {
	font-family: var(--cn-mono, ui-monospace, Menlo, monospace);
	background: #f5f7fb;
	border-color: #d4dbe6;
}
.cn-chip-sector {
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-color: rgba(11, 95, 255, .25);
}

/* Severity-badges */
.cn-severity {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cn-severity-kritiek     { background: #b42318; color: #fff; }
.cn-severity-hoog        { background: #d9480f; color: #fff; }
.cn-severity-middel      { background: #b08800; color: #fff; }
.cn-severity-laag        { background: #4a6a2d; color: #fff; }
.cn-severity-informatief { background: #4a5260; color: #fff; }

/* Actie-lijst */
.cn-action-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-action-list li {
	position: relative;
	padding: .55rem 0 .55rem 2rem;
	border-bottom: 1px solid rgba(192, 228, 206, .5);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--cn-text);
}
.cn-action-list li:last-child { border-bottom: none; }
.cn-action-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85rem;
	width: 18px;
	height: 18px;
	border: 2px solid #1f8a4c;
	border-radius: 4px;
	background: #fff;
}
.cn-action-list li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: .95rem;
	width: 10px;
	height: 6px;
	border-left: 2px solid #1f8a4c;
	border-bottom: 2px solid #1f8a4c;
	transform: rotate(-45deg);
	opacity: .65;
}

/* Severity als top-banner op single-pagina */
.cn-single.severity-kritiek { border-top: 4px solid #b42318; padding-top: 2rem; }
.cn-single.severity-hoog    { border-top: 4px solid #d9480f; padding-top: 2rem; }

@media (max-width: 640px) {
	.cn-briefing-section { padding: 1rem 1.1rem; }
	.cn-briefing-grid {
		grid-template-columns: 1fr;
		gap: .3rem;
	}
	.cn-briefing-grid dt { padding-top: .5rem; }
}

/* Call-to-action naar originele bron */
.cn-source-cta {
	margin-top: 2rem;
	padding: 1.3rem 1.4rem;
	background: var(--cn-accent-bg);
	border: 1px solid rgba(11, 95, 255, .2);
	border-radius: var(--cn-radius);
	text-align: center;
}
.cn-source-cta-label {
	margin: 0 0 .75rem;
	font-size: .88rem;
	color: var(--cn-muted);
}
.cn-source-cta-btn {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: .7rem 1.4rem;
	border-radius: var(--cn-radius);
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: background .12s ease, transform .1s ease;
}
.cn-source-cta-btn:hover,
.cn-source-cta-btn:focus-visible {
	background: var(--cn-accent-2);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

@media (max-width: 640px) {
	.cn-single { padding: 1.5rem 1.25rem; }
	.cn-single-title { font-size: 1.4rem; }
	.cn-source-cta { padding: 1.1rem 1rem; }
	.cn-source-cta-btn { padding: .65rem 1.1rem; font-size: .92rem; }
}

/* ---------- Frameworks ---------- */
.cn-lead { color: var(--cn-muted); font-size: 1.05rem; }

.cn-frameworks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.cn-framework {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.3rem;
	box-shadow: var(--cn-shadow);
	transition: transform .12s ease, box-shadow .15s ease;
}
.cn-framework:hover { transform: translateY(-2px); box-shadow: var(--cn-shadow-lg); }
.cn-framework h3 {
	margin: 0 0 .6rem;
	font-size: 1.12rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-wrap: wrap;
}
.cn-scope {
	font-size: .68rem;
	font-weight: 700;
	background: var(--cn-accent-bg);
	color: var(--cn-accent);
	padding: 2px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cn-framework p { margin: 0 0 .5rem; color: var(--cn-muted); font-size: .93rem; }
.cn-framework p:last-child { margin-bottom: 0; }
.cn-framework a { font-weight: 600; }

/* ---------- Pagination ---------- */
.cn-pagination { margin: 3rem 0 0; display: flex; justify-content: center; }
.cn-pagination .page-numbers {
	display: inline-block;
	padding: .45rem .85rem;
	margin: 0 .2rem;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	background: var(--cn-surface);
	color: var(--cn-text);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
}
.cn-pagination .page-numbers:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-pagination .page-numbers.current {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
}

/* ---------- Footer ---------- */
.cn-site-footer {
	background: var(--cn-surface);
	border-top: 1px solid var(--cn-border);
	padding: 1.8rem 0;
	margin-top: 4rem;
	color: var(--cn-muted);
	font-size: .88rem;
}
.cn-site-footer p { margin: 0 0 .5rem; }
.cn-menu-footer { margin-top: .5rem; gap: 1.25rem; display: flex; flex-wrap: wrap; }

/* ---------- Mobile (≤720px) ---------- */
@media (max-width: 720px) {
	body { font-size: 15.5px; line-height: 1.55; }

	/* Container met iets minder padding maar wel ademruimte */
	.cn-container { padding: 0 1rem; }

	/* ===== Header: brand top + search eronder full-width op mobiel ===== */
	.cn-site-header {
		position: static;
		box-shadow: 0 1px 0 var(--cn-border), 0 2px 8px rgba(16,24,40,.04);
	}
	.cn-header-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: .5rem .75rem;
		padding: .7rem 0 .55rem;
	}

	/* Brand: gecentreerd, blauwe stip + naam */
	.cn-brand {
		flex: 0 0 auto;
		text-align: center;
		width: 100%;
	}
	.cn-brand a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.cn-brand strong {
		font-size: 1.15rem;
		font-weight: 700;
		letter-spacing: -0.015em;
		white-space: nowrap;
	}
	.cn-brand strong::before {
		width: 7px; height: 7px;
		margin-right: .5rem;
		box-shadow: 0 0 0 2px rgba(11,95,255,.18);
	}
	.cn-tag-line { display: none; }

	/* Nav volledig verbergen op mobiel */
	.cn-nav { display: none; }

	/* Search: volledig breed onder de brand, envelope-button rechts ernaast */
	.cn-search {
		margin-left: 0;
		flex: 1 1 auto;
	}
	.cn-search input[type="search"] { width: 100%; }
	.cn-newsletter-btn {
		width: 36px;
		height: 36px;
		margin-left: .35rem;
	}

	/* Sector-filter: horizontaal scrollbaar i.p.v. wrappen */
	.cn-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding: .6rem .25rem .75rem;
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		scrollbar-width: none;
	}
	.cn-filter::-webkit-scrollbar { display: none; }
	.cn-filter-label { flex-shrink: 0; }
	.cn-filter-item {
		flex-shrink: 0;
		scroll-snap-align: start;
		padding: .35rem .85rem;
		font-size: .82rem;
	}

	/* Main: tighter padding maar geen claustrofobie */
	.cn-main { padding: 1.25rem 1rem 2rem; }

	/* Intro hero: kleinere padding + decoratieve cirkel kleiner zodat niets afloopt */
	.cn-intro { padding: 1.5rem 1.3rem; margin-bottom: 1.75rem; border-radius: 10px; }
	.cn-intro h1 { font-size: 1.4rem; }
	.cn-intro p { font-size: .98rem; }
	.cn-intro::before { width: 160px; height: 160px; right: -50px; top: -50px; }

	/* Hero (laatste nieuws blauwe blok) */
	.cn-hero { padding: 1.6rem 1.4rem 1.4rem; border-radius: 10px; margin-bottom: 1.5rem; }
	.cn-hero::before { width: 180px; height: 180px; right: -60px; top: -60px; }
	.cn-hero::after { display: none; }
	.cn-hero-title { font-size: 1.45rem; max-width: none; }
	.cn-hero-excerpt { font-size: .98rem; line-height: 1.5; }
	.cn-hero .cn-read-more { display: block; text-align: center; }

	/* Hero briefing (homepage) */
	.cn-hero-briefing { padding: 1.4rem 1.3rem; border-radius: 10px; }
	.cn-hero-title { font-size: 1.35rem; }
	.cn-hero-exec p { font-size: 1rem; }
	.cn-hero-cta a { display: block; text-align: center; padding: .8rem 1rem; }

	/* Archive header (h1 "Sector: Zorg (NEN 7510)"): compacter op mobiel —
	   de actieve sector-pill bovenaan is al de visuele indicator. H1 blijft
	   in HTML voor SEO en screen readers. */
	.cn-archive-header { margin-bottom: 1rem; }
	.cn-archive-header h1 { font-size: 1.2rem; margin: 0 0 .25rem; }
	.cn-archive-desc { font-size: .9rem; }

	/* Newslist: grotere tap-targets, betere leesbaarheid */
	.cn-newslist-date { font-size: .88rem; margin: 1.5rem 0 .4rem; }
	.cn-newslist-items { border-radius: 10px; }
	.cn-newslist-item {
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto;
		gap: .15rem .55rem;
		padding: .7rem .85rem .7rem .65rem;
		min-height: 56px;
		align-items: start;
	}
	.cn-newslist-time {
		font-size: .8rem;
		padding-top: .15rem;
	}
	.cn-newslist-title {
		font-size: .95rem;
		line-height: 1.4;
		grid-column: 2;
		grid-row: 1;
	}
	.cn-newslist-meta {
		grid-column: 2;
		grid-row: 2;
		gap: .35rem;
		font-size: .72rem;
	}
	.cn-newslist-source {
		grid-column: 2;
		grid-row: 2;
		font-size: .72rem;
		opacity: .7;
	}

	/* Single page */
	.cn-single { padding: 1.4rem 1.15rem; border-radius: 10px; }
	.cn-single-title { font-size: 1.45rem; }
	.cn-single-summary { font-size: 1rem; }
	.cn-single-summary p { line-height: 1.6; }

	/* Source CTA full-width — duim-vriendelijk */
	.cn-source-cta { padding: 1rem .9rem; margin-top: 1.5rem; }
	.cn-source-cta-btn {
		display: block;
		padding: .85rem 1rem;
		font-size: .98rem;
	}

	/* Daily briefing fine-tuning */
	.cn-daily-title { font-size: 1.4rem; }
	.cn-daily-exec { padding: 1.2rem 1.2rem; }
	.cn-daily-exec p { font-size: .98rem; }
	.cn-daily-highlights { padding: 1rem 1.1rem; border-radius: 10px; }
	.cn-daily-board, .cn-daily-peer, .cn-daily-actions, .cn-daily-trend {
		padding: 1.1rem 1.2rem;
		border-radius: 10px;
	}
	.cn-highlight { padding: .75rem 0 .75rem 1rem; }
	.cn-highlight::before { left: -10px; width: 18px; height: 18px; font-size: .68rem; line-height: 14px; top: .85rem; }
	.cn-highlight-title { font-size: 1rem; }
	.cn-highlight-meta-grid { grid-template-columns: 1fr; gap: .5rem; }

	/* Briefing-grid stapelt */
	.cn-briefing-grid { grid-template-columns: 1fr; gap: .3rem; }
	.cn-briefing-grid dt { padding-top: .5rem; }
	.cn-briefing-section { padding: 1rem 1.1rem; }

	/* Pagination: duim-vriendelijke knoppen */
	.cn-pagination { gap: .35rem; flex-wrap: wrap; margin-top: 2rem; }
	.cn-pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		padding: .5rem .8rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	/* Frameworks-grid: 1 kolom op mobiel */
	.cn-frameworks { grid-template-columns: 1fr; gap: .85rem; }
	.cn-framework { padding: 1.1rem 1.15rem; border-radius: 10px; }

	/* Cards-grid (search e.d.) */
	.cn-grid { grid-template-columns: 1fr; gap: .9rem; }
	.cn-card { padding: 1.1rem 1.15rem; border-radius: 10px; }

	/* Footer */
	.cn-site-footer { padding: 1.4rem 0; margin-top: 2.5rem; font-size: .85rem; }
	.cn-menu-footer { gap: 1rem; }
}

/* ---------- Mobile small (≤480px, iPhone SE / smallere phones) ---------- */
@media (max-width: 480px) {
	.cn-header-inner { padding: .7rem 0; }
	.cn-brand strong { font-size: 1.05rem; }
	.cn-brand strong::before { width: 6px; height: 6px; margin-right: .4rem; }

	.cn-intro { padding: 1.3rem 1.15rem; }
	.cn-intro h1 { font-size: 1.25rem; }

	.cn-hero { padding: 1.4rem 1.2rem 1.2rem; }
	.cn-hero-title { font-size: 1.3rem; }
	.cn-hero-label { padding: 3px 9px; font-size: .68rem; }

	.cn-hero-briefing { padding: 1.2rem 1.1rem; }
	.cn-hero-title { font-size: 1.25rem; }

	.cn-newslist-item {
		grid-template-columns: 40px 1fr;
		padding: .65rem .7rem .65rem .55rem;
	}
	.cn-newslist-title { font-size: .92rem; }

	.cn-archive-header h1 { font-size: 1.1rem; }
	.cn-archive-desc { font-size: .85rem; }

	.cn-single { padding: 1.25rem 1rem; }
	.cn-single-title { font-size: 1.3rem; }

	.cn-daily-title { font-size: 1.25rem; }
}