/*
Theme Name:   Bricks Child — Kha Builds
Theme URI:    https://khabuilds.com
Description:  Bricks child theme for Kha Builds (Custom Websites, Business Apps & Automation).
Author:       Kha Builds
Version:      1.0.0
Template:     bricks
Text Domain:  bricks-child
*/

:root {
	--bg: #f6f7f3;
	--surface: #ffffff;
	--soft: #eef1ea;
	--ink: #0e1a14;
	--ink-2: #33403a;
	--muted: #66716b;
	--line: #e1e6dc;
	--forest: #0b3d2c;
	--forest-2: #13563f;
	--lime: #c8f04a;
	--lime-2: #e4fa8a;
	--lemon: #f6fbb4;
	--mint: #a6ecc9;
	--hl: linear-gradient(95deg, #0d8a4e 0%, #3fae2a 55%, #8cc81c 100%);
	--shadow: 0 1px 2px rgba(14, 26, 20, .04), 0 14px 34px -14px rgba(14, 26, 20, .16);
	--shadow-lg: 0 2px 4px rgba(14, 26, 20, .04), 0 34px 70px -24px rgba(14, 26, 20, .28);
	--head: "Manrope", system-ui, sans-serif;
	--body: "Inter", system-ui, sans-serif;
	--ease: cubic-bezier(.2, .8, .2, 1);
}

/* Sticky header (#brx-header): sticky instead of fixed, 0 layout height so the pill bar
   floats over the hero background like demo; no backdrop-filter on header/pill (docs/23). */
#brx-header {
	position: sticky !important;
	top: 16px;
	z-index: 50;
	height: 0;
	overflow: visible;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.hdr,
.kb-hdr {
	position: relative !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	z-index: 50;
	pointer-events: none;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.hdr-pill,
.kb-hdr-pill {
	pointer-events: auto;
	background: rgba(255, 255, 255, .96) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Prevent logo & mark from collapsing inside flex container (docs/23) */
.logo,
.kb-logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 19px/1 var(--head);
	color: var(--ink);
	letter-spacing: -0.03em;
}

.logo-mark,
.kb-logo-mark {
	width: 34px !important;
	height: 34px !important;
	flex: none !important;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--forest);
	color: var(--lime);
	font: 800 17px/1 var(--head);
}

/* Protect absolute dropdowns, marquee tracks, and wordmarks from Bricks [class*="brxe-"]{max-width:100%} (docs/23) */
.dd-menu,
.kb-dd-menu {
	max-width: none !important;
	width: 280px;
	z-index: 60;
}

.mq-track,
.kb-mq-track,
.rb-track,
.kb-rb-track {
	max-width: none !important;
	width: max-content !important;
}

.mq-item,
.kb-mq-item,
.ftr-word,
.kb-ftr-word {
	max-width: none !important;
	white-space: nowrap;
}

.jump-in,
.kb-jump-in {
	width: max-content;
	max-width: calc(100% - 32px) !important;
}

/* Explicit SVG icon dimensions inside Bricks elements */
.ic,
.ic svg,
.brxe-svg.ic {
	width: 24px;
	height: 24px;
	flex: none;
	display: block;
}

.ic-s,
.ic-s svg,
.brxe-svg.ic-s {
	width: 18px;
	height: 18px;
	flex: none;
	color: #2f9a3a;
	display: block;
}

.ic-chev,
.ic-chev svg,
.brxe-svg.ic-chev,
.dd-menu a .ic,
.dd-menu a .ic svg {
	width: 16px;
	height: 16px;
	flex: none;
	display: block;
}

.hang-foot a .ic,
.hang-foot a .ic svg,
.chip .ic,
.chip .ic svg {
	width: 18px;
	height: 18px;
	flex: none;
	display: block;
}

.hv-flow .ic,
.hv-flow .ic svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--lime);
	display: block;
}

.ic-a,
.ic-a svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: #2f9a3a;
	display: block;
}

.ic-q,
.ic-q svg {
	width: 36px;
	height: 36px;
	padding: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--soft);
	display: block;
}

.hours .ic,
.hours .ic svg {
	width: 40px;
	height: 40px;
	color: #2f8f3a;
	flex: none;
	display: block;
}

.mq-star,
.mq-star svg {
	width: 30px;
	height: 30px;
	color: #8cc81c;
	fill: #c8f04a;
	stroke: none;
	flex: none;
	display: block;
}

.wire,
.wire svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 90px;
	display: block;
}

/* Bricks image wrapper normalization inside custom photo containers */
.hv-img .brxe-image,
.hv-pimg .brxe-image,
.aw-photo .brxe-image,
.rb-card .brxe-image,
.ph .brxe-image {
	width: 100%;
	height: 100%;
	display: block;
}

.tile-photo.brxe-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

