/* ============================================
   HALSONDERKOP — Hoofdstijlblad (style.css)
   ============================================
   
   INHOUDSOPGAVE
   -------------
   1.  Google Font import
   2.  CSS variabelen (kleuren, afmetingen)
   3.  Reset & basisstijlen
   4.  Navigatie (header)
   5.  Hamburger menu (mobiel)
   6.  Mobiel menu (overlay)
   7.  Out-of-office banner
   8.  Pagina-inhoud (wit blok)
   9.  Twee-kolom layout
   10. Sectietitels als afbeelding
   11. SEO-only verborgen tekst
   12. Paragrafen
   13. Suminagashi band (scheidingsstrook)
   14. Footer blokken (locatie + contact)
   15. Welkom-pagina footer (formulier + waar)
   16. Contactformulier
   17. Contactpagina layout
   18. Homepage (splash / index)
   19. Responsive (tablet)
   20. Responsive (mobiel)
   ============================================ */


/* ============================================
   1. GOOGLE FONT
   Familjen Grotesk wordt geladen van Google.
   Geen installatie nodig — werkt automatisch
   als er een internetverbinding is.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;1,400&display=swap');


/* ============================================
   2. CSS VARIABELEN
   Centrale plek voor kleuren en afmetingen.
   Wijzig hier om de hele site aan te passen.

   AANPASBAAR:
   --bg          : achtergrondkleur van alle pagina's
   --text        : tekstkleur
   --sage        : salie-groen uit het logo (momenteel
                   enkel gebruikt als referentie)
   --nav-height  : hoogte van de navigatiebalk
   --max-width   : maximale breedte van de content
   ============================================ */

:root {
  --bg: rgb(245, 245, 245);
  --text: rgb(0, 0, 0);
  --sage: #9ab5ac;
  --font: 'Familjen Grotesk', sans-serif;
  --max-width: 1100px;
  --nav-height: 100px;
}


/* ============================================
   3. RESET & BASISSTIJLEN
   Zorgt dat alle browsers dezelfde basis hebben.
   Niet aanpassen tenzij je weet wat je doet.
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased; /* Betere letterweergave op Mac/iOS */
  background-color: var(--bg);
}

/* Afbeeldingen schalen altijd mee en blokkeren geen tekst */
img { max-width: 100%; height: auto; display: block; }

/* Links erven de tekstkleur en hebben geen onderstreping */
a { color: inherit; text-decoration: none; }


/* ============================================
   4. NAVIGATIE (HEADER)
   De navigatiebalk bovenaan elke pagina.
   Heeft de suminagashi als achtergrondafbeelding.
   Blijft plakken bovenaan bij het scrollen (sticky).

   AANPASBAAR:
   - height via --nav-height in sectie 2
   - padding: 0 80px = linker/rechter marge
     (80px = ruimte aan beide zijden)
   - background-position: bepaalt welk deel van
     de suminagashi zichtbaar is in de header.

     Voorbeelden (eerste waarde = horizontaal,
                  tweede waarde = verticaal):
       center top    → bovenste deel van de afbeelding
       center center → midden van de afbeelding
       center bottom → onderste deel
       left center   → verschuift naar links
       right center  → verschuift naar rechts
       40% 60%       → exacte positie in procenten

     Nav en sumi-band (sectie 13) kunnen elk
     een andere positie hebben.
   ============================================ */

nav {
  width: 100%;
  height: var(--nav-height);
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  background-image: url('../images/suminagashi-inktmarmer-halsonderkop-therapie.webp');
  background-size: cover;
  background-position: center bottom; /* AANPASBAAR: zie uitleg hierboven */
}

/* Logo-link in de navigatie (klikt door naar index/homepage) */
.nav-logo-link {
  display: flex;
  align-items: center;
}

/* AANPASBAAR: hoogte van het logo in de navigatie */
.nav-logo {
  height: 80px;
  width: auto;
}

/* Pulse animatie — gebruikt door het logo op de homepage */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.96); }
}

/* Navigatielinks rechts in de balk */
.nav-links {
  display: flex;
  gap: 48px; /* Ruimte tussen de links — AANPASBAAR */
  list-style: none;
}

