/* Regiopagina's (/webdesign-noord-holland): bouwt voort op homepagina.css (hp_*) en modules.css (md_flow, md_faq) */

.nh_titel { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.nh_titel .hp_accent { white-space: nowrap; }

/* ── Voorbeeldwebsite in de hero ──────────────────────────────────────── */
.nh_visual { position: relative; }
.nh_browser { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65); }
.nh_browser_balk { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #f4eee9; }
.nh_browser_balk span { width: 10px; height: 10px; border-radius: 50%; background: #d9cdc4; }
.nh_browser_balk em { flex: 1; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--grijs); font: 500 .76rem var(--body-font); font-style: normal; }
.nh_site { padding: 14px; color: var(--inkt); }
.nh_site_nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .84rem; }
.nh_site_nav strong { margin-right: auto; font: 800 .92rem var(--kop-font); }
.nh_site_nav i { width: 34px; height: 6px; border-radius: 99px; background: #eadfd7; }
.nh_site_nav b { padding: 6px 12px; border-radius: 99px; background: var(--oranje); color: #fff; font-size: .74rem; }
.nh_site_hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: linear-gradient(135deg, #2a1608, #7a3d10); color: #fff; }
.nh_site_hero small { color: #ffd9c2; font-size: .74rem; font-weight: 600; }
.nh_site_hero strong { max-width: 280px; font: 800 clamp(1.2rem, 2.2vw, 1.6rem)/1.15 var(--kop-font); }
.nh_site_hero b { padding: 8px 14px; border-radius: 99px; background: var(--oranje); font-size: .76rem; }
.nh_site_kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nh_site_kaarten div { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--rand); border-radius: 13px; }
.nh_site_kaarten .material-symbols-outlined { color: var(--oranje-donker); font-size: 1.3rem; }
.nh_site_kaarten i { height: 6px; border-radius: 99px; background: #eadfd7; }
.nh_site_kaarten i:last-child { width: 65%; }
.nh_melding {
    position: absolute; left: -18px; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: #fff; border-radius: 16px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
}
.nh_melding .material-symbols-outlined { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #dcfce7; color: #15803d; font-size: 1.2rem; }
.nh_melding strong { display: block; font: 800 .88rem var(--kop-font); color: var(--inkt); }
.nh_melding small { color: var(--grijs); font-size: .76rem; }

/* ── Wie bouwt het ────────────────────────────────────────────────────── */
.nh_lijst { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nh_lijst li { display: flex; align-items: flex-start; gap: 10px; color: var(--tekst); line-height: 1.5; }
.nh_lijst .material-symbols-outlined { flex: 0 0 auto; color: var(--oranje-donker); font-size: 1.3rem; }

/* ── Werkwijze: 4 in plaats van 6 kolommen ────────────────────────────── */
.nh_flow { grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ── Regio en vak ─────────────────────────────────────────────────────── */
.nh_duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nh_blok { min-width: 0; padding: clamp(24px, 3vw, 34px); background: #fff; border: 1px solid var(--rand); border-radius: 26px; }
.nh_blok h2 { margin: 14px 0 10px; font: 800 1.4rem/1.25 var(--kop-font); color: var(--inkt); }
.nh_blok p { margin: 0 0 16px; color: var(--tekst); line-height: 1.7; }
.nh_blok_icoon { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--oranje); color: #fff; font-size: 1.5rem !important; }
.nh_labels { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nh_labels li { padding: 7px 13px; border-radius: 999px; background: var(--zacht); color: var(--tekst); font-size: .88rem; font-weight: 600; }
.nh_labels--links li { padding: 0; background: none; }
.nh_labels--links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--rand); border-radius: 999px;
    background: #fff; color: var(--inkt); font-size: .9rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s;
}
.nh_labels--links a:hover { border-color: var(--oranje); color: var(--oranje-donker); }
.nh_blok .nh_noot { margin: 0; color: var(--grijs); font-size: .92rem; }
.nh_link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--oranje-donker); font-weight: 700; text-decoration: none; }
.nh_link .material-symbols-outlined { transition: transform .3s var(--ease); }
.nh_link:hover .material-symbols-outlined { transform: translateX(3px); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .nh_flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .nh_visual { width: 100%; max-width: 620px; }
    .nh_melding { left: 10px; bottom: -16px; }
}
@media (max-width: 720px) {
    .nh_flow, .nh_duo { grid-template-columns: minmax(0, 1fr); }
    .nh_site_nav i { display: none; }
    .nh_site_kaarten div { padding: 10px; }
}

/* Hero: alleen zo hoog als de inhoud (de homepagina vult een heel scherm) */
.nh .hp_hero { min-height: 0; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }