/* ============================================
   010 Platform — Design System
   Rotterdam Green (#00A03C) + warm neutrals
   Target: <30KB total
   ============================================ */

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

/* === DESIGN TOKENS === */
:root {
  /* Brand */
  --accent: #00A03C;
  --accent-soft: #E6F5EC;
  --accent-dark: #007A2E;

  /* Category action colors */
  --blue: #2563EB;
  --blue-soft: #EFF6FF;
  --purple: #7C3AED;
  --purple-soft: #FAF5FF;
  --orange: #D85A30;
  --orange-soft: #FFF1EC;
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --red: #DC2626;
  --star: #F59E0B;

  /* Neutrals */
  --dark: #0c0c0c;
  --text: #1a1a1a;
  --sub: #555;
  --muted: #888;
  --faint: #bbb;
  --border: #e6e3dd;
  --bg: #f7f6f3;
  --card: #ffffff;
  --warm-bg: #faf5ef;

  /* Fonts */
  --font-brand: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 14px;
  --gap-lg: 20px;
  --gap-xl: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Layout */
  --max-width: 1140px;
  --sidebar-width: 240px;
  --grid-gap: 40px;
  --main-width: calc(var(--max-width) - var(--sidebar-width) - var(--grid-gap));
}

/* === TYPOGRAPHY === */
body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }

.font-brand { font-family: var(--font-brand); }
.text-accent { color: var(--accent); }
.text-sub { color: var(--sub); }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }

/* === LAYOUT === */
.site-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--grid-gap);
}

.sidebar { min-width: 0; }

