.news-home h3 > a {
	color: #82bf5a;
}
.news-home .news-home__article--main {
	float: none;
	width: auto;
	padding: 0;
}
.news-home .news-home__articles_small {
	border-bottom: 0;
	background: white;
}
	.news-home .news-home__articles_small .news-home__article {
		min-height: 0;
	}
	.news-home .news-home__articles_small .news-home__article--small {
		padding: 5px 20px;
	}
.news-home  .read-all-news {
	background: white;
	padding: 6px 15px 6px 15px;
}
.news-home .news-home__all {
	float: none;
}
.facebook-plugin {
	background: white;
	clear: both;
}
.facebook-plugin-inner{
	padding: 25px;
}
.facebook-plugin-inner * {
	width: 100% !important;
}


.news-home__wrapper {
	clear: both;
}
/* Rebuild (2026-08-26): the lead photo goes through <vw-image> inside a column, not as a
   floated 110%-wide img (live's .news-home__article__image). The wrapper fills its column and
   the three small rows are Bootstrap columns above md, so they need a top margin on the phone
   where they stack. */
.news-home__article__media { display: block; }
.news-home__article__media img { width: 100%; height: auto; display: block; }
.news-home .news-home__articles_small { margin-top: 15px; }
.news-home time { display: block; color: #786e65; }
@media (max-width: 767px) {
	.news-home__article__media { margin-bottom: 15px; }
}

.contact-list {

}
    .contact-list li {
        margin-bottom: 1rem;
    }

a.maps-link {
    color: #82bf5a;
    text-decoration: underline;
}

.u-bg-white {
	background-color: #fff;
}

.u-mb-40 {
	margin-bottom: 40px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header__subnav > li {
        margin-left: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header__subnav {
        padding-left: 0;
    }

    .header__subnav > li {
      margin-left: 10px;
    }
}

@media (max-width: 768px) {
	.news-home .col-sm-5 h2 {
		margin-top: 20px;
	}
	.facebook-plugin-inner{
		padding: 20px 10px;
	}
}

/* ── Flicker-slider (detail page photo carousel) ── */
.flicker-slider {
    position: relative;
    height: 520px;
    overflow: hidden;
}
.flicker-slider .vw-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.flicker-slider .vw-slide--active {
    opacity: 1;
}
.flicker-slider .dot-navigation {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flicker-slider .dot-navigation .dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
@media (max-width: 767px) {
    .flicker-slider { height: 300px; }
}

/* old-site scroll-in elements start hidden until activated */
.interactive--slideleft,
.interactive--slideright,
.interactive--slidedown,
.interactive--slideup {
    opacity: 0;
}
.interactive--active {
    opacity: 1;
}

/* ── Case carousel ── */
.carousel {
    position: relative;
    overflow: hidden;
}
.carousel__track {
    display: flex;
    transition: transform 0.4s ease;
}
.carousel__slide {
    min-width: 100%;
    flex-shrink: 0;
    padding: 40px 0 75px;
}
.carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-bottom: 20px;
}
.carousel__prev,
.carousel__next,
.carousel__pause {
    background: none;
    border: 2px solid #82be5a;
    color: #82be5a;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.carousel__prev:hover,
.carousel__next:hover,
.carousel__pause:hover {
    background: #82be5a;
    color: #fff;
}
.carousel__prev:disabled,
.carousel__next:disabled {
    opacity: 0.35;
    cursor: default;
}
/* ‖ and ▶ are heavier than the ‹ › chevrons at the same size, and ▶ has no room
   left of centre for the optical offset a triangle wants. */
.carousel__pause {
    font-size: 16px;
}
.carousel__pause[aria-pressed="true"] {
    font-size: 14px;
    padding-left: 3px;
}
.carousel__counter {
    font-size: 13px;
    color: #666;
    min-width: 40px;
    text-align: center;
}


/* ── Quicky dropdown: reachable without a mouse ───────────────────────────
   The legacy rule opens the panel on `:hover` only, which leaves its links
   display:none — so no keyboard visitor can reach the six offerte pages, and a
   touch visitor gets a tap that follows the tile link and nothing else.

   Focusing the tile is the keyboard equivalent of pointing at it, and
   :focus-within on the wrapper says exactly that. Because the tile <a> sits
   inside the wrapper, tabbing to it opens the panel, which makes the links
   themselves focusable — so the whole panel is walkable with Tab, and closes
   again as focus leaves. No script, and no ARIA that would promise a widget
   this is not. */
.quicky__dropdown-wrap:focus-within .quicky__dropdown {
	display: block;
}

.quicky__dropdown-wrap:focus-within .quicky__link {
	border-color: #aaa;
}

/* ── Home hero: the old homepage's own geometry, not the detail hero's ────
   home.cshtml reuses .imageheader, but the old homepage hero was a separate
   component (.flicker-slider--home + .flick-content). Measured against live at
   1440: a 1170 container centred in the viewport, the text left-aligned in a
   540px column starting 30px inside it, vertically centred in a 600px band,
   h1 48px, intro 18px, CTA 21px. The detail hero instead centres an 800px box
   against the bottom edge and, at ≥1439px, scales all of its text by 1.1em —
   which is why the homepage heading read 52.8px and the intro 21px.

   Scoped to the modifier so every other .imageheader keeps its own behaviour. */
.imageheader--home {
	/* Cancels the ≥1439px `.imageheader{font-size:1.1em}` bump. The old homepage
	   hero inherited the 16px body size at every width. */
	font-size: 16px;
}

/* The detail hero darkens only its bottom 60% with a gradient, because its text sits
   against the bottom edge. This text is vertically centred, so it needs the old
   homepage's flat 50% black over the whole photo — otherwise the heading lands on
   whatever the photo happens to be doing there. */
.imageheader--home::after {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	min-height: 0;
}

.imageheader--home .imageheader__inner {
	left: 50%;
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 1170px;
	margin-left: 0;
	/* 30px = the container's 15px gutter plus the column's own 15px, collapsed. */
	padding: 0 30px;
	text-align: left;
}

.imageheader--home .imageheader__col {
	max-width: 540px;
}

.imageheader--home .imageheader__heading {
	margin: 0;
}

.imageheader--home .imageheader__text {
	font-size: 1.125em;
	margin: 25px 0 0;
}

.imageheader--home .btn {
	margin-top: 25px;
}

@media (max-width: 767px) {
	/* One column, so the text takes the width it has; 540px would leave it in a
	   narrow ribbon down the middle of the photo. */
	.imageheader--home .imageheader__col {
		max-width: none;
	}

	.imageheader--home .imageheader__inner {
		padding: 0 15px;
	}
}

/* Below 681px vw-components.css turns the shared .imageheader into a stacked
   header — photo on top, dark text under it — which is right for a pillar or
   detail page and wrong here: the old homepage slider overlays white text on the
   photo at every width. Worse, that block only moves .imageheader__inner back
   into flow; the translate(-50%,-50%) above still applied, so the text was pulled
   half its own height off the top of the section and clipped, in dark grey, over
   the photo. Measured at 360: h1 at y=-148 against live's y=40.

   Reproduce live's mobile hero instead: the inner in flow so its content sets the
   height (live measures 467px at 360 and bottoms out near 405 as the text rewraps),
   the photo covering behind it, white type throughout. */
@media (max-width: 680px) {
	.imageheader--home {
		min-height: 405px;
	}

	.imageheader--home .imageheader__inner {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		transform: none;
		/* 22px is live's own text inset at this width. */
		padding: 40px 22px;
	}

	.imageheader--home .imageheader__inner,
	.imageheader--home .imageheader__text,
	.imageheader--home .imageheader__heading {
		color: #fff;
	}

	/* .btn, not .btn--default: the stacked-header block darkens every button in an
	   .imageheader because its text sits on white there. The homepage CTA is the
	   green .btn--primary pill and keeps its white label, as on live. */
	.imageheader--home .btn {
		color: #fff;
		border-color: #fff;
	}
}

/* ── Infographic film ─────────────────────────────────────────────────────
   The old site's .infographic--video wrapped a fixed 640×360 <video> in a
   full-width band. This is the same block rebuilt: the film sits in the reading
   column like the captioned photo beside it, and scales instead of being pinned
   to one size. .component--photo__sub supplies the caption column width, so the
   text under a film lines up with the text under a photo. */
.component--video {
	margin: 40px 0;
}

.component--video__player {
	display: block;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 0 auto;
	background: #000;
}

.component--video__sub {
	max-width: 700px;
	margin: 15px auto 0;
	font-size: 14px;
	color: #786e65;
}

.component--video__heading {
	max-width: 700px;
	margin: 0 auto 15px;
}

/* ── Round card thumbnails ────────────────────────────────────────────────
   The old site's .block__thumb--round drops the fixed 200px height of a normal
   thumb and relies on the image to size the box. That worked because the old
   markup's <img> carried no width/height attributes; ResponsiveImageTagHelper
   emits them deliberately, to reserve the box against layout shift. With
   .block__thumb img setting only width:100%, the attribute height then wins and
   a 600×600 source in a 270px column renders 270 wide by 600 tall — a tall
   ellipse instead of a circle. That is what the two bands at the foot of /afval
   looked like.

   aspect-ratio makes the box square before the image decodes, so the circle is
   round at every column width and nothing shifts. object-fit:cover then keeps a
   source that is not perfectly square from stretching — it fills the circle and
   the edges are cropped, which is what a circular crop means anyway. */
.block__thumb--round {
	aspect-ratio: 1 / 1;
	height: auto;
}

.block__thumb--round img,
.block__thumb--round picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Square card thumbnails ───────────────────────────────────────────────
   The same bug as above, in the variant that kept its fixed height. A normal
   .block__thumb is a 200px band with overflow:hidden, and .block__thumb img
   sets only width:100% — so the tag helper's height attribute survives as a
   presentational hint and an 800×600 crop in a 270px column draws 270 wide by
   600 tall. Stretched to nearly 3×, then the band shows the middle of it.
   That is the skew on the /afval/containers cards.

   height:100% + object-fit:cover fills the band and crops instead, which is
   what a fixed-height thumbnail meant all along. height:auto would honour the
   ratio too, but it letterboxes between 1200 and 1399, where the container is
   1140, a col-lg-3 is ~255px and 4:3 falls ~9px short of the 200px box.

   --round is excluded because it sizes itself (above); --small (170px) and
   --full are covered — both are the same band with a different height. */
.block__thumb:not(.block__thumb--round) img {
	height: 100%;
	object-fit: cover;
}

/* ── Infographic circles ─────────────────────────────────────────────────
   Two rules the rebuilt `infographicCirclesBlock` needs, both undoing an
   assumption in vw-components.css rather than styling anything new.

   1. The circles are painted at scale(0.8) and grow to 1 when the old
      site's script adds .interactive--active on scroll. This site.js does
      not set that class, so without this every circle would sit at 80% of
      its box forever — a component that looks subtly wrong with nothing in
      the markup to explain it. Settled at full size rather than adding
      another scroll-driven animation, which would need a
      prefers-reduced-motion escape of its own.

   2. `@media (max-width: 767px) { .infographic { display: none } }` hides
      the whole component on phones, because live shipped a second
      `visible-xs` copy of every row to take over there. One responsive row
      here instead, so the band has to survive below 767: the fixed height
      and the vertical centring both go, and the steps stack.

   The green arrow between the steps (a :after with a fontello glyph) is
   dropped in the stacked layout — it points sideways at a step that is now
   underneath.

   height:auto is the third, and it is the same trap .block__thumb hit
   below: the circle is sized `width: 90%` and nothing sets a height, so
   the tag helper's height attribute survives as a presentational hint.
   A 300×300 crop in a 285px column then draws 257 wide by 300 tall, and
   border-radius:50% turns that into an ellipse rather than a circle. */
.infographic--circles__circle {
	transform: none;
	height: auto;
}

@media screen and (max-width: 767px) {
	.infographic--circles {
		display: block;
		height: auto;
	}

	.infographic--circles > div {
		position: static;
		top: auto;
		transform: none;
		float: none;
		width: 100%;
		margin-bottom: 2em;
	}

	.infographic--circles > div:last-child {
		margin-bottom: 0;
	}

	/* The three-circle "triad" step positions its circles absolutely inside a
	   height:100% box. Once the band stops being 600px tall that resolves to
	   nothing, the circles leave the flow entirely and land on top of the step
	   above — the column measured 30px high, its caption at y 3124 and its
	   images at y 2769. A square box gives the percentages something to be a
	   percentage of: circles are 35% wide and the lowest sits at top:44%, so
	   44% + 35% = 79% of the width, which fits.

	   Written as `> div.…` rather than `.…` on purpose: the rule above is
	   `.infographic--circles > div`, two classes, so a bare
	   `.infographic--circles--triad` loses to its `position: static` and the
	   circles start resolving against the page instead of their own column —
	   which put them 358px above the box they belong to. */
	.infographic--circles > div.infographic--circles--triad {
		position: relative;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.infographic--circles > div:after {
		display: none;
	}
}

/* Umbraco Forms' honeypot is a text input inside .umbraco-forms-hidden. The default
   Forms stylesheet is deliberately not loaded (disableDefaultStylesheet on every form
   definition), so nothing hid the trap: it rendered as a visible, unlabeled text box
   after the consent field on every form page, and anything a visitor typed in it
   spam-flags the submission. The wrapper already carries aria-hidden="true"; this
   hides it from sighted visitors too. */
.umbraco-forms-hidden {
	display: none;
}

/* The consent checkbox on the Umbraco Forms pages measured 0x0: main.css strips native
   appearance from EVERY input (input,textarea,select{-webkit-appearance:none} — written
   for the old site's text fields and its custom select), and its Bootstrap-3 rule
   (input[type=checkbox]{float:left;margin-left:-20px}) then floats the empty box out of
   the column. The control still toggled through its label, but a visitor saw no checkbox
   at all. Scoped to the Forms wrapper: the rest of the site has no native checkboxes. */
.umbraco-forms-form input[type=checkbox] {
	-webkit-appearance: checkbox;
	appearance: auto;
	width: 18px;
	height: 18px;
	float: none;
	margin: 0 8px 0 0;
	vertical-align: middle;
	accent-color: #68a640;
}

/* ── Anchor bar (.nav-inner, B15 · 2026-08-29) ────────────────────────────
   vw-components.css carries the whole look and the affix states (.affix-top: opacity 0 in
   its 63px reserve; .affix: fixed to the top, opacity 1). Three additions, none cosmetic. */

/* Legacy sets .nav-inner__main to opacity 0 *unconditionally* and relied on jQuery affix to
   add .affix. Without JS that is an invisible bar that still takes 63px. Visible by default;
   the two affix classes (higher specificity) take over the moment site.js runs. */
.nav-inner__main {
	opacity: 1;
}

/* An invisible bar whose links still take focus is a focus trap (2.4.7): Tab lands on a
   link nobody can see. When focus enters the parked bar it shows itself where it is. */
.nav-inner__main.affix-top:focus-within {
	opacity: 1;
}

/* The pinned bar covers the top 63px of the viewport, so a section jumped to by URL hash
   (or with JS off) must stop below it. site.js §4 does the same for clicks. Only where the
   bar exists and is shown (≥ 992px; the legacy stylesheet hides it below that). */
@media (min-width: 992px) {
	main:has(.nav-inner) [id] {
		scroll-margin-top: 79px;
	}
}

/* "Snel naar..." is a <button> now (live: a <span>, hover-only, unreachable by keyboard).
   Strip the UA button chrome so the legacy .custom-select__heading rules draw it as before.
   `font: inherit` is needed because a button does not inherit font by default. */
button.custom-select__heading {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid #d5d5d5;
	font: inherit;
	font-style: italic;
	cursor: pointer;
}

/* Legacy opens the list on :hover only. .is-open is site.js §7's: set by a click on the
   button and by focus landing on one of the items (so Tab walks into the list), cleared by
   Escape, by focus leaving the list and by choosing an entry. Not :focus-within in CSS —
   that includes the button itself, and Escape returns focus to the button, so the list
   would stay open after the visitor pressed Escape to close it. */
.custom-select__inner.is-open {
	max-height: 680px;
}
.custom-select__inner.is-open .custom-select__heading:after {
	transform: rotate(180deg);
}

/* Fit modes for the list shape, applied by site.js §7 after measuring. The legacy bar is
   two floats in a 63px box and simply breaks when the list does not fit beside the heading:
   the right float drops under the left one and wraps, and 176px of links hang out of the
   bar over the page. Live does exactly that on /infra at 1024 and 1200. Measured here on
   2026-08-29: /infra, /producten, /over-ons and /sluiting-hattemerbroek overflow at every
   desktop width, /afval at 1024. The modes escalate until the list fits:
   dense  — drop the page-name heading (it repeats the h1) and tighten the gaps;
   wrap   — two rows of 28px links, right-aligned, still inside the 63px bar;
   scroll — one row that scrolls horizontally, only if two rows are not enough. */
.nav-inner--dense .nav-inner__heading,
.nav-inner--wrap .nav-inner__heading,
.nav-inner--scroll .nav-inner__heading {
	display: none;
}
.nav-inner--dense .nav-inner__list__item {
	margin-left: 16px;
}
.nav-inner--wrap .pull-right,
.nav-inner--scroll .pull-right {
	float: none;
}
.nav-inner--wrap .nav-inner__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 20px;
	margin: 0;
	padding: 2px 0 0;
}
.nav-inner--wrap .nav-inner__list__item {
	margin: 0;
}
.nav-inner--wrap .nav-inner__list__item a {
	line-height: 28px;
}
.nav-inner--scroll .nav-inner__list {
	display: flex;
	column-gap: 20px;
	margin: 0;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: thin;
}
.nav-inner--scroll .nav-inner__list__item {
	flex: none;
	margin: 0;
}

/* ── QA pass 2026-08-30 — two defects measured on all 679 pages (overflow.expr.js) and on 18 pages
   (focus.expr.js), both inherited from live. ───────────────────────────────────────────────── */

/* 1. A YouTube <iframe width="660" height="371"> pasted into rich text (four machine pages under
   /infra/verhuur: the accubox and powerhub pairs) overflows a 360px viewport by 315px — the
   only horizontal overflow on the site. Live has the same bare iframe. Rich text cannot carry a
   wrapper, so the rule goes on the reading column: the frame shrinks to the column and keeps the
   16:9 its attributes describe. Maps and other embeds keep their attribute height. */
.detail__content__inner iframe {
    max-width: 100%;
}
.detail__content__inner iframe[src*="youtube"],
.detail__content__inner iframe[src*="youtu.be"],
.detail__content__inner iframe[src*="vimeo"] {
    height: auto;
    aspect-ratio: 16 / 9;
}
/* The full 360 sweep found 37 pages, not four: 27 more iframes (560/640px) in news articles,
   /emissievrij/accuboxen and two werken-bij pages — all inside .detail__content__inner, so the rule
   above covers them — plus one <table style="width: 500px"> and two links whose visible text is an
   unbroken URL (a mailto with its subject, a 560px <strong><a>). Same column, same treatment. */
.detail__content__inner table {
    max-width: 100%;
}
.detail__content__inner {
    overflow-wrap: anywhere;
}

/* 2. Two controls take focus and show nothing. (a) Bootstrap 5 draws .btn:focus-visible from
   --bs-btn-focus-shadow-rgb, which only the .btn-* variants define; the legacy .btn--default (the
   mobile Menu button) and .btn.primary (every Umbraco Forms submit) resolve it to no shadow at all.
   (b) vw-components.css sets input:focus, textarea:focus, select:focus { outline: none; box-shadow:
   none }, and the Forms fields carry class="text", not .form-control, so nothing gives the ring
   back. One ring for both: 2px of the site's text colour (#786e65, 4.98:1 on white), offset so it
   sits on the page rather than on a green button. Links keep the UA ring a:focus already has. */
.btn:focus-visible,
.umbraco-forms-field-wrapper :is(input, select, textarea):focus-visible {
    outline: 2px solid #786e65;
    outline-offset: 2px;
    box-shadow: none;
}

/* 3. One heading: "Afvalacceptatieformulier" — a single Dutch word that is 34px wider than a 360px
   viewport at h1 size. No visible change unless a word does not fit; then it breaks instead of
   pushing the page sideways. */
h1 {
    overflow-wrap: anywhere;
}