/**
 * Chief Camper — header & primary navigation.
 *
 * Desktop and mobile are designed as separate layouts rather than one
 * scaled-down grid: desktop leads with a wide search bar between brand and
 * cart, mobile drops search onto its own full-width row and moves the nav
 * into a slide-in panel.
 */

/* ==========================================================================
   Shell
   ========================================================================== */
.cc-header {
	background: var(--cc-color-surface);
	border-bottom: 1px solid var(--cc-color-border);
	position: relative;
	z-index: 100;
}

/* ==========================================================================
   Utility bar
   ========================================================================== */
.cc-header__utility {
	background: var(--cc-color-heading);
	color: #FFFFFF;
}

.cc-header__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	min-height: 38px;
	flex-wrap: wrap;
}

.cc-header__utility-message {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	max-width: none;
}

.cc-header__utility-links {
	display: flex;
	align-items: center;
	gap: var(--cc-space-3);
}

.cc-header__utility-link {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.cc-header__utility-link:hover {
	color: var(--cc-color-button-bg);
	text-decoration: underline;
}

@media (max-width: 860px) {
	.cc-header__utility-message { display: none; }
	.cc-header__utility-inner { justify-content: center; }
}

/* ==========================================================================
   Main row — brand / search / actions
   ========================================================================== */
.cc-header__main-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--cc-space-5);
	padding-block: var(--cc-space-3);
}

.cc-header__brand {
	display: flex;
	align-items: center;
}

.cc-header__brand img,
.cc-header__brand .custom-logo {
	display: block;
	max-height: 62px;
	width: auto;
	height: auto;
}

.cc-header__site-title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-xl);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--cc-color-heading);
	text-decoration: none;
	line-height: 1;
	letter-spacing: 0.01em;
}

.cc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
}

.cc-header__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--cc-space-2);
	color: var(--cc-color-heading);
	text-decoration: none;
	border-radius: var(--cc-radius-sm);
	min-width: 58px;
}

.cc-header__action:hover {
	background: var(--cc-color-background);
	color: var(--cc-color-accent);
}

.cc-header__action-icon {
	position: relative;
	display: inline-flex;
}

.cc-header__action-label {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* Cart badge */
.cc-cart__count {
	position: absolute;
	top: -7px;
	right: -10px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cc-color-accent);
	color: #FFFFFF;
	border-radius: 100px;
	font-family: var(--cc-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
}

.cc-cart__count--empty { display: none; }

/* Mobile menu button — hidden on desktop, where the nav bar is visible */
.cc-header__menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--cc-space-2);
	min-width: 48px;
	background: none;
	border: none;
	color: var(--cc-color-heading);
	cursor: pointer;
	border-radius: var(--cc-radius-sm);
}

.cc-header__menu-toggle:hover {
	background: var(--cc-color-background);
	color: var(--cc-color-accent);
}

/* ==========================================================================
   Search
   ========================================================================== */
.cc-search {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

.cc-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cc-color-body);
	opacity: 0.6;
	pointer-events: none;
	display: inline-flex;
}

/* Scoped with the parent class (0-2-0) so it outranks GeneratePress's
   `input[type="search"]` rule (0-1-1) — otherwise the parent theme's
   padding wins and the search icon overlaps the placeholder text. */
.cc-search .cc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-base);
	color: var(--cc-color-body);
	background: var(--cc-color-background);
	border: 2px solid var(--cc-color-border);
	border-right: none;
	border-radius: var(--cc-radius-sm) 0 0 var(--cc-radius-sm);
	padding: 12px 14px 12px 42px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cc-search .cc-search__input::placeholder {
	color: var(--cc-color-body);
	opacity: 0.6;
}

.cc-search .cc-search__input:focus {
	outline: none;
	background: var(--cc-color-surface);
	border-color: var(--cc-color-heading);
}

/* Focus ring spans the whole control, not just the input half */
.cc-search:focus-within {
	outline: 3px solid var(--cc-color-accent);
	outline-offset: 2px;
	border-radius: var(--cc-radius-sm);
}

.cc-search .cc-search__input:focus-visible { outline: none; }

.cc-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-button-text);
	background: var(--cc-color-button-bg);
	border: 2px solid var(--cc-color-button-border);
	border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
	padding: 0 24px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cc-search__submit:hover {
	background: var(--cc-color-button-bg-hover);
}

/* ==========================================================================
   Primary navigation
   ========================================================================== */
/* The mega panel is positioned against this full-width bar (not against
   the individual nav item) so it can span the viewport and still have its
   inner content line up with the page container. */
.cc-nav {
	position: relative;
	background: var(--cc-color-surface);
	border-top: 1px solid var(--cc-color-border);
}

.cc-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--cc-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.cc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-1);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cc-tracking-wide);
	color: var(--cc-color-heading);
	text-decoration: none;
	padding: 15px var(--cc-space-3);
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

.cc-nav__link:hover,
.cc-nav__item.is-current > .cc-nav__link {
	color: var(--cc-color-accent);
	border-bottom-color: var(--cc-color-accent);
}

