/*
Theme Name: VeeHa B.V.
Theme URI: https://veeha.nl
Author: VeeHa B.V.
Description: Website-template voor VeeHa B.V., gebaseerd op de aangeleverde huisstijl (logo, kleur #1D91D0, lettertype Aptos). Bevat een bovenbalk met 6 knoppen die elk naar een eigen, zelf in te vullen pagina linken.
Version: 1.0
Requires PHP: 7.4
Text Domain: veeha-bv
*/

:root{
  --blue:#1D91D0;
  --blue-dark:#1774A6;
  --blue-light:#4FA9D9;
  --sky:#EAF4FB;
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --border:#DCE3ED;
  --ink:#101828;
  --slate:#55647A;
  --radius:10px;

  /* Aptos is een Microsoft-lettertype en niet als webfont beschikbaar.
     Deze stack toont Aptos zelf bij bezoekers die het lokaal hebben
     (bv. via Microsoft 365 op Windows), en valt anders terug op een
     vergelijkbaar systeemfont. */
  --font: 'Aptos', 'Aptos Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.2;
  font-weight:700;
}
p{margin:0 0 1em;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-dark);}
img{max-width:100%;display:block;}
.container{max-width:1100px;margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

/* ---------- Header / navigatie ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,251,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  min-height:84px;flex-wrap:wrap;gap:16px;padding:12px 0;
}
.site-logo{display:flex;align-items:center;gap:10px;}
.site-logo img{height:56px;width:auto;}
.site-logo .fallback-text{
  font-weight:700;font-size:20px;color:var(--ink);
}
.site-logo .fallback-text span{color:var(--blue);}

nav.primary-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
nav.primary-nav a{
  display:inline-flex;align-items:center;
  padding:10px 18px;border-radius:8px;
  font-size:15px;font-weight:600;color:var(--ink);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
nav.primary-nav a:hover{background:var(--sky);color:var(--blue-dark);}
nav.primary-nav a.current-menu-item,
nav.primary-nav a[aria-current="page"]{
  background:var(--blue);color:#fff;
}

.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.2s;}

@media (max-width:860px){
  nav.primary-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;
    padding:12px;gap:4px;display:none;
  }
  nav.primary-nav.open{display:flex;}
  nav.primary-nav a{width:100%;}
  .menu-toggle{display:block;}
}

/* ---------- Hero (homepage) ---------- */
.hero{padding:80px 0 72px;text-align:center;}
.hero .hero-logo{height:120px;margin:0 auto 28px;}
.hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:-0.01em;max-width:24ch;margin-left:auto;margin-right:auto;}
.hero .tagline{color:var(--blue-dark);font-weight:600;font-size:18px;margin-top:6px;}
.hero .intro{color:var(--slate);font-size:17px;max-width:60ch;margin:22px auto 0;}
.hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:8px;font-size:15px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);color:#fff;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue-dark);}

/* ---------- Overzichtskaarten op home ---------- */
.section-tiles{padding:16px 0 88px;}
.tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px;transition:border-color .15s ease, transform .15s ease;
}
.tile:hover{border-color:var(--blue-light);transform:translateY(-2px);}
.tile h3{font-size:18px;margin-bottom:8px;}
.tile p{color:var(--slate);font-size:14.5px;margin-bottom:14px;}
.tile a{font-weight:600;font-size:14px;}
@media (max-width:760px){.tiles-grid{grid-template-columns:1fr;}}

/* ---------- Gewone content-pagina's ---------- */
.page-content{padding:64px 0 96px;}
.page-content .page-title{
  font-size:clamp(26px,3.6vw,38px);margin-bottom:28px;
  padding-bottom:20px;border-bottom:1px solid var(--border);
}
.page-content .entry-content{max-width:760px;font-size:16px;color:var(--ink);}
.page-content .entry-content p{color:var(--ink);}
.page-content .entry-content h2{font-size:24px;margin-top:1.4em;}
.page-content .entry-content h3{font-size:19px;margin-top:1.2em;}
.page-content .entry-content ul,
.page-content .entry-content ol{padding-left:1.3em;}
.page-placeholder{
  border:1px dashed var(--border);border-radius:var(--radius);
  padding:28px;color:var(--slate);background:var(--sky);font-size:15px;
}

/* ---------- Footer ---------- */
footer.site-footer{border-top:1px solid var(--border);padding:44px 0;background:var(--surface);}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand img{height:36px;width:auto;}
.footer-contact{font-size:14px;color:var(--slate);line-height:1.9;}
.footer-contact a{color:var(--slate);}
.footer-contact a:hover{color:var(--blue-dark);}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.footer-nav a{font-size:14px;color:var(--slate);}
.footer-nav a:hover{color:var(--blue-dark);}
.footer-contact-btn{
  font-family:var(--font);
  display:inline-flex;align-items:center;
  padding:10px 18px;border-radius:8px;
  font-size:15px;font-weight:600;color:var(--ink);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.footer-contact-btn:hover{background:var(--sky);color:var(--blue-dark);}
.footer-copy{font-size:13px;color:var(--slate);margin-top:28px;padding-top:20px;border-top:1px solid var(--border);}

/* ---------- Nieuws-blok homepage ---------- */
.section-news .news-item{max-width:820px;}
.section-news .news-meta{color:var(--slate);font-size:13px;margin-bottom:12px;}
.section-news h2{margin-bottom:20px;}

/* ---------- Whitepapers-pagina ---------- */
.whitepaper-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.whitepaper-item p:last-child{margin-bottom:0;}