/*
Theme Name: Oosterwal Kadence Child
Template:   kadence
Version:    1.0.0
Text Domain: oosterwal
Description: Kadence child theme voor Oosterwal Consultancy
*/

/* ============================================================
   KADENCE PALETTE OVERRIDE → DARK NAVY
   ============================================================ */
:root {
  --global-palette1: #2563eb !important;  /* accent blauw */
  --global-palette2: #1d4ed8 !important;  /* accent donker */
  --global-palette3: #ffffff !important;  /* koppen */
  --global-palette4: #e2e8f0 !important;  /* body tekst */
  --global-palette5: #94a3b8 !important;  /* muted */
  --global-palette6: #334155 !important;  /* border */
  --global-palette7: #1e293b !important;  /* surface */
  --global-palette8: #1e293b !important;  /* alt background */
  --global-palette9: #0f172a !important;  /* hoofd background */
  --global-body-font-family: 'Inter', system-ui, sans-serif !important;
}

/* Kadence body background forceren dark */
body,
.content-bg,
body.content-style-unboxed .site,
.site-main { background: #0f172a !important; color: #e2e8f0 !important; }

/* Header dark */
#masthead,
.site-header,
.site-header-wrap,
.site-main-header-wrap,
.site-header-row-container,
.site-header-row-container-inner { background: #0f172a !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }

/* Nav links */
.main-navigation .primary-menu-container > ul > li.menu-item > a { color: #94a3b8 !important; }
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: #ffffff !important; }
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a { color: #ffffff !important; }

/* Logo zonder witte box */
.site-branding a.brand,
.custom-logo-link { display: flex; align-items: center; }
.site-branding a.brand img,
.custom-logo-link img { max-height: 48px !important; width: auto !important; background: transparent !important; }

/* Verberg site title tekst volledig */
.site-title, .site-title a, .site-description,
.kadence-site-branding .site-title, .kadence-site-branding .site-description {
  display: none !important; }

/* Footer dark */
.site-footer, .footer-html, .site-bottom-footer-wrap,
.site-footer-row-container, .site-footer-row-container-inner { background: #0f172a !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
.site-footer, .site-footer p, .site-footer a { color: #94a3b8 !important; }
.site-footer a:hover { color: #ffffff !important; }

/* Kadence content areas dark */
.entry-content, .entry, .page, .post,
.content-area, .wp-site-blocks { background: transparent !important; }

/* Kadence cards/boxed content */
.entry.single-entry, .entry.loop-entry { background: #1e293b !important; box-shadow: 0 4px 24px rgba(0,0,0,.4) !important; }
.entry-content-wrap { background: #1e293b !important; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --oc-bg:          #0f172a;
  --oc-bg-alt:      #1e293b;
  --oc-surface:     #1e293b;
  --oc-surface-2:   #334155;
  --oc-accent:      #2563eb;
  --oc-accent-dark: #1d4ed8;
  --oc-accent-glow: rgba(37,99,235,.18);
  --oc-gold:        #f59e0b;
  --oc-gold-light:  rgba(245,158,11,.15);
  --oc-white:       #ffffff;
  --oc-text:        #e2e8f0;
  --oc-muted:       #94a3b8;
  --oc-border:      rgba(255,255,255,.08);
  --oc-radius:      12px;
  --oc-radius-lg:   20px;
  --oc-max:         1200px;
  --oc-pad:         4rem 1.5rem;
  --oc-transition:  .2s ease;
}

/* ============================================================
   BASE OVERRIDES
   ============================================================ */
body {
  background: var(--oc-bg) !important;
  color: var(--oc-text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

h1,h2,h3,h4,h5,h6 { color: var(--oc-white) !important; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.7rem,3vw,2.5rem); }
h3 { font-size: 1.3rem; }
p  { color: var(--oc-muted); line-height: 1.75; }
a  { color: var(--oc-accent); text-decoration: none; }
a:hover { color: var(--oc-white); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header,
.site-header.transparent-header { background: rgba(15,23,42,.92) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--oc-border); }

.site-branding .site-title a,
.site-branding .site-title { color: var(--oc-white) !important; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }

/* Logo afmetingen in header */
.custom-logo-link img,
.site-logo img,
.kadence-site-branding img {
  max-height: 52px !important;
  width: auto !important;
  /* Logo heeft paarse/oranje kleuren — werkt goed op dark bg */
}

/* Verberg site-title & tagline — logo doet het werk */
.site-title,
.site-title a,
.site-description,
.kadence-site-branding .site-title,
.kadence-site-branding .site-title a,
.kadence-site-branding .site-description,
header .site-title,
header .site-title a,
#masthead .site-title,
.wp-site-blocks .site-title,
span.site-title,
p.site-title,
h1.site-title,
.header-branding .site-title {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
}

.primary-navigation a,
.main-navigation a { color: var(--oc-muted) !important; font-size: .9rem; font-weight: 500; transition: color var(--oc-transition); }
.primary-navigation a:hover,
.main-navigation a:hover { color: var(--oc-white) !important; }

/* Nav CTA knop */
.header-cta-wrap .button,
.kadence-header-btn { background: var(--oc-accent) !important; color: var(--oc-white) !important; border-radius: var(--oc-radius) !important; padding: .6rem 1.4rem !important; font-weight: 600 !important; }
.header-cta-wrap .button:hover { background: var(--oc-accent-dark) !important; }

/* ============================================================
   HOMEPAGE SECTIES
   ============================================================ */
.oc-section { padding: var(--oc-pad); }
.oc-section--dark { background: var(--oc-bg); }
.oc-section--alt  { background: var(--oc-bg-alt); }

.oc-container { max-width: var(--oc-max); margin: 0 auto; padding: 0 1.5rem; }

.oc-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--oc-accent);
  background: var(--oc-accent-glow);
  padding: .3rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.oc-intro { font-size: 1.1rem; max-width: 620px; margin-bottom: 2.5rem; color: var(--oc-muted); }
.oc-center { text-align: center; }
.oc-center .oc-intro { margin-left: auto; margin-right: auto; }

/* ── Hero ─────────────────────────────────────────────────── */
.oc-hero {
  padding: 7rem 1.5rem 5rem;
  background: linear-gradient(135deg, #0f172a 0%, #0d2149 60%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}

.oc-hero::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.2) 0%, transparent 70%);
  pointer-events: none;
}

.oc-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
  pointer-events: none;
}

.oc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(37,99,235,.15);
  border: 1px solid rgba(37,99,235,.3);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.oc-hero-title { margin-bottom: 1.5rem; max-width: 800px; }
.oc-hero-title .oc-gradient {
  background: linear-gradient(135deg, #2563eb, #60a5fa, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.oc-hero-sub { font-size: 1.15rem; max-width: 580px; margin-bottom: 2.5rem; }

.oc-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 4rem; }

.oc-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.8rem;
  border-radius: var(--oc-radius);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--oc-transition);
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.oc-btn-primary { background: var(--oc-accent); color: var(--oc-white); }
.oc-btn-primary:hover { background: var(--oc-accent-dark); color: var(--oc-white); transform: translateY(-2px); box-shadow: 0 0 30px rgba(37,99,235,.4); }
.oc-btn-outline { background: transparent; color: var(--oc-white); border: 1.5px solid var(--oc-border); }
.oc-btn-outline:hover { border-color: var(--oc-accent); color: var(--oc-accent); }
.oc-btn-ghost { background: transparent; color: var(--oc-accent); padding-left: 0; }
.oc-btn-ghost::after { content: ' →'; }
.oc-btn-ghost:hover { color: var(--oc-white); }

/* Hero stats */
.oc-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--oc-border); }
.oc-stat-value { font-size: 2rem; font-weight: 800; color: var(--oc-white); line-height: 1; display: block; margin-bottom: .3rem; }
.oc-stat-value.blue   { color: var(--oc-accent); }
.oc-stat-value.gold   { color: var(--oc-gold); }
.oc-stat-value.green  { color: #10b981; }
.oc-stat-label { font-size: .82rem; color: var(--oc-muted); }

/* Klant-logo balk */
.oc-clients { padding: 2.5rem 1.5rem; background: var(--oc-bg-alt); border-top: 1px solid var(--oc-border); border-bottom: 1px solid var(--oc-border); }
.oc-clients-label { text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--oc-muted); margin-bottom: 1.5rem; }
.oc-clients-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; }
.oc-clients-logos span { font-weight: 700; font-size: 1rem; color: var(--oc-surface-2); letter-spacing: .05em; text-transform: uppercase; transition: color var(--oc-transition); }
.oc-clients-logos span:hover { color: var(--oc-muted); }

/* ── Diensten grid ────────────────────────────────────────── */
.oc-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }

.oc-card {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: all var(--oc-transition);
  position: relative;
  overflow: hidden;
}
.oc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--oc-accent), #60a5fa);
  opacity: 0;
  transition: opacity var(--oc-transition);
}
.oc-card:hover { border-color: rgba(37,99,235,.4); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.oc-card:hover::after { opacity: 1; }

.oc-card-icon { font-size: 2rem; margin-bottom: 1.2rem; }
.oc-card h3 { color: var(--oc-white); margin-bottom: .8rem; }
.oc-card p  { font-size: .95rem; flex: 1; }
.oc-card .oc-btn-ghost { margin-top: 1.5rem; }

/* ── USP rij ─────────────────────────────────────────────── */
.oc-usp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }

