/*
Theme Name: J&S IT
Theme URI: https://jsit.nl
Author: J&S IT
Author URI: https://jsit.nl
Description: Blockthema voor de J&S IT-website — IT-ondersteuning voor thuis en kleine bedrijven.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jsit-it
*/

/* Base */
html { scroll-behavior: smooth; }
::selection { background: rgba(61,114,180,0.45); color: #fff; }

@keyframes jsit-fadeup {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: rgba(14,21,32,0.78);
	border-bottom: 1px solid #1c2740;
	padding: 16px 0;
}
.site-header__inner { gap: 24px; }
.site-header__nav { gap: 30px !important; font-size: 15px; }
.site-header__link { margin: 0; }
.site-header__link a { font-weight: 600; }
.site-header .wp-block-site-logo img { display: block; }

/* Hero */
.jsit-hero { animation: jsit-fadeup .7s ease both; }
.jsit-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(91,149,220,0.35);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.3px;
	padding: 7px 14px;
	border-radius: 999px;
	margin: 0;
}
.jsit-hero__stats { gap: 30px !important; margin-top: 40px !important; }
.jsit-hero__stat-value { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 26px; margin: 0; }
.jsit-hero__stat-label { font-size: 13px; font-weight: 600; margin: 0; }
.jsit-hero__stat-divider { width: 1px; background: #26324a; align-self: stretch; }

/* Hero 3D scene (custom block) */
.jsit-hero-scene { position: relative; height: 440px; }
.jsit-hero-scene__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 60% 45%, rgba(61,114,180,0.28), transparent 62%);
	filter: blur(6px);
}
.jsit-hero-scene__canvas { position: absolute; inset: 0; }

/* Buttons */
.wp-block-button__link { transition: background-color .2s, border-color .2s; }
.is-style-outline > .wp-block-button__link {
	border: 1px solid #33456a !important;
	background: transparent;
}
.is-style-outline > .wp-block-button__link:hover {
	border-color: #5b95dc !important;
	background: rgba(61,114,180,0.1) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #4a83c9 !important; }
.jsit-cta-white > .wp-block-button__link:hover { background: #e9f0fa !important; }
.jsit-cta-outline > .wp-block-button__link {
	border: 1px solid rgba(255,255,255,0.3) !important;
	background: rgba(255,255,255,0.12) !important;
}
.jsit-cta-outline > .wp-block-button__link:hover { background: rgba(255,255,255,0.2) !important; }

/* Diensten (service cards) */
.jsit-service-card {
	border: 1px solid #26324a;
	border-radius: 16px;
	transition: border-color .2s, transform .2s;
}
.jsit-service-card:hover { border-color: #33456a; transform: translateY(-4px); }
.jsit-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: rgba(61,114,180,0.16);
	margin-bottom: 18px;
}
.jsit-service-card__icon svg { width: 26px; height: 26px; }

/* Over ons */
.jsit-checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.jsit-checklist li { display: flex; align-items: center; gap: 11px; font-weight: 600; margin: 0; }
.jsit-checklist svg { flex-shrink: 0; width: 20px; height: 20px; }
.jsit-stats-card { border: 1px solid #26324a; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.jsit-stats-card .jsit-stat-value { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 34px; margin: 0; }
.jsit-stats-card .jsit-stat-label { font-size: 14px; font-weight: 600; margin: 2px 0 0; }

/* Contact CTA */
.jsit-contact-cta { position: relative; overflow: hidden; border-radius: 24px; box-shadow: 0 24px 60px rgba(20,40,80,0.5); }
.jsit-contact-cta::before,
.jsit-contact-cta::after {
	content: "";
	position: absolute;
	border: 2px solid rgba(139,180,230,0.2);
	border-radius: 999px;
	pointer-events: none;
}
.jsit-contact-cta::before { top: -40px; right: -30px; width: 200px; height: 200px; }
.jsit-contact-cta::after { bottom: -60px; left: -20px; width: 160px; height: 160px; border-color: rgba(139,180,230,0.15); }

/* Footer */
.site-footer { border-top: 1px solid #1c2740; }
.site-footer__inner { gap: 20px !important; }

@media (max-width: 860px) {
	.jsit-hero-columns { grid-template-columns: 1fr !important; }
	.jsit-overons-columns { grid-template-columns: 1fr !important; }
	.site-header__inner { flex-wrap: wrap; row-gap: 12px; }
}