/**
 * iBreathe Info Bar
 *
 * Structural rules are fixed and live here. Per-instance values arrive as
 * custom properties on .ibr-info-bar-wrapper, set inline by ibr-info-bar.php.
 *
 * At stage 3 nothing is injected — every property below falls through to its
 * fallback, and those fallbacks match the values configured on the live
 * Shopify section. Stage 4 adds the inline declarations and this file does
 * not change.
 *
 * Note the absence of any full-bleed treatment. This section is hooked to
 * blocksy:header:after, which fires as a direct child of #main-container.
 * That container is full viewport width, so width:100% here spans the page
 * exactly, without the 100vw overshoot the other three sections carry.
 */

/* ---------------------------------------------------------------
   Outer strip

   Spans the page.

   All four border sides are declared explicitly. The shorthand
   border-bottom sets only the bottom edge, which left the other
   three to pick up a width and style from elsewhere in the theme
   and a colour of currentColor — an invisible box when the text was
   light, a visible one when it was dark. Left and right are pinned
   at 0 here so that cannot recur.

   Top and bottom widths are editable and share one colour. A cleared
   colour is written out as 'transparent' by style_vars(); a width of
   0 removes that edge entirely.
   --------------------------------------------------------------- */

.ibr-info-bar-wrapper {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--ibrinfo-bg-color, #ffffff);
	border-style: solid;
	border-color: var(--ibrinfo-border-color, #e8e8e8);
	border-left-width: 0;
	border-right-width: 0;
	border-top-width: var(--ibrinfo-border-top, 0px);
	border-bottom-width: var(--ibrinfo-border-bottom, 1px);
}

/* ---------------------------------------------------------------
   Inner container — width constrained by Blocksy's .ct-container,
   so the bar's side margins track the rest of the site.

   Blocksy applies its own vertical padding to .ct-container; the row
   supplies that itself, so it is removed here to avoid doubling up.
   --------------------------------------------------------------- */

.ibr-info-bar {
	width: 100%;
	box-sizing: border-box;
}

.ibr-info-bar-wrapper .ibr-info-bar.ct-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
   Row

   nowrap is load-bearing. Items compress and their text wraps to a
   second line beside the icon rather than dropping onto a new row.
   That behaviour is what produces the tablet layout, and it comes
   from these three properties acting together:

     .info-bar-row  flex-wrap: nowrap
     .info-item     min-width: 0 and flex-shrink: 1
     .info-icon     flex-shrink: 0

   Remove any one and the bar reflows differently.
   --------------------------------------------------------------- */

.ibr-info-bar .info-bar-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 15px;
	width: 100%;
	padding: 12px 0;
}

/* ---------------------------------------------------------------
   Items
   --------------------------------------------------------------- */

.ibr-info-bar .info-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-shrink: 1;
}

/* ---------------------------------------------------------------
   Linked items

   An item with a link is an <a> carrying .info-item, so the whole
   item including its icon is the hit area. An item without one is a
   <div>. Both are styled by the rule above; only the rules below
   apply to the linked variant.

   color: inherit matters as much as removing the underline. Without
   it Blocksy's link colour would override the section's text colour
   on linked items only, giving a bar with two colours in it.
   --------------------------------------------------------------- */

.ibr-info-bar a.info-item,
.ibr-info-bar a.info-item:hover,
.ibr-info-bar a.info-item:focus,
.ibr-info-bar a.info-item:active {
	text-decoration: none;
	color: inherit;
}

/* Blocksy sets outline: none globally. With links present the bar
   gains keyboard focus stops on every page, so the indicator is put
   back here. focus-visible, so it shows for keyboard use and not on
   mouse click. */
.ibr-info-bar a.info-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.ibr-info-bar .info-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}

.ibr-info-bar .info-text {
	display: block;
	line-height: 1.2;
	word-break: break-word;
	font-size: var(--ibrinfo-font-size, 11px);
	font-weight: var(--ibrinfo-font-weight, 400);
	color: var(--ibrinfo-text-color, #000000);
}

/* ---------------------------------------------------------------
   Mobile — 767px, as per the Shopify section

   Two of the four items are hidden here. Which two is set per item
   in the admin; the class is applied in render().

   Typography takes its own values on mobile, independent of desktop.
   This has no precedent in the other three sections.
   --------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.ibr-info-bar .info-visibility-desktop-only {
		display: none;
	}

	.ibr-info-bar .info-bar-row {
		justify-content: space-around;
		gap: 10px;
	}

	.ibr-info-bar .info-text {
		font-size: var(--ibrinfo-font-size-mobile, 11px);
		font-weight: var(--ibrinfo-font-weight-mobile, 400);
	}
}