/* ===========================
   Montagebedrijf A. van Hooydonk
   Opgeschoonde CSS
   =========================== */

/* -------- Basis & reset -------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  --bg: #2D2DFF;             /* pagina-achtergrond (blauw) */
  --fg: #ffffff;             /* primaire tekstkleur */
  --fg-dim: #b9b9b9;         /* gedimde tekst (footer) */
  --accent: #c0c0c0;         /* zilvergrijs */
  --border: ridge 1mm var(--accent);
  --text: 1rem;
  --h2: 1.6rem;
  --h4: 1.8rem;
}

body{
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.5 Arial, Helvetica, sans-serif;
  border: var(--border);
}

/* Links */
a { color: var(--fg); text-decoration: none; }
a:visited { color: var(--accent); }
a:active { color: #808080; }

/* =========================
   Header / kopblokken / nav
   ========================= */

/* Bovenste balk met herhalende banner (logo.gif) */
.header{
  min-height: 220px;   /* iets groter gemaakt */
  background: var(--bg) url("../afbeeldingen/logo.gif") top center repeat-x;
  border: var(--border);
}

/* Grote kopbalken */
.header4,
.header2{
  background: var(--bg);
  color: var(--fg);
  border: var(--border);
  text-align: center;
  padding: 0.8rem 1rem;
  margin: 1.2rem auto;   /* extra ruimte boven en onder */
  max-width: 1100px;
}

.header4{ font-size: var(--h4); font-weight: 700; }  /* paginatitel */
.header2{ font-size: var(--h2); font-weight: 600; }  /* sectietitel */

/* Navigatie */
nav.mainnav{
  text-align: center;
  padding: 0.6rem 0.8rem;
}
nav.mainnav a{
  display: inline-block;
  margin: 0 .75rem;
  padding: 0.2rem 0.4rem;
}

/* =========================
   Layout / content / footer
   ========================= */

main{
  margin: 1rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}
p{ margin: 0 0 1rem; }

.centered-text{ text-align: center; }
.centered-text img{ margin-left: auto; margin-right: auto; }

/* Footer */
.site-footer{
  margin-top: 2rem;
  padding: 1rem 0.8rem;
  border-top: var(--border);
  color: var(--fg-dim);
  text-align: center;
}
.homelink{ margin-bottom: 0.5rem; display: inline-block; }

/* =========================
   Afbeeldingen / galerijen
   ========================= */

/* Standaard */
img{ border: var(--border); max-width: 100%; height: auto; display: block; }

/* Projectpagina’s (aluminium, kunststof, vliesgevels) */
.aluminium-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  justify-items: center;
  margin: 1.5rem auto;
  max-width: 1100px;
}
.aluminium-grid img{
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border);
}

/* Logo’s in links-pagina */
.links-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  justify-items: center;
  margin: 1.5rem auto;
  max-width: 1100px;
}
.links-grid img {
  width: auto;
  height: 100px;
  object-fit: contain;
  border: var(--border);
  background: #fff;
  padding: 5px;
}

/* =========================
   Responsief
   ========================= */
@media (max-width: 900px){
  .aluminium-grid{ grid-template-columns: 1fr; }
  .header4{ font-size: 1.5rem; }
  .header2{ font-size: 1.25rem; }
}
@media (max-width: 580px){
  body{ font-size: 15px; }
  nav.mainnav a{ margin: 0 .5rem; }
}