/* =====================================================
   WR STIJL v1.0.0 — Facelift voor het WestlandReport thema
   Laadt NA het thema en verfijnt kleuren, typografie,
   kaarten, ticker, sidebar, banners en footer.
   ===================================================== */

/* ---------- 1. HUISSTIJL-VARIABELEN ---------- */
:root {
	--oranje: #E8620A;
	--oranje-donker: #c44e00;
	--donkerblauw: #0D1B2A;
	--donkerblauw-licht: #16283c;
	--grijs: #f5f6f8;
	--grijs2: #eef0f3;
	--lijn: #e4e7ec;
	--tekst: #1c2530;
	--tekst-licht: #6b7684;
	--schaduw: 0 1px 3px rgba(13,27,42,.07), 0 4px 14px rgba(13,27,42,.06);
	--schaduw-hover: 0 6px 18px rgba(13,27,42,.13), 0 2px 6px rgba(13,27,42,.08);
	--radius: 12px;
	--radius-klein: 8px;
	--overgang: .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. BASISTYPOGRAFIE ---------- */
body {
	font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif !important;
	color: var(--tekst);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.side-body-title, .cat-tab, .breaking-label,
.side-label, .live-badge, .logo, .site-title {
	font-family: 'Oswald', 'Barlow Condensed', sans-serif !important;
	letter-spacing: .2px;
}

h2, h3 { line-height: 1.25; }

p { line-height: 1.7; }

a { transition: color var(--overgang); }

::selection { background: var(--oranje); color: #fff; }

/* Strakkere focus voor toegankelijkheid */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--oranje);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------- 3. HEADER ---------- */
#masthead, .site-header, header.site-header {
	box-shadow: 0 1px 0 var(--lijn), 0 3px 12px rgba(13,27,42,.05);
	background: #fff;
}

.live-badge {
	background: var(--oranje) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 4px 14px 4px 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	font-size: 12px !important;
	letter-spacing: 1px !important;
	box-shadow: 0 2px 8px rgba(232,98,10,.35);
}
.live-dot {
	background: #fff !important;
	animation: wr-pulse 1.4s ease-in-out infinite;
}
@keyframes wr-pulse {
	0%,100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(.8); }
}

.search-toggle, .menu-toggle {
	background: var(--grijs) !important;
	border: 1px solid var(--lijn) !important;
	border-radius: var(--radius-klein) !important;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background var(--overgang), border-color var(--overgang);
}
.search-toggle:hover, .menu-toggle:hover {
	background: var(--grijs2) !important;
	border-color: var(--oranje) !important;
}

/* Hoofdmenu */
.main-navigation a, #primary-navigation a, .hoofd-nav a {
	font-family: 'Oswald', sans-serif !important;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .8px;
	font-weight: 500;
	position: relative;
}
.main-navigation > ul > li > a:hover,
#primary-navigation > ul > li > a:hover {
	color: var(--oranje) !important;
}

/* Dropdowns strakker */
.main-navigation ul ul, #primary-navigation ul ul, nav .sub-menu {
	border-radius: var(--radius-klein) !important;
	box-shadow: var(--schaduw-hover) !important;
	border: 1px solid var(--lijn) !important;
	overflow: hidden;
}

/* ---------- 4. BREAKING TICKER ---------- */
.breaking-bar {
	background: var(--donkerblauw) !important;
	border: none !important;
}
.breaking-label {
	background: var(--oranje) !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	display: flex; align-items: center;
	padding: 0 18px !important;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ticker-inner a {
	color: #e8edf3 !important;
	font-size: 14.5px;
	font-weight: 400;
}
.ticker-inner a:hover { color: var(--oranje) !important; }

/* ---------- 5. ADVERTENTIE-LICHTKRANT (LED ticker) rustiger ---------- */
.wr-lichtbalk, .lichtbalk, [class*="lichtbalk"] {
	border-radius: var(--radius-klein) !important;
	overflow: hidden;
}

/* ---------- 6. HERO + NET BINNEN ---------- */
.hero-slider {
	border-radius: var(--radius) !important;
	overflow: hidden !important;
	box-shadow: var(--schaduw) !important;
}
.hero-slider img { transition: transform .5s ease; }
.hero-slider a:hover img { transform: scale(1.03); }

.hero-side .side-label, .side-label {
	color: var(--donkerblauw) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	border-left: 4px solid var(--oranje);
	padding-left: 10px;
}

.side-item {
	border-radius: var(--radius-klein);
	transition: background var(--overgang);
	padding: 8px !important;
}
.side-item:hover { background: var(--grijs); }
.side-thumb img {
	border-radius: var(--radius-klein) !important;
}
.side-body-title a { color: var(--tekst) !important; }
.side-body-title a:hover { color: var(--oranje) !important; }
.side-body-cat a {
	color: var(--oranje) !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
}
.side-body-time { color: var(--tekst-licht) !important; font-size: 12px; }

/* ---------- 7. CATEGORIE-TABS ---------- */
.cat-bar {
	background: #fff !important;
	border-top: 1px solid var(--lijn) !important;
	border-bottom: 1px solid var(--lijn) !important;
}
.cat-tab {
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	background: var(--grijs) !important;
	color: var(--tekst) !important;
	border: 1px solid transparent !important;
	transition: all var(--overgang) !important;
	margin: 3px 4px 3px 0;
	display: inline-block;
}
.cat-tab:hover {
	background: #fff !important;
	border-color: var(--oranje) !important;
	color: var(--oranje) !important;
}
.cat-tab.current-cat, .cat-tab.active {
	background: var(--donkerblauw) !important;
	color: #fff !important;
}

/* ---------- 8. NIEUWSKAARTEN (grid) ---------- */
.news-card, .card-news, .grid-card, .post-card,
main article.post, .nieuws-kaart, .regional-post {
	background: #fff;
	border-radius: var(--radius) !important;
	border: 1px solid var(--lijn) !important;
	box-shadow: var(--schaduw) !important;
	overflow: hidden !important;
	transition: transform var(--overgang), box-shadow var(--overgang) !important;
}
.news-card:hover, .card-news:hover, .grid-card:hover, .post-card:hover,
main article.post:hover, .nieuws-kaart:hover, .regional-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--schaduw-hover) !important;
}

