/*
 * Merged top-bar structure — shared by both "merged" header styles
 * (Customizer → Header → Header style: "Merged, purple bar" and "Merged, light
 * bar"). Enqueued by just2euro_header_assets() (inc/header.php) when
 * just2euro_header_merged_enabled() is true, depending on 'just2euro-header'.
 *
 * The `j2e-header-merged` body class (inc/customizer/header.php) scopes every
 * shared rule. This file owns the *structure* both merged styles share: the
 * standalone purple top bar is gone (skipped in PHP — inc/header/layout.php),
 * its cluster renders inline in the brand-row aside, the search becomes a soft
 * pill, and the cart moves into the bottom nav bar. The bar's *colour* is NOT
 * set here: "Merged, purple bar" inherits the default purple nav from
 * header.css untouched; "Merged, light bar" repaints it white in
 * header-light.css (loaded on top of this file).
 *
 * The one exception is the cart-on-purple treatment at the foot of this file,
 * scoped to `j2e-nav-purple`: the cart never sits in the bar in the default
 * style, so header.css has no rules for a cart on a purple bar — they live here.
 */

/* ---------------------------------------------------------------------------
   Inline top-bar cluster — lives in the brand-row aside, above the contact
   links. Strip the bar chrome: transparent, dark links, compact padding. The
   sub-menu/dropdown rules from header.css still apply via the shared classes.
   --------------------------------------------------------------------------- */

body.j2e-header-merged .j2e-header-aside {
	/* Fill the brand row's height (set by the logo) so the cluster can pin to
	   the row's top edge while the contact list centers in the space below. */
	align-self: stretch;
	align-items: flex-end;
	text-align: right;
    padding-top: 1.5rem;
}

body.j2e-header-merged .j2e-header-aside .j2e-contact {
	/* Auto margins center the contact list in the leftover space under the
	   cluster (they beat the aside's justify-content / align-items). */
	margin: auto;
}

body.j2e-header-merged .j2e-top-bar--inline {
	flex: none; /* stay pinned at the aside's top; the contact's auto margins do the centering */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem 0.75rem;
	background-color: transparent;
	color: var(--j2e-text);
}

/* Dark links on the white brand row; hover mirrors the light dropdown treatment
   (surface fill + purple text) instead of the bar's purple fill. */
body.j2e-header-merged .j2e-top-bar--inline a {
	color: var(--j2e-text);
	padding: 0.25rem 0.45rem;
}

body.j2e-header-merged .j2e-top-bar--inline .j2e-lang-switcher a:hover,
body.j2e-header-merged .j2e-top-bar--inline .j2e-lang-switcher a:focus,
body.j2e-header-merged .j2e-top-bar--inline .j2e-top-menu__list > li > a:hover,
body.j2e-header-merged .j2e-top-bar--inline .j2e-top-menu__list > li > a:focus,
body.j2e-header-merged .j2e-top-bar--inline .j2e-top-menu__list > li:hover > a,
body.j2e-header-merged .j2e-top-bar--inline .j2e-top-menu__list > li:focus-within > a {
	color: var(--j2e-purple);
	background-color: var(--j2e-surface);
}

body.j2e-header-merged .j2e-top-bar--inline .j2e-lang-switcher .is-active > a {
	color: var(--j2e-text);
}

/* The cluster hugs the header's right edge, so dropdown panels open leftward
   (header.css only right-aligns them inside .j2e-top-bar__right). */
body.j2e-header-merged .j2e-top-bar--inline .j2e-top-menu .sub-menu,
body.j2e-header-merged .j2e-top-bar--inline .j2e-lang-switcher--dropdown .j2e-lang-switcher__menu {
	left: auto;
	right: 0;
}

/* ---------------------------------------------------------------------------
   Search pill — soft variant (reference: screenshots/personal/img_3.png).
   The default heavy 2px dark border would be the loudest element on the white
   brand row, so it softens to a hairline edge on a faint surface fill, with a
   muted icon. The focus-within purple border (header.css) still signals the
   active state; roomier padding gives the taller pill from the reference.
   --------------------------------------------------------------------------- */

body.j2e-header-merged .j2e-search {
	background-color: var(--j2e-surface-subtle);
	border: 1px solid var(--j2e-border);
}

body.j2e-header-merged .j2e-search .j2e-search__field {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

body.j2e-header-merged .j2e-search__submit {
	color: var(--j2e-muted);
}

body.j2e-header-merged .j2e-search__submit:hover,
body.j2e-header-merged .j2e-search__submit:focus {
	color: var(--j2e-purple);
}

/* ---------------------------------------------------------------------------
   Bar height — both merged styles use the slightly taller bar (the default
   purple style stays at header.css's 45px). This is structure, not colour, so
   it is shared; header-light.css only repaints the bar, it does not resize it.
   --------------------------------------------------------------------------- */

body.j2e-header-merged .main-navigation {
	--j2e-nav-height: 50px;
}

/* ---------------------------------------------------------------------------
   Cart pulled into the bottom bar's right edge (rendered in both merged styles
   — inc/header/layout.php just2euro_render_nav_cart). Layout only; the colour
   that reads on each bar is set per-style (light bar: header.css's dark icon +
   purple total already reads; purple bar: the j2e-nav-purple block below).
   --------------------------------------------------------------------------- */

body.j2e-header-merged .j2e-nav-cart {
	display: flex;
	align-items: center;
	margin-left: auto;
    padding-right: 20px;
}

/* GP's nav link rules force `display: block` on the cart link, which drops the
   flex centering of icon + total — re-assert the flex layout at this (higher)
   specificity and center it in the bar height. */
body.j2e-header-merged .j2e-nav-cart .j2e-cart-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--j2e-nav-height);
}

/* Show the count badge even at zero, matching the reference. Scoped to the bar,
   so the default style keeps hiding the empty-cart badge in the brand row. */
body.j2e-header-merged .j2e-nav-cart .j2e-cart-link__count.is-zero {
	display: inline-flex;
}

/* ---------------------------------------------------------------------------
   Cart on the purple bar ("Merged, purple bar" only — body.j2e-nav-purple).
   In the default style the cart lives in the white brand row, so header.css
   paints it dark icon + purple total. Here it rides in the purple bottom bar,
   where that treatment vanishes — flip it to white to match the nav links, and
   invert the count chip to a white badge with purple text.
   --------------------------------------------------------------------------- */

body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link,
body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link:hover,
body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link:focus {
	color: var(--j2e-nav-text);
}

body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link__total,
body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link__total .amount {
	color: var(--j2e-nav-text);
}

body.j2e-nav-purple .j2e-nav-cart .j2e-cart-link__count {
	color: var(--j2e-purple);
	background-color: var(--j2e-bg);
	border-color: var(--j2e-purple);
}

/* ---------------------------------------------------------------------------
   Tablet band (769–1024px) — above GP's 768px mobile rules but too narrow to
   fit logo + search + the inline aside on one row (the aside wraps awkwardly to
   the far right). Lift the aside into its own full-width utility row above the
   brand row: contact links left, the menu/account/language cluster right. Logo
   and search then share the row below, with the purple nav beneath as usual.
   --------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {

    .inside-header {
        gap: 0;
    }

	body.j2e-header-merged .j2e-header-aside {
		order: -1;          /* lift above the logo + search row */
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-top: 0;
		text-align: left;
	}

	/* Undo the desktop auto-centering so contact pins to the left edge. */
	body.j2e-header-merged .j2e-header-aside .j2e-contact {
		order: -1;          /* contact on the left, cluster on the right */
		margin: 0;
		justify-content: flex-start;
	}
}