/*
 * Header pattern — charcoal top bar + horizontal Brookstreet logo + "Shop Now" outline CTA.
 * Design: design.md → "header". Class prefix: bsm- (system.md §6).
 */

.bsm-header {
	background-color: var(--wp--preset--color--white, #fff);
}

/* 17px charcoal strip across the very top */
.bsm-header__bar {
	height: 17px;
	background-color: var(--wp--preset--color--brookstreet-charcoal, #2e2e2e);
}

/* Brand row: horizontal logo left, CTA right */
.bsm-header__inner {
	min-height: 80px;
	padding: 0 40px;
	gap: 20px;
}

/* Horizontal Brookstreet logo (wordmark included) — sized by height, aspect preserved */
.bsm-header__logo {
	margin: 0;
}

.bsm-header__logo a {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.bsm-header__logo a:hover,
.bsm-header__logo a:focus-visible {
	opacity: 0.8;
}

.bsm-header__logo img {
	display: block;
	width: auto;
	height: 34px;
	max-width: 100%;
}

/* "Shop Now" — ButtonSmOutlineRedWhite (design.md → Buttons):
   red outline + red label on white; hover fills red with a white label. */
.bsm-header__cta {
	margin: 0;
	flex-shrink: 0;
}

.bsm-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 25px !important;
	border: 1px solid var(--wp--preset--color--brookstreet-red, #a43143) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--brookstreet-red, #a43143) !important;
	font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.bsm-header__cta .wp-block-button__link:hover,
.bsm-header__cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--brookstreet-red, #a43143) !important;
	color: var(--wp--preset--color--white, #fff) !important;
}

/* Mobile — design has no mobile artboard (design.md). Let the logo shrink to fit
   beside the CTA (aspect preserved) rather than overflow on narrow screens. */
@media (max-width: 767px) {
	.bsm-header__inner {
		padding: 0 20px;
	}

	.bsm-header__logo {
		min-width: 0;
		flex-shrink: 1;
	}

	.bsm-header__logo img {
		height: auto;
		max-height: 30px;
	}
}