/*
Theme Name: VerzekerdVerder
Theme URI: https://verzekerdverder.nl
Description: Huisstijl thema voor VerzekerdVerder.nl
Version: 1.0
Author: VerzekerdVerder
*/

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; color: #2C2C2A; }

/* NAV */
.vv-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: white; border-bottom: 0.5px solid #E0DDD5; position: sticky; top: 0; z-index: 10; }
.vv-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.vv-nav-logo-icon { width: 32px; height: 32px; background: #1A6B4A; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.vv-nav-logo-icon svg { width: 18px; height: 18px; }
.vv-nav-logo-text { font-size: 16px; font-weight: 600; color: #1A6B4A; }
.vv-nav-logo-text span { font-weight: 400; color: #C87C3A; }
.vv-nav-cta { background: #1A6B4A; color: white; border: none; padding: 8px 18px; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 500; }
.vv-nav-cta:hover { background: #155A3C; }

/* HERO */
.vv-hero { background: #F5F0E8; padding: 72px 32px 64px; text-align: center; }
.vv-hero-tag { display: inline-block; background: #E8F5EF; color: #1A6B4A; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; border: 0.5px solid #B8DDD0; }
.vv-hero h1 { font-size: 36px; font-weight: 600; color: #1A2E25; line-height: 1.25; max-width: 600px; margin: 0 auto 16px; }
.vv-hero p { font-size: 17px; color: #5A5A56; max-width: 500px; margin: 0 auto 36px; line-height: 1.65; }
.vv-hero-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vv-btn-primary { background: #C87C3A; color: white; padding: 15px 36px; border-radius: 8px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; display: inline-block; }
.vv-btn-primary:hover { background: #A8662E; }
.vv-hero-sub { font-size: 13px; color: #888480; }

/* TRUST BAR */
.vv-trust-bar { background: #1A6B4A; padding: 12px 32px; display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; align-items: center; }
.vv-trust-item { color: white; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.vv-trust-check { width: 16px; height: 16px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* SECTIES */
.vv-section { padding: 64px 32px; max-width: 720px; margin: 0 auto; }
.vv-section-label { font-size: 11px; color: #1A6B4A; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.vv-section h2 { font-size: 26px; font-weight: 600; color: #1A2E25; margin-bottom: 16px; line-height: 1.3; }
.vv-section p { font-size: 15px; color: #5A5A56; line-height: 1.7; }

/* STAPPEN */
.vv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.vv-step { text-align: center; }
.vv-step-num { width: 44px; height: 44px; background: #1A6B4A; border-radius: 50%; color: white; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.vv-step h3 { font-size: 15px; font-weight: 600; color: #1A2E25; margin-bottom: 8px; }
.vv-step p { font-size: 14px; color: #5A5A56; line-height: 1.6; }

.vv-divider { height: 0.5px; background: #E8E5DF; }

/* USP's */
.vv-usps { background: #E8F5EF; padding: 64px 32px; }
.vv-usps-inner { max-width: 720px; margin: 0 auto; }
.vv-usps-inner h2 { font-size: 26px; font-weight: 600; color: #1A2E25; margin-bottom: 4px; line-height: 1.3; }
.vv-usps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.vv-usp-card { background: white; border-radius: 12px; padding: 24px 20px; border: 0.5px solid #C0DDD0; }
.vv-usp-icon { width: 44px; height: 44px; background: #1A6B4A; border-radius: 10px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.vv-usp-icon svg { width: 22px; height: 22px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vv-usp-card h3 { font-size: 16px; font-weight: 600; color: #1A2E25; margin-bottom: 8px; }
.vv-usp-card p { font-size: 14px; color: #5A5A56; line-height: 1.6; }

/* AANBOD */
.vv-aanbod { padding: 64px 32px; max-width: 720px; margin: 0 auto; }
.vv-aanbod h2 { font-size: 26px; font-weight: 600; color: #1A2E25; margin-bottom: 16px; line-height: 1.3; }
.vv-aanbod > p { font-size: 15px; color: #5A5A56; line-height: 1.7; margin-bottom: 32px; }
.vv-tab-buttons { display: flex; gap: 8px; margin-bottom: 32px; }
.vv-tab-btn { padding: 9px 22px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: 0.5px solid #C8C4BC; background: white; color: #5A5A56; font-family: inherit; }
.vv-tab-btn.active { background: #1A6B4A; color: white; border-color: #1A6B4A; }
.vv-tab-btn:hover:not(.active) { background: #F5F0E8; }
.vv-tab-content { display: none; }
.vv-tab-content.active { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vv-aanbod-item { display: flex; align-items: center; gap: 12px; background: #F5F0E8; border-radius: 8px; padding: 14px 16px; border: 0.5px solid #E0D8C8; }
.vv-aanbod-dot { width: 8px; height: 8px; background: #1A6B4A; border-radius: 50%; flex-shrink: 0; }
.vv-aanbod-item span { font-size: 14px; color: #2C2C2A; font-weight: 500; }

/* FAQ */
.vv-faq { padding: 64px 32px; max-width: 720px; margin: 0 auto; }
.vv-faq h2 { font-size: 26px; font-weight: 600; color: #1A2E25; margin-bottom: 16px; line-height: 1.3; }
.vv-faq-list { margin-top: 32px; }
.vv-faq-item { border-top: 0.5px solid #E0DDD5; }
.vv-faq-item:last-child { border-bottom: 0.5px solid #E0DDD5; }
.vv-faq-q { padding: 18px 0; font-size: 15px; font-weight: 500; color: #1A2E25; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; }
.vv-faq-q:hover { color: #1A6B4A; }
.vv-faq-icon { font-size: 20px; color: #1A6B4A; flex-shrink: 0; transition: transform 0.2s; font-weight: 300; }
.vv-faq-icon.open { transform: rotate(45deg); }
.vv-faq-a { font-size: 14px; color: #5A5A56; line-height: 1.7; padding: 0 0 18px; display: none; }
.vv-faq-a.open { display: block; }

/* CONTACTFORMULIER */
.vv-contact { background: #F5F0E8; padding: 64px 32px; border-top: 0.5px solid #E0D8C8; }
.vv-contact-inner { max-width: 560px; margin: 0 auto; }
.vv-contact-inner h2 { font-size: 26px; font-weight: 600; color: #1A2E25; margin-bottom: 8px; }
.vv-contact-inner > p { font-size: 15px; color: #5A5A56; margin-bottom: 32px; line-height: 1.6; }
.vv-type-toggle { display: flex; margin-bottom: 24px; border: 0.5px solid #C8C4BC; border-radius: 8px; overflow: hidden; }
.vv-type-btn { flex: 1; padding: 11px; font-size: 14px; font-weight: 500; border: none; background: white; cursor: pointer; font-family: inherit; color: #5A5A56; }
.vv-type-btn.active { background: #1A6B4A; color: white; }
.vv-type-btn:first-child { border-right: 0.5px solid #C8C4BC; }
.vv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vv-form-group { display: flex; flex-direction: column; gap: 6px; }
.vv-form-group.full { grid-column: 1 / -1; }
.vv-contact label { font-size: 13px; font-weight: 500; color: #3A3A36; }
.vv-contact input,
.vv-contact textarea { border: 0.5px solid #C8C4BC; border-radius: 6px; padding: 10px 12px; font-size: 14px; color: #2C2C2A; background: white; font-family: inherit; outline: none; width: 100%; }
.vv-contact input:focus,
.vv-contact textarea:focus { border-color: #1A6B4A; box-shadow: 0 0 0 3px rgba(26,107,74,0.1); }
.vv-contact input::placeholder,
.vv-contact textarea::placeholder { color: #B0ACA8; }
.vv-contact textarea { resize: vertical; min-height: 90px; }
.vv-form-submit { margin-top: 8px; background: #C87C3A; color: white; border: none; padding: 13px 28px; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; width: 100%; font-family: inherit; }
.vv-form-submit:hover { background: #A8662E; }
.vv-form-note { font-size: 12px; color: #888480; margin-top: 12px; text-align: center; }

/* FOOTER */
.vv-footer { background: #1A2E25; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.vv-footer-brand { font-size: 14px; color: rgba(255,255,255,0.7); }
.vv-footer-brand strong { color: white; }
.vv-footer-links { display: flex; gap: 20px; }
.vv-footer-links a { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; }
.vv-footer-links a:hover { color: white; }

/* RESPONSIVE */
@media (max-width: 560px) {
  .vv-steps { grid-template-columns: 1fr; }
  .vv-usps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .vv-tab-content.active { grid-template-columns: 1fr; }
  .vv-form-grid { grid-template-columns: 1fr; }
  .vv-hero h1 { font-size: 28px; }
}