.nav-links a {
  font-size: 1rem;
  font-weight: 600;              /* Vetgedrukt — AANPASBAAR: 400 = normaal, 600 = vet */
  letter-spacing: 0.01em;
  color: var(--text);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent; /* Onzichtbare lijn, wordt zichtbaar bij hover */
  transition: border-color 0.2s ease;
}

/* Actieve pagina en hover: onderlijn zichtbaar */
.nav-links a:hover,
.nav-links a.active {
  border-bottom-color: var(--text);
}


/* ============================================
   5. HAMBURGER MENU (MOBIEL)
   Drie streepjes die verschijnen op kleine schermen.
   Vervangt de gewone navigatielinks.
   Wordt zichtbaar onder 900px schermbrteede.
   ============================================ */

.nav-hamburger {
  display: none; /* Verborgen op desktop */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

/* Elk streepje van het hamburger-icoon */
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  transition: all 0.3s ease;
}

/* Animatie: hamburger wordt een X bij klikken */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================
   6. MOBIEL MENU (OVERLAY)
   Volledig scherm menu dat opent op mobiel.
   Bevat dezelfde links als de desktop navigatie.
   ============================================ */

.nav-mobile {
  display: none; /* Verborgen tenzij .open klasse toegevoegd */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  padding: 100px 40px 40px;
  z-index: 99; /* Net onder de navigatiebalk (z-index 100) */
  flex-direction: column;
  gap: 28px;
}

.nav-mobile.open { display: flex; }

.nav-mobile a {
  font-size: 1.4rem;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  color: var(--text);
}


/* ============================================
   7. OUT-OF-OFFICE BANNER
   Zichtbaar op de contactpagina als
   AANMELDINGSSTOP = true in js/main.js.

   AANPASBAAR:
   - De tekst en aan/uit via js/main.js
   - Stijl (kleur, lettergrootte) hier aanpassen
   ============================================ */

#contact-banner {
  display: none; /* Wordt zichtbaar via JavaScript als AANMELDINGSSTOP = true */
  font-size: 1rem;
  margin-bottom: 20px;
}


/* ============================================
   8. PAGINA-INHOUD (WIT BLOK)
   Het witte vlak dat over de suminagashi
   achtergrond ligt op elke inhoudspagina.

   AANPASBAAR:
   - padding: 48px 80px 64px
     = boven / links+rechts / onder
     (80px = zijdelingse marge)
   ============================================ */

.page-content {
  background-color: var(--bg);
  width: 100%;
  padding: 48px 80px 64px;
}


/* ============================================
   9. TWEE-KOLOM LAYOUT
   Gebruikt op: welkom, voor-wie, door-wie.
   Tekst links, foto rechts.

   AANPASBAAR:
   - grid-template-columns: 1fr 420px
     = tekst neemt beschikbare ruimte,
       foto is altijd 420px breed
   - gap: 64px = ruimte tussen de twee kolommen
   ============================================ */

.two-col {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 64px;
  align-items: center; /* Beide kolommen starten bovenaan */
}

/* Secties binnen de tekstkolom */
.section { margin-bottom: 48px; }
.section:last-child { margin-bottom: 0; }


/* ============================================
   10. SECTIETITELS ALS AFBEELDING
   De handgeschreven titels zijn afbeeldingen,
   gewikkeld in een <h2> voor SEO.

   AANPASBAAR:
   - max-height: 28px = grootte van de titels
     Vergroten = grotere handgeschreven titels
   ============================================ */

h2.image-title { display: block; margin-bottom: 12px; }
h2.image-title img { max-height: 28px; width: auto; }


/* ============================================
   11. SEO-ONLY VERBORGEN TEKST
   Zelfde techniek als Squarespace gebruikte.
   Tekst is leesbaar voor Google en AI-crawlers,
   maar volledig onzichtbaar voor bezoekers.
   Gebruikt voor FAQ op de contactpagina.
   NIET AANPASSEN.
   ============================================ */

