/*
Theme Name: StapVoorStapVrij
Theme URI: https://stapvoorstapvrij.nl
Author: ChatGPT
Author URI: https://chat.openai.com
Description: Minimal, snelle, responsive WordPress theme gebaseerd op stapvoorstapvrij.nl met WooCommerce en formulier-styling.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stapvoorstapvrij
*/

/* Kleuren en layout */
:root {
  --color-bg: #ffffff;
  --color-fg: #111111;
  --color-muted: #6b7280;
  --color-primary: #0ea5e9; /* TODO: vervang met jouw primaire kleur */
  --color-primary-contrast: #ffffff;
  --color-accent: #f59e0b;  /* TODO: vervang met jouw accentkleur */
  --color-border: #e5e7eb;

  --nav-bg: var(--color-primary);
  --nav-link: #ffffff;
  --nav-link-hover-bg: rgba(255,255,255,.12);
  --nav-sub-bg: #0b89c2;

  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --container: 1120px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding: 0 1rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; }
.site-brand { display: flex; align-items: center; gap: .75rem; }
.site-title { font-weight: 800; font-size: 1.1rem; margin: 0; }
.site-description { margin: 0; font-size: .85rem; color: var(--color-muted); }

/* === PRIMARY MENU === */
.primary-nav { background: var(--nav-bg); }
.primary-nav .nav-row { display: flex; align-items: center; gap: 1rem; }
.primary-nav .nav-toggle { display: none; margin-left: auto; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: .7rem; padding: .55rem .7rem; }
.primary-nav .menu { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.primary-nav .menu > li { position: relative; }
.primary-nav .menu > li > a { display: block; padding: .9rem 1rem; color: var(--nav-link); text-decoration: none; }
.primary-nav .menu > li:hover > a { background: var(--nav-link-hover-bg); }

/* Submenu (desktop) */
.primary-nav .menu li .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--nav-sub-bg); list-style: none; margin: 0; padding: .4rem 0; border-radius: .6rem; box-shadow: var(--shadow); }
.primary-nav .menu li:hover > .sub-menu { display: block; }
.primary-nav .menu li .sub-menu a { display: block; padding: .65rem .9rem; color: #fff; }
.primary-nav .menu li .sub-menu li { position: relative; }
.primary-nav .menu li .sub-menu .sub-menu { top: 0; left: 100%; }

/* Submenu toggle button (mobile) */
.primary-nav .submenu-toggle { display: none; background: transparent; border: none; color: #fff; font-size: 1rem; padding: .9rem .6rem; cursor: pointer; }

/* Responsive menu */
@media (max-width: 900px) {
  .primary-nav .nav-toggle { display: inline-flex; }
  .primary-nav .menu { display: none; flex-direction: column; width: 100%; }
  .primary-nav.open .menu { display: flex; }
  .primary-nav .menu > li > a { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.15); }
  .primary-nav .submenu-toggle { display: inline-flex; }
  .primary-nav .menu li .sub-menu { position: static; display: none; background: rgba(255,255,255,.06); border-radius: 0; box-shadow: none; }
  .primary-nav .menu li.open > .sub-menu { display: block; }
}

/* Hero */
.hero { padding: 4.5rem 0 2.5rem; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)); }
.hero .headline { font-size: clamp(1.6rem, 2vw + 1.2rem, 3rem); font-weight: 900; margin: 0 0 .75rem; }
.hero .subhead { color: var(--color-muted); font-size: 1.05rem; margin: 0; }
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.25rem; }
.button,
.wp-element-button,
input[type=submit],
button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.1rem; border-radius: .8rem; border: 1px solid transparent;
  background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700;
  cursor: pointer; transition: transform .05s ease, filter .2s ease;
}
.button.secondary { background: var(--color-accent); color: #111; }
.button.ghost { background: transparent; color: var(--color-fg); border-color: var(--color-border); }
.button:active { transform: translateY(1px); }
.badge { display: inline-block; font-size: .8rem; background: rgba(0,0,0,.05); padding: .35rem .6rem; border-radius: 999px; }

/* Sections & cards */
.section { padding: 2.5rem 0; }
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.grid { display: grid; gap: 1rem; }
@media (min-width: 800px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: 2rem 0; color: var(--color-muted); }
.footer-inner { display: grid; gap: 1rem; }
@media (min-width: 800px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } }

/* Content */
h1,h2,h3 { line-height: 1.2; }
.prose h1 { font-size: clamp(1.6rem, 1.5vw + 1.2rem, 2.2rem); }
.prose h2 { font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); }
.prose p { margin: .7rem 0; }

/* Forms */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=number],
textarea, select {
  width: 100%; padding: .8rem 1rem; border-radius: .7rem; border: 1px solid var(--color-border); background: #fff;
}
textarea { min-height: 140px; }
label { display:block; margin: .5rem 0 .2rem; font-weight: 600; }
.wpforms-field, .wpcf7-form p { margin-bottom: 1rem; }
.wpcf7-response-output, .wpforms-confirmation-container-full { margin-top: 1rem; padding: .8rem 1rem; border-radius: .6rem; background: #ecfccb; border: 1px solid #bef264; }
.wpcf7-not-valid-tip { color: #b91c1c; font-size: .9rem; }
input[type=checkbox], input[type=radio] { transform: translateY(1px); margin-right: .5rem; }

/* WooCommerce */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button { border-radius: .6rem; padding: .7rem 1rem; }
.woocommerce div.product .price, .woocommerce ul.products li.product .price { color: var(--color-fg); font-weight: 700; }
.woocommerce div.product form.cart .button { background: var(--color-primary); color: var(--color-primary-contrast); }
.woocommerce span.onsale { background: var(--color-accent); color: #111; border-radius: 999px; }
.woocommerce-message, .woocommerce-error, .woocommerce-info { border-radius: .6rem; }

.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}
.pad{padding:1rem}.pad-lg{padding:2rem}
.hidden{display:none}