/**
 * Breadcrumbs + Search bar styles.
 *
 * Uses theme.json design tokens for consistency with the Cool Bear
 * dark theme. Breadcrumbs render below the vehicle picker bar and
 * above page content on all product/category pages.
 *
 * @package Cool_Bear_Core
 * @since   0.9.0
 */

/* ─── Breadcrumbs ─── */

.cb-breadcrumbs {
	padding: var(--wp--preset--spacing--20) 0;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/* Inside a PLP/archive (e.g. /wheels/series/{slug}/) or PDP container, the
   wrapper already applies the page max-width + side padding; the breadcrumb must
   NOT re-apply its own or it ends up narrower and double-indented vs the content
   below it (operator 2026-06-29). */
.cb-plp__container > .cb-breadcrumbs,
.cb-pdp__container > .cb-breadcrumbs {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.cb-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.cb-breadcrumbs__item {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.cb-breadcrumbs__item a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.cb-breadcrumbs__item a:hover {
	text-decoration: underline;
}

.cb-breadcrumbs__item[aria-current="page"] {
	color: var(--wp--preset--color--text);
}

.cb-breadcrumbs__sep {
	margin: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

/* ─── Search Bar ─── */

.cb-search-bar {
	display: flex;
	align-items: center;
	max-width: 320px;
	margin: var(--wp--preset--spacing--20) auto;
}

.cb-search-form {
	display: flex;
	width: 100%;
}
/* wpautop wraps the form's trailing input+button run in a <p>; keep it layout-
   transparent so they stay the flex row's direct children (no orphan </p>). */
.cb-search-form > p {
	display: contents;
	margin: 0;
}

.cb-search-input {
	height: 44px;
	flex: 1;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px 0 0 6px;
	padding: 8px 16px;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
}

.cb-search-input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.cb-search-input::placeholder {
	color: var(--wp--preset--color--text-muted);
}

.cb-search-submit {
	height: 44px;
	width: 44px;
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: 0 6px 6px 0;
	color: var(--wp--preset--color--text-on-accent);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cb-search-submit:hover {
	opacity: 0.9;
}

/* ─── Search Highlight ─── */

.cb-search-highlight {
	color: var(--wp--preset--color--accent);
	background: none;
}