/* Overblijfplanner.nl — statische versie van het oude Enfold-thema */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-300.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700.woff2") format("woff2");
}

:root {
  --accent: #f49622;
  --accent-hover: #f5a733;
  --accent-dark: #d27400;
  --yellow: #ffcc03;
  --orange: #f49422;
  --green: #83a846;
  --grey-1: #e2e2e2;
  --grey-2: #dbdbdb;
  --grey-bg: #f2f2f2;
  --border: #ebebeb;
  --muted: #969696;
  --text: #000;
  --header-h: 88px;
  --header-h-small: 44px;
  /* Actuele hoogte van de header; wordt bij het scrollen door js/main.js
     vloeiend van --header-h naar --header-h-small gezet (zoals de oude site). */
  --header-h-cur: var(--header-h);
  --container: 1310px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-small); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; }
h2 { font-size: 28px; text-transform: uppercase; letter-spacing: 1px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
p { margin: 0 0 .85em; }
ol, ul { margin: 0 0 1em; padding-left: 1.5em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 50px;
}
@media (max-width: 767px) { .container { padding: 0 20px; } }

.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; padding: 10px 16px; color: #000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s, background-color .25s, border-color .25s;
}
.site-header.is-small { box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h-cur);
}

/* Het logo is precies zo hoog als de header, net als op de oude site. */
.logo img {
  height: var(--header-h-cur);
  width: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  position: relative;
  display: block;
  padding: 0 13px;
  line-height: var(--header-h-cur);
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

/* Oranje streepje onder het actieve/gehoverde menu-item (zoals Enfold) */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%;
  bottom: 22%;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .2s;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { opacity: 1; }

.main-nav .menu-button a {
  line-height: 1;
  margin-left: 13px;
  padding: 10px 16px;
  border: 2px solid #000;
  border-radius: 3px;
  transition: border-color .2s, color .2s;
}
.main-nav .menu-button a::after { display: none; }
.main-nav .menu-button a:hover { border-color: var(--accent); color: var(--accent); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 28px;
  height: 3px;
  background: #000;
  border-radius: 2px;
  position: relative;
  transition: transform .25s, background-color .25s;
}
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -9px; }
.menu-toggle span::after { top: 9px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(9px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 767px) {
  .menu-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: var(--header-h-cur);
    left: 0; right: 0; bottom: 0;
    background: #fff;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  .menu-open .main-nav { visibility: visible; opacity: 1; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 20px 0; }
  .main-nav a {
    line-height: 1.3;
    padding: 18px 30px;
    font-size: 20px;
    text-align: center;
  }
  .main-nav a::after { display: none; }
  .main-nav a[aria-current="page"] { color: var(--accent); }
  .main-nav .menu-button a { margin: 20px auto 0; display: inline-block; }
  .main-nav .menu-button { text-align: center; }
}

body { padding-top: var(--header-h); }

/* ---------- Transparante header bovenaan (homepage) ---------- */
/* Bovenaan de pagina is de header volledig doorzichtig, zodat de hero
   (blauwe foto links, geel vlak rechts) er doorheen loopt. Zodra er
   gescrold wordt, of het mobiele menu open staat, wordt hij weer wit. */

.transparent-header { padding-top: 0; }

.transparent-header .site-header {
  background: transparent;
  border-bottom-color: transparent;
}
.transparent-header .site-header.is-small,
.transparent-header.menu-open .site-header {
  background: #fff;
  border-bottom-color: var(--border);
}

/* De hero vult het hele scherm, inclusief het stuk achter de header */
.transparent-header .hero {
  min-height: 100vh;
  min-height: 100svh;
}
@media (max-width: 767px) {
  .transparent-header .hero { min-height: 0; }
  /* foto iets hoger, want de header ligt er nu overheen */
  .transparent-header .hero-image { min-height: calc(280px + var(--header-h)); }
}

/* ---------- Secties ---------- */

.section { padding: 50px 0; }
.section-grey { background: var(--grey-bg); }
/* De knoppenrij staat, net als op de oude site, binnen de container: de grijze
   blokken lopen dus niet van schermrand tot schermrand. De grijze blokken
   sluiten bovenaan direct aan op de hero (gele/blauwe vlak), dus geen
   ruimte erboven. */
.knoppen { background: #fff; padding: 0 0 50px; }
.section-yellow { background: var(--yellow); }
.section-orange { background: var(--orange); }

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 6%;
}
@media (max-width: 767px) { .cols { grid-template-columns: 1fr; } }

.heading-thin {
  font-weight: 300;
  padding-bottom: 10px;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.hero-image {
  background: url("../images/overblijfplanner.jpg") center right / cover no-repeat;
}
.hero-text {
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}
.hero-text h1 {
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.hero-text .subtitle { font-size: 16px; font-weight: 600; margin: 0 0 50px; }
.scroll-down {
  color: #000;
  display: inline-block;
  animation: bounce 2s infinite;
}
.scroll-down:hover { color: #000; opacity: .7; }
.scroll-down svg { width: 40px; height: 40px; display: block; }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}
@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-image { min-height: 280px; }
  .hero-text { padding: 50px 20px; }
  .hero-text h1 { font-size: 24px; }
}

/* ---------- Knoppen-blokken ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.card {
  background: var(--grey-1);
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.card:nth-child(even) { background: var(--grey-2); }
.card h2 {
  font-size: 20px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.card p { flex: 1; }
.card .button { align-self: center; margin-top: 10px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .cards { grid-template-columns: 1fr; } }

/* ---------- Knop ---------- */

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-bottom: 1px solid var(--accent-dark);
  border-radius: 3px;
  padding: 10px 14px 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s;
}
.button:hover,
.button:focus-visible { background: var(--accent-hover); color: #fff; }

/* ---------- Iconenlijst (vinkjes) ---------- */

.icon-list { list-style: none; margin: 0; padding: 0; }
.icon-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 12px;
  margin-bottom: 20px;
}
.icon-list svg { width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.icon-list h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.icon-list p { margin: 0; }

/* ---------- Quote ---------- */

.quote {
  max-width: 60%;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}
@media (max-width: 767px) { .quote { max-width: none; } }

/* ---------- Screenshot + uitleg ---------- */

.caption { text-align: center; font-style: italic; margin-top: 15px; }
.cols .button-wrap { text-align: center; margin-top: 10px; }

/* ---------- Partners ---------- */

.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}
.partner { flex: 0 1 220px; text-align: center; }
.partner img { margin: 0 auto; max-height: 160px; width: auto; }
.partner p { font-style: italic; margin-top: 15px; }

/* ---------- Accordeon (support) ---------- */

.toggles { margin-top: 20px; }
.toggles details {
  border: 1px solid var(--border);
  border-top-width: 0;
}
.toggles details:first-child { border-top-width: 1px; border-radius: 2px 2px 0 0; }
.toggles details:last-child { border-radius: 0 0 2px 2px; }
.toggles summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 9px 12px 9px 38px;
  background: #fff;
}
.toggles summary::-webkit-details-marker { display: none; }
.toggles summary:hover { background: #f8f8f8; }
/* plus/min-icoon */
.toggles summary::before,
.toggles summary::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 11px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--accent);
  transition: transform .2s;
}
.toggles summary::after { transform: rotate(90deg); }
.toggles details[open] summary::after { transform: rotate(0); }
.toggles details[open] summary { color: var(--accent); }
.toggle-content {
  padding: 15px 20px 5px;
  background: #f8f8f8;
  border-top: 1px solid var(--border);
}

