/*
Theme Name: HZI Technical
Theme URI: https://hzi-consulting.be/
Author: HZI Technical solutions & consulting
Description: Op maat gemaakt thema voor HZI Technical solutions & consulting. Industriële, strakke stijl met homepage-secties voor diensten, werkwijze, over, realisaties, opleidingen en contact. Contactgegevens, foto's en accentkleur aan te passen via Weergave > Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hzi
*/

:root {
	--hzi-accent: #B23A0A;
	--hzi-accent-light: #F59E5B;
	--hzi-dark: #1C2126;
	--hzi-dark-2: #2A3138;
	--hzi-ground: #F4F3EF;
	--hzi-ground-2: #E9E7E1;
	--hzi-line: #D6D3CB;
	--hzi-muted: #4A5159;
	--hzi-muted-dark: #B9BEC4;
	--hzi-display: 'Archivo', sans-serif;
	--hzi-body: 'IBM Plex Sans', sans-serif;
	--hzi-mono: 'IBM Plex Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--hzi-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--hzi-dark);
	background: var(--hzi-ground);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hzi-dark); }
a:hover { color: var(--hzi-accent); }
h1, h2, h3 { font-family: var(--hzi-display); line-height: 1.1; }

.hzi-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.hzi-section { padding-top: 96px; padding-bottom: 96px; }
.hzi-kicker {
	margin: 0 0 12px;
	font-family: var(--hzi-mono);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hzi-accent);
}
.hzi-dark .hzi-kicker { color: var(--hzi-accent-light); }
.hzi-h2 { margin: 0 0 48px; font-weight: 800; font-size: clamp(32px, 4vw, 44px); max-width: 760px; }
.hzi-dark { background: var(--hzi-dark); color: var(--hzi-ground); }
.hzi-dark a { color: var(--hzi-ground); }
.hzi-alt { background: var(--hzi-ground-2); }
.hzi-flex { display: flex; flex-wrap: wrap; }
.hzi-placeholder {
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 24px; color: #5E656C; background: #E2DFD8; font-size: 15px;
}
.hzi-img-cover { width: 100%; height: 100%; object-fit: cover; }