.oc-usp {
  background: linear-gradient(135deg, var(--oc-surface) 0%, rgba(37,99,235,.06) 100%);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--oc-radius-lg);
  padding: 2rem;
  transition: all var(--oc-transition);
}
.oc-usp:hover { border-color: var(--oc-accent); }
.oc-usp-num { font-size: .72rem; font-weight: 700; color: var(--oc-accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; }
.oc-usp h3  { color: var(--oc-white); margin-bottom: .6rem; font-size: 1.1rem; }

/* ── Expertise chips ─────────────────────────────────────── */
.oc-expertise { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.oc-chip {
  background: var(--oc-surface);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  padding: .6rem 1.2rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--oc-text);
  transition: all var(--oc-transition);
}
.oc-chip:hover { border-color: var(--oc-accent); color: var(--oc-white); }

/* ── About sectie ────────────────────────────────────────── */
.oc-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.oc-about-image {
  background: linear-gradient(135deg, var(--oc-surface) 0%, rgba(37,99,235,.1) 100%);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--oc-radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
}
.oc-about-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.oc-about-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .8rem; color: var(--oc-muted); font-size: .95rem; }
.oc-about-list li::before { content: '✓'; color: var(--oc-accent); font-weight: 700; flex-shrink: 0; }

/* ── Metrics bar ─────────────────────────────────────────── */
.oc-metrics {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.08));
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--oc-radius-lg);
  padding: 3rem;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2rem;
  text-align: center;
  margin: 0 auto;
}
.oc-metric-value { font-size: 2.8rem; font-weight: 800; line-height: 1; display: block; margin-bottom: .5rem; }
.oc-metric-value.blue { color: var(--oc-accent); }
.oc-metric-value.gold { color: var(--oc-gold); }
.oc-metric-value.green { color: #10b981; }
.oc-metric-value.pink  { color: #f472b6; }
.oc-metric-label { font-size: .85rem; color: var(--oc-muted); }

/* ── CTA banner ──────────────────────────────────────────── */
.oc-cta {
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(96,165,250,.1));
  border: 1px solid rgba(37,99,235,.25);
  border-radius: var(--oc-radius-lg);
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.oc-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(37,99,235,.12) 0%, transparent 70%);
  pointer-events: none;
}
.oc-cta h2 { margin-bottom: 1rem; }
.oc-cta p  { max-width: 500px; margin: 0 auto 2rem; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer,
.footer-html { background: var(--oc-bg) !important; border-top: 1px solid var(--oc-border) !important; }

.oc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; max-width: var(--oc-max); margin: 0 auto; padding: 4rem 1.5rem 2rem; }
.oc-footer-col h5 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--oc-muted); margin-bottom: 1rem; }
.oc-footer-col ul { list-style: none; padding: 0; }
.oc-footer-col ul li { margin-bottom: .6rem; }
.oc-footer-col ul li a { font-size: .9rem; color: var(--oc-muted); transition: color var(--oc-transition); }
.oc-footer-col ul li a:hover { color: var(--oc-white); }
.oc-footer-bottom { border-top: 1px solid var(--oc-border); padding: 1.5rem; max-width: var(--oc-max); margin: 0 auto; display: flex; justify-content: space-between; font-size: .82rem; color: var(--oc-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .oc-services, .oc-usp-grid { grid-template-columns: 1fr 1fr; }
  .oc-about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .oc-about-image { display: none; }
  .oc-metrics { grid-template-columns: 1fr 1fr; }
  .oc-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  :root { --oc-pad: 3rem 1rem; }
  .oc-services, .oc-usp-grid { grid-template-columns: 1fr; }
  .oc-metrics { grid-template-columns: 1fr 1fr; padding: 2rem 1rem; }
  .oc-footer-grid { grid-template-columns: 1fr; }
  .oc-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .oc-hero-actions { flex-direction: column; }
  .oc-cta { padding: 2.5rem 1.5rem; }
}