/* Beuningen huisstijl-overlay op Wassenaar BBV-muur v2 (handgemaakt thema, 05-11-2026).
   Bron: de eigen ontwerptokens van www.beuningen.nl (inline :root-variabelen, Cuatro/SIM-sjabloon):
     --primary / --h1Color / --linkColor / --buttonBackgroundColor   #EE0019  rood (contrast wit 4,52:1)
     logo-rood (logo_gemeente_beuningen.svg)                         #e30613  (4,88:1, hover/donker)
     --verticalDesignFooterColumnsBackgroundColor                     #EE0019  rode voet met chevronpatroon
     --colouredTopTasksDesignBlocksBackgroundColor                    #00699E  blauw (alleen focus-accent)
     --accessibilityBarBackground                                     #2d3748  donker leisteen
     --h3Color #303030 (tekst) · --buttonBorderRadius 0 · witte tegels met zachte schaduw
     letter  --fontFamily 'Nunito Sans' (OFL; zelf gehost, geen Google/Bunny-aanroep)
   Machinerie (app.js, bbv-muur-v2.js) en de BBV-hoofdstukkleuren blijven ongemoeid. */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("nunito-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("nunito-sans-latin-700.woff2") format("woff2");
}

:root {
  --bn-rood: #ee0019;
  --bn-rood-donker: #c80015;
  --bn-blauw: #00699e;
  --bn-lei: #2d3748;
  --bn-tekst: #303030;
  --bn-grijs: #f4f4f4;
  --bn-lijn: #dcdcdc;
  --bn-schaduw: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.14);
  --bn-radius: 0;
  /* het chevronpatroon van de rode voet op beuningen.nl, nagetekend als vlak */
  --bn-chevron: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 40px, transparent 40px 80px),
                repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 40px, transparent 40px 80px);
}

body.beuningen-site {
  --fontFamily: "Nunito Sans", calibri, arial, sans-serif;
  --primary: var(--bn-rood);
  --primary-dark: var(--bn-rood-donker);
  --ws-groen: var(--bn-rood);
  --accent: var(--bn-rood);
  --bodyColor: var(--bn-tekst);
  --wassenaar-donker: var(--bn-rood-donker);
  font-family: var(--fontFamily);
  color: var(--bn-tekst);
  background: #fff;
  overflow-x: clip;
}

.beuningen-site :focus-visible {
  outline: 3px solid var(--bn-blauw);
  outline-offset: 2px;
}

/* Kop: wit, logo links, titel in rood — zoals beuningen.nl */
.beuningen-site .site-header {
  background: #fff;
  border-bottom: 0;
}
.beuningen-site .header-text h1,
.beuningen-site .header-title-link {
  color: var(--bn-rood);
  font-weight: 700;
}
.beuningen-site .header-text .subtitle {
  color: var(--bn-tekst);
}

/* Menubalk: wit met rode links en een dunne lijn, zoals de servicebalk op beuningen.nl */
.beuningen-site .site-nav-bar {
  background: #fff;
  border-top: 1px solid var(--bn-lijn);
  border-bottom: 1px solid var(--bn-lijn);
}
.beuningen-site .site-nav-link {
  color: var(--bn-rood);
  font-weight: 700;
  border-bottom: 3px solid transparent;
}
.beuningen-site .site-nav-link.site-nav-actief,
.beuningen-site .site-nav-link:hover {
  background: transparent;
  color: var(--bn-rood-donker);
  border-bottom-color: var(--bn-rood);
}
.beuningen-site #searchInput {
  border: 1px solid #6f6f6f;
  border-radius: 0;
  font-family: inherit;
}
.beuningen-site #searchBtn,
.beuningen-site .overzicht-zoek button {
  background: var(--bn-rood);
  border-color: var(--bn-rood);
  border-radius: 0;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
}
.beuningen-site #searchBtn:hover,
.beuningen-site .overzicht-zoek button:hover {
  background: var(--bn-rood-donker);
  border-color: var(--bn-rood-donker);
}

/* Overzicht: witte tegels op een rood vlak met het chevronpatroon, zoals de witte
   toptaaktegels op beuningen.nl. De band loopt over de volle breedte achter het
   begin van de muur. */
.beuningen-site .dossier-overzicht {
  position: relative;
  isolation: isolate;
  padding-top: 0.5rem;
}
.beuningen-site .dossier-overzicht::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2rem;
  left: 50%;
  width: 100vw;
  height: 17rem;
  transform: translateX(-50%);
  background: var(--bn-chevron), var(--bn-rood);
}
.beuningen-site .dossier-intro {
  color: #fff;
  font-weight: 700;
}

/* Hoofdstuktegels: wit, rechte hoek, zachte schaduw. De hoofdstukkleur (BBV) blijft
   als linkerrand: die kleur betekent iets. */
.beuningen-site .c26-hfd-tile {
  background: #fff;
  border-radius: var(--bn-radius);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  box-shadow: var(--bn-schaduw);
}
.beuningen-site .c26-hfd-name {
  color: var(--bn-rood);
  font-weight: 700;
}
.beuningen-site .c26-hfd-tile-head:hover .c26-hfd-name {
  color: var(--bn-rood-donker);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Weergaveknoppen */
.beuningen-site .c26-toggle {
  border-radius: 0;
  box-shadow: var(--bn-schaduw);
}
.beuningen-site .c26-toggle button {
  font-family: inherit;
  font-weight: 700;
  border-radius: 0;
}
.beuningen-site .c26-toggle button.is-on {
  background: var(--bn-rood);
  border-color: var(--bn-rood);
  color: #fff;
}

.beuningen-site .dossier-terug {
  color: var(--bn-rood);
}
.beuningen-site .dossier-terug:hover {
  color: var(--bn-rood-donker);
}

/* Voet: het rood met chevronpatroon van beuningen.nl */
.beuningen-site .site-footer {
  background: var(--bn-chevron), var(--bn-rood);
  color: #fff;
}
.beuningen-site .site-footer a {
  color: #fff;
  text-decoration: underline;
}

/* Zoekveld: rechte hoeken, zoals het zoekveld op beuningen.nl */
.beuningen-site .header-zoek-inner {
  border-radius: 0;
}

/* Weergaveknoppen op de rode band: wit kader, zodat de actieve rode knop
   niet in de band wegvalt */
.beuningen-site .c26-toggle {
  border: 0;
  padding: 3px;
  background: #fff;
}

/* Telefoon: logo en titel niet tegen de schermrand */
@media (max-width: 600px) {
  .beuningen-site .header-top {
    padding-left: 16px;
    padding-right: 16px;
  }
}