/* Header / footer / nav layout — Cream Chargers USA */

.ccu-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ccu-ink);
	color: var(--ccu-white);
	padding: var(--ccu-space-2) var(--ccu-space-4);
	z-index: 1000;
}
.ccu-skip-link:focus { left: var(--ccu-space-2); top: var(--ccu-space-2); }

.ccu-topbar {
	background: var(--ccu-ink);
	color: var(--ccu-steel-mist);
	font-size: var(--ccu-size-small);
}
.ccu-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccu-space-4);
	padding-block: var(--ccu-space-2);
	flex-wrap: wrap;
}
.ccu-topbar__msg { margin: 0; }
.ccu-topbar__link {
	color: var(--ccu-cream);
	font-weight: 600;
	white-space: nowrap;
}
.ccu-topbar__link:hover { color: var(--ccu-copper-tint); }

.ccu-header {
	background: var(--ccu-white);
	border-bottom: var(--ccu-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.ccu-header__row {
	display: flex;
	align-items: center;
	gap: var(--ccu-space-8);
	padding-block: var(--ccu-space-4);
}

.ccu-wordmark {
	font-family: var(--ccu-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--ccu-ink) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.ccu-wordmark span { color: var(--ccu-copper); }
.ccu-wordmark--footer { font-size: 1.25rem; margin-bottom: var(--ccu-space-2); }

.ccu-nav { flex: 1; }
.ccu-nav ul {
	list-style: none;
	display: flex;
	gap: var(--ccu-space-6);
	margin: 0;
	padding: 0;
}
.ccu-nav a {
	color: var(--ccu-ink-soft);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	text-decoration: none;
}
.ccu-nav a:hover { color: var(--ccu-copper-dark); text-decoration: underline; }

.ccu-header__actions { display: flex; align-items: center; gap: var(--ccu-space-4); }
.ccu-cart-link {
	position: relative;
	font-weight: 600;
	font-size: var(--ccu-size-small);
	color: var(--ccu-ink) !important;
	text-decoration: none !important;
}
.ccu-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.3em;
	margin-left: 0.3em;
	background: var(--ccu-copper);
	color: var(--ccu-white);
	border-radius: 999px;
	font-size: 0.7rem;
}

/* CSS-only mobile nav (checkbox hack) — no JS dependency for something this simple */
.ccu-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.ccu-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: var(--ccu-space-2);
}
.ccu-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ccu-ink);
}

@media (max-width: 860px) {
	.ccu-nav-toggle { display: flex; }
	.ccu-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ccu-white);
		border-bottom: var(--ccu-border);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
	}
	.ccu-nav ul { flex-direction: column; gap: 0; padding: var(--ccu-space-4) 0; }
	.ccu-nav li { border-bottom: 1px solid var(--ccu-line); }
	.ccu-nav a { display: block; padding: var(--ccu-space-3) var(--ccu-space-6); }
	.ccu-nav-toggle-input:checked ~ .ccu-nav { max-height: 70vh; overflow-y: auto; }
}

.ccu-footer {
	background: var(--ccu-ink);
	color: var(--ccu-steel-mist);
	margin-top: var(--ccu-space-32);
	padding-block: var(--ccu-space-16) var(--ccu-space-8);
}
.ccu-footer a { color: var(--ccu-steel-mist); }
.ccu-footer a:hover { color: var(--ccu-copper-tint); }
.ccu-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--ccu-space-8);
	padding-bottom: var(--ccu-space-12);
}
.ccu-footer__brand p { color: var(--ccu-steel-mist); max-width: 32ch; }
.ccu-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ccu-footer__col li { margin-bottom: var(--ccu-space-2); }
.ccu-footer .ccu-eyebrow { color: var(--ccu-copper-tint); }

.ccu-footer__bottom {
	border-top: 1px solid var(--ccu-ink-soft);
	padding-top: var(--ccu-space-6);
	display: flex;
	justify-content: space-between;
	gap: var(--ccu-space-6);
	flex-wrap: wrap;
	font-size: var(--ccu-size-small);
}
.ccu-footer__bottom p { margin: 0; max-width: 46ch; }

@media (max-width: 780px) {
	.ccu-footer__grid { grid-template-columns: 1fr 1fr; }
}