/* ---------- Contact ---------- */

.contact-block a { color: #000; }
.contact-form label { display: block; margin-bottom: 15px; }
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  font: inherit;
  color: #000;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 2px;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form .button { font-size: 15px; padding: 12px 22px 10px; }
.form-note { font-size: 13px; margin-top: 10px; }

/* ---------- Tekstpagina's ---------- */

.page-content { padding: 50px 0; }
.page-content h1 { font-size: 20px; font-weight: 300; text-transform: none; letter-spacing: 0; }
.page-content .u { text-decoration: underline; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  padding: 15px 0;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

.scroll-top {
  position: fixed;
  right: 50px;
  bottom: -50px;
  z-index: 90;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  opacity: 0;
  transition: opacity .2s, bottom .2s;
}
.scroll-top.is-visible { opacity: 1; bottom: 50px; }
.scroll-top:hover { color: #fff; background: rgba(0, 0, 0, .5); }
.scroll-top svg { width: 22px; height: 22px; }
@media (max-width: 767px) { .scroll-top { right: 20px; } .scroll-top.is-visible { bottom: 20px; } }

/* ---------- Animaties bij scrollen ---------- */

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

.section-title { font-size: 20px; text-transform: none; letter-spacing: 0; margin-bottom: 40px; }
blockquote.quote { margin-top: 0; margin-bottom: 0; }
.contact-block h1 { font-size: 18px; text-transform: none; letter-spacing: 0; }
.contact-form-wrap .section-title { margin-bottom: 20px; }
.login-hint { margin-top: 30px; } .login-hint a { color: #000; }