/* Buttons */
.hzi-btn {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 16px 28px; font-weight: 600; font-size: 17px; text-decoration: none;
	background: var(--hzi-accent); color: #fff !important; border: none; cursor: pointer;
}
.hzi-btn:hover { filter: brightness(1.1); }
.hzi-btn-ghost { background: transparent; border: 1px solid #5B636B; font-weight: 500; }

/* Header */
.hzi-header { background: var(--hzi-dark); color: var(--hzi-ground); }
.hzi-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.hzi-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--hzi-ground) !important; }
.hzi-brand-mark { font-family: var(--hzi-display); font-weight: 800; font-size: 28px; letter-spacing: 0.04em; }
.hzi-brand-sub { font-size: 13px; color: var(--hzi-muted-dark); letter-spacing: 0.08em; text-transform: uppercase; }
.hzi-brand .custom-logo { max-height: 48px; width: auto; }
.hzi-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.hzi-menu a { color: var(--hzi-ground); text-decoration: none; }
.hzi-menu a:hover { color: var(--hzi-accent-light); }
.hzi-menu .hzi-menu-cta a { background: var(--hzi-accent); padding: 12px 20px; font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.hzi-menu .hzi-menu-cta a:hover { color: #fff; filter: brightness(1.1); }

/* Hero */
.hzi-hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 96px; }
.hzi-hero-text { flex: 1 1 520px; min-width: 0; }
.hzi-hero h1 { margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.01em; }
.hzi-hero-lead { margin: 0 0 36px; font-size: 20px; color: #D3D6DA; max-width: 560px; }
.hzi-hero-img { flex: 1 1 380px; min-width: 0; height: 420px; background: var(--hzi-dark-2); }
.hzi-hero-img.hzi-placeholder { color: #8C949C; border: 1px solid #3A424A; }
.hzi-btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* Sturingen strip */
.hzi-strip { background: var(--hzi-ground-2); border-bottom: 1px solid var(--hzi-line); }
.hzi-strip .hzi-wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; font-family: var(--hzi-mono); font-size: 14px; color: var(--hzi-muted); }
.hzi-strip strong { color: var(--hzi-dark); font-weight: 500; }

/* Diensten */
.hzi-cards { display: flex; flex-wrap: wrap; gap: 2px; background: var(--hzi-line); border: 2px solid var(--hzi-line); }
.hzi-card { flex: 1 1 260px; background: #fff; padding: 32px; }
.hzi-card h3 { margin: 0 0 10px; font-size: 22px; }
.hzi-card p { margin: 0; color: var(--hzi-muted); }
.hzi-card-dark { background: var(--hzi-dark); color: var(--hzi-ground); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.hzi-card-dark a { color: var(--hzi-accent-light); font-weight: 600; }

/* Werkwijze */
.hzi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.hzi-steps li { flex: 1 1 180px; border-top: 3px solid var(--hzi-accent); padding-top: 20px; }
.hzi-steps span { font-family: var(--hzi-mono); color: var(--hzi-accent-light); }
.hzi-steps h3 { margin: 8px 0; font-size: 20px; }
.hzi-steps p { margin: 0; color: var(--hzi-muted-dark); font-size: 15px; }

/* Over */
.hzi-over { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.hzi-over-img { flex: 1 1 340px; min-width: 0; height: 440px; }
.hzi-over-text { flex: 1 1 520px; min-width: 0; }
.hzi-over-text .hzi-h2 { margin-bottom: 24px; }
.hzi-stats { display: flex; flex-wrap: wrap; gap: 40px; border-top: 1px solid var(--hzi-line); padding-top: 24px; margin-top: 32px; }
.hzi-stat-num { font-family: var(--hzi-display); font-weight: 800; font-size: 40px; line-height: 1.2; }
.hzi-stat-label { color: var(--hzi-muted); font-size: 15px; }
.hzi-sign { margin: 28px 0 0; font-style: italic; color: var(--hzi-muted); }

/* Realisaties */
.hzi-projects { display: flex; flex-wrap: wrap; gap: 24px; }
.hzi-project { flex: 1 1 320px; min-width: 0; background: #fff; }
.hzi-project-img { height: 200px; background: var(--hzi-line); }
.hzi-project-body { padding: 28px; }
.hzi-project-tag { margin: 0 0 8px; font-family: var(--hzi-mono); font-size: 13px; color: var(--hzi-accent); text-transform: uppercase; }
.hzi-project h3 { margin: 0 0 12px; font-size: 22px; }
.hzi-project p { color: var(--hzi-muted); font-size: 15px; margin: 0; }

/* Opleidingen */
.hzi-train { display: flex; flex-wrap: wrap; gap: 56px; }
.hzi-train-list { flex: 1 1 520px; min-width: 0; }
.hzi-train-list .hzi-h2 { margin-bottom: 24px; }
.hzi-train-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hzi-line); }
.hzi-train-list li { padding: 16px 0; border-bottom: 1px solid var(--hzi-line); }
.hzi-partner { flex: 1 1 340px; min-width: 0; align-self: flex-start; background: var(--hzi-dark); color: var(--hzi-ground); padding: 40px; }
.hzi-partner p { color: #D3D6DA; }
.hzi-partner .hzi-kicker { color: var(--hzi-accent-light); font-size: 13px; }
.hzi-partner-logo { min-height: 64px; border: 1px dashed #5B636B; display: flex; align-items: center; justify-content: center; color: #8C949C; font-size: 14px; margin-bottom: 24px; padding: 12px; background: #fff; }
.hzi-partner-logo.is-empty { background: transparent; }
.hzi-partner-logo img { max-height: 56px; width: auto; }
.hzi-partner a { color: var(--hzi-accent-light); font-weight: 600; }

/* Contact */
.hzi-contact { background: var(--hzi-accent); color: #fff; }
.hzi-contact a { color: #fff; }
.hzi-contact-grid { display: flex; flex-wrap: wrap; gap: 56px; }
.hzi-contact-text { flex: 1 1 420px; min-width: 0; }
.hzi-contact-text h2 { margin: 0 0 20px; font-weight: 800; font-size: clamp(36px, 5vw, 52px); line-height: 1.05; }
.hzi-contact-text address { font-style: normal; line-height: 1.8; }
.hzi-contact-box { flex: 1 1 420px; min-width: 0; background: #fff; color: var(--hzi-dark); padding: 36px; }
.hzi-contact-box a { color: var(--hzi-dark); }
.hzi-contact-box label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.hzi-contact-box input:not([type=submit]), .hzi-contact-box textarea, .hzi-contact-box select {
	width: 100%; padding: 12px; border: 1px solid var(--hzi-muted-dark); font-size: 16px; font-family: inherit; min-height: 44px; margin-bottom: 16px;
}
.hzi-contact-box input[type=submit], .hzi-contact-box button {
	background: var(--hzi-dark); color: #fff; border: none; padding: 16px 28px; font-size: 17px; font-weight: 600; min-height: 44px; cursor: pointer; width: 100%;
}
.hzi-contact-quick { display: flex; flex-direction: column; gap: 16px; }
.hzi-contact-quick .hzi-btn { justify-content: center; background: var(--hzi-dark); }

/* Footer */
.hzi-footer { background: var(--hzi-dark); color: #8C949C; font-size: 14px; }
.hzi-footer .hzi-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; padding-bottom: 28px; }
.hzi-footer a { color: #8C949C; }

/* Gewone pagina's en berichten */
.hzi-content { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.hzi-content h1 { font-weight: 800; font-size: clamp(32px, 5vw, 48px); margin: 0 0 32px; }
.hzi-content h2 { font-size: 30px; margin: 48px 0 16px; }
.hzi-entry + .hzi-entry { border-top: 1px solid var(--hzi-line); margin-top: 48px; padding-top: 48px; }

.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; padding: 12px; background: #fff; z-index: 1000; }