/*
Theme Name: FL4W20
Theme URI: https://fl4w20.nl
Author: Jort Kooistra
Author URI: https://www.linkedin.com/in/jortkooistra/
Description: Officieel WordPress-thema voor FL4W20 — governance, groei en leiderschap. Navy/gold huisstijl, volledig responsief, met automatisch aangemaakte pagina's, menu en Contact Form 7-integratie.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fl4w20
*/

:root{
  --navy:#082D52;
  --navy-deep:#061F3A;
  --gold:#F2BA53;
  --gold-soft:#F7CE82;
  --white:#FFFFFF;
  --ink:#3F3F3F;
  --ink-soft:#6B6B6B;
  --line:rgba(255,255,255,0.16);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',Calibri,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  line-height:1.2;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
section{padding:100px 0;position:relative;overflow:hidden;}
.bg-navy{background:var(--navy);color:#EAF0F7;}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#FFFFFF;}
.bg-white{background:var(--white);color:var(--ink);}
.bg-gold{background:var(--gold);color:var(--navy);}
.bg-gold h1,.bg-gold h2,.bg-gold h3{color:var(--navy);}

.beams{position:absolute;top:50%;left:-120px;width:520px;height:520px;transform:translateY(-50%);opacity:0.10;pointer-events:none;z-index:0;}
.beams svg{width:100%;height:100%;}
.bg-white .beams{opacity:0.06;}
.content-rel{position:relative;z-index:1;}

/* HEADER / NAV */
.site-header{position:sticky;top:0;left:0;right:0;z-index:100;background:rgba(8,45,82,0.97);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1080px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;}
.nav-logo img{height:34px;width:auto;}
.nav-logo span{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:1px;color:#fff;font-size:15px;}
.main-nav ul{display:flex;gap:26px;list-style:none;}
.main-nav a{font-size:13.5px;letter-spacing:0.4px;color:#CBD9E8;font-weight:500;transition:color .2s;}
.main-nav a:hover{color:var(--gold);}
.main-nav .nav-cta a{background:var(--gold);color:var(--navy)!important;padding:9px 18px;border-radius:2px;font-weight:600;}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;}

/* HERO */
.hero{padding-top:120px;padding-bottom:110px;text-align:left;}
.eyebrow{display:inline-block;font-family:'Poppins',sans-serif;font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:22px;font-weight:600;}
.hero h1{font-size:50px;max-width:780px;margin-bottom:26px;letter-spacing:-0.5px;}
.hero .sub{font-size:19px;max-width:600px;color:#C9D6E5;margin-bottom:40px;}
.btn-primary{display:inline-block;background:var(--gold);color:var(--navy);font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:16px 34px;border-radius:2px;transition:transform .2s, box-shadow .2s;border:none;cursor:pointer;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,186,83,0.25);}
.btn-ghost{display:inline-block;border:1.5px solid rgba(255,255,255,0.4);color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:14px 30px;border-radius:2px;margin-left:14px;transition:border-color .2s, background .2s;}
.btn-ghost:hover{border-color:var(--gold);background:rgba(255,255,255,0.05);}

.helps-grid{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);}
.help-card{background:var(--navy);padding:32px 24px;}
.help-card .num{font-family:'Poppins',sans-serif;color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:14px;display:block;}
.help-card h4{font-size:17px;color:#fff;margin-bottom:10px;}
.help-card p{font-size:14.5px;color:#B9C8DA;}

.roles-strip{margin-top:50px;display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px;}
.role-item{flex:1;min-width:260px;}
.role-item .label{font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block;}
.role-item p{font-size:15.5px;color:#DCE6F2;}

.section-head{max-width:680px;margin-bottom:50px;}
.section-head .eyebrow{color:var(--navy);opacity:0.55;}
.bg-navy .section-head .eyebrow{color:var(--gold);opacity:1;}
.bg-gold .section-head .eyebrow{color:var(--navy);opacity:0.7;}
.section-head h2{font-size:34px;margin-bottom:16px;}
.section-head p.lead{font-size:17px;color:var(--ink-soft);}
.bg-navy .section-head p.lead{color:#C9D6E5;}

.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;}
.about-body p{margin-bottom:18px;font-size:16.5px;color:#333;}
.about-body blockquote{font-family:'Poppins',sans-serif;font-style:italic;font-weight:600;font-size:19px;color:var(--navy);border-left:3px solid var(--gold);padding-left:22px;margin:32px 0;}
.about-side{background:#F5F7FA;border-left:4px solid var(--gold);padding:30px 26px;}
.about-side h4{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:18px;}
.about-side ul{list-style:none;}
.about-side li{font-size:14.5px;color:var(--ink);padding:10px 0;border-top:1px solid #E2E6EB;}
.about-side li:first-child{border-top:none;}
.about-side .rugby-note{margin-top:22px;padding-top:20px;border-top:1px solid #E2E6EB;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}

.service-row{display:grid;grid-template-columns:280px 1fr;gap:46px;padding:34px 0;border-top:1px solid var(--line);}
.service-row:last-of-type{border-bottom:1px solid var(--line);}
.service-row h3{font-size:21px;color:#fff;}
.service-row p{font-size:16px;color:#C9D6E5;}
.services-note{margin-top:44px;font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;color:var(--gold);max-width:640px;}

.sector-block{margin-bottom:54px;}
.sector-block h3{font-size:22px;color:var(--navy);margin-bottom:14px;}
.sector-block p{font-size:16.5px;color:#333;margin-bottom:14px;}
.sector-block .highlight{background:linear-gradient(180deg,transparent 62%, var(--gold-soft) 62%);font-weight:600;}
.stakeholder-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E2E6EB;margin:32px 0;}
.stakeholder-cell{background:#fff;padding:20px 16px;font-size:14px;color:var(--ink-soft);}
.stakeholder-cell strong{display:block;font-family:'Poppins',sans-serif;font-size:14px;color:var(--navy);margin-bottom:6px;}

.track-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.track-cols h4{font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:26px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.track-item{margin-bottom:28px;}
.track-item .role{font-family:'Poppins',sans-serif;font-weight:600;font-size:16.5px;color:#fff;}
.track-item .period{font-size:13px;color:var(--gold);display:block;margin:4px 0 8px;}
.track-item p{font-size:14.5px;color:#C4D2E2;}
.track-footer{margin-top:16px;padding-top:26px;border-top:1px solid var(--line);font-family:'Poppins',sans-serif;font-style:italic;font-weight:500;font-size:16px;color:var(--gold-soft);}

.testimonial-card{background:var(--navy);color:#fff;padding:50px 54px;position:relative;border-radius:2px;}
.testimonial-card .quote-mark{font-family:'Poppins',sans-serif;font-size:72px;color:var(--gold);line-height:1;margin-bottom:8px;display:block;}
.testimonial-card blockquote{font-size:19px;line-height:1.7;margin-bottom:26px;max-width:760px;}
.testimonial-card .attribution{font-family:'Poppins',sans-serif;font-weight:600;color:var(--gold);font-size:15px;}
.testimonial-card .attribution span{display:block;font-family:'Inter',sans-serif;font-weight:400;color:#B9C8DA;font-size:14px;margin-top:4px;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.contact-form label{font-family:'Poppins',sans-serif;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;display:block;}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form select,.contact-form textarea{
  width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:12px 14px;font-family:'Inter',sans-serif;font-size:15px;border-radius:2px;margin-bottom:16px;
}
.contact-form select option{color:#000;}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form ::placeholder{color:#8FA3BB;}
.wpcf7-submit{display:inline-block;background:var(--gold);color:var(--navy);font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:14px 32px;border:none;border-radius:2px;cursor:pointer;}
.wpcf7-not-valid-tip{color:#FFB4B4;font-size:13px;margin-top:-10px;margin-bottom:12px;}
.wpcf7-response-output{border:1px solid var(--gold)!important;color:#fff;margin-top:16px;padding:10px 14px;font-size:14px;}
.contact-info{display:flex;flex-direction:column;justify-content:space-between;}
.contact-info .direct h4{font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.contact-info .direct a{display:flex;align-items:center;gap:12px;font-size:17px;color:#fff;margin-bottom:14px;font-family:'Poppins',sans-serif;font-weight:500;}
.contact-info .direct a .icon{color:var(--gold);font-size:18px;}
.contact-info .quote{margin-top:36px;font-family:'Poppins',sans-serif;font-style:italic;font-size:16px;color:#C9D6E5;border-top:1px solid var(--line);padding-top:24px;}

.site-footer{background:var(--navy-deep);padding:30px 0;text-align:center;color:#7C8FA8;font-size:13px;}
.site-footer .widget-area{display:flex;justify-content:center;gap:32px;margin-bottom:16px;flex-wrap:wrap;}

@media(max-width:860px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);border-bottom:1px solid var(--line);}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;padding:20px 32px;gap:16px;}
  .menu-toggle{display:block;}
  .hero h1{font-size:34px;}
  .helps-grid{grid-template-columns:1fr 1fr;}
  .about-grid,.track-cols,.contact-grid{grid-template-columns:1fr;gap:36px;}
  .service-row{grid-template-columns:1fr;gap:10px;}
  .stakeholder-row{grid-template-columns:1fr 1fr;}
  section{padding:64px 0;}
  .testimonial-card{padding:32px 22px;}
}