/* =========================================================
   TRAFFIC PAGE
   ========================================================= */

.wegblok{
  display:inline-block;
  padding:2px 6px;
  font-weight:700;
  font-family:Arial, sans-serif;
  font-size:.9em;
  border-radius:3px;
  margin-right:6px;
  vertical-align:text-bottom;
}

.a-weg{ background:#cc0000; color:#fff; }
.n-weg{ background:#ffcc00; color:#000; }

/* tabs */
.traffic-feed{
  margin-top: 6px;
}

.traffic-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 6px 0 10px 0;
}

.traffic-tab{
  appearance:none;
  border:2px solid color-mix(in srgb, var(--border) 25%, transparent);
  background:color-mix(in srgb, var(--border) 25%, transparent);
  color:inherit;
  font:inherit;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;font-weight:600;
}
.traffic-tab:hover{
  appearance:none;
  border:2px solid color-mix(in srgb, var(--border) 50%, transparent);
  background:color-mix(in srgb, var(--border) 50%, transparent);
  color:inherit;
  font:inherit;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;font-weight:600;
}

.traffic-tab.is-active{
  border-color: var(--brand, #0051A2);
  box-shadow: 0 0 0 2px rgba(0,81,162,.12);
  font-weight:600;background:color-mix(in srgb, var(--border) 25%, transparent);
}

@media (prefers-color-scheme: dark){
  .traffic-tab{
    background: var(--bg);
    border-color: var(--border);
  }
  .traffic-tab.is-active{
    border-color: var(--brand, #4aa3ff);
    box-shadow: 0 0 0 2px rgba(74,163,255,.18);
  }
}

/* groups */
.traffic-road-group{
  border-top: 1px solid color-mix(in srgb, var(--border) 5%, transparent);
  padding-top: 10px;
  margin-top: 10px;
}
@media (prefers-color-scheme: dark){
  .traffic-road-group{
    border-top-color: color-mix(in srgb, var(--border) 25%, transparent);
  }
}

.traffic-road-head{
  margin-bottom: 8px;
}

/* items */
.rst_art--traffic:first-of-type{
  display:block;
  text-decoration:none;
  color:inherit;
  padding: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  overflow:hidden; /* float clear */
}

/* items */
.rst_art--traffic{
  display:block;
  text-decoration:none;
  color:inherit;
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  overflow:hidden; /* float clear */
}

@media (prefers-color-scheme: dark){
  .rst_art--traffic{
    border-bottom-color: rgba(255,255,255,.5);
  }
}

/*  underline on hover (alleen de meldingstekst) */
.rst_art--traffic:hover {
  
	background: color-mix(in srgb, var(--brand) 3.5%, transparent);
}

/*  underline on hover (alleen de meldingstekst) */
.rst_art--traffic:hover .rest_art_headline{
  text-decoration: underline;
	
}

/* afbeelding klein + rechts */
.rst_art_img_wrapper--traffic{
  width: 25px;
  height: 25px;
  overflow:hidden;
  border-radius: var(--radius);
  float:right;
  margin-left: 12px;
  margin-right: 0;
}

.rst_art_img_traffic{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rest_art_headline{
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35rem;
  width: calc(100% - 80px); /* 56px + marges */
  min-height: 44px;
  float:left;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.rest_art_meta_inf{
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  display:block;
  float:left;
  width: calc(100% - 80px);
  margin-top: 4px;
  padding-left: 0;
  background: none;
}

.pub_rst_art{
  opacity: .75;
}

.traffic-empty{
  padding: 12px 0;
  opacity: .8;
}