/* Afbeeldingen in kaarten: zachte zoom op hover */
.news-card img, .card-news img, .grid-card img, .post-card img,
.regional-post img {
	transition: transform .45s ease !important;
	display: block;
}
.news-card:hover img, .card-news:hover img, .grid-card:hover img,
.post-card:hover img, .regional-post:hover img {
	transform: scale(1.04);
}

/* Kaarttitels */
.news-card h3 a, .card-news h3 a, .grid-card h3 a, .post-card h3 a,
.regional-post h3 a, main article h2 a, main article h3 a {
	color: var(--tekst) !important;
	text-decoration: none !important;
}
.news-card h3 a:hover, .card-news h3 a:hover, .grid-card h3 a:hover,
.post-card h3 a:hover, .regional-post h3 a:hover,
main article h2 a:hover, main article h3 a:hover {
	color: var(--oranje) !important;
}

/* Categorielabels in kaarten */
.card-cat, .cat-label, .news-card .cat, .post-categorie,
a[rel="category tag"], .cat-links a {
	display: inline-block;
	background: rgba(232,98,10,.1);
	color: var(--oranje) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 11px !important;
	letter-spacing: 1.2px;
	padding: 3px 10px;
	border-radius: 4px;
	text-decoration: none !important;
}

/* Meta-regel (datum / leestijd) */
.post-meta, .entry-meta, .card-meta, .meta {
	color: var(--tekst-licht) !important;
	font-size: 12.5px !important;
}

/* ---------- 9. SECTIETITELS ---------- */
.section-title, .sectie-titel, .home-section h2,
main > section > h2, .widget-title, .widget h3, h2.wp-block-heading {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--donkerblauw) !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	position: relative;
	padding-left: 14px !important;
}
.section-title::before, .sectie-titel::before, .home-section h2::before,
main > section > h2::before, .widget-title::before, .widget h3::before,
h2.wp-block-heading::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 5px; height: 1em;
	background: var(--oranje);
	border-radius: 3px;
}

/* "Alles bekijken →" links */
.section-more, .alles-bekijken, .more-link {
	color: var(--oranje) !important;
	font-weight: 600 !important;
	font-size: 14px;
}
.section-more:hover, .alles-bekijken:hover, .more-link:hover {
	color: var(--oranje-donker) !important;
}

/* ---------- 10. SIDEBAR & WIDGETS ---------- */
.widget, .sidebar .widget, #secondary .widget {
	background: #fff;
	border: 1px solid var(--lijn) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--schaduw) !important;
	padding: 20px !important;
	margin-bottom: 24px !important;
}

/* Meest gelezen nummering */
.most-read li, .meest-gelezen li {
	border-bottom: 1px solid var(--lijn);
	padding: 10px 0;
}
.most-read li:last-child, .meest-gelezen li:last-child { border-bottom: none; }
.number-badge, .most-read-number, .meest-gelezen .nummer {
	background: var(--donkerblauw) !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-family: 'Oswald', sans-serif !important;
	font-weight: 600 !important;
}

/* Rubrieken / categorielijsten */
.widget_categories li a, .widget ul.rubrieken li a {
	color: var(--tekst) !important;
}
.widget_categories li a:hover { color: var(--oranje) !important; }
.widget_categories li { border-bottom: 1px dashed var(--lijn); padding: 7px 0; }
.widget_categories li:last-child { border-bottom: none; }

