/*
Theme Name: Bouwflow
Theme URI: https://bouwflow.nl/
Author: Anna Chojnacka
Description: Licht maatwerk WordPress-thema voor Bouwflow B.V., zonder pagebuilder.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: bouwflow
*/

:root{
    --blauw:#005587;
    --blauw-donker:#00436b;
    --oranje:#ff8f1c;
    --inkt:#0f2a3d;
    --grijs:#5b6b76;
    --licht:#f4f7f9;
    --wit:#ffffff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',sans-serif;color:var(--inkt);line-height:1.7;background:var(--wit)}
  h1,h2,h3,.logo{font-family:'Krona One',sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.25}
  .wrap{max-width:1100px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}

  /* NAV */
  header{position:sticky;top:0;z-index:50;background:var(--blauw);box-shadow:0 2px 14px rgba(0,0,0,.12)}
  nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{color:var(--oranje);font-size:22px;letter-spacing:2px}
  .logo span{color:var(--wit)}
  .nav-links{display:flex;gap:30px}
  .nav-links a{color:#dbe6ee;font-size:14px;font-weight:500;transition:color .2s}
  .nav-links a:hover{color:var(--oranje)}
  .btn{display:inline-block;background:var(--oranje);color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;font-size:14px;transition:transform .15s,background .2s}
  .btn:hover{background:#ff9f3d;transform:translateY(-2px)}
  @media(max-width:760px){
    .nav-links{display:none}
    nav{height:64px}
    .logo{font-size:18px}
    header .btn{padding:9px 15px;font-size:13px}
  }
  @media(max-width:400px){
    .logo{font-size:16px;letter-spacing:1px}
    header .btn{padding:8px 13px;font-size:12px}
  }

  /* HERO */
  .hero{background:linear-gradient(135deg,var(--blauw) 0%,var(--blauw-donker) 100%);color:#fff;position:relative;overflow:hidden}
  .hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;background:var(--oranje);opacity:.14;border-radius:50%}
  .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;padding:80px 0}
  .eyebrow{color:var(--oranje);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:13px;margin-bottom:18px}
  .hero-mark{color:var(--oranje);font-size:clamp(48px,8vw,86px);letter-spacing:4px;line-height:1;margin-bottom:14px}
  .hero-slogan{color:#cfe0eb;letter-spacing:5px;text-transform:uppercase;font-size:14px;font-weight:600;margin-bottom:26px}
  .hero-name{font-family:'Krona One',sans-serif;color:#eaf2f7;font-size:clamp(17px,2.4vw,22px);letter-spacing:1px;margin-bottom:16px;opacity:.92}
  .hero h1{font-size:40px;margin-bottom:22px}
  .hero .lead{font-size:18px;color:#d3e2ec;max-width:520px;margin-bottom:20px}
  .tagline{display:inline-block;border-left:3px solid var(--oranje);padding-left:16px;font-style:italic;color:#eaf2f7;margin-bottom:32px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}
  .portret{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#0a3652 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23ffffff" stroke-opacity="0.25" stroke-width="1.2"><circle cx="12" cy="9" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>') center/64px no-repeat;border:3px solid rgba(255,143,28,.35);display:flex;align-items:flex-end;justify-content:center}
  .portret span{background:rgba(0,0,0,.45);color:#cdd9e2;font-size:12px;padding:8px 12px;margin:12px;border-radius:6px}
  @media(max-width:760px){.hero-grid{grid-template-columns:1fr;padding:50px 0}.hero h1{font-size:30px}.portret{max-width:280px;margin:0 auto}}

  /* KERNZIN band */
  .kernzin{background:var(--oranje);color:#fff;text-align:center;padding:26px 0}
  .kernzin p{font-family:'Krona One',sans-serif;font-size:clamp(15px,2.4vw,22px);letter-spacing:.5px}

  /* SECTIES */
  section{padding:78px 0}
  .sec-head{max-width:720px;margin-bottom:46px}
  .sec-head .eyebrow{color:var(--oranje)}
  .sec-head h2{font-size:28px;color:var(--blauw);margin-bottom:14px}
  .sec-head p{color:var(--grijs);font-size:17px}
  .alt{background:var(--licht)}

  /* OVER MIJ */
  .over{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
  .over .portret2{aspect-ratio:4/5;border-radius:12px;background:#dbe6ee url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23005587" stroke-opacity="0.35" stroke-width="1.2"><circle cx="12" cy="9" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>') center/70px no-repeat;border:1px solid #cdd9e2;position:relative}
  .over .portret2 span{position:absolute;bottom:12px;left:12px;background:#fff;border:1px solid #cdd9e2;color:var(--grijs);font-size:12px;padding:6px 11px;border-radius:6px}
  .over p{color:#33474f;margin-bottom:16px}
  .waarden{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .waarden span{background:#e7eff4;color:var(--blauw);font-weight:600;font-size:13px;padding:8px 15px;border-radius:30px}
  @media(max-width:760px){.over{grid-template-columns:1fr}.over .portret2{max-width:300px}}

  /* OPDRACHTEN */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .card{background:#fff;border:1px solid #e4ecf1;border-radius:12px;padding:30px;transition:transform .18s,box-shadow .18s;border-top:4px solid var(--oranje)}
  .card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,67,107,.12)}
  .card .tag{display:inline-block;background:#e7eff4;color:var(--blauw);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;margin-bottom:14px}
  .card h3{font-size:16px;color:var(--blauw);margin-bottom:12px;line-height:1.5}
  .card p{color:var(--grijs);font-size:15px}
  .card .more{display:none;margin-top:14px}
  .card.open .more{display:block}
  .lees-meer{margin-top:16px;background:none;border:none;color:var(--blauw);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px}
  .lees-meer:hover{color:var(--oranje)}
  .lees-meer .chev{transition:transform .2s}
  .card.open .lees-meer .chev{transform:rotate(180deg)}
  @media(max-width:760px){.cards{grid-template-columns:1fr}}

  /* INTERESSE */
  .interesse{background:linear-gradient(135deg,var(--blauw),var(--blauw-donker));color:#fff}
  .interesse .sec-head h2{color:#fff}
  .interesse .sec-head p{color:#c7d8e3}
  .chips{display:flex;gap:12px;flex-wrap:wrap}
  .chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:12px 20px;border-radius:8px;font-weight:500;font-size:15px}
  .chips span strong{color:var(--oranje);font-weight:700}

  /* CONTACT */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
  .contact-info h3{color:var(--blauw);font-size:18px;margin-bottom:18px}
  .contact-info p{color:var(--grijs);margin-bottom:20px}
  .contact-line{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-weight:500}
  .contact-line .dot{width:38px;height:38px;border-radius:8px;background:#e7eff4;color:var(--blauw);display:flex;align-items:center;justify-content:center;font-weight:700}
  form{background:#fff;border:1px solid #e4ecf1;border-radius:12px;padding:30px}
  .field{margin-bottom:16px}
  label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--inkt)}
  input,textarea{width:100%;padding:12px 14px;border:1px solid #cdd9e2;border-radius:7px;font-family:inherit;font-size:15px}
  input:focus,textarea:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(0,85,135,.12)}
  form .btn{width:100%;border:none;cursor:pointer;text-align:center;margin-top:6px}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

  /* FOOTER */
  footer{background:var(--inkt);color:#9fb2bf;padding:40px 0;text-align:center}
  footer .logo{font-size:18px;margin-bottom:10px}
  footer p{font-size:13px}

/* Productie-afwerking */
body { overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; background: #fff; color: var(--inkt); padding: 10px 14px; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--blauw); box-shadow: 0 2px 14px rgba(0,0,0,.12); }
.site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 24px; }
.brand-link { display: inline-flex; align-items: center; min-width: 180px; }
.brand-logo, .custom-logo { width: 205px; max-height: 51px; object-fit: contain; object-position: left center; }
.custom-logo-link { display: inline-flex; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--oranje); transition: right .2s ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(255,143,28,.65); outline-offset: 4px; }
.hero { padding: 0; }
.hero-grid { position: relative; z-index: 1; }
.hero-mark { margin-bottom: 18px; }
.hero-logo { width: min(510px, 100%); height: auto; }
.portret { box-shadow: 0 26px 55px rgba(0,27,45,.3); }
.portret img, .portret2 img { width: 100%; height: 100%; object-fit: cover; }
.portret img { object-position: 50% 36%; }
.portret2 { overflow: hidden; box-shadow: 0 18px 42px rgba(0,67,107,.12); }
.portret2 img { object-position: 50% 34%; }
.over-title { font-size: 28px; color: var(--blauw); margin-bottom: 18px; }
.over-belief { font-weight: 600; color: var(--blauw) !important; }
.sec-head-centered { margin-left: auto; margin-right: auto; text-align: center; }
.bouwflow-copy { max-width: 820px; margin: 0 auto; text-align: center; color: #33474f; }
.bouwflow-copy p + p { margin-top: 16px; }
.external-link { margin-top: 12px; }
.external-link a { color: var(--blauw); font-weight: 600; }
.contact-head { margin-bottom: 46px; }
.contact-head p { margin-left: auto; margin-right: auto; }
.contact-line { width: fit-content; transition: color .2s ease, transform .2s ease; }
.contact-line:hover { color: var(--oranje); transform: translateX(2px); }
.bouwflow-form { background: #fff; border: 1px solid #e4ecf1; border-radius: 12px; padding: 30px; box-shadow: 0 14px 34px rgba(0,67,107,.06); }
.form-setup-message { padding: 22px; border: 1px dashed #b8c8d2; border-radius: 8px; background: #f8fafb; color: var(--grijs); }
.bouwflow-form .wpforms-container { margin: 0; }
.bouwflow-form .wpforms-field { padding: 0 0 16px; }
.bouwflow-form .wpforms-field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--inkt); }
.bouwflow-form input[type="text"],
.bouwflow-form input[type="email"],
.bouwflow-form input[type="tel"],
.bouwflow-form textarea,
.bouwflow-form select { width: 100% !important; max-width: none !important; padding: 12px 14px !important; border: 1px solid #cdd9e2 !important; border-radius: 7px !important; background: #fff !important; color: var(--inkt) !important; }
.bouwflow-form input:focus,
.bouwflow-form textarea:focus,
.bouwflow-form select:focus { outline: none !important; border-color: var(--oranje) !important; box-shadow: 0 0 0 3px rgba(255,143,28,.16) !important; }
.bouwflow-form button[type="submit"],
.bouwflow-form .wpforms-submit { width: 100% !important; min-height: 48px !important; border: 0 !important; border-radius: 6px !important; background: var(--oranje) !important; color: #fff !important; font-weight: 700 !important; cursor: pointer !important; transition: transform .15s ease, background .2s ease !important; }
.bouwflow-form button[type="submit"]:hover,
.bouwflow-form .wpforms-submit:hover { background: #ff9f3d !important; transform: translateY(-2px); }
.wpforms-confirmation-container-full { border: 1px solid #b8d7c2 !important; border-radius: 8px !important; background: #f3faf5 !important; color: #244b31 !important; }
.site-footer { background: var(--inkt); color: #9fb2bf; padding: 40px 0; text-align: center; }
.footer-logo { width: 210px; margin: 0 auto 12px; }
.site-footer p { font-size: 13px; }
.copyright { margin-top: 6px; opacity: .7; }
.content-section { min-height: 60vh; padding: 80px 0; }
.content-wrap { max-width: 840px; }
.content-wrap h1 { color: var(--blauw); margin-bottom: 24px; }
.content-wrap p + p { margin-top: 16px; }
.error-page .btn { margin-top: 24px; }

@media (max-width: 900px) {
  .site-nav { gap: 16px; }
  .nav-links { gap: 20px; }
  .brand-logo, .custom-logo { width: 180px; }
}
@media (max-width: 760px) {
  .site-nav { min-height: 68px; }
  .brand-link { min-width: 0; }
  .brand-logo, .custom-logo { width: 155px; max-height: 44px; }
  .nav-cta { white-space: nowrap; }
  .hero-logo { width: min(400px, 100%); }
  .portret { max-width: 340px; }
  .over .portret2 { max-width: 340px; margin: 0 auto; }
  .bouwflow-form { padding: 24px; }
}
@media (max-width: 430px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .brand-logo, .custom-logo { width: 132px; }
  .nav-cta { padding: 9px 12px !important; font-size: 12px !important; }
  .hero-grid { gap: 34px; }
  .hero-logo { width: 100%; }
  .hero-slogan { letter-spacing: 2.6px; font-size: 12px; }
  section { padding: 60px 0; }
  .kernzin { padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}