/* Marga Malytska op Aestetika: paginaopbouw, header, footer, Bold Builder-secties en blog.
   Componenten staan in components.css; waarden komen uit tokens.css. */

/* ---------------------------------------------------------------- basis (overschrijft Aestetika) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
html.mg-lock { overflow: hidden; }
body.mg { margin: 0; background: var(--night); color: var(--text); font-family: var(--font-sans); font-size: 18px; line-height: 1.65; font-kerning: normal; text-rendering: optimizeLegibility; }
body.mg *, body.mg *::before, body.mg *::after { box-sizing: border-box; }
body.mg img, body.mg iframe, body.mg video { max-width: 100%; height: auto; }
body.mg a { color: var(--lilac); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
body.mg a:hover { color: var(--heading); text-decoration-color: var(--flame); }
body.mg :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }
body.mg h1, body.mg h2, body.mg h3, body.mg h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; color: var(--heading); letter-spacing: 0.005em; text-transform: none; }
body.mg p { margin: 0 0 1em; }
body.mg .mg-actions a.mg-btn, body.mg a.mg-btn { text-decoration: none; }
body.mg a.mg-btn--flame, body.mg a.mg-btn--flame:hover { color: var(--on-flame); }
body.mg a.mg-btn--ghost { color: var(--text); }
body.mg a.mg-btn--ghost:hover { color: var(--heading); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-skip { position: absolute; left: -9999px; }
.mg-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 300; background: var(--flame); color: var(--on-flame) !important; padding: 8px 14px; border-radius: var(--radius-pill); }

/* ---------------------------------------------------------------- header */
.mg-header { position: relative; z-index: 40; max-width: none; padding: 18px max(var(--space-6), calc((100% - var(--container-max)) / 2 + var(--space-6))); }
.mg-header--over { position: absolute; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; }
.mg-header__nav { display: flex; align-items: center; gap: var(--space-5); }
body.mg .mg-nav a { color: var(--text); text-decoration: none; }
body.mg .mg-nav a:hover, body.mg .mg-nav a[aria-current="page"], body.mg .mg-nav .current-menu-item > a { color: var(--heading); border-bottom-color: var(--flame); }
body.mg .mg-langs a { text-decoration: none; }
body.mg .mg-langs a[aria-current="true"] { color: var(--night); }
.mg-brand__mark { display: block; }
.mg-menu-btn__bars, .mg-menu-btn__bars::before, .mg-menu-btn__bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.mg-menu-btn__bars::before, .mg-menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.mg-menu-btn__bars::before { top: -5px; }
.mg-menu-btn__bars::after { top: 5px; }
.mg-nav { flex-wrap: nowrap; }
.mg-nav a { white-space: nowrap; }
@media (max-width: 1360px) { .mg-brand__tag { display: none; } }
@media (max-width: 1180px) {
	.mg-header { padding: 14px var(--space-4); }
	.mg-menu-btn { display: inline-flex; position: relative; z-index: 60; }
	.mg-brand { position: relative; z-index: 60; }
	.mg-header__nav { position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: 96px var(--space-4) 40px; background: var(--night); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s; }
	.mg-nav-open .mg-header__nav { visibility: visible; opacity: 1; }
	.mg-header__nav nav { width: 100%; }
	.mg-nav { flex-direction: column; flex-wrap: wrap; gap: 0; width: 100%; }
	.mg-nav a { display: block; width: 100%; white-space: normal; font-family: var(--font-display); font-size: 28px; padding: 10px 0; border-bottom: 1px solid var(--line) !important; }
	.mg-langs { border-left: 0; padding-left: 0; }
	.mg-langs a { font-size: 16px; padding: 8px 12px; }
	.mg-brand__tag { display: block; }
}
@media (max-width: 520px) { .mg-brand__tag { display: none !important; } .mg-menu-btn__label { display: none; } }

