/* ========================================
  STYLES.CSS
  Algemene styling voor de website
  ======================================== */

/* ========================================
   1. KLEUREN & VARIABELEN (Dark Mode support)
   ======================================== */

:root {
  /* Licht thema (standaard) */
  --bg: #ffffff;           /* Achtergrond kleur */
  --fg: #111111;           /* Tekst kleur */
  --card: #f5f5f5;         /* Kaart/panel achtergrond */
}

/* Dark mode variabelen */
.dark {
  --bg: #0b0b0b;           /* Donkere achtergrond */
  --fg: #eaeaea;           /* Lichte tekst */
  --card: #1a1a1a;         /* Donkere kaart achtergrond */
}

/* ========================================
   2. ALGEMENE STIJLEN (Body, Links, etc)
   ======================================== */

body {
  background: var(--bg);   /* Gebruikt de kleurvariabele */
  color: var(--fg);        /* Gebruikt de tekstkleurvariabele */
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;          /* Links erven tekstkleur */
}

/* ========================================
   3. NAVIGATIEBALK (w3-bar)
   ======================================== */

.w3-bar {
  background: var(--card) !important;  /* Kaartkleur achtergrond */
}

/* ========================================
   4. DARK MODE KNOP
   ======================================== */

.dark-toggle {
  margin-left: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: #eee;       /* Licht grijs in licht thema */
  color: #111;
}

.dark .dark-toggle {
  background: #333;       /* Donker grijs in dark thema */
  color: #fff;            /* Witte tekst */
}

/* ========================================
   5. HERO SECTIE (Welkom afdeling)
   ======================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 100vh;
  padding: 60px 6%;
}

.hero .intro {
  max-width: 52%;          /* Links 52% breedte */
  padding-right: 24px;     /* Ruimte tussen tekst en afbeelding */
}

.hero .intro h1 {
  font-size: 2.6rem;       /* Grote titel */
  margin: 0 0 8px 0;       /* Geen marge, 8px onder */
}

.hero .intro p {
  font-size: 1.05rem;      /* Iets groter dan normaal */
  line-height: 1.45;       /* Meer ruimte tussen regels */
}

/* ========================================
   6. GEKANTELDE AFBEELDING
   ======================================== */

#floating-img {
  position: relative;      /* Keep image in flow so it doesn't overlap text */
  width: 100%;
  transform: rotate(6deg);  /* subtle tilt */
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);  /* Schaduw effect */
  z-index: 10;
  border-radius: 0;      /* no rounded corners */
  cursor: pointer;
}

/* ========================================
   7. RESPONSIVE DESIGN (Klein scherm)
   ======================================== */

@media (max-width: 900px) {
  .hero {
    flex-direction: column;  /* Stapel bovenop elkaar */
    min-height: unset;
    padding: 24px;
  }
  
  .hero .intro {
    max-width: 100%;         /* Volledige breedte */
    padding-right: 0;        /* Geen zijruimte */
    margin-bottom: 18px;     /* Ruimte onder */
  }
  
  #floating-img {
    position: relative;        /* Normale positie */
    transform: none;         /* Geen transformatie on small screens */
    width: 80%;              /* 80% breedte */
    max-width: 420px;        /* Maximum 420px */
  }
}

/* ========================================
   9. HEADER / NAV STYLES
   ======================================== */
.site-header {
  background: var(--card);
  padding: 12px 6%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 120;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.logo { text-decoration: none; color: inherit; font-weight: 700; }
.site-nav a { margin-left: 12px; text-decoration: none; color: inherit; padding: 8px 10px; border-radius: 0; }

/* ========================================
   10. PHOTOS GRID & CARD STYLES
   ======================================== */
.photo-grid { display: flex; gap: 16px; flex-wrap: wrap; padding: 24px 6%; max-width: 1200px; margin: 0 auto; }
.photo-card { position: relative; display: block; width: 300px; border-radius: 0; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.photo-card img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 0; }
.photo-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); color: #fff; }
.photo-card .meta h3, .photo-card .meta p { margin: 0; }

@media (max-width: 600px) {
  .photo-card { width: 100%; }
  .photo-card img { height: 180px; }
  .site-nav { display: flex; gap: 8px; }
}

/* Small utility container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 6%; }
.page-content { padding: 28px 0; }

/* Layout columns for hero */
.left-column { flex: 1 1 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; }
.right-column { flex: 1 1 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; }

/* Welcome section centering */
.welcome { text-align: center; }
.welcome h1 { text-align: center; }
.welcome p { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    min-height: unset;
    padding: 24px;
  }
  .left-column, .right-column { max-width: 100%; flex: 1 1 100%; }
  .right-column { margin-top: 18px; }
  .welcome { text-align: center; }
  #floating-img { margin: 0 auto; display: block; }
}

/* Index page specific dark background */
.index-dark { --bg: #000; --fg: #fff; }

/* Remove rounded corners on large floating image */
#floating-img { border-radius: 0; }

/* Contact form */
.contact-form { max-width: 520px; }
.contact-form label { display: block; margin-bottom: 8px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 8px; margin-top: 6px; border: 1px solid #ccc; background: #fff; color: #000; }
.contact-form button { margin-top: 8px; padding: 10px 14px; border-radius: 0; border: 0; background: #222; color: #fff; cursor: pointer; }

/* Dark header only on index page */
.index-dark .site-header {
  background: #111;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.index-dark .site-header .logo { color: #fff; }
.index-dark .site-nav a { color: #fff; }

/* make the intro (contact area) sit lower on the page */
.intro { margin-top: 40px; }
.intro p { max-width: 48ch; line-height: 1.5; }

/* Welcome lead text */
.welcome .lead { font-size: 1.05rem; margin-top: 8px; }

/* Contact section smaller heading */
.contact-section h2 { font-size: 1.25rem; margin-top: 24px; }
.contact-intro { margin-bottom: 12px; }
.contact-info { margin-top: 12px; font-size: 0.95rem; color: #ddd; }

/* Footer styling */
.site-footer { padding: 12px 6%; margin-top: 28px; text-align: center; font-size: 0.85rem; color: var(--fg); }
.site-footer p { margin: 4px 0; }

@media (max-width: 700px) {
  .contact-form { width: 100%; }
  .welcome .lead { font-size: 1rem; }
  .contact-section h2 { font-size: 1.1rem; }
  .page-content { padding: 28px 6%; }
}

/* CTA button under welcome */
.cta-button { display: inline-block; margin-top: 12px; margin-right: 8px; padding: 10px 16px; background: #222; color: #fff; text-decoration: none; border-radius: 0; }

/* Make hero image clickable and keep styles */
.hero-image-link { display: block; position: relative; text-align: center; }
.hero-image-link img { display: inline-block; max-width: 100%; }

/* ========================================
   8. H1 STIJLEN (Andere pagina's)
   ======================================== */

h1 {
  margin: 0;               /* Geen marge */
}