/* === CARDS === */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
  transition: box-shadow 0.15s;
}
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card--warm { background: var(--warm-bg); }
.card--dark { background: var(--dark); color: #fff; border-color: transparent; }

/* === PILLS === */
.pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--blue { background: var(--blue-soft); color: var(--blue); }
.pill--purple { background: var(--purple-soft); color: var(--purple); }
.pill--orange { background: var(--orange-soft); color: var(--orange); }
.pill--red { background: #FEF2F2; color: var(--red); }
.pill--amber { background: var(--amber-soft); color: var(--amber); }
.pill--muted { background: var(--bg); color: var(--muted); }
.pill--gratis { background: var(--accent-soft); color: var(--accent); }

/* Tier badges */
.badge-pro { background: var(--accent-soft); color: var(--accent); }
.badge-plus { background: var(--blue-soft); color: var(--blue); }
.badge-basis { background: var(--bg); color: var(--muted); }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--purple { background: var(--purple); color: #fff; }
.btn--orange { background: var(--orange); color: #fff; }
.btn--amber { background: var(--amber); color: #fff; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 5px 12px; font-size: 10px; }
.btn--lg { padding: 10px 24px; font-size: 13px; }

/* === STARS === */
.stars {
  color: var(--star);
  font-size: 12px;
  letter-spacing: -1px;
}
.stars .star-half { opacity: 0.5; }
.stars .star-empty { color: var(--border); }
.stars .review-count {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 400;
}

/* === NAVIGATION === */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nav__logo {
  height: 32px;
  width: auto;
  filter: invert(1);
  object-fit: contain;
}
.nav__brand-text {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.nav__links {
  display: flex;
  gap: 16px;
  align-items: center;
}
.nav__link {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav__link:hover { color: #fff; }
.nav__link--direct {
  color: var(--accent);
  font-weight: 700;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === LANGUAGE TOGGLE === */
.lang-bar {
  display: flex;
  gap: 4px;
}
.lang-bar__btn {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.lang-bar__btn:hover { color: rgba(255,255,255,0.7); }
.lang-bar__btn.active { background: var(--accent); color: #fff; }

/* === BREAKING NEWS BAR === */
.alert-bar {
  background: var(--red);
  color: #fff;
  padding: 8px 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-bar__badge {
  font-size: 9px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.alert-bar__title { flex: 1; font-weight: 600; }
.alert-bar__time { font-size: 10px; opacity: 0.7; white-space: nowrap; }

/* === 112 TICKER === */
.alert-bar--112 { display:flex;align-items:center;gap:10px;overflow:hidden; }
.alert-bar--112 img { height:14px !important;width:auto !important;max-height:14px !important;max-width:20px !important; }
.ticker-wrap { flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.ticker {
  display:flex;gap:0;white-space:nowrap;
  animation:ticker-scroll 30s linear infinite;
  width:max-content;
}
.ticker:hover { animation-play-state:paused; }
.ticker__item {
  display:inline-flex;align-items:center;gap:4px;
  padding:0 24px;font-weight:500;
}
.ticker__item::after {
  content:'·';margin-left:24px;opacity:.4;
}
.ticker__item:last-child::after { content:none; }
.ticker__time { font-size:10px;opacity:.6;margin-left:4px; }
@keyframes ticker-scroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* === HERO === */
.hero {
  background: var(--dark);
  color: #fff;
  padding: var(--gap-xl) 0;
  text-align: center;
  position: relative;
}
.hero__brand {
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.hero__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--gap-lg);
}

/* === SEARCH BAR === */
.search-bar {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  gap: 8px;
}
.search-bar__input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
}
.search-bar__input::placeholder { color: rgba(255,255,255,0.3); }
.search-bar__input:focus { border-color: var(--accent); }
.search-bar__btn {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* === FILTER TABS === */
.filter-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.filter-tab.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

/* === STORY CARDS === */
.story {
  display: flex;
  gap: var(--gap-md);
  padding: 10px;
  border: 1px solid rgba(0,160,60,0.15);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s;
}
.story:hover { background: var(--bg); }
.story--featured { border-left: 3px solid var(--accent); }
.story__thumb {
  width: 90px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.story__thumb img { width: 100%; height: 100%; object-fit: cover; }
.story__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.story__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.story__views { font-size: 10px; color: var(--faint); margin-top: 4px; }

/* === NEWS LIST === */
.news-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.news-list__left {
  display: flex;
  gap: 8px;
  align-items: center;
}
.news-list__title { font-size: 13px; font-weight: 500; }
.news-list__time { font-size: 10px; color: var(--faint); white-space: nowrap; margin-left: 8px; }

/* === SECTION HEADERS === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.section-header__title { font-size: 14px; font-weight: 700; }
.section-header__link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

/* === SPONSORED SECTION === */
.sponsored {
  background: var(--warm-bg);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
  border: 1px solid var(--border);
}
.sponsored__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-sm);
}
.sponsored__label {
  font-size: 9px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.sponsored__ad-label { font-size: 8px; color: var(--faint); }
.sponsored__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}
.sponsored__item + .sponsored__item { border-top: 1px solid var(--border); }
.sponsored__name { font-size: 13px; font-weight: 600; }
.sponsored__desc { font-size: 11px; color: var(--sub); }
.sponsored__area { font-size: 10px; color: var(--faint); }

/* === AD PAIR (side-by-side) === */
.ad-pair { display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md); }

/* === SIDEBAR WIDGETS === */
.widget { margin-bottom: var(--gap-lg); }
.widget__title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--gap-sm);
}

/* Event list */
.event-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.event-item:last-child { border-bottom: none; }
.event-item__title { font-size: 12px; font-weight: 600; line-height: 1.3; }
.event-item__when { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Wijken grid */
.wijken-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.wijken-grid__item {
  background: #2a2a3a;
  border-radius: var(--radius-md);
  padding: 14px 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.wijken-grid__name { font-size: 12px; font-weight: 700; color: #fff; }
.wijken-grid__count { font-size: 9px; color: rgba(255,255,255,0.5); }

/* === BREADCRUMBS === */
.breadcrumbs ol {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 10px 0;
}
.breadcrumbs li::after { content: ' > '; margin-left: 6px; }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a { color: var(--accent); }
.breadcrumbs a:hover { text-decoration: underline; }

/* === FOOTER === */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.4);
  padding: var(--gap-xl) 0 var(--gap-lg);
  margin-top: var(--gap-xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
}
.footer__heading {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--gap-sm);
}
.footer__link {
  display: block;
  font-size: 11px;
  padding: 2px 0;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer__link:hover { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--gap-md);
  font-size: 10px;
  text-align: center;
}

/* === NOSTALGIA POST === */
.nostalgia {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--card);
}
.nostalgia__title {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.nostalgia__body {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
  margin-bottom: 10px;
}
.nostalgia__stats {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}

/* === BUSINESS PAGE === */
.biz-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--gap-lg);
}
.biz-hero__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--border);
}
.biz-hero__info { padding: var(--gap-md); }
.biz-hero__name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.biz-hero__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--sub);
}

/* === HERO STORY (large first article) === */
.story--hero { display:block; margin-bottom:var(--gap-md); }
.story__thumb--hero { width:100%; height:220px; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--gap-sm); }
.story__thumb--hero img { width:100%; height:100%; object-fit:cover; }
.story__title--hero { font-size:18px; font-weight:700; line-height:1.3; }

/* === SECTION LINK === */
.section-link {
  display:block;
  text-align:right;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  margin-top:var(--gap-sm);
  padding:6px 0;
}
.section-link:hover { text-decoration:underline; }

/* === NOSTALGIA CARD === */
.nostalgia-card {
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  margin:var(--gap-lg) 0;
}
.nostalgia-card__img { width:100%; height:200px; object-fit:cover; }
.nostalgia-card__body { padding:var(--gap-md); }
.nostalgia-card__title { font-size:16px; font-weight:700; margin-top:6px; }
.nostalgia-card__views { font-size:11px; color:var(--faint); margin-top:4px; }

/* === SIDEBAR CTA (Ondernemer) === */
.sidebar-cta {
  background:var(--dark);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:var(--gap-lg);
  margin-bottom:var(--gap-md);
}
.sidebar-cta__title { font-size:14px; font-weight:700; margin-bottom:6px; }
.sidebar-cta__desc { font-size:12px; color:rgba(255,255,255,0.7); margin-bottom:4px; }
.sidebar-cta__reach { font-size:11px; color:var(--accent); font-weight:600; margin-bottom:var(--gap-md); }

/* === NEWSLETTER === */
.newsletter {
  background:var(--warm-bg);
  border-radius:var(--radius-lg);
  padding:var(--gap-lg);
  margin-bottom:var(--gap-md);
}
.newsletter__title { font-size:14px; font-weight:700; margin-bottom:4px; }
.newsletter__desc { font-size:12px; color:var(--sub); margin-bottom:var(--gap-md); }
.newsletter-form { display:flex; gap:6px; }
.newsletter__input {
  flex:1;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:13px;
  background:#fff;
}
.newsletter__btn {
  padding:8px 14px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.newsletter__btn:hover { background:var(--accent-dark); }

/* === OV SECTION (line badges + alerts) === */
.ov-section { margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.ov-section:last-of-type { border-bottom:none; }
.ov-section__label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }

/* Line badges — metro (filled), tram (outlined), waterbus, bus */
.ov-line-badges { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.ov-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 5px;
  border-radius:4px; font-size:10px; font-weight:700;
  color:#fff; position:relative; cursor:default;
  transition:transform 0.15s, box-shadow 0.15s;
}
.ov-badge--clickable { cursor:pointer; }
.ov-badge--clickable:hover { transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:2; }
.ov-badge--clickable:active { transform:scale(1.05); }
.ov-badge--active { transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,0.25); z-index:2; }
.ov-badge--bus { background:var(--sub); color:#fff; }
.ov-badge--tram {
  background:transparent; border:2px solid; color:inherit;
  height:20px; line-height:16px;
}
.ov-badge--water {
  background:var(--blue); color:#fff;
}
.ov-badge--alert { animation:ov-pulse 1.5s ease-in-out infinite; }
.ov-badge__warn {
  position:absolute; top:-4px; right:-4px;
  width:10px; height:10px; border-radius:50%;
  background:var(--red); color:#fff;
  font-size:7px; line-height:10px; text-align:center;
}
@keyframes ov-pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

/* Alert message under badges */
.ov-alert-msg { font-size:10px; color:var(--red); margin:2px 0; line-height:1.3; }

/* Route detail panel (shows on badge click) */
.ov-route-panel {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:10px; margin:8px 0; animation:ov-panel-in 0.2s ease-out;
}
@keyframes ov-panel-in { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
.ov-route-panel__header {
  display:flex; align-items:center; gap:6px; margin-bottom:6px;
}
.ov-route-panel__badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 6px;
  border-radius:4px; font-size:11px; font-weight:700; color:#fff;
}
.ov-route-panel__title { font-size:11px; font-weight:600; color:var(--text); flex:1; }
.ov-route-panel__close {
  background:none; border:none; font-size:16px; color:var(--muted); cursor:pointer;
  padding:0 4px; line-height:1;
}
.ov-route-panel__close:hover { color:var(--text); }
.ov-route-panel__route { font-size:10px; color:var(--muted); margin-bottom:6px; }
.ov-route-panel__stops {
  display:flex; flex-direction:column; gap:0; position:relative;
  padding-left:14px;
}
.ov-route-panel__stops::before {
  content:''; position:absolute; left:4px; top:6px; bottom:6px;
  width:2px; border-radius:1px;
}
.ov-route-stop {
  font-size:10px; color:var(--sub); padding:2px 0;
  position:relative; line-height:1.4;
}
.ov-route-stop::before {
  content:''; position:absolute; left:-14px; top:6px;
  width:6px; height:6px; border-radius:50%; border:2px solid;
  background:#fff;
}
.ov-route-stop:first-child::before,
.ov-route-stop:last-child::before {
  background:currentColor; width:8px; height:8px; left:-15px; top:5px;
}
.ov-route-stop:first-child,
.ov-route-stop:last-child { font-weight:600; color:var(--text); }

/* Highway traffic items */
.ov-highway {
  display:flex; align-items:center; gap:6px;
  padding:3px 0; font-size:11px;
}
.ov-highway--jam { font-weight:500; }
.ov-highway__road {
  font-weight:700; font-size:10px;
  background:var(--dark); color:#fff;
  padding:1px 5px; border-radius:3px;
  min-width:28px; text-align:center;
}
.ov-highway__icon { font-size:8px; line-height:1; }
.ov-highway__msg { flex:1; color:var(--sub); font-size:10px; }
.ov-highway__delay { font-weight:700; color:var(--red); font-size:10px; white-space:nowrap; }

/* Legacy OV items (used on verkeer page detail view) */
.ov-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:12px;
  border-bottom:1px solid var(--border);
}
.ov-item:last-child { border-bottom:none; }
.ov-item--alert { color:var(--red); }
.ov-item__type { font-weight:700; min-width:40px; font-size:11px; }
.ov-item__line { font-weight:600; min-width:30px; }
.ov-item__msg { color:var(--muted); flex:1; }

/* === EVENT ITEM COMPACT (sidebar) === */
.event-item--compact {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  font-size:12px;
  border-bottom:1px solid var(--border);
  color:inherit;
}
.event-item--compact:last-child { border-bottom:none; }
.event-item__title { font-weight:500; flex:1; }
.event-item__date { font-size:11px; color:var(--muted); white-space:nowrap; margin-left:8px; }

/* === EVENT ITEM (card) === */
.event-item {
  padding:10px;
  border-radius:var(--radius-md);
  transition:background 0.15s;
  cursor:pointer;
}
.event-item:hover { background:var(--bg); }
.event-item__title { font-size:14px; font-weight:600; }
.event-item__when { font-size:12px; color:var(--muted); margin-top:2px; }

/* === SIDEBAR WIDGET === */
.sidebar-widget { margin-bottom:var(--gap-lg); }
.sidebar-widget__more {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  margin-top:var(--gap-sm);
  padding:4px 0;
}
.sidebar-widget__more:hover { text-decoration:underline; }

/* === SIDEBAR SKELETON (AJAX loading) === */
.skeleton-lines { display:flex;flex-direction:column;gap:8px;padding:8px 0; }
.skeleton-line {
  height:14px;
  background:linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
  background-size:200% 100%;
  border-radius:4px;
  animation:skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line:nth-child(2) { width:80%; }
.skeleton-line:nth-child(3) { width:60%; }
@keyframes skeleton-pulse {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* === WIJKEN GRID === */
.wijken-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
}
.wijken-grid__item {
  display:block;
  padding:6px 10px;
  font-size:11px;
  font-weight:500;
  background:var(--bg);
  border-radius:var(--radius-sm);
  text-align:center;
  transition:background 0.15s;
}
.wijken-grid__item:hover { background:var(--accent-soft); color:var(--accent-dark); }

/* === PAGINATION === */
.pagination {
  display:flex;
  gap:4px;
  justify-content:center;
  align-items:center;
  margin:var(--gap-xl) 0;
}
.pagination__link {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:500;
  color:var(--sub);
  transition:background 0.15s;
}
.pagination__link:hover { background:var(--bg); }
.pagination__link--active {
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.pagination__dots { font-size:12px; color:var(--muted); padding:0 4px; }

/* === PRICING GRID === */
.pricing-grid { margin-bottom:var(--gap-xl); }

/* === BREADCRUMBS === */
.breadcrumbs {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
  padding:8px 0;
}
.breadcrumbs a { color:var(--accent); }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs__sep { color:var(--faint); }

/* Vacature detail */
.vacature-detail { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px; }
.vacature-detail__header { margin-bottom:var(--gap-md); }
.vacature-detail__company { display:flex; align-items:center; gap:10px; margin-bottom:var(--gap-sm); }
.vacature-detail__company-name { font-weight:600; font-size:14px; color:var(--accent); }
.vacature-detail__company-name:hover { text-decoration:underline; }
.vacature-detail__visual { width:100%; border-radius:8px; margin:var(--gap-sm) 0; }
.vacature-detail__title { font-size:20px; font-weight:700; margin:var(--gap-sm) 0; }
.vacature-detail__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vacature-detail__salary { background:var(--accent-soft); padding:10px 14px; border-radius:8px; font-size:13px; margin:var(--gap-md) 0; }
.vacature-detail__body { font-size:14px; line-height:1.7; color:var(--sub); margin:var(--gap-md) 0; }
.vacature-detail__body h2, .vacature-detail__body h3 { margin:var(--gap-md) 0 var(--gap-xs); font-size:15px; color:var(--text); }
.vacature-detail__body ul, .vacature-detail__body ol { padding-left:20px; margin:var(--gap-xs) 0; }
.vacature-detail__body li { margin-bottom:4px; }
.vacature-detail__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--gap-md); }

/* === MOBILE NAV TOGGLE === */
.nav__mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav__mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile-menu {
  display: none;
  background: var(--dark);
  padding: var(--gap-sm) 16px var(--gap-md);
}
.nav__mobile-menu[aria-hidden="false"] { display: block; }
.nav__mobile-link {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__mobile-link:hover { color: #fff; }
.nav__mobile-link--direct { color: var(--accent); font-weight: 700; }
.nav__mobile-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }

/* === RESPONSIVE === */

/* Mobile: 0-767px */
@media (max-width: 767px) {
  .grid-2col { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__link--mijn { display: none; }
  .nav__mobile-toggle { display: flex; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .story__thumb { width: 70px; height: 56px; }
  .story__title { font-size: 14px; }
  .story__thumb--hero { height: 160px; }
  .filter-tabs { padding: 10px 0; overflow-x: auto; flex-wrap: nowrap; }
  h1 { font-size: 18px; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .addons-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ad-pair { grid-template-columns: 1fr; }
  .bestel-grid { grid-template-columns: 1fr !important; }
  .newsletter-form { flex-direction: column; }
  .hero__brand { font-size: 26px; }
  .hero__subtitle { font-size: 12px; }
  .search-bar { flex-direction: column; }
  .search-bar__input { font-size: 16px; /* Prevents iOS zoom */ }
  .site-wrap { padding: 0 12px; }
  .card { padding: 12px; }
  .biz-hero__img { height: 160px; }
  .alert-bar { font-size: 11px; padding: 6px 12px; }
  .lang-bar { gap: 2px; }
  .lang-bar__btn { padding: 2px 6px; font-size: 9px; }
}

/* Tablet: 768-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .addons-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .nav__links { gap: 10px; }
  .nav__link { font-size: 11px; }
  .grid-2col { grid-template-columns: 1fr 220px; gap: var(--gap-lg); }
  .story__thumb { width: 80px; height: 64px; }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .nav__mobile-toggle { display: none; }
  .nav__mobile-menu { display: none !important; }
}