/* ---------------------------------------------------------------- paginakop */
.mg-pagehead__inner { max-width: var(--container-max); margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--space-6) var(--space-5); }
.mg-pagehead .mg-h1 { max-width: 20ch; margin: 0; }
.mg-pagehead .mg-lead { margin-top: 18px; color: var(--text-muted); }
.mg-pagehead--post .mg-h1 { max-width: 24ch; font-size: clamp(36px, 4.6vw, 60px); }
.mg-pagehead .mg-breadcrumb { margin-bottom: var(--space-4); }
.mg-pagehead .mg-caption { margin-top: 18px; }
@media (max-width: 760px) { .mg-pagehead__inner { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ---------------------------------------------------------------- Bold Builder-secties
   Secties krijgen in Bold Builder een "Extra class": mg-sec (standaard), mg-sec--plum, mg-sec--ink,
   mg-sec--prose (lopende tekst op leesbreedte), mg-sec--full (zonder marges, voor Hero en CtaBand). */
.mg-content .bt_bb_wrapper { padding: 0; }
.bt_bb_section.mg-sec { background: transparent; }
.bt_bb_section.mg-sec > .bt_bb_port { padding: 0 var(--space-6); }
.bt_bb_section.mg-sec .bt_bb_cell { max-width: calc(var(--container-max) - 2 * var(--space-6)); margin: 0 auto; }
.bt_bb_section.mg-sec { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.bt_bb_section.mg-sec--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.bt_bb_section.mg-sec--plum { background: var(--plum); }
.bt_bb_section.mg-sec--ink { background: var(--ink); border-top: 1px solid var(--line); }
.bt_bb_section.mg-sec--rule { border-top: 1px solid var(--line); }
.bt_bb_section.mg-sec--prose .bt_bb_cell { max-width: calc(var(--container-max) - 2 * var(--space-6)); }
.bt_bb_section.mg-sec--prose .bt_bb_column_content_inner > * { max-width: var(--measure); }
.bt_bb_section.mg-sec--full { padding: 0; }
.bt_bb_section.mg-sec--full > .bt_bb_port { padding: 0; }
.bt_bb_section.mg-sec--full .bt_bb_cell { max-width: none; }
.bt_bb_section.mg-sec--full .bt_bb_row, .bt_bb_section.mg-sec--full .bt_bb_column, .bt_bb_section.mg-sec--full .bt_bb_column_content, .bt_bb_section.mg-sec--full .bt_bb_column_content_inner { padding: 0 !important; margin: 0 !important; }
.bt_bb_section.mg-sec--full .bt_bb_row_wrapper { margin: 0 !important; }
.mg-content .mg-sec + .mg-sec--rule { margin-top: 0; }
@media (max-width: 760px) { .bt_bb_section.mg-sec > .bt_bb_port { padding: 0 var(--space-4); } .bt_bb_section.mg-sec--full > .bt_bb_port { padding: 0; } }

/* Hero vult het scherm onder de doorzichtige header */
.mg-has-hero .mg-main > article > .mg-content > :first-child { margin-top: 0; }

/* Kaarten in Bold Builder-kolommen */
.mg-sec .bt_bb_row:has(.mg-card) { row-gap: var(--space-6); }
.mg-el.mg-card { height: 100%; }

/* Bandjes die zelf al een binnenmaat hebben (ervaringen, blog) negeren de sectiemarge */
.mg-sec--full .mg-band__inner, .mg-sec--full .mg-cta__inner { max-width: var(--container-max); }
.mg-band__title { margin: 0 0 var(--space-6); }
.mg-band__more { margin: var(--space-6) 0 0; }

/* ---------------------------------------------------------------- lopende tekst (Bold Builder "Text" en blog) */
.mg-prose, .bt_bb_text { font-size: 18px; line-height: 30px; }
.mg-prose { max-width: var(--measure); margin: 0 max(var(--space-6), calc((100% - var(--container-max)) / 2 + var(--space-6))) 0; padding-bottom: var(--space-7); }
.mg-prose h2, .bt_bb_text h2 { font-size: clamp(31px, 3.4vw, 42px); margin: 1.4em 0 0.5em; }
.mg-prose h3, .bt_bb_text h3 { font-size: 28px; margin: 1.4em 0 0.4em; }
.bt_bb_text > :first-child, .mg-prose > :first-child { margin-top: 0; }
.mg-prose ul, .mg-prose ol, .bt_bb_text ul, .bt_bb_text ol { padding-left: 1.2em; margin: 0 0 1em; }
.mg-prose li, .bt_bb_text li { margin-bottom: 0.4em; }
.mg-prose li::marker, .bt_bb_text li::marker { color: var(--rose); }
.mg-prose img, .bt_bb_text img { display: block; margin: 1.6em 0; border-radius: var(--radius-xs); max-height: 760px; width: auto; }
.mg-prose hr, .bt_bb_text hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.mg-prose em, .bt_bb_text em { color: var(--heading); }
.mg-prose blockquote, .bt_bb_text blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 2px solid var(--rose); font-style: italic; }
.mg-prose table, .bt_bb_text table { border-collapse: collapse; width: 100%; }
.mg-prose td, .mg-prose th, .bt_bb_text td, .bt_bb_text th { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
.mg-prose .video, .bt_bb_text .video { margin: 1.8em 0; aspect-ratio: 16 / 9; }
.mg-prose .video iframe, .bt_bb_text .video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-xs); }
@media (max-width: 760px) { .mg-prose { margin: 0 var(--space-4); } }

/* Diensten en vragen onder elkaar */
.mg-el.mg-service { margin-top: var(--space-5); }
.mg-sec--prose .mg-faq + .mg-faq, .mg-sec .mg-el.mg-faq + .mg-el.mg-faq { border-top: 0; }
.mg-el.mg-faq { max-width: var(--measure); }
.mg-el.mg-faq:first-child { border-top: 1px solid var(--line); }
.mg-answer { margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------- ervaringen (alle) */
.mg-reviews__index ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.mg-reviews__group { max-width: var(--measure); }
.mg-reviews__group h2 { border-top: 1px solid var(--line); padding-top: 1.2em; margin-top: 1.4em; }
.mg-reviews__group .mg-quote--long { margin: 0 0 var(--space-5); border-left: 1px solid var(--rose); }
.mg-quote blockquote img { max-width: 100%; }

/* ---------------------------------------------------------------- blog */
.mg-blog { max-width: var(--container-max); margin: 0 auto; padding: 16px var(--space-6) var(--space-7); display: grid; grid-template-columns: 250px 1fr; gap: clamp(32px, 5vw, 72px); }
@media (max-width: 900px) { .mg-blog { grid-template-columns: 1fr; padding-left: var(--space-4); padding-right: var(--space-4); } }
.mg-topics h2 { font-size: 22px; margin: 0.4em 0 0.6em; }
.mg-topics ul { list-style: none; padding: 0; margin: 0 0 24px; }
.mg-topics li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
body.mg .mg-topics a { text-decoration: none; color: var(--text); }
body.mg .mg-topics .is-current a { color: var(--flame-hi); }
.mg-topics .count { color: var(--text-muted); font-size: 14px; }
.mg-search { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.mg-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 16px; padding: 10px 16px; }
.mg-search button { background: var(--lilac); color: var(--night); border: 0; font: inherit; font-size: 15px; padding: 0 16px; cursor: pointer; }
.mg-posts--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mg-pager { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- footer */
.mg-footer { border-top: 1px solid var(--line); background: var(--night); font-size: 16px; }
.mg-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 56px var(--space-6) 32px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.mg-footer__inner img { border-radius: 50%; }
.mg-footer__name { font-family: var(--font-display); font-size: 26px; color: var(--heading); margin: 10px 0 4px !important; }
.mg-footer p { margin: 0 0 6px; color: var(--text-muted); }
.mg-footer__label { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--flame) !important; margin-bottom: 12px !important; }
body.mg .mg-footer a { color: var(--text); text-decoration: none; }
body.mg .mg-footer a:hover { color: var(--flame-hi); }
.mg-footer__list, .mg-footer .mg-nav, .mg-footer .nav__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mg-footer__base { max-width: var(--container-max); margin: 0 auto; padding: 20px var(--space-6) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.mg-footer__base p { margin: 0; max-width: 80ch; }
@media (max-width: 860px) { .mg-footer__inner { grid-template-columns: 1fr; padding-left: var(--space-4); padding-right: var(--space-4); } .mg-footer__base { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ---------------------------------------------------------------- AgeNotice (site) */
.mg-age__box p { margin: 0; }
.mg-location__note { margin-top: 12px !important; }

@media (prefers-reduced-motion: no-preference) {
	.mg-hero .mg-hero__text > * { animation: mg-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
	.mg-hero .mg-hero__text > :nth-child(2) { animation-delay: .12s; }
	.mg-hero .mg-hero__text > :nth-child(3) { animation-delay: .24s; }
	.mg-hero .mg-hero__text > :nth-child(4) { animation-delay: .36s; }
	.mg-hero__art { animation: mg-glow 2.4s ease-out both; }
}
@keyframes mg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mg-glow { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.alignleft { float: left; margin: 0.4em 1.4em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.4em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text { color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------------------- correcties op Bold Builder en Aestetika */
.bt_bb_section.mg-sec--full .bt_bb_row_holder { margin: 0 !important; }
.bt_bb_section.mg-sec--full .bt_bb_column { padding: 0 !important; }
body.mg figure.mg-hero__art, body.mg figure.mg-card__img, body.mg figure.mg-media__img, body.mg figure.mg-cta__art, body.mg figure.mg-quote { margin: 0; }
body.mg .mg-card__img { margin-bottom: var(--space-2); }
body.mg :is(.mg-nav, .mg-langs, .mg-footer__list, .mg-hero__facts, .mg-area, .mg-topics ul, .mg-reviews__index ul, .mg-breadcrumb ol) { margin-left: 0; padding-left: 0; list-style: none; }
body.mg :is(.mg-nav, .mg-langs, .mg-footer__list, .mg-hero__facts, .mg-area, .mg-topics ul, .mg-reviews__index ul, .mg-breadcrumb ol) li { margin: 0; }
body.mg .mg-hero__facts, body.mg .mg-area, body.mg .mg-nav, body.mg .mg-langs { margin-bottom: 0; }
.mg-media__text { display: block; }
.mg-media__text > div:first-child { margin-bottom: var(--space-4); }
.mg-media__text p { margin: 0 0 1em; }
.mg-media__text .mg-actions { margin-top: var(--space-5); }
.mg-media__text p:empty { display: none; }

/* ---------------------------------------------------------------- vaste achtergrond (MG Hero)
   Het beeld staat vast rechts achter de hele pagina; de inhoud scrollt eroverheen.
   Banden met een eigen achtergrond (ervaringen, CtaBand) en de footer schuiven eroverheen. */
.mg-main { position: relative; z-index: 1; }
.mg-footer { position: relative; z-index: 2; }
.mg-has-hero .mg-hero { isolation: auto; overflow: visible; background: transparent; }
.mg-has-hero .bt_bb_section.mg-sec { background-color: transparent; }
.mg-has-hero .bt_bb_section.mg-sec--plum { background: rgba(28, 13, 51, 0.94); }
.mg-has-hero .bt_bb_section.mg-sec--ink, .mg-has-hero .mg-cta { background: rgba(13, 11, 49, 0.96); }
.mg-has-hero .mg-band--plum { background: rgba(28, 13, 51, 0.94); }
/* Kaarten en tekst die over het beeld vallen krijgen een donkere ondergrond voor leesbaarheid */
.mg-has-hero .mg-card { background: linear-gradient(to bottom, rgba(3, 4, 31, 0) 0, rgba(3, 4, 31, 0.82) 40%); }
.mg-has-hero .mg-answer { background: rgba(13, 11, 49, 0.92); }
@media (prefers-reduced-motion: no-preference) { .mg-hero__art::before { transition: opacity .15s linear; } }