/* ==========================================================================
   AG Bouwmanagement & Projecten — aanvullingen voor de Grav-versie.
   style.css is het oorspronkelijke ontwerp en blijft ongewijzigd; hier staan
   alleen de stijlen voor dynamische situaties (variabel aantal items,
   formuliermeldingen, optionele footergegevens).
   ========================================================================== */

/* Mega-menu: kolom per hoofddienst + contactkolom */
.mega__inner { grid-template-columns: repeat(var(--mega-kolommen, 2), minmax(0, 1fr)) minmax(0, .72fr); }
.mega__beeld .placeholder { padding: 6px; font-size: 9px; letter-spacing: .08em; }
.mega__beeld .placeholder span { padding: 4px 6px; }

/* Stappen: ander aantal dan 3 of 5 */
@media (min-width: 961px) {
  .stappen[style*="--stappen"] { grid-template-columns: repeat(var(--stappen), minmax(0, 1fr)); }
}

/* Koppen: lange Nederlandse samenstellingen netjes afbreken */
.pagina-hero h1, .dienst-kaart h3, .gerelateerd__body h2 { -webkit-hyphens: auto; hyphens: auto; }

/* Projectkaart met h2 (overzichtspagina) gelijk aan h3 */
.project h2 { margin-bottom: 6px; font-size: 21px; transition: color .2s; }
.project__link:hover h2 { color: var(--goud-licht); }

/* Voordelen, losse "kort"-kaart, meerdere gerelateerde diensten */
.voordeel__titel { margin-bottom: 12px; }
.kort--los { position: static; background: var(--zwart-2); border: 1px solid var(--lijn-d); }
.gerelateerd + .gerelateerd { margin-top: clamp(20px, 3vw, 32px); }
.project-tekst { margin-top: clamp(40px, 5vw, 64px); }

/* Opmaak van vrije tekst uit de editor */
.uitleg__tekst ul, .intro__body ul, .over__grid ul { margin: 0 0 1em; padding-left: 20px; }
.uitleg__tekst li, .intro__body li, .over__grid li { position: relative; margin-bottom: 6px; }
.uitleg__tekst li::before, .intro__body li::before, .over__grid li::before { content: ''; position: absolute; left: -18px; top: .7em; width: 5px; height: 5px; background: var(--goud); transform: rotate(45deg); }
.tekst h3 { margin: 32px 0 10px; font-size: clamp(19px, 1.6vw, 22px); }
.tekst ol { margin: 0 0 1em; padding-left: 22px; list-style: decimal; }
.tekst img { margin: 24px 0; }
.tekst table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; font-size: 15px; }
.tekst th, .tekst td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--lijn-l); }

/* Formulieren */
.form-honeybear { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.form-melding { margin-bottom: 24px; padding: 14px 18px; font-size: 15px; line-height: 1.5; color: #7A1F12; background: #FBEDEA; border: 1px solid rgba(122, 31, 18, .25); }
.form-melding p { margin: 0; }
.veld__fout { margin: 0; font-size: 14px; color: #9B2C1C; }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: #B23A2A; }
form.is-bezig [type="submit"] { opacity: .6; pointer-events: none; }
/* reCAPTCHA v3-badge: altijd zichtbaar en boven alle blokken */
.grecaptcha-badge { z-index: 2147483000 !important; visibility: visible !important; opacity: 1 !important; }

/* Actieblok bovenaan het offerteformulier */
.actie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 22px 24px; color: var(--licht); background: var(--zwart); border-left: 3px solid var(--goud); }
.actie p { margin: 0; }
.actie__label, .actie__code span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--goud-licht); }
.actie__titel { margin-top: 6px !important; font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.2; color: var(--wit); }
.actie__omschrijving { margin-top: 6px !important; font-size: 15px; line-height: 1.5; color: var(--licht); }
.actie__code { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; text-align: center; border: 1px dashed var(--goud); }
.actie__code strong { font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--wit); }
.actie__voorwaarden { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--licht-2); }
@media (max-width: 520px) {
  .actie { grid-template-columns: minmax(0, 1fr); }
  .actie__code { justify-self: start; }
}

/* Footer: optionele socials en openingstijden */
.footer__social { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; }
.footer__social a { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--licht-2); text-decoration: none; }
.footer__social a:hover { color: var(--goud-licht); }
.footer__tijden { margin: 18px 0 0; font-size: 15px; }
.footer__tijden div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 3px 0; }
.footer__tijden dt { color: var(--licht-2); }
.footer__tijden dd { margin: 0; color: var(--licht); }

/* Lange woorden in koppen (bijv. "projectmanagement") niet laten uitsteken */
.faq__intro h2, .sectie-kop h2, .uitleg__tekst h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* Mobiel menu: sublinks (afbouwdiensten) klein houden; in style.css won de regel
   voor hoofdlinks (.mobiel-menu > ul > li > a) op specificiteit */
@media (max-width: 1080px) {
  .mobiel-menu > ul > li.mobiel-menu__subs > a { display: block; padding: 7px 0; font-family: var(--f-tekst); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--licht-2); border-bottom: 0; overflow-wrap: anywhere; }
  .mobiel-menu > ul > li.mobiel-menu__subs > a:hover { color: var(--goud-licht); }
  .mobiel-menu > ul > li > a[aria-current="page"] { color: var(--goud); }
}