.seo-only {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ============================================
   12. PARAGRAFEN
   Basisstijl voor alle tekstblokken.

   AANPASBAAR:
   - font-size: 1rem = lettergrootte
   - line-height: 1.75 = regelafstand
   - max-width: 680px = maximale tekstbreedte
     (voorkomt te lange leesregels)
   ============================================ */

.section p, .page-content > p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 12px;
  max-width: 680px;
}
.section p:last-child { margin-bottom: 0; }


/* ============================================
   13. SUMINAGASHI BAND
   De zichtbare strook van de suminagashi
   tussen het witte inhoudsblok en de footer.
   background-attachment: fixed zorgt dat de
   afbeelding niet mee scrollt (parallax effect).

   AANPASBAAR:
   - height: 160px = hoogte van de strook
   - background-position: bepaalt welk deel van
     de suminagashi zichtbaar is in de strook.
     Zelfde opties als bij de navigatie (sectie 4):
       center top / center center / center bottom
       left center / right center / 40% 60%
   ============================================ */

.sumi-band {
  height: 160px;
  background-image: url('../images/suminagashi-inktmarmer-halsonderkop-therapie.webp');
  background-size: cover;
  background-position: center; /* AANPASBAAR: zie uitleg hierboven */
  background-attachment: fixed; /* Parallax: beweegt niet mee bij scrollen */
}


/* ============================================
   14. FOOTER BLOKKEN (LOCATIE + CONTACT)
   Verschijnt onderaan elke pagina (behalve welkom).
   Twee kolommen: LOCATIE links, CONTACT rechts.
   Inhoud staat in js/layout.js.

   AANPASBAAR:
   - Tekst (adres, telefoon) in js/layout.js
   - Afbeeldingen (titels) in js/layout.js
   - padding: boven / links+rechts / onder
   ============================================ */

.footer-blocks {
  background-color: var(--bg);
  width: 100%;
  padding: 48px 80px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Twee gelijke kolommen */
}

.footer-block {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Horizontaal centreren */
  text-align: center;
}

/* Titelafbeeldingen in de footer */
.footer-block h3.image-title { margin-bottom: 16px; }
.footer-block h3.image-title img { max-height: 36px; width: auto; }

.footer-block p { font-size: 1rem; line-height: 1.9; }


/* ============================================
   15. WELKOM-PAGINA FOOTER (FORMULIER + WAAR)
   Alleen op welkom.html — afwijkende footer
   met het contactformulier links en locatie rechts.
   Tekst is NIET gecentreerd (eigen stijl).

   AANPASBAAR:
   - gap: 80px = ruimte tussen formulier en locatie
   - Inhoud rechtstreeks in welkom.html
   ============================================ */

.welkom-footer {
  background-color: var(--bg);
  width: 100%;
  padding: 48px 80px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Titelafbeeldingen in de welkom-footer */
.welkom-footer-col h2.image-title { margin-bottom: 16px; }
.welkom-footer-col h2.image-title img { max-height: 36px; width: auto; }
.welkom-footer-col p { font-size: 1rem; line-height: 1.75; }


/* ============================================
   16. CONTACTFORMULIER
   Stijl van het formulier op welkom.html
   en contact.html.

   AANPASBAAR:
   - border-radius: 20px = afronding van de velden
     (hoger = ronder, 0 = rechthoekig)
   - background-color: rgba(0,0,0,0.06) = grijze tint
     van de invoervelden
   ============================================ */

.contact-form { margin-top: 16px; }
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  background-color: rgba(0,0,0,0.06); /* Lichtgrijs — AANPASBAAR */
  border: none;
  border-radius: 20px;               /* Afgeronde hoeken — AANPASBAAR */
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
  transition: background-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

/* Iets donkerder bij focus (actief veld) */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background-color: rgba(0,0,0,0.1);
}

/* Berichtveld: groter en licht afgerond */
.form-group textarea {
  min-height: 120px;
  resize: vertical;     /* Gebruiker kan hoogte aanpassen */
  border-radius: 16px;  /* Iets minder rond dan de andere velden */
}

/* Tekenteller onder het berichtveld */
.char-counter {
  text-align: right;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.45);
  margin-top: 4px;
}
/* Wordt donkerder als limiet bijna bereikt (90%) */
.char-counter.warning { color: rgba(0,0,0,0.75); }