/* ---------- 11. ADVERTENTIES / BANNERS ---------- */
.advertentie-blok, .ad-leaderboard {
	border-radius: var(--radius-klein);
	overflow: hidden;
}
.advertentie-blok img, .ad-leaderboard img,
.banner img, a > img[src*="banner"], a > img[src*="Banner"] {
	border-radius: var(--radius-klein) !important;
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--overgang);
}
.advertentie-blok a:hover img, .ad-leaderboard a:hover img { opacity: .92; }

/* ---------- 12. KNOPPEN & FORMULIEREN ---------- */
button, input[type="submit"], .button, .btn, .wp-block-button__link {
	font-family: 'Oswald', sans-serif !important;
	text-transform: uppercase;
	letter-spacing: .8px;
	border-radius: var(--radius-klein) !important;
	transition: all var(--overgang) !important;
}
input[type="submit"], .button, .btn, .wp-block-button__link {
	background: var(--oranje) !important;
	color: #fff !important;
	border: none !important;
	padding: 11px 24px !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 8px rgba(232,98,10,.3);
	cursor: pointer;
}
input[type="submit"]:hover, .button:hover, .btn:hover,
.wp-block-button__link:hover {
	background: var(--oranje-donker) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(232,98,10,.4);
}

input[type="text"], input[type="email"], input[type="search"], textarea, select {
	border: 1px solid var(--lijn) !important;
	border-radius: var(--radius-klein) !important;
	padding: 10px 14px !important;
	font-family: 'Source Sans 3', sans-serif !important;
	font-size: 15px;
	transition: border-color var(--overgang), box-shadow var(--overgang);
	background: #fff;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
	border-color: var(--oranje) !important;
	box-shadow: 0 0 0 3px rgba(232,98,10,.12) !important;
	outline: none !important;
}

/* ---------- 13. ARTIKELPAGINA ---------- */
.single .entry-content, .single-post .entry-content {
	font-size: 17.5px;
	line-height: 1.8;
}
.single .entry-content img, .single-post .entry-content img {
	border-radius: var(--radius) !important;
}
.single .entry-title, .single-post h1.entry-title {
	font-size: clamp(28px, 4vw, 42px) !important;
	line-height: 1.2 !important;
	color: var(--donkerblauw) !important;
}
.entry-content blockquote {
	border-left: 4px solid var(--oranje) !important;
	background: var(--grijs);
	border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
	padding: 16px 22px !important;
	font-style: italic;
}

/* ---------- 14. FOOTER ---------- */
.site-footer, footer.site-footer, #colophon {
	background: var(--donkerblauw) !important;
	color: #b9c4d0;
}
.site-footer h4, .site-footer .widget-title, footer h4 {
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px !important;
	padding-left: 0 !important;
	border-bottom: 2px solid var(--oranje);
	display: inline-block;
	padding-bottom: 6px !important;
	margin-bottom: 14px !important;
}
.site-footer h4::before, .site-footer .widget-title::before { display: none; }
.site-footer a, footer.site-footer a, #colophon a {
	color: #b9c4d0 !important;
	text-decoration: none;
}
.site-footer a:hover, footer.site-footer a:hover, #colophon a:hover {
	color: var(--oranje) !important;
}
.site-footer ul li, #colophon ul li { padding: 4px 0; }

/* ---------- 15. ALGEMENE POLISH ---------- */
html { scroll-behavior: smooth; }

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

/* Iframes (games, weer, kaarten) strak afgerond */
main iframe, .entry-content iframe {
	border-radius: var(--radius) !important;
	border: 1px solid var(--lijn) !important;
}

/* Pagination */
.page-numbers {
	border-radius: var(--radius-klein) !important;
	border: 1px solid var(--lijn) !important;
	padding: 8px 14px !important;
	color: var(--tekst) !important;
	transition: all var(--overgang);
}
.page-numbers.current, .page-numbers:hover {
	background: var(--oranje) !important;
	color: #fff !important;
	border-color: var(--oranje) !important;
}

/* Nette scrollbar (Chrome/Edge) */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--grijs); }
::-webkit-scrollbar-thumb {
	background: #c3ccd6;
	border-radius: 6px;
	border: 2px solid var(--grijs);
}
::-webkit-scrollbar-thumb:hover { background: var(--oranje); }

/* ---------- 16. MOBIEL ---------- */
@media (max-width: 768px) {
	.cat-tab { font-size: 12.5px !important; padding: 5px 12px !important; }
	.section-title, .sectie-titel { font-size: 20px !important; }
	.single .entry-content { font-size: 16.5px; }
	.news-card:hover, .card-news:hover, .post-card:hover {
		transform: none; /* geen lift-effect op touch */
	}
}