/* Lettertypes (zelf gehost) */
/* Beste Installateurs Rotterdam: basis (uit het ontwerp) */
body{margin:0;background:#F8F4EC;color:#142430;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,p{margin:0}
a{color:#B03A17;text-decoration:none}
a:hover{color:#9E3313}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
img{max-width:100%}
.bir-page{min-height:100vh;display:flex;flex-direction:column}
.bir-sticky{position:sticky;top:0;z-index:20}
body.admin-bar .bir-sticky{top:32px}
@media (max-width:782px){body.admin-bar .bir-sticky{top:46px}}

/* Header: dropdowns op hover en toetsenbordfocus */
.bir-dd{position:relative}
.bir-dd-panel{position:absolute;top:100%;left:0;padding-top:6px;z-index:40;display:none}
.bir-dd:hover>.bir-dd-panel,.bir-dd:focus-within>.bir-dd-panel{display:block}
.bir-dd-mega{width:max-content;max-width:calc(100vw - 64px)}
.bir-nav-desktop{position:relative}.bir-dd--mega{position:static}.bir-dd--mega>.bir-dd-panel{left:auto;right:0}
.bir-dd-item:hover{background:#F6F4EE!important;color:#B03A17!important}
.bir-nav-mobile{display:none}
.bir-menu-btn [hidden]{display:none!important}

/* Kaart vergroten (zie site.js, links met data-bir-zoom) */
.bir-zoom{position:fixed;inset:0;z-index:100;background:rgba(20,36,48,.88);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;overflow:auto}
.bir-zoom img{max-width:min(1600px,100%);max-height:100%;width:auto;height:auto;border-radius:12px;background:#F2EFE8;cursor:default}
.bir-zoom-close{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:999px;border:0;background:#FAF8F3;color:#142430;font-size:30px;line-height:1;cursor:pointer}
@media (max-width:700px){.bir-zoom{align-items:flex-start;padding:72px 0 24px}.bir-zoom img{max-width:none;max-height:none;width:1200px;border-radius:0}}
/* Knop 'Vergroot de kaart/afbeelding' op kleine schermen kleiner, zodat hij labels in de afbeelding niet bedekt */
@media (max-width:640px){a[data-bir-zoom]>span{font-size:11px!important;padding:4px 9px!important;right:8px!important;bottom:8px!important}}

/* Formulieren: velden per onderwerp */
[data-topic]{display:contents}
[data-topic][hidden]{display:none!important}

/* Gedeelde stijlen voor alle pagina's (formulieren + responsive). */
.bir-field{width:100%;font:inherit;font-size:16px;font-weight:400;color:#142430;background:#FAF8F3;border:1px solid #D8D3C7;border-radius:8px;padding:12px 14px;outline:none}
.bir-field:focus{border-color:#C2401A;background:#FFFFFF;box-shadow:0 0 0 3px rgba(194,64,26,0.12)}
.bir-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Tablet + touch: hamburgermenu i.p.v. hover-dropdowns ---------- */
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  .bir-nav-desktop { display: none !important; }
  .bir-menu-btn { display: inline-flex !important; }
  .bir-nav-mobile:not([hidden]) { display: block !important; max-height: calc(100vh - 64px); overflow-y: auto; }
  .bir-headrow { flex-wrap: nowrap !important; }
}

/* ---------- Tablet: inhoudsopgave als horizontale chips boven de tekst ---------- */
@media (max-width: 960px) {
  .bir-wrap:has(> .bir-toc) { row-gap: 28px !important; }
  .bir-toc { flex-basis: 100% !important; }
  .bir-toc nav {
    position: static !important; flex-direction: row !important; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .bir-toc nav::-webkit-scrollbar { display: none; }
  .bir-toc nav > span { display: none !important; }
  .bir-toc nav a {
    flex: 0 0 auto; white-space: nowrap; font-size: 14px !important;
    padding: 8px 14px !important; border: 1px solid #D8D3C7 !important; border-radius: 999px; background: #FFFFFF;
  }
  .bir-toc nav a:last-child { margin-right: 40px; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
  .bir-topbar { display: none; }
  .bir-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .bir-headrow { padding: 12px 20px !important; }
  .bir-h2 { font-size: 30px !important; }
  .bir-h2xl { font-size: 34px !important; }
  .bir-scroll-x { overflow-x: auto; }
  .bir-scroll-x > .bir-minw { min-width: 560px; }
}
.bir-headrow > a span { white-space: nowrap; }

/* Staafgrafieken (label | balk | waarde): op mobiel balk over de volle breedte */
@media (max-width: 640px) {
  .bir-barrow { grid-template-columns: 1fr auto !important; row-gap: 6px !important; }
  .bir-barrow > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .bir-baraxis { grid-template-columns: 1fr !important; }
  .bir-baraxis > span:empty { display: none; }
}

/* Mobiel: alleen het icoon in de menuknop, zonder tekst */
@media (max-width: 640px) {
  .bir-menu-label { display: none; }
  .bir-menu-btn { width: 44px; height: 44px; padding: 0 !important; justify-content: center; }
}

/* Toegankelijkheid: zichtbare focus en 'naar de inhoud'-link */
:focus-visible { outline: 2px solid #B03A17; outline-offset: 3px; border-radius: 4px; }
.bir-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #142430; color: #FFFFFF !important; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.bir-skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Hover-effecten uit het ontwerp */
.h-8iynge:hover{border-color: rgb(194, 64, 26) !important; color: rgb(176, 58, 23) !important;}
.h-axusfy:hover{background: rgb(246, 244, 238) !important; color: rgb(20, 36, 48) !important;}
.h-19cw43:hover{color: rgb(176, 58, 23) !important;}
.h-ezlwa2:hover{color: rgb(158, 51, 19) !important;}
.h-1q0zf7:hover{color: rgb(246, 184, 151) !important;}
.h-1c8ijr:hover{background: rgb(246, 184, 151) !important; color: rgb(20, 36, 48) !important;}
.h-1k6fsm:hover{background: rgb(158, 51, 19) !important; color: rgb(255, 255, 255) !important;}
.h-wl84p6:hover{color: rgb(250, 248, 243) !important;}
.h-p86ros:hover{border-color: rgb(20, 36, 48) !important; color: rgb(20, 36, 48) !important;}
/* Hoofdmenu op smallere desktops (o.a. iPad liggend, 1024px): iets minder ruimte per item, zodat logo en menu op één regel passen */
@media (max-width:1120px){.bir-nav-desktop>a:not(.h-1k6fsm),.bir-nav-desktop>.bir-dd>a,.bir-nav-desktop>.bir-dd>button{padding-left:8px!important;padding-right:8px!important}}