/**
 * DBF Transport — continuous charcoal depth
 * Visual depth only. No layout, spacing, or content changes.
 * Lighting model: dark hero → soft mid charcoal → dark again near footer.
 */

:root {
	/* ~25% more depth between darkest and lightest, still fully charcoal */
	--dbf-charcoal-0: #0a0c0e;
	--dbf-charcoal-1: #14171a;
	--dbf-charcoal-2: #1e2329;
	--dbf-charcoal-3: #2c333b;
}

/* Unify Kadence section palette slots so alternating blocks disappear */
body.dbf-site {
	--global-palette8: var(--dbf-charcoal-0);
	--global-palette9: var(--dbf-charcoal-0);
	--global-palette10: var(--dbf-charcoal-0);
	--global-palette7: var(--dbf-charcoal-2);
	--dbf-bg: var(--dbf-charcoal-0);
	--dbf-bg-2: var(--dbf-charcoal-1);
	--dbf-surface: var(--dbf-charcoal-2);
}

/* Page canvas: one continuous charcoal wash mapped to page height */
body.dbf-site {
	background-color: var(--dbf-charcoal-0) !important;
	background-image: none !important;
}

body.dbf-site #wrapper.site {
	background-color: var(--dbf-charcoal-0) !important;
	background-image: linear-gradient(
		180deg,
		var(--dbf-charcoal-0) 0%,
		var(--dbf-charcoal-0) 7%,
		var(--dbf-charcoal-1) 20%,
		var(--dbf-charcoal-2) 36%,
		var(--dbf-charcoal-3) 50%,
		var(--dbf-charcoal-2) 66%,
		var(--dbf-charcoal-1) 82%,
		var(--dbf-charcoal-0) 100%
	) !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Let the canvas show through theme chrome */
body.dbf-site #inner-wrap,
body.dbf-site .content-bg,
body.dbf-site .entry-content-wrap,
body.dbf-site .content-container,
body.dbf-site .entry-content,
body.dbf-site .site-content,
body.dbf-site .content-area,
body.dbf-site .entry-content-wrap .content-wrap,
body.dbf-site .wp-site-blocks {
	background-color: transparent !important;
	background-image: none !important;
}

/*
 * Neutralize solid section slabs.
 * Only background-color — preserve hero background-image / overlays.
 */
body.dbf-site .kb-row-layout-wrap,
body.dbf-site [class*="kb-row-layout-id"],
body.dbf-site .kt-row-layout-inner {
	background-color: transparent !important;
}

/* Hero stays rooted in the darkest charcoal */
body.dbf-site .dbf-k-hero,
body.dbf-site .dbf-k-hero[class*="kb-row-layout-id"] {
	background-color: var(--dbf-charcoal-0) !important;
}

/* Soft ambient light + signature journey line */
body.dbf-site #wrapper.site {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

body.dbf-site #wrapper.site::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 90% 42% at 50% 0%, rgba(44, 51, 59, 0.32), transparent 58%),
		radial-gradient(ellipse 55% 35% at 100% 42%, rgba(30, 35, 41, 0.18), transparent 55%),
		radial-gradient(ellipse 50% 30% at 0% 72%, rgba(20, 23, 26, 0.22), transparent 52%);
}

/*
 * Signature journey line — full page height, wavy continuity.
 * Must use position:relative on #wrapper so this spans hero → footer.
 */
body.dbf-site #wrapper.site::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.4;
	background-image: url("../img/dbf-journey-line.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
	/* Soft fade near page end */
	-webkit-mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 calc(100% - 220px),
		rgba(0, 0, 0, 0.4) calc(100% - 110px),
		transparent calc(100% - 24px)
	);
	mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 calc(100% - 220px),
		rgba(0, 0, 0, 0.4) calc(100% - 110px),
		transparent calc(100% - 24px)
	);
}

body.dbf-site #masthead {
	position: relative;
	z-index: 1200;
}

