/*
Theme Name: Kara Hudson Brands
Theme URI: https://karahudsonbrands.com
Description: Kadence child theme for Kara Hudson Brands. All brand CSS lives here per Brand HQ Web Development Standards.
Author: Kara Hudson
Template: kadence
Version: 1.0.0
Text Domain: khb-child
*/

/* ===== Design tokens ===== */
:root {
	--khb-bone: #F5F3EF;
	--khb-graphite: #1A1B1E;
	--khb-rule: #BEBBB5;
	--khb-muted: #5C5B57;
	--khb-body-text: #2E2F33;
	/* Family trio: the three brand primaries, always used together */
	--khb-forest: #1B4332;
	--khb-slate: #4A6474;
	--khb-aubergine: #3D1F47;
	--khb-forest-tint: #3F7A5E;
	--khb-slate-tint: #7C97A8;
	--khb-aubergine-tint: #8A6197;
	/* Brand card text colors (each brand's own light) */
	--khb-kc-light: #FAF6EC;
	--khb-khp-light: #F4EDE3;
	--khb-vca-light: #F5EFE6;
	/* Type */
	--khb-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
	--khb-font-kc: 'Cinzel', serif;
	--khb-font-khp: 'Cormorant SC', serif;
	--khb-font-vca: 'Fraunces', serif;
	--khb-max: 1120px;
}

/* ===== Global ===== */
body,
.content-bg,
.site,
body.content-style-unboxed .site {
	background: var(--khb-bone);
}
body {
	color: var(--khb-graphite);
	font-family: var(--khb-serif);
}

.khb-page {
	background: var(--khb-bone);
	color: var(--khb-graphite);
	font-family: var(--khb-serif);
	font-size: 18px;
	line-height: 1.65;
}
.khb-page p,
.khb-page h1,
.khb-page h2 {
	font-family: var(--khb-serif);
	color: inherit;
	margin: 0;
}
.khb-page a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ===== Mark: boxed KH over three thin bars ===== */
.khb-mark {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	vertical-align: middle;
}
.khb-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 92px;
	border: 2px solid currentColor;
	box-sizing: border-box;
	font-family: var(--khb-serif);
	font-size: 44px;
	line-height: 1;
	letter-spacing: -1px;
}
.khb-bars { display: flex; gap: 4px; }
.khb-bars span { flex: 1; height: 7px; }
.khb-bars span:nth-child(1) { background: var(--khb-forest); }
.khb-bars span:nth-child(2) { background: var(--khb-slate); }
.khb-bars span:nth-child(3) { background: var(--khb-aubergine); }
.khb-mark.sm .khb-box { width: 34px; height: 37px; font-size: 17px; border-width: 1.5px; letter-spacing: 0; }
.khb-mark.sm .khb-bars { gap: 2px; }
.khb-mark.sm .khb-bars span { height: 3px; }

/* ===== Header ===== */
.khb-header { padding: 22px 24px; border-bottom: 1px solid var(--khb-rule); }
.khb-header-inner {
	max-width: var(--khb-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.khb-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.khb-page .khb-lockup { text-decoration: none; }
.khb-lockup-name { font-size: 21px; }
.khb-header nav { display: flex; gap: 32px; }
.khb-header nav a {
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--khb-muted);
}
.khb-header nav a:hover { color: var(--khb-graphite); }

/* ===== Hero ===== */
.khb-hero { padding: 96px 24px 88px; text-align: center; }
.khb-hero .khb-mark { margin-bottom: 28px; }
.khb-hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.1; font-weight: 400; }
.khb-page .khb-eyebrow {
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--khb-muted);
}
.khb-page .khb-tagline { margin-top: 56px; font-size: clamp(30px, 4vw, 44px); line-height: 1.2; }
.khb-page .khb-intro { max-width: 620px; margin: 28px auto 0; color: var(--khb-body-text); }

/* ===== Brand cards ===== */
.khb-brands-wrap { padding: 24px 24px 96px; }
.khb-page .khb-label {
	text-align: center;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--khb-muted);
	margin-bottom: 28px;
}
.khb-page .khb-brands { max-width: var(--khb-max); margin: 0 auto; gap: 24px; }
.khb-card {
	padding: 48px 32px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}
.khb-card.kc { background: var(--khb-forest); color: var(--khb-kc-light); }
.khb-card.khp { background: var(--khb-slate); color: var(--khb-khp-light); }
.khb-card.vca { background: var(--khb-aubergine); color: var(--khb-vca-light); }
.khb-page .khb-card h2 {
	font-weight: 400;
	line-height: 1.15;
	min-height: 2.3em;
	display: flex;
	align-items: center;
}
.khb-page .khb-card.kc h2 { font-family: var(--khb-font-kc); font-size: 27px; letter-spacing: 3px; }
.khb-page .khb-card.khp h2 { font-family: var(--khb-font-khp); font-weight: 500; font-size: 29px; }
.khb-page .khb-card.vca h2 { font-family: var(--khb-font-vca); font-size: 27px; }
.khb-card p { font-size: 16px; line-height: 1.6; opacity: .92; }
.khb-page .khb-card .khb-visit { margin-top: auto; padding-top: 8px; font-size: 14px; letter-spacing: 1px; }

/* ===== Contact ===== */
.khb-contact { background: var(--khb-graphite); color: var(--khb-bone); padding: 80px 24px; text-align: center; }
.khb-page .khb-contact h2 { font-size: 32px; font-weight: 400; }
.khb-page .khb-contact p { margin-top: 16px; }
.khb-contact a { font-size: 20px; }

/* ===== Footer ===== */
.khb-page .khb-footer {
	padding: 28px 24px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--khb-muted);
}

/* ===== Responsive ===== */
@media (max-width: 781px) {
	.khb-hero { padding: 64px 20px; }
	.khb-page .khb-tagline { margin-top: 40px; }
	.khb-header nav { display: none; }
}