/* Dropdown toggle button */
.cc-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 15px 10px 15px 0;
	margin-left: -10px;
	color: var(--cc-color-heading);
	cursor: pointer;
}

.cc-nav__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

.cc-nav__toggle[aria-expanded="true"] .cc-nav__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.cc-nav__item--mega:hover .cc-nav__toggle,
.cc-nav__toggle:hover {
	color: var(--cc-color-accent);
}

.cc-nav__notice {
	font-size: var(--cc-text-xs);
	color: var(--cc-color-body);
	padding: var(--cc-space-2) 0;
	margin: 0;
}

/* ==========================================================================
   Mega menu
   ========================================================================== */
/* Mega items go position:static so the absolutely-positioned panel below
   resolves against .cc-nav rather than the narrow nav item. */
.cc-nav__item--mega { position: static; }

.cc-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	background: var(--cc-color-surface);
	border-top: 1px solid var(--cc-color-border);
	border-bottom: 3px solid var(--cc-color-accent);
	box-shadow: 0 14px 28px var(--cc-color-shadow);
	padding-block: var(--cc-space-4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
	z-index: 90;
}

.cc-nav__item--mega:hover > .cc-mega,
.cc-nav__item--mega:focus-within > .cc-mega,
.cc-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cc-mega__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--cc-space-1) var(--cc-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-mega__list .cc-nav__item { display: block; }

.cc-mega__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-base);
	font-weight: 600;
	color: var(--cc-color-heading);
	text-decoration: none;
	padding: 10px var(--cc-space-3);
	border-radius: var(--cc-radius-sm);
	border-left: 3px solid transparent;
}

.cc-mega__link:hover {
	background: var(--cc-color-background);
	border-left-color: var(--cc-color-accent);
	color: var(--cc-color-accent);
}

.cc-mega__count {
	font-family: var(--cc-font-mono);
	font-size: var(--cc-text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--cc-color-body);
	opacity: 0.65;
}

/* ==========================================================================
   Mobile layout
   ========================================================================== */
@media (max-width: 1024px) {
	.cc-header__main-inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: var(--cc-space-3);
		row-gap: var(--cc-space-3);
	}

	/* Search drops to its own full-width row below brand + actions */
	.cc-header__search {
		grid-column: 1 / -1;
		order: 3;
	}

	.cc-search { max-width: none; }

	.cc-header__menu-toggle { display: inline-flex; }

	/* Push brand left / actions right rather than letting the auto tracks
	   bunch toward the middle. */
	.cc-header__main-inner { grid-template-columns: auto 1fr; }
	.cc-header__actions { justify-self: end; }

	.cc-header__action-label { display: none; }

	.cc-header__action { min-width: 44px; }

	.cc-header__brand img,
	.cc-header__brand .custom-logo { max-height: 46px; }

	/* Nav becomes a collapsible panel */
	.cc-nav {
		display: none;
		border-top: 1px solid var(--cc-color-border);
		max-height: calc(100vh - 160px);
		overflow-y: auto;
	}

	.cc-nav.is-open { display: block; }

	.cc-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cc-nav__item {
		flex-wrap: wrap;
		border-bottom: 1px solid var(--cc-color-border);
	}

	.cc-nav__item--depth-0 > .cc-nav__link {
		flex: 1 1 auto;
		border-bottom: none;
		padding: 16px 0;
	}

	.cc-nav__toggle {
		padding: 16px;
		margin-left: 0;
	}

	/* Mega menu becomes an inline accordion panel on mobile */
	.cc-mega {
		position: static;
		width: auto;
		right: auto;
		margin-left: 0;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--cc-color-border);
		background: var(--cc-color-background);
		padding-block: var(--cc-space-2);
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		flex-basis: 100%;
	}

	/* Hover must not open panels on touch — only the explicit toggle does */
	.cc-nav__item--mega:hover > .cc-mega,
	.cc-nav__item--mega:focus-within > .cc-mega {
		display: none;
	}

	.cc-mega.is-open,
	.cc-nav__item--mega:hover > .cc-mega.is-open,
	.cc-nav__item--mega:focus-within > .cc-mega.is-open {
		display: block;
	}

	.cc-mega__inner { padding-inline: 0; }

	.cc-mega__list { grid-template-columns: 1fr; }
}

/* The submit button shows its label on wider screens and swaps to a
   magnifier glyph on narrow ones, where the label would crowd the field. */
.cc-search__submit-icon { display: none; }

@media (max-width: 560px) {
	.cc-search__submit {
		padding: 0 14px;
		min-width: 52px;
	}
	.cc-search__submit-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cc-search__submit-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-mega,
	.cc-nav__chevron {
		transition: none;
	}
}

/* Currency switcher ---------------------------------------------------------
   Sits in the utility bar. Two short codes rather than a select, so the
   current currency is readable at a glance and switching is one tap. */
.cc-currency {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--cc-radius-sm);
	overflow: hidden;
}

.cc-currency__option {
	display: inline-block;
	padding: 0.15em 0.55em;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.cc-currency__option:hover,
.cc-currency__option:focus-visible {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
}

.cc-currency__option.is-current {
	background: var(--cc-color-accent);
	color: #FFFFFF;
}