body.dbf-site #inner-wrap,
body.dbf-site #colophon {
	position: relative;
	z-index: 1;
}

/* Cards: quiet elevation on the canvas, not separate colour blocks */
body.dbf-site .kt-blocks-info-box-link-wrap {
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.025) 0%, transparent 42%),
		var(--dbf-charcoal-2) !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

body.dbf-site .dbf-divisions .kt-blocks-info-box-link-wrap {
	background:
		linear-gradient(155deg, rgba(197, 176, 138, 0.06) 0%, transparent 40%),
		var(--dbf-charcoal-3) !important;
}

body.dbf-site .kb-form,
body.dbf-site .wp-block-latest-posts li {
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.02) 0%, transparent 45%),
		var(--dbf-charcoal-2) !important;
	border-color: rgba(255, 255, 255, 0.06);
}

/* Process timeline — column chrome only when steps are plain text (no info-box).
 * Info-box process grids (.dbf-process-grid) keep a single card surface. */
body.dbf-site .kt-row-column-wrap.kt-has-5-columns {
	align-items: stretch !important;
	gap: 1rem !important;
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .wp-block-kadence-column {
	display: flex;
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .kt-inside-inner-col:not(:has(.kt-blocks-info-box-link-wrap)) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 1.75rem 1.4rem;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.025) 0%, transparent 42%),
		var(--dbf-charcoal-2) !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .kt-inside-inner-col:not(:has(.kt-blocks-info-box-link-wrap)):hover {
	transform: translateY(-4px);
	border-color: rgba(197, 176, 138, 0.35);
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .kt-inside-inner-col:not(:has(.kt-blocks-info-box-link-wrap)) h6 {
	margin: 0 0 1rem !important;
	letter-spacing: 0.12em;
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .kt-inside-inner-col:not(:has(.kt-blocks-info-box-link-wrap)) h3 {
	margin: 0 0 0.75rem !important;
	color: #fff !important;
}

body.dbf-site .kt-row-column-wrap.kt-has-5-columns .kt-inside-inner-col:not(:has(.kt-blocks-info-box-link-wrap)) p {
	margin: 0 !important;
	flex: 1 1 auto;
}

/* Single-surface process cards (pricing + mobility process grids) */
body.dbf-site .dbf-process-grid .kt-inside-inner-col {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

body.dbf-site .dbf-process-grid .kt-inside-inner-col:hover {
	transform: none;
	border-color: transparent;
}

body.dbf-site .dbf-process-grid .kt-blocks-info-box-link-wrap {
	border-radius: 12px !important;
	padding: 1.5rem 1.35rem !important;
}

body.dbf-site .site-footer,
body.dbf-site #colophon,
body.dbf-site .site-bottom-footer-wrap,
body.dbf-site .site-middle-footer-wrap,
body.dbf-site .site-top-footer-wrap {
	background-color: transparent !important;
	background-image: none !important;
}

/* Sticky header glass on charcoal-0 */
body.dbf-site.dbf-scrolled .kadence-sticky-header > .site-header-row-container-inner,
body.dbf-site .kadence-sticky-header.item-is-fixed.item-is-stuck > .site-header-row-container-inner {
	background: rgba(10, 12, 14, 0.92) !important;
}

/* CTA sits on the canvas — soft local glow only */
body.dbf-site .dbf-k-cta,
body.dbf-site .dbf-k-cta[class*="kb-row-layout-id"] {
	background-color: transparent !important;
}

body.dbf-site .dbf-k-cta .kt-row-layout-inner {
	background-image: radial-gradient(
		ellipse 70% 80% at 50% 0%,
		rgba(44, 51, 59, 0.42),
		transparent 70%
	) !important;
}

@media (max-width: 720px) {
	/* Keep the signature, slightly quieter on small screens */
	body.dbf-site #wrapper.site::after {
		opacity: 0.28;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.dbf-site #wrapper.site::before {
		display: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.dbf-site #wrapper.site::after {
		opacity: 0.22;
	}
}