/* /start/ form anti-spam honeypot & validation alert */
.kb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.form-err {
	padding: 14px 18px;
	border-radius: 14px;
	background: #fdf2ef;
	border: 1px solid #e6a89a;
	color: #9e2d15;
	font-size: 14.5px;
	font-weight: 600;
}

/* Demo exact breakpoints (1081px, 1080px, 760px) preserved alongside Bricks 991/767/478 */
@media (min-width: 1081px) {
	.hero h1 {
		white-space: nowrap;
	}
	.plans-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	.plans-4 .plan {
		padding: 32px 24px;
	}
	.plans-4 .price b {
		font-size: 42px;
	}
	.plans-4 .plan h3 {
		padding-right: 0;
	}
	.plans-4 .plan-badge {
		position: static;
		align-self: flex-start;
		margin-bottom: 12px;
	}
}

@media (max-width: 1080px) {
	.hangs {
		gap: 18px;
	}
	.bento {
		grid-template-columns: 1fr 1fr;
	}
	.t1,
	.t6 {
		grid-column: span 2;
	}
	.t2,
	.t3,
	.t4,
	.t5 {
		grid-column: span 1;
	}
	.steps {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}
	.beyond,
	.about-faq {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.about {
		position: static;
	}
	.hv-app {
		left: 0;
	}
	.hv-phone {
		right: 0;
	}
	.hv-flow {
		left: 0;
	}
	.plans-3 {
		grid-template-columns: 1fr 1fr;
	}
	.phero-in {
		grid-template-columns: 1fr;
	}
	.ph-stack {
		height: 380px;
		max-width: 560px;
	}
	.faq-split,
	.story,
	.start {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.faq-l,
	.story-l,
	.pg-row-l {
		position: static;
	}
	.pg-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.terms,
	.ftr-grid {
		grid-template-columns: 1fr 1fr;
	}
	.legal {
		grid-template-columns: 1fr;
	}
	.lg-toc {
		display: none;
	}
}

@media (max-width: 760px) {
	#brx-header {
		top: 10px;
	}
	.hdr-pill,
	.kb-hdr-pill {
		height: 58px;
		padding: 0 8px 0 14px;
		gap: 12px;
	}
	.nav,
	.kb-nav {
		position: fixed;
		top: 76px;
		left: 16px;
		right: 16px;
		max-width: none !important;
		max-height: calc(100svh - 96px);
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		padding: 8px 20px;
		border-radius: 24px;
		box-shadow: var(--shadow-lg);
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: .3s var(--ease);
	}
	.nav.open,
	.kb-nav.open {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
	.dd {
		display: block;
		width: 100%;
	}
	.dd-btn {
		display: none !important;
	}
	.dd-menu,
	.kb-dd-menu {
		position: static !important;
		width: auto !important;
		padding: 0 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		border-radius: 0 !important;
	}
	.dd-menu::before {
		display: none !important;
	}
	.dd-menu a {
		padding: 14px 0;
		border-radius: 0;
		border-bottom: 1px solid var(--line);
		font-size: 17px;
	}
	.dd-menu a:hover,
	.dd-menu a[aria-current="page"] {
		background: none;
		color: #2f8f3a;
	}
	.dd-menu a .ic {
		display: none !important;
	}
	.nav-start,
	.kb-nav-start {
		display: block;
		color: #2f8f3a;
		font-weight: 700;
	}
	.hdr-cta,
	.kb-hdr-cta {
		display: none !important;
	}
	.burger,
	.kb-burger {
		display: grid !important;
		gap: 6px;
		margin-left: auto;
		width: 42px;
		height: 42px;
		place-content: center;
		border: 0;
		border-radius: 50%;
		background: var(--forest);
		cursor: pointer;
	}
	.hv,
	.kb-hv {
		max-width: none !important;
		width: 560px !important;
		transform: translateX(-50%) scale(.6);
		transform-origin: top center;
	}
}

/* /start form: undo Bricks default form styles (label grey + margin, textarea min-height, placeholder colour) — Claude QA 02/11/2026 */
#start-form label { color: inherit; margin-bottom: 0; }
#start-form legend { padding: 0 2px; }
#start-form textarea { min-height: 0; line-height: 24px; }
#start-form ::placeholder { color: #757575; }
#start-form textarea { height: 150px; }
#start-form .kb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mobile menu = demo: the demo pill has backdrop-filter, so its fixed .nav is placed inside the pill (top 10+76, sides 16+16).
   No backdrop-filter here, so place it explicitly; Bricks .brxe-div is width:100% → let the Services group shrink and centre. — Claude QA 02/11/2026 */
@media (max-width: 760px) {
	.kb-nav.kb-nav.kb-nav.kb-nav { top: 86px; left: 32px; right: 32px; }
	.nav .dd, .kb-nav .kb-dd { width: auto; }
}