/**
 * Shared chrome components (header, footer, dropdown nav). Screen-specific
 * component styles get their own file per template as they're built.
 */

/* Header */
.chb-header {
	border-bottom: 1px solid var( --border );
}
.chb-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 22px 48px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.chb-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.chb-logo {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var( --accent );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --font-heading );
	font-weight: 800;
	font-size: 18px;
	color: var( --accent-ink );
}

.chb-wordmark {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
}
.chb-wordmark__muted {
	color: var( --muted );
	font-weight: 400;
}

/* Hamburger toggle -- hidden on desktop, shown at the mobile breakpoint
   below. Pure CSS icon (no icon font/image dependency). */
.chb-nav-toggle {
	display: none;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: none;
}
.chb-nav-toggle__icon,
.chb-nav-toggle__icon::before,
.chb-nav-toggle__icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var( --ink );
	border-radius: 1px;
	transition: transform 150ms ease, opacity 150ms ease;
}
.chb-nav-toggle__icon {
	position: relative;
}
.chb-nav-toggle__icon::before,
.chb-nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.chb-nav-toggle__icon::before {
	top: -6px;
}
.chb-nav-toggle__icon::after {
	top: 6px;
}
.chb-nav-toggle[aria-expanded="true"] .chb-nav-toggle__icon {
	background: transparent;
}
.chb-nav-toggle[aria-expanded="true"] .chb-nav-toggle__icon::before {
	top: 0;
	transform: rotate( 45deg );
}
.chb-nav-toggle[aria-expanded="true"] .chb-nav-toggle__icon::after {
	top: 0;
	transform: rotate( -45deg );
}

.chb-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-family: var( --font-heading );
	font-size: 13.5px;
	font-weight: 500;
}
.chb-nav a:hover {
	color: var( --accent );
}
.chb-nav__contact {
	background: var( --accent );
	color: var( --accent-ink );
	padding: 8px 16px;
	border-radius: 8px;
}
.chb-nav__contact:hover {
	opacity: 0.85;
	color: var( --accent-ink );
}
.chb-nav__current {
	color: var( --accent );
}

/* Blog category dropdown (rendered by the chadhall/category-nav block) */
.chb-dropdown {
	position: relative;
}
.chb-dropdown__trigger {
	display: flex;
	align-items: center;
	gap: 5px;
}
.chb-dropdown__trigger:hover {
	color: var( --accent );
}
.chb-dropdown__caret {
	font-size: 10px;
	transform: translateY( 1px );
}
.chb-dropdown__menu {
	position: absolute;
	top: 28px;
	left: 0;
	background: var( --surface );
	border: 1px solid var( --border );
	border-radius: 12px;
	padding: 8px;
	box-shadow: var( --shadow );
	min-width: 180px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chb-dropdown__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 8px;
}
.chb-dropdown__item:hover {
	background: var( --bg );
}
.chb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

/* Footer */
.chb-footer {
	padding: 28px 48px;
	border-top: 1px solid var( --border );
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var( --muted );
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.chb-footer__links {
	display: flex;
	gap: 22px;
}
.chb-footer__links a:hover {
	color: var( --accent );
}

/* Distill Digital & Rate It band -- fixed navy, does not follow the
   light/dark toggle. Used on both Home (full) and About (--compact
   modifier, see about.css) so it lives here rather than a single
   page's stylesheet. */
.chb-brand-band {
	margin: 0 48px 64px;
	background: var( --distill-navy );
	border-radius: var( --radius-large );
	padding: 40px 44px;
	display: flex;
	align-items: center;
	gap: 44px;
}
.chb-brand-band__marks {
	display: flex;
	gap: 18px;
	flex: none;
}
.chb-brand-band__marks img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.chb-brand-band__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 20px;
	color: #F5EFE6;
	margin: 0 0 8px;
}
.chb-brand-band__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: #C7CDD4;
	max-width: 560px;
	margin: 0;
}
.chb-brand-band__actions {
	display: flex;
	gap: 12px;
	flex: none;
}
.chb-brand-band__btn {
	padding: 10px 18px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
}
.chb-brand-band__btn--outline {
	border: 1px solid var( --distill-amber );
	color: var( --distill-amber );
}
.chb-brand-band__btn--outline:hover {
	background: var( --distill-amber );
	color: var( --distill-navy );
}
.chb-brand-band__btn--filled {
	background: var( --distill-amber );
	color: var( --distill-navy );
}
.chb-brand-band__btn--filled:hover {
	opacity: 0.85;
}

/* ---- Tablet ---- */
@media ( max-width: 900px ) {
	.chb-header__bar {
		padding: 18px 32px;
	}
	.chb-footer {
		padding: 24px 32px;
	}
	.chb-brand-band {
		margin: 0 32px 48px;
		padding: 32px;
		gap: 28px;
	}
}

/* ---- Mobile: collapse nav behind a hamburger ---- */
@media ( max-width: 680px ) {
	.chb-header__bar {
		padding: 16px 20px;
	}
	.chb-nav-toggle {
		display: flex;
	}
	.chb-nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
		order: 3;
		margin-top: 16px;
	}
	.chb-nav.is-open {
		display: flex;
	}
	.chb-nav a,
	.chb-nav__contact {
		width: 100%;
	}
	.chb-nav a {
		padding: 10px 4px;
	}
	.chb-nav__contact {
		text-align: center;
		box-sizing: border-box;
		margin-top: 6px;
	}
	.chb-theme-toggle {
		margin-top: 6px;
	}
	.chb-dropdown {
		width: 100%;
	}
	.chb-dropdown__trigger {
		padding: 10px 4px;
	}
	.chb-dropdown__menu {
		position: static;
		box-shadow: none;
		border: none;
		padding: 0 0 0 16px;
		margin-top: 4px;
	}

	.chb-footer {
		padding: 20px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.chb-brand-band {
		margin: 0 20px 40px;
		padding: 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.chb-brand-band__actions {
		width: 100%;
	}
	.chb-brand-band__btn {
		flex: 1;
		text-align: center;
	}
}