@import "/fonts/fonts.css";

:root {
  --groen: #077b72;
  --groen-licht: #77bf97;
  --groen-diep: #0b463f;
  --inkt: #333;
  --wit: #fff;
}

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

body {
  font-family: Literata, Georgia, "Times New Roman", serif;
  color: var(--inkt);
  line-height: 1.7;
  font-size: 1.0625rem;
}

h1, h2, h3 { font-family: Pacifico, cursive; font-weight: 400; line-height: 1.3; }

a { color: var(--groen); }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* header */
header { background: var(--wit); }
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: 1rem;
}
header img { width: 7rem; }
nav { display: flex; gap: 2rem; }
nav a { color: var(--inkt); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .4rem; }

/* hero */
.hero { background: var(--groen-licht); color: var(--groen-diep); text-align: center; padding: 4.5rem 1.5rem; }
.hero h1 { font-size: clamp(1.75rem, 5vw, 3rem); }

/* secties */
section { padding: 4rem 0; }
.split { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } }

h2, .portret h1 { color: var(--groen-diep); font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 1.25rem; }
p + p { margin-top: 1rem; }

.knop {
  display: inline-block; margin-top: 1.75rem;
  background: var(--groen); color: var(--wit);
  padding: .75rem 1.5rem; text-decoration: none;
}
.knop:hover { background: #05605a; }

/* recensies */
.recensies { background: var(--groen-licht); color: var(--groen-diep); }
.recensies h2 { color: var(--groen-diep); text-align: center; }
.recensies ul { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.recensies li { background: rgba(255,255,255,.35); padding: 1.5rem; font-style: italic; }

/* wie ben ik */
.portret { background: var(--groen-licht); }
.portret .split { gap: 0; }
.portret .tekst { padding: 4rem 1.5rem; max-width: 34rem; margin-left: auto; }
.portret img { width: 100%; object-fit: cover; height: 100%; }

/* contact */
.contact { background: var(--groen-licht); }
.contact .kaart { background: var(--wit); padding: 3rem 2rem; text-align: center; }
.contact h1 { color: var(--groen-diep); font-size: clamp(1.75rem, 5vw, 2.5rem); }
.gegevens { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 3rem; text-align: left; }

/* tekstpagina */
.tekst-pagina { max-width: 38rem; margin-inline: auto; }
.tekst-pagina h1 { color: var(--groen-diep); margin-bottom: 1.5rem; }
.tekst-pagina h2 { font-size: 1.5rem; margin-top: 2.5rem; }

/* footer */
footer { padding: 3rem 0; text-align: center; }
footer nav { justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
.socials { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.socials a { display: block; opacity: .85; }
.socials a:hover { opacity: 1; }
.socials img { width: 1.5rem; height: 1.5rem; }
.recensies .bron { margin-top: 1rem; font-style: normal; font-size: .9375rem; opacity: .9; }
.split > img { max-width: 22rem; margin: 0 auto; }
.portret img { max-width: none; }