/*!
Theme Name: Digihuis Blocksy Child
Theme URI: https://digihuis.com/
Description: Digihuis marketing child theme for Blocksy (homepage template + brand system).
Author: Digihuis
Template: blocksy
Version: 0.1.0
Text Domain: digihuis-blocksy-child
*/

/* ============================================================
   Digihuis Shell (homepage + core pages)
   Scopes to `body.digihuis-shell` so Blocksy defaults remain intact elsewhere.
   ============================================================ */

body.digihuis-shell {
	background: #08090F;
}

body.digihuis-shell #page,
body.digihuis-shell #content,
body.digihuis-shell #primary,
body.digihuis-shell #main,
body.digihuis-shell .site,
body.digihuis-shell .site-content,
body.digihuis-shell .site-main {
	background: #08090F;
}

/* Remove the Blocksy header (this is the white bar in the screenshot). */
body.digihuis-shell .ct-header,
body.digihuis-shell header#header {
	display: none !important;
}

/* Remove the Blocksy footer: replaced by the full dh-shell-footer (nav + copyright). */
body.digihuis-shell .ct-footer,
body.digihuis-shell footer#footer {
	display: none !important;
}

/* Shell nav */
body.digihuis-shell {
	--dh-shell-bg: #08090F;
	--dh-shell-surface: #0D0E18;
	--dh-shell-border: #2A2D40;
	--dh-shell-border-hi: #3A3D54;
	--dh-shell-fg: #F0EFE9;
	/* See --fg-muted in digihuis-home.css: brightened for a real contrast margin. */
	--dh-shell-fg-muted: #969BB8;
	--dh-shell-crimson: #B8372B;
	--dh-shell-crimson-hi: #D04030;
	/* See --crimson-text in digihuis-home.css: lighter tint for small text on dark bg. */
	--dh-shell-crimson-text: #EE6A5C;

	--dh-shell-nav-h: 64px;
	--dh-shell-adminbar-h: 0px;
}

body.admin-bar.digihuis-shell { --dh-shell-adminbar-h: 32px; }
@media (max-width: 782px) {
	body.admin-bar.digihuis-shell { --dh-shell-adminbar-h: 46px; }
}

body.digihuis-shell .dh-shell-nav {
	position: fixed;
	top: var(--dh-shell-adminbar-h);
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--dh-shell-nav-h);
	display: flex;
	align-items: center;
	background: rgba(8, 9, 15, 0.72);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-bottom: 1px solid rgba(42,45,64,0.85);
}

body.digihuis-shell .dh-shell-nav__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

body.digihuis-shell .dh-shell-nav__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

body.digihuis-shell .dh-shell-nav__wordmark {
	display: block;
	height: 18px;
	width: auto;
}

body.digihuis-shell .dh-shell-nav__links {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

body.digihuis-shell .dh-shell-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dh-shell-fg-muted);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.digihuis-shell .dh-shell-nav__link:hover {
	color: var(--dh-shell-fg);
	background: rgba(255,255,255,0.03);
}

body.digihuis-shell .dh-shell-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--dh-shell-crimson);
	border: 1px solid var(--dh-shell-crimson);
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}

body.digihuis-shell .dh-shell-nav__cta:hover {
	background: var(--dh-shell-crimson-hi);
	transform: translateY(-1px);
}

@media (max-width: 980px) {
	body.digihuis-shell .dh-shell-nav__inner { padding: 0 20px; }
	body.digihuis-shell .dh-shell-nav__links { display: none; }
}

/* Shell footer */
body.digihuis-shell .dh-shell-footer {
	background: var(--dh-shell-surface);
	border-top: 1px solid var(--dh-shell-border);
	padding: 56px 0 32px;
}

body.digihuis-shell .dh-shell-footer__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}

body.digihuis-shell .dh-shell-footer__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

body.digihuis-shell .dh-shell-footer__wordmark {
	display: block;
	height: 20px;
	width: auto;
}

body.digihuis-shell .dh-shell-footer__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 4px;
	margin: 0;
	padding: 0;
}

body.digihuis-shell .dh-shell-footer__links li {
	display: inline-flex;
	align-items: center;
}

body.digihuis-shell .dh-shell-footer__links li:not(:last-child)::after {
	content: '·';
	color: var(--dh-shell-fg-muted);
	margin-left: 8px;
}

body.digihuis-shell .dh-shell-footer__links a {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dh-shell-fg-muted);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

body.digihuis-shell .dh-shell-footer__links a:hover {
	color: var(--dh-shell-fg);
	background: rgba(255,255,255,0.03);
}

body.digihuis-shell .dh-shell-footer__bottom {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 28px;
	padding-top: 24px;
	border-top: 1px solid var(--dh-shell-border);
}

body.digihuis-shell .dh-shell-footer__copy {
	margin: 0;
	font-size: 12px;
	color: var(--dh-shell-fg-muted);
}

body.digihuis-shell .dh-shell-footer__cta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dh-shell-crimson-text);
	text-decoration: none;
	transition: color 0.18s ease;
}

body.digihuis-shell .dh-shell-footer__cta:hover {
	color: var(--dh-shell-fg);
}

@media (max-width: 640px) {
	body.digihuis-shell .dh-shell-footer__inner { padding: 0 20px; }
	body.digihuis-shell .dh-shell-footer__bottom { flex-direction: column; gap: 12px; }
}