/* Moderne zijbalk, contactpagina en footer (design in het siteprofiel).
   Wordt alleen geladen als minstens één van die onderdelen 'modern' is.
   Alles hangt onder eigen klassen (m-...), zodat het thema niet verandert.
   Kleuren: --hm-accent (vlakken), --hm-on-accent (tekst op de accentkleur) en
   --hm-accent-text (accent als tekst op wit); de layout zet de echte waarden. */

:root { --hm-accent: #378ac4; --hm-on-accent: #fff; --hm-accent-text: #378ac4; }

.m-sidebar, .m-contact, .m-page-hero, .m-footer, .m-form {
	--m-ink: #22282d;
	--m-muted: #5f666c;
	--m-line: #dedfe1;
	--m-paper: #f5f5f3;
	--m-radius: 3px;
	-webkit-font-smoothing: antialiased;
}

.m-sidebar *, .m-contact *, .m-page-hero *, .m-footer *, .m-form * { box-sizing: border-box; }
.m-sidebar a, .m-contact a, .m-page-hero a, .m-footer a { text-decoration: none; }
.m-sidebar h2, .m-sidebar h3, .m-contact h1, .m-contact h2, .m-page-hero h1, .m-footer h2,
.m-sidebar p, .m-contact p, .m-footer p, .m-sidebar figure, .m-sidebar blockquote {
	margin: 0; padding: 0; text-transform: none;
}
.m-sidebar svg, .m-contact svg, .m-form svg { width: 20px; height: 20px; flex-shrink: 0; }

.m-container { width: 1180px; max-width: calc(100% - 48px); margin-left: auto; margin-right: auto; }

.m-eyebrow { display: block; margin-bottom: 12px; color: var(--hm-accent-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }

/* Knop */
.m-button, a.m-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 22px; border: 1px solid var(--hm-accent); border-radius: var(--m-radius, 3px); background: var(--hm-accent); color: var(--hm-on-accent); font-size: 15px; font-weight: 600; line-height: 1.5; cursor: pointer; transition: filter .2s, transform .2s; }
.m-button:hover, a.m-button:hover { filter: brightness(.92); transform: translateY(-2px); color: var(--hm-on-accent); }
.m-button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.m-button--block { display: flex; width: 100%; }

/* Kaart met contactgegevens (zijbalk en contactpagina) */
.m-card { padding: 28px; background: var(--m-paper); border-top: 3px solid var(--hm-accent); }
.m-sidebar .m-card h2, .m-contact .m-card h2 { margin-bottom: 18px; color: var(--m-ink); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.m-card-phone { display: block; color: var(--m-ink); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.m-card-mail { display: block; margin-top: 6px; color: var(--m-muted); font-size: 14px; overflow-wrap: anywhere; }
.m-card-phone:hover, .m-card-mail:hover { color: var(--hm-accent-text); }
.m-sidebar .m-card-address { margin-top: 14px; color: var(--m-muted); font-size: 14px; line-height: 1.6; }
.m-card .m-button { margin-top: 22px; }

/* Lijst met links (Wellicht ook interessant, Lees ook) */
.m-links { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--m-line); }
.m-sidebar .m-links h2, .m-contact .m-links h2, .m-socials-block h2 { margin-bottom: 12px; color: var(--m-ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.m-links > a { display: block; padding: 10px 0; border-bottom: 1px solid var(--m-line); color: var(--m-muted); font-size: 14px; line-height: 1.5; transition: color .2s, padding-left .2s; }
.m-links > a:hover { padding-left: 6px; color: var(--hm-accent-text); }
.m-links > a.m-links-highlight { color: var(--hm-accent-text); font-weight: 600; }

/* Zijbalk */
.m-sidebar { padding-bottom: 10px; }
.m-banner { display: block; margin-top: 30px; }
.m-banner img { display: block; width: 100%; height: auto; border-radius: var(--m-radius); }
.m-sidebar .m-quote { margin-top: 30px; padding: 26px; background: var(--m-paper); }
.m-sidebar .m-quote h3 { margin-bottom: 8px; color: var(--m-ink); font-size: 16px; font-weight: 600; }
.m-sidebar .m-quote blockquote, .m-sidebar .m-quote blockquote p { margin: 0; padding: 0; border: 0; background: none; color: var(--m-muted); font-size: 14px; font-style: italic; line-height: 1.6; }
.m-quote figcaption { margin-top: 12px; color: var(--m-ink); font-size: 13px; font-weight: 600; }
.m-socials-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--m-line); }
.m-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.m-socials a { display: inline-block; padding: 6px 12px; border: 1px solid var(--m-line); border-radius: 999px; color: var(--m-ink); font-size: 13px; line-height: 1.4; }
.m-socials a:hover { border-color: var(--hm-accent-text); color: var(--hm-accent-text); }

/* Paginakop (contactpagina) */
/* Eén maat voor alle paginakoppen (contactpagina én overige pagina's) */
.m-page-hero { padding: 26px 0 46px; background: var(--m-paper); }
.m-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; color: var(--m-muted); font-size: 13px; }
.m-breadcrumb a { color: var(--m-muted); }
.m-breadcrumb a:hover { color: var(--hm-accent-text); }
.m-page-hero h1 { color: var(--m-ink); font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }

/* Paginakop en tekst van de overige pagina's (design.pages = 'modern').
   Alles onder body.m-pages; de kop gebruikt het raster van het thema. */

/* Bredere inhoud: even breed als de contactpagina (1180px). Alleen op desktop;
   op tablet en mobiel gebruikt het thema zijn eigen raster. De kolommen van het
   thema (skeleton, 16 kolommen met 10px marge) worden hier procentueel. */
@media only screen and (min-width: 960px) {
	.m-pages .container.main-content,
	.m-pages .m-page-hero--grid .container { width: 1200px; max-width: calc(100% - 28px); } /* 1180 + 2x10px kolommarge */
	.m-pages .main-content .one.columns { width: calc(6.25% - 20px); }
	.m-pages .main-content .two.columns { width: calc(12.5% - 20px); }
	.m-pages .main-content .three.columns { width: calc(18.75% - 20px); }
	.m-pages .main-content .four.columns { width: calc(25% - 20px); }
	.m-pages .main-content .five.columns { width: calc(31.25% - 20px); }
	.m-pages .main-content .six.columns { width: calc(37.5% - 20px); }
	.m-pages .main-content .seven.columns { width: calc(43.75% - 20px); }
	.m-pages .main-content .eight.columns { width: calc(50% - 20px); }
	.m-pages .main-content .nine.columns { width: calc(56.25% - 20px); }
	.m-pages .main-content .ten.columns { width: calc(62.5% - 20px); }
	.m-pages .main-content .eleven.columns { width: calc(68.75% - 20px); }
	.m-pages .main-content .twelve.columns { width: calc(75% - 20px); }
	.m-pages .main-content .thirteen.columns { width: calc(81.25% - 20px); }
	.m-pages .main-content .fourteen.columns { width: calc(87.5% - 20px); }
	.m-pages .main-content .fifteen.columns { width: calc(93.75% - 20px); }
	.m-pages .main-content .sixteen.columns,
	.m-pages .m-page-hero--grid .sixteen.columns { width: calc(100% - 20px); }
	.m-pages .main-content .one-third.column { width: calc(33.333% - 20px); }
	.m-pages .main-content .two-thirds.column { width: calc(66.666% - 20px); }
	/* Afbeeldingen in de rasters (projecten) schalen mee met de bredere kolommen */
	.m-pages .main-content .recent-work .item img,
	.m-pages .main-content .four.columns > img { width: 100%; height: auto; }
	/* Formulier en tekst gebruiken de volle kolombreedte */
	.m-pages .main-content .webtekst { width: 100%; }

	/* Offertepagina met de contactkolom: dezelfde verdeling als de contactpagina
	   (.m-contact: 1.4fr / 1fr = 7/12 en 5/12 met 80px tussenruimte).
	   Container 1200px = 10px + formulier + 10px + 70px + zijbalk + 10px. */
	.m-pages .main-content.m-contact-layout > .eleven.columns { width: calc((100% - 100px) * 7 / 12); }
	.m-pages .main-content.m-contact-layout > .five.columns { width: calc((100% - 100px) * 5 / 12); margin-left: 70px; }

	/* Header (topbar, logo/menu en bij gecentreerde stijl de menubalk) even breed
	   als de inhoud: body.m-wide (pagina's met m-pages en de moderne homepage). */
	.m-wide header .container { width: 1200px; max-width: calc(100% - 28px); }
	.m-wide header .eight.columns { width: calc(50% - 20px); }
	.m-wide header .sixteen.columns { width: calc(100% - 20px); }
	.m-wide header .one-third.column { width: calc(33.333% - 20px); }
	.m-wide header .two-thirds.column { width: calc(66.666% - 20px); }
}
/* (maten van de kop: zie .m-page-hero; gelijk voor alle pagina's) */
.m-pages .m-page-hero--grid + .main-content { margin-top: 0; padding-top: 45px; }

.m-pages .main-content .webtekst { color: #22282d; }
.m-pages .main-content .webtekst h1,
.m-pages .main-content .webtekst h2,
.m-pages .main-content .webtekst h3 { margin: 32px 0 14px; color: #22282d; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; text-transform: none; }
.m-pages .main-content .webtekst h1 { font-size: 30px; }
.m-pages .main-content .webtekst h2 { font-size: 26px; }
.m-pages .main-content .webtekst h3 { font-size: 20px; }
.m-pages .main-content .webtekst > :first-child,
.m-pages .main-content .webtekst article > :first-child { margin-top: 0; }
.m-pages .main-content .webtekst p { margin: 0 0 16px; color: #5f666c; font-size: 16px; line-height: 1.85; text-align: left; }
.m-pages .main-content .webtekst a { color: var(--hm-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.m-pages .main-content .webtekst ul { margin: 0 0 18px; padding: 0; list-style: none; }
.m-pages .main-content .webtekst li { position: relative; padding: 0 0 8px 26px; list-style: none; color: #5f666c; font-size: 16px; line-height: 1.7; }
.m-pages .main-content .webtekst li:before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--hm-accent-text); font-weight: 700; }
.m-pages .main-content .webtekst img { max-width: 100%; height: auto; border-radius: 3px; }

/* Knoppen van het thema (bv. "Neem contact op"): leesbare tekst op de accentkleur */
/* (alleen links: de verzendknoppen van de formulieren hebben een eigen donkere achtergrond) */
.m-pages .main-content a.button.color { background: var(--hm-accent); color: var(--hm-on-accent); }
.m-pages .main-content a.button.color:hover { background: #4b4c4d; color: #fff; }

/* Nieuwsoverzicht en nieuwsbericht */
.m-pages .main-content .post.style-1 { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid #dedfe1; }
.m-pages .main-content .post.style-1 hr { display: none; }
.m-pages .main-content h3.newstitle { margin: 0 0 6px; font-size: 22px !important; font-weight: 600; line-height: 1.3; }
.m-pages .main-content h3.newstitle a { color: #22282d; }
.m-pages .main-content h3.newstitle a:hover { color: var(--hm-accent-text); }
.m-pages .main-content .post .meta { color: #5f666c; font-size: 13px; }
.m-pages .main-content .post.style-1 > p { margin-top: 10px; color: #5f666c; font-size: 15px; line-height: 1.75; }
.m-pages .main-content .post.single .image-post img { border-radius: 3px; }
.m-pages .main-content .post.single .post-meta { margin-top: 14px; }

/* Contactpagina */
.m-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 80px; padding-top: 45px; padding-bottom: 80px; color: var(--m-ink); }
.m-contact .m-prose { width: auto; }
.m-contact .m-prose h1, .m-contact .m-prose h2, .m-contact .m-prose h3 { margin: 0 0 16px; color: var(--m-ink); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.m-contact .m-prose p { margin: 0 0 16px; color: var(--m-muted); font-size: 16px; line-height: 1.8; text-align: left; }
.m-contact .m-prose a { color: var(--hm-accent-text); text-decoration: underline; }
.m-contact .notification_ok, .m-contact .notification_error { width: auto; margin-bottom: 24px; }

/* Formulieren (contact en offerte): .m-form werkt op elke pagina */
.m-form { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--m-line); }
.m-form--plain { margin-top: 10px; padding-top: 0; border-top: 0; }
.m-form-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.m-form .m-form-heading h2 { margin: 0; color: var(--m-ink); font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.m-form-heading span { color: var(--m-muted); font-size: 13px; }
.m-form .m-form-required-note { margin: 0 0 14px; color: var(--m-muted); font-size: 13px; text-align: right; }
.m-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 22px; }
.m-field { min-width: 0; }
.m-field--full { grid-column: 1 / -1; }
.m-form .m-field label { display: block; margin: 0 0 7px; color: var(--m-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.m-form .m-field label small.option { color: var(--m-muted); font-size: 12px; font-weight: 400; }
.m-required { color: var(--hm-accent-text); }
.m-form .m-field input, .m-form .m-field textarea, .m-form .m-field select { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 13px; border: 1px solid #c8cccf; border-radius: var(--m-radius); background: #fff; box-shadow: none; color: var(--m-ink); font-size: 16px; line-height: 1.5; }
.m-form .m-field select { height: 48px; padding-top: 0; padding-bottom: 0; cursor: pointer; }
.m-form .m-field textarea { min-height: 150px; resize: vertical; }
.m-form .m-field input:hover, .m-form .m-field textarea:hover, .m-form .m-field select:hover { border-color: #777e83; }
.m-form .m-field input:focus, .m-form .m-field textarea:focus, .m-form .m-field select:focus { border-color: var(--hm-accent-text); outline: 2px solid var(--hm-accent); outline-offset: 0; }
.m-form .g-recaptcha { margin-bottom: 18px; }
.m-form #note:not(:empty) { margin-bottom: 18px; }
.m-form .m-button { margin: 0; }

.m-contact-photo { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.m-detail { padding: 15px 0; border-top: 1px solid #dddfdf; }
.m-detail > span { display: block; margin-bottom: 4px; color: var(--m-muted); font-size: 12px; }
.m-detail p, .m-detail > a { color: var(--m-ink); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.m-detail > a:hover { color: var(--hm-accent-text); }
.m-detail .m-socials { margin-top: 4px; }
.m-map { margin-top: 0; }

/* Footer */
.m-footer { padding-top: 65px; background: #22282d; color: #f5f5f5; }
.m-footer-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1.2fr 1.15fr; gap: 40px; }
.m-footer .m-footer-grid h2 { margin-bottom: 20px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.m-footer p, .m-footer a { color: #c5c9cb; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.m-footer .m-footer-grid p { margin-bottom: 10px; }
.m-footer a:hover { color: #fff; text-decoration: underline; }
.m-footer-grid > div > a { display: block; margin-top: 6px; }
.m-footer-grid > div > a.m-footer-logo { display: inline-block; max-width: 235px; margin: 0 0 20px; padding: 12px; background: #fff; border-radius: var(--m-radius); }
.m-footer-logo img { display: block; max-width: 100%; height: auto; padding: 0; }
.m-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 25px; margin-top: 45px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid #45494c; color: #c5c9cb; font-size: 12px; }
.m-footer-bottom a, .m-footer-bottom span { font-size: 12px; line-height: 1.6; }

/* Tablet */
@media only screen and (max-width: 959px) {
	.m-page-hero h1 { font-size: 44px; }
	.m-contact { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 35px; }
	.m-card { padding: 22px; }
	.m-footer-grid { grid-template-columns: 1fr 1fr; }
	.m-footer-bottom { justify-content: flex-start; }
}

/* Mobiel */
@media only screen and (max-width: 767px) {
	.m-container { max-width: calc(100% - 40px); }
	.m-page-hero { padding: 20px 0 34px; }
	.m-breadcrumb { margin-bottom: 24px; }
	.m-page-hero h1 { font-size: 34px; }
	.m-pages .m-page-hero--grid + .main-content { padding-top: 30px; }
	.m-contact { grid-template-columns: 1fr; gap: 40px; padding-top: 30px; padding-bottom: 50px; }
	.m-form-grid { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
	.m-footer { padding-top: 45px; }
	.m-footer-grid { gap: 32px 25px; }
}

@media only screen and (max-width: 479px) {
	.m-form-grid { grid-template-columns: 1fr; }
	.m-field--full { grid-column: auto; }
	.m-form-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
	.m-footer-grid { grid-template-columns: 1fr; }
}

/* Uitklapmenu op desktop (design.menu = 'modern', body.m-menu).
   Vervangt het grijze thema-dropdown door een rustig wit paneel. Het openen en
   sluiten blijft van ddsmoothmenu; die zet inline-stijlen op de submenu's, vandaar
   de !important bij top en width. Mobiel: zie css/mobile-menu.css. */
@media only screen and (min-width: 960px) {
	/* paneel sluit precies aan op de onderkant van de header (thema: 110px, 8px overlap) */
	.m-menu header .navigation #nav > li > ul {
		top: 118px !important;
		width: auto !important;
		min-width: 240px;
		padding: 8px 0;
		border: 1px solid #e6e6e4;
		border-top: 2px solid var(--hm-accent, #22282d);
		border-radius: 0 0 3px 3px;
		background: #fff;
		box-shadow: 0 14px 28px rgba(34, 40, 45, .1);
	}
	.m-menu header.style-3 .navigation #nav > li > ul { top: 75px !important; } /* thema: 67px */

	.m-menu header .navigation #nav > li > ul > li { display: block; margin: 0; }

	.m-menu header .navigation #nav > li > ul > li > a {
		display: block;
		width: auto;
		margin: 0;
		padding: 11px 22px;
		border: 0 !important;
		background: transparent !important; /* thema (white.css) zet hier grijs met !important */
		color: #22282d;
		font-size: 14px;
		line-height: 1.4;
		text-transform: none;
		white-space: nowrap;
		transition: background-color .15s, color .15s, box-shadow .15s;
	}
	.m-menu header .navigation #nav > li > ul > li > a:hover,
	.m-menu header .navigation #nav > li > ul > li > a:focus-visible {
		background: #f5f5f3 !important;
		color: var(--hm-accent-text, #22282d);
		box-shadow: inset 2px 0 0 var(--hm-accent, #22282d);
		outline: 0;
	}

	/* klein pijltje bij een hoofditem met submenu */
	.m-menu header .navigation #nav > li > ul ~ a:after {
		content: '';
		display: inline-block;
		width: 5px;
		height: 5px;
		margin: 0 0 4px 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		opacity: .55;
		transform: rotate(45deg);
		vertical-align: middle;
	}
}

@media (prefers-reduced-motion: reduce) {
	.m-button, .m-links > a { transition: none; }
	.m-menu header .navigation #nav > li > ul > li > a { transition: none; }
}