/* Verzendknop: geen achtergrond, enkel een onderlijn */
.form-submit {
  background: none;
  border: none;
  border-bottom: 2px solid var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0 6px;
  margin-top: 8px;
  transition: opacity 0.2s;
}
.form-submit:hover { opacity: 0.6; }

/* Feedback na verzenden (succes of fout) */
.form-message {
  margin-top: 14px;
  font-size: 0.9rem;
  display: none; /* Verborgen tot het formulier verstuurd wordt */
  padding: 10px 0;
}
.form-message.success { display: block; }
.form-message.error { display: block; color: rgba(0,0,0,0.7); }


/* ============================================
   17. CONTACTPAGINA LAYOUT
   Formulier links, foto rechts (contact.html).
   Daaronder: tarief en locatie op volle breedte.
   ============================================ */

.contact-two-col {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}

/* Foto van de praktijkruimte: past zich aan zonder bij te snijden */
.contact-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 500px;
}

/* Tarief en locatie secties onder het formulier */
.contact-info-section {
  max-width: var(--max-width);
  margin: 0 auto 48px;
}

.contact-info-section h2.image-title { margin-bottom: 12px; }
.contact-info-section h2.image-title img { max-height: 28px; width: auto; }
.contact-info-section p { font-size: 1rem; line-height: 1.9; }


/* ============================================
   18. HOMEPAGE (SPLASH / INDEX.HTML)
   Voltscherm achtergrond met pulserend logo.
   Geen navigatie op deze pagina.

   AANPASBAAR:
   - max-width: 50% = grootte van het logo
     (zie ook responsive sectie voor mobiel)
   - background-position: center = positie foto
   ============================================ */

.homepage-wrap {
  min-height: 100vh; /* Volledig scherm */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-image: url('../images/therapiepraktijk-antwerpen-linkeroever.webp');
  background-size: cover;
  background-position: center;
}

.welcome-logo {
  width: 100%;
  text-align: center;
}

/* AANPASBAAR: max-width bepaalt de grootte van het logo op de homepage */
.homepage-logo {
  max-width: 35%;
  height: auto;
  margin: 0 auto;
  animation: homepage-pulse 2s infinite;
}

/* Pulse animatie van het homepage logo */
@keyframes homepage-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Op tablet: logo iets kleiner */
@media (max-width: 768px) {
  .homepage-logo { max-width: 60%; }
}


/* ============================================
   19. RESPONSIVE — TABLET (max 900px)
   Aanpassingen voor schermen smaller dan 900px:
   - Navigatielinks verdwijnen → hamburger verschijnt
   - Twee kolommen worden één kolom
   - Paddings worden kleiner
   ============================================ */

@media (max-width: 900px) {
  /* Navigatie */
  nav { padding: 0 24px; height: 80px; }
  .nav-logo { height: 52px; }
  .nav-links { display: none; }        /* Links verborgen op mobiel */
  .nav-hamburger { display: flex; }    /* Hamburger zichtbaar op mobiel */

  /* Inhoud */
  .page-content { padding: 40px 24px 48px; }

  /* Twee kolommen worden één kolom */
  .two-col,
  .contact-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Welkom footer ook één kolom */
  .welkom-footer {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 24px 48px;
  }

  /* Algemene footer ook één kolom */
  .footer-blocks {
    padding: 40px 24px 48px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Suminagashi band: geen parallax op mobiel (scroll-problemen) */
  .sumi-band { height: 120px; background-attachment: scroll; }

  /* Contactfoto op mobiel: vaste hoogte */
  .contact-photo img { height: 280px; }
}


/* ============================================
   20. RESPONSIVE — MOBIEL (max 480px)
   Extra aanpassingen voor kleine smartphones.
   ============================================ */

@media (max-width: 480px) {
  nav { padding: 0 16px; }
  .page-content { padding: 32px 16px 40px; }
  .welkom-footer { padding: 32px 16px 40px; }
  .footer-blocks { padding: 32px 16px 40px; }
  .homepage-logo { width: 220px; }
  .sumi-band { height: 90px; }
}