/* ===========================================================
   247ICT-template — sjabloon "Tegels" (Metro-stijl)
   Menu als gekleurde tegels, inhoud in (half)witte vlakken op een
   achtergrondfoto, rechte hoeken, grijze kopbalken. Gemaakt bij de
   migratie van spesautobanden.nl (WordPress-thema "Metro").
   Laadt bovenop styles.css; de instellingen uit Opmaak & huisstijl gaan
   voor (accentkleur = kleur van de tegels, tweede kleur = hover en
   kopbalken, achtergrondfoto in Opmaak & huisstijl » Achtergrond).
   =========================================================== */
:root {
  --accent: #ffea00;
  --accent-donker: #c9b800;
  --accent-licht: #fffbd6;
  --donker: #444444;
  --tegel-grijs: var(--accent-2, #898989);
  --paper: rgba(255,255,255,.94);
  --ink: #1a1a1a;
  --muted: #333333;
  --line: #dddddd;
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kop: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --shadow: 0 10px 26px -16px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 12px -8px rgba(0,0,0,.4);
  --kop-gewicht: 700;
  --maxw: 1240px;
}
body { background-color: #e6e6e6; }
h1, h2, h3, h4 { letter-spacing: 0; }
.btn, .tekstrij-kaart, .card, .tekstrij-afbeelding img, .pagina-inhoud img, .map-embed, .contact-info .ico { border-radius: 0; }

/* ---- Bovenbalk: smal en doorzichtig op de foto ---- */
.topbar { background: rgba(0,0,0,.35); color: #fff; }
.topbar svg { color: var(--accent); }

/* ---- Header: logo in een wit vlak, menu als tegels ---- */
.site-top { position: relative; }
.site-header { background: transparent; backdrop-filter: none; border-bottom: 0; }
.site-header .nav { height: auto; padding-block: 12px; gap: 10px; align-items: stretch; }
/* Header, bovenbalk en het inhoudsvlak precies even breed, zodat de buitenste tegels
   (logo en knop) recht boven de randen van de inhoud staan. */
@media (min-width: 1101px) {
  .site-header .container, .topbar .container { width: min(var(--maxw), 100% - 40px); max-width: none; padding-inline: 0; }
}
.brand { flex-shrink: 0; background: var(--paper); padding: 8px 16px; box-shadow: var(--shadow-sm); }
@media (min-width: 1101px) {
  .nav-links { flex: 1 1 auto; justify-content: flex-end; gap: 6px; align-items: stretch; margin-left: auto; min-width: 0; }
  .nav-links > a, .nav-links > .nav-submenu { flex: 1 1 0; min-width: max-content; max-width: 150px; }
  .nav-links > a, .nav-links > .nav-submenu > summary {
    display: flex; align-items: flex-end; justify-content: flex-start; width: 100%;
    min-height: 92px; padding: .5rem .55rem; line-height: 1.2; white-space: nowrap;
    background: color-mix(in srgb, var(--accent) 94%, transparent);
    color: var(--op-accent, #000); font-weight: 400; font-size: .86rem;
    box-shadow: var(--shadow-sm); transition: background .15s, color .15s;
  }
  .nav-links > .nav-submenu { display: flex; }
  .nav-links > a::after { display: none; }
  .nav-links > a:hover, .nav-links > a.is-active,
  .nav-links > .nav-submenu > summary:hover, .nav-links > .nav-submenu[open] > summary, .nav-submenu[data-active="true"] > summary {
    background: var(--tegel-grijs); color: #fff;
  }
  .nav-links > .nav-submenu > summary svg { display: none; }
  /* Hover/actief: altijd witte tekst op grijs. Met 'body.thema-tegels' ervoor, zodat de
     algemene hoverkleur van de Tweede kleur (die hier gelijk is aan het tegelgrijs) niet wint —
     anders verdween de tekst. */
  body.thema-tegels .nav-links > a:hover, body.thema-tegels .nav-links > a.is-active,
  body.thema-tegels .nav-links > .nav-submenu:hover > summary, body.thema-tegels .nav-links > .nav-submenu[open] > summary,
  body.thema-tegels .nav-links > .nav-submenu[data-active="true"] > summary { background: var(--tegel-grijs); color: #fff; }
  /* Uitklapmenu opent bij aanwijzen met de muis (zoals Metro): zie main.js. */
  /* Uitklapmenu: grijs vlak met witte tekst, hover in de tegelkleur */
  .nav-submenu__panel { top: 100%; left: 0; transform: none; width: 260px; padding: 0; border: 0; background: var(--tegel-grijs); box-shadow: var(--shadow); }
  .nav-submenu__panel a { color: #fff; border-radius: 0; padding: .6rem .9rem; border-bottom: 1px solid rgba(255,255,255,.35); }
  body.thema-tegels .nav-submenu__panel a, body.thema-tegels .nav-submenu__panel a.is-active { color: #fff; }
  body.thema-tegels .nav-submenu__panel a.is-active { background: rgba(0,0,0,.12); }
  body.thema-tegels .nav-submenu__panel a:hover { background: var(--accent); color: var(--op-accent, #000); }
  .nav-links__knop, .nav-cta .btn { align-self: stretch; display: flex; align-items: flex-end; min-height: 92px; }
}
/* Smallere schermen (net boven de telefoonweergave): kleinere tegels, zodat alles past. */
@media (min-width: 1101px) and (max-width: 1260px) {
  .nav-links { gap: 4px; }
  .nav-links > a, .nav-links > .nav-submenu > summary { min-height: 78px; padding: .4rem .45rem; font-size: .8rem; }
  .nav-cta .btn { min-height: 78px; padding-inline: 1rem; font-size: .85rem; }
  .brand { padding: 6px 10px; }
  .brand img { height: calc(var(--logo-hoogte, 40px) * .8); }
}
.nav-cta { align-items: stretch; }
.nav-cta .btn { border-radius: 0; }
.nav-toggle { align-self: center; background: var(--accent); }

/* ---- Inhoud in een wit vlak op de foto ---- */
main#inhoud { width: min(var(--maxw), 100% - 40px); margin: 0 auto 18px; background: var(--paper); box-shadow: var(--shadow-sm); }
main#inhoud .container { max-width: var(--maxw); }
.bg-paper { background: transparent; }
.bg-mint { background: color-mix(in srgb, var(--accent) 12%, #fff); }

/* Paginakop: witte balk met de titel, zoals Metro */
.page-hero { background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero h1 { color: var(--kop-kleur, var(--ink)); font-size: calc(clamp(1.6rem, 2.6vw, 2.1rem) * var(--kop-schaal, 1)); }
.page-hero p { color: var(--muted); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: var(--muted); font-style: italic; font-size: .85rem; }

/* Grijze kopbalken (zijbalk, widgets) */
.zijbalk-contact__blok, .widget { border: 0; background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
.zijbalk-contact__kop, .widget__title { background: var(--tegel-grijs); color: #fff; padding: .55rem .9rem; margin: 0 0 .6rem; }

/* Hero: homefoto als brede banner in het vlak */
.hero { color: #fff; }
.hero::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 85%); }
.hero h1, .hero .hero__dia-kop { color: var(--hero-kop-kleur, #fff); text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero p { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(0,0,0,.2); }

/* Afsluiting en footer */
.cta { background: var(--tegel-grijs); border-radius: 0; }
.site-footer { background: color-mix(in srgb, var(--donker) 94%, transparent); }
.site-footer a { color: var(--accent); }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; }

@media (max-width: 1100px) {
  .site-header { background: var(--paper); }
  .brand { box-shadow: none; padding: 4px 0; background: transparent; }
  .nav-links { background: #fff; }
  main#inhoud { width: 100%; margin-bottom: 0; }
}
/* Beheerlink in de (witte) paginakop leesbaar houden */
.page-hero .hero__beheerlink a { color: var(--muted); }