/* Gedeelde roal.nl-chrome (header + footer) voor de statische konform.roal.nl-pagina's.
   Gescope't onder .rc-header / .rc-footer zodat het de pagina-eigen CSS niet raakt.
   Logo en links wijzen naar roal.nl (absolute). Geen externe fonts (CSP) -> system-stack. */
.rc-header, .rc-footer { --rc-orange:#FF6B35; --rc-orange-dark:#E85A28; --rc-cream:#FAF6F0; --rc-black:#1A1A1A; --rc-grey:#6B6661; --rc-border:#E5DFD5; --rc-white:#fff;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--rc-black); }
.rc-header *, .rc-footer * { box-sizing:border-box; }
.rc-container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* HEADER */
.rc-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--rc-border); padding:14px 0; }
.rc-header .rc-container { display:flex; align-items:center; justify-content:space-between; }
.rc-brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--rc-black); text-decoration:none; }
.rc-brand img { width:36px; height:36px; object-fit:contain; }
.rc-nav { display:flex; gap:32px; align-items:center; }
.rc-nav a { font-size:14px; font-weight:500; color:var(--rc-black); text-decoration:none; }
.rc-nav a:hover { color:var(--rc-orange); }
.rc-nav a.rc-active { color:var(--rc-orange); }
.rc-btn { background:var(--rc-orange); color:#fff !important; padding:10px 18px; border-radius:8px; font-weight:600; font-size:14px; transition:background .2s; }
.rc-btn:hover { background:var(--rc-orange-dark); }
/* dropdown */
.rc-dropdown { position:relative; }
.rc-dropdown > a { cursor:pointer; }
.rc-dropdown > a::after { content:' \25BE'; font-size:9px; opacity:.55; margin-left:2px; }
.rc-dropdown::before { content:''; position:absolute; top:100%; left:0; right:0; height:18px; }
.rc-menu { position:absolute; top:calc(100% + 14px); left:-16px; background:#fff; border:1px solid var(--rc-border); border-radius:12px; padding:8px 0; min-width:240px; box-shadow:0 16px 40px rgba(31,26,23,.18); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:100; }
.rc-dropdown:hover .rc-menu, .rc-dropdown:focus-within .rc-menu { opacity:1; visibility:visible; transform:translateY(0); }
.rc-menu a { display:block; padding:9px 18px; font-size:13px; color:var(--rc-black); white-space:nowrap; }
.rc-menu a:hover { background:var(--rc-cream); color:var(--rc-orange); }
.rc-menu strong { display:block; padding:8px 18px 4px; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--rc-grey); font-weight:700; }
.rc-divider { height:1px; background:var(--rc-border); margin:6px 12px; }

/* FOOTER */
.rc-footer { background:#fff; padding:64px 0 32px; border-top:1px solid var(--rc-border); margin-top:48px; }
.rc-footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:56px; margin-bottom:48px; }
.rc-footer-brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:18px; margin-bottom:16px; color:var(--rc-black); text-decoration:none; }
.rc-footer-brand img { width:40px; object-fit:contain; }
.rc-blurb { font-size:14px; color:var(--rc-grey); line-height:1.6; max-width:280px; }
.rc-footer h4 { font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--rc-black); margin-bottom:16px; }
.rc-footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
.rc-footer ul a { font-size:14px; color:var(--rc-grey); text-decoration:none; transition:color .2s; }
.rc-footer ul a:hover { color:var(--rc-orange); }
.rc-base { border-top:1px solid var(--rc-border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--rc-grey); }
.rc-base-left { display:flex; gap:16px; flex-wrap:wrap; }
.rc-base-left span:not(:last-child)::after { content:'\2022'; margin-left:16px; opacity:.5; }
.rc-base-legal { display:flex; gap:16px; }
.rc-base-legal a { font-size:13px; color:var(--rc-grey); text-decoration:none; transition:color .2s; }
.rc-base-legal a:hover { color:var(--rc-orange); }

/* Mobiel/tablet: geen JS-hamburger op konform.roal.nl, dus nav blijft zichtbaar (wrappend,
   compacter, zonder hover-submenu's). De hoofdsecties blijven bereikbaar als directe links. */
@media (max-width:1024px){
  .rc-header .rc-container { flex-wrap:wrap; gap:8px 14px; }
  .rc-nav { gap:14px; font-size:13px; flex-wrap:wrap; justify-content:flex-start; }
  .rc-dropdown > a::after { display:none; }
  .rc-menu { display:none !important; }
  .rc-btn { display:none; }
  .rc-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){ .rc-base { flex-direction:column; align-items:flex-start; } .rc-footer-grid { grid-template-columns:1fr; } .rc-nav { gap:10px 14px; } }

/* Sub-balk onder de header voor regelset/BETA-pillen (alleen de wizard) */
.rc-subbar { background:#fff; border-bottom:1px solid #E5DFD5; padding:8px 0; }
.rc-subbar .rc-container { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; align-items:center; }

/* Bij printen: roal.nl-chrome nooit in het rapport */
@media print { .rc-header, .rc-footer, .rc-subbar { display:none !important; } }

/* Mobiel: tabellen scrollbaar maken i.p.v. de pagina op te rekken (geen HTML-wijziging nodig).
   Print (A4 ~794px) valt buiten deze breakpoint, dus het rapport blijft normaal. */
@media (max-width:640px){
  table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}