/*
 * The "Espace pro" button in the site header.
 *
 * Sits in Shoptimizer's primary navigation next to the wishlist and cart
 * icons, so it inherits that row's alignment and only has to state its own
 * box: a small outlined tab in caps — black rule and black text on the header's
 * own background — with the wide tracking the design's CTA style uses.
 */

/*
 * The slot is the flex item; the anchor inside it is the button.
 *
 * It is positioned and raised above its neighbours in the nav row because
 * `.col-full-nav .site-search` is `position: relative; z-index: 4` and the
 * cart toggler is absolutely positioned — a static element loses to both in
 * the paint order however the row lays out, and the symptom is a button that
 * looks right and swallows its own clicks. The z-index is scoped:
 * `.col-full-nav` is itself positioned with a z-index, so this only ranks the
 * button among its siblings and can never punch through the drawer, the
 * sticky header or the admin bar.
 */
/*
 * `flex-shrink` is deliberately left at its default of 1 here and on the anchor
 * below.
 *
 * `.header-4 .col-full-nav` is `width: auto; display: flex` — a row sized by
 * its own contents. As the viewport narrows there is less room than the row
 * wants, and every flex item gives up a share of the shortfall. Pinning this
 * one at `flex-shrink: 0` made it refuse its share, so the navigation beside it
 * absorbed the whole of it and its menu items were squeezed until they
 * collided. Letting the button yield like everything else is what keeps the
 * menu intact — and it is the only lever this stylesheet is allowed to pull,
 * because every rule that reshaped `.col-full-nav` itself broke the theme's
 * dropdowns.
 */
.iep-header-button-slot {
	align-items: center;
	display: flex;
	margin-right: 0.75rem;
	min-width: 0;
	position: relative;
	z-index: 20;
}

.iep-header-button {
	align-self: center;
	background: transparent;
	border: 1px solid #000;
	color: #000;
	display: inline-block;
	font-family: "neue-haas-unica", "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.7;
	padding: 0.3125rem 0.625rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.iep-header-button:hover,
.iep-header-button:focus {
	background: #000;
	color: #fff;
	text-decoration: none;
}

/*
 * The bubble counting priced quotes the professional has not opened yet.
 *
 * Only ever printed for a signed-in professional, whose pages WP Rocket
 * neither caches nor runs Remove-Unused-CSS on, so these rules reach them even
 * though the anonymous used-CSS snapshot never saw the markup.
 */
.iep-header-button--has-badge {
	position: relative;
}

.iep-header-button__badge {
	background: #b3261e;
	border-radius: 9px;
	box-shadow: 0 0 0 2px #fff;
	box-sizing: border-box;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	height: 18px;
	letter-spacing: 0;
	line-height: 18px;
	min-width: 18px;
	padding: 0 5px;
	pointer-events: none;
	position: absolute;
	right: -9px;
	text-align: center;
	top: -9px;
}

/* The header turns white-on-dark while a sticky header is in its condensed
   state, where black text on a black bar would disappear. The outline follows
   whatever the header sets its own text to, so the button stays legible in
   both states. */
.sticky-wrapper.is-sticky .iep-header-button,
.shoptimizer-sticky-add-to-cart .iep-header-button {
	border-color: currentColor;
	color: inherit;
}

/*
 * Compact where the row is tight.
 *
 * Between 1230px and 1550px the header has less room than its contents want, so
 * the button asks for less of it: tighter tracking and less padding give roughly
 * 30px back to the navigation. Nothing here touches the row itself — only the
 * size of this plugin's own box.
 */
/*
 * Withdrawn where the header row cannot hold it.
 *
 * Between the drawer's breakpoint and 1230px the navigation wants every pixel
 * of the row, and the button — which shrinks with everything else rather than
 * pinning itself — ends up on top of the menu items. It is dropped over that
 * band only: below 993px the row is the off-canvas drawer, where the button has
 * a full-width line of its own and nothing to collide with.
 */
@media ( min-width: 993px ) and ( max-width: 1229.98px ) {
	.iep-header-button-slot {
		display: none;
	}
}

@media ( min-width: 1230px ) and ( max-width: 1550px ) {
	.iep-header-button-slot {
		margin-right: 0.5rem;
	}

	.iep-header-button {
		letter-spacing: 0.06em;
		padding: 0.3125rem 0.4375rem;
	}
}

/*
 * In the mobile drawer the button takes the full width.
 *
 * Below 992px `.col-full-nav` stops being a header row and becomes the
 * off-canvas panel — 300px wide, slid in from the left. A small right-aligned
 * tab reads as an afterthought in a column of full-width entries, so here it
 * becomes a block the width of the drawer.
 */
@media ( max-width: 992px ) {
	.iep-header-button-slot {
		flex: 0 0 100%;
		justify-content: stretch;
		margin: 0.5rem 0 0;
		order: 99;
		padding-right: 0;
		width: 100%;
	}

	.iep-header-button {
		display: block;
		padding: 0.6875rem 1rem;
		text-align: center;
		width: 100%;
	}

	/* Full-width in the drawer: the bubble sits inside the bar's right end
	   rather than overhanging an edge the drawer would clip. */
	.iep-header-button__badge {
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
	}
}

@media ( max-width: 48rem ) {
	.iep-header-button {
		letter-spacing: 0.1em;
	}
}