/**
 * MON PORTE — Header Polish (production, header scope only).
 *
 * Architecture: native Flatsome controls stay authoritative for icon
 * shapes, header heights, colors and typography — including the entire
 * Header Bottom navigation (Nav Size, Nav Spacing, Nav Height,
 * Uppercase, nav colors). This layer only fine-tunes sizing and spacing
 * through composable custom properties:
 *
 *   --mp-header-icon-size     icon glyph size (all action icons)
 *   --mp-header-action-gap    uniform gap on every action group
 *   --mp-header-padding-y     vertical padding inside main header
 *                             (composes with native header height)
 *   --mp-topbar-padding-y     vertical padding inside top bar
 *                             (composes with native top-bar height)
 *   --mp-header-icon-opacity  default icon opacity before hover
 *
 * Dimensions come from the "MON PORTÉ — Header Fine Tuning" Customizer
 * section (inc/customizer.php), delivered as :root custom properties.
 * The fallbacks below match the Customizer defaults so the header is
 * correct even before the owner saves anything.
 *
 * Scope: #top-bar, #masthead and #wide-nav — all children of
 * header#header. No body, footer, homepage, cart-page or checkout-page
 * rules. No colors (except inherited currentColor) or typography: those
 * stay in Flatsome Theme Options.
 */

/* ------------------------------------------------------------------ */
/* 0. Customizer fallbacks (= Customizer defaults) + private tokens   */
/* ------------------------------------------------------------------ */

:root {
	--mp-header-icon-size: 20px;
	--mp-header-action-gap: 12px;
	--mp-header-padding-y: 0px;
	--mp-topbar-padding-y: 0px;
	--mp-header-icon-opacity: 0.85;
}

#header {
	--mp-hp-ease: 200ms ease;
	--mp-hp-line: rgba(31, 30, 27, 0.08);
}

/* ------------------------------------------------------------------ */
/* 1. Top bar — quiet, compact, premium                                */
/* ------------------------------------------------------------------ */

/* Composable with the native top-bar height: only adds breathing room. */
#top-bar .flex-row {
	padding-top: var(--mp-topbar-padding-y);
	padding-bottom: var(--mp-topbar-padding-y);
}

#top-bar .nav.nav-small > li > a,
#top-bar .nav.nav-small > li.html {
	font-size: 10.5px;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

#top-bar .social-icons a {
	font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* 2. Main header rhythm                                               */
/* ------------------------------------------------------------------ */

/* Composable with the native header height: only adds breathing room. */
#masthead .header-inner {
	padding-top: var(--mp-header-padding-y);
	padding-bottom: var(--mp-header-padding-y);
}

#masthead > .container {
	padding-left: 32px;
	padding-right: 32px;
}

/* Uniform rhythm between triggers, every action group.
   (ul.nav is display:flex in Flatsome, so gap applies.) */
#masthead .header-nav-main.nav-left,
#masthead .header-nav-main.nav-right,
#masthead .mobile-nav {
	column-gap: var(--mp-header-action-gap);
}

#masthead .header-nav-main .header-divider {
	display: none;
}

/* ------------------------------------------------------------------ */
/* 3. Icon triggers — alignment, interaction                           */
/* ------------------------------------------------------------------ */

/* Fixed 44px accessible target (constant, not owner-tuned). */
#masthead .header-nav-main > li > a.nav-top-link,
#masthead .mobile-nav > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	opacity: var(--mp-header-icon-opacity);
	transition: opacity var(--mp-hp-ease);
}

#masthead .header-nav-main > li > a.nav-top-link:hover,
#masthead .mobile-nav > li > a:hover,
#masthead .header-nav-main > li.current-dropdown > a.nav-top-link {
	opacity: 1;
}

#masthead a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* 4. Native icon sizing — shape never forced here                     */
/* ------------------------------------------------------------------ */

/* Search trigger glyph: size only, Flatsome's chosen glyph stays. */
#masthead .header-search > a > .icon-search {
	font-size: var(--mp-header-icon-size);
	line-height: 1;
	top: 0;
}

/* Account glyph, only when the owner enabled a native icon style.
   Text labels are never sized or hidden here. */
#masthead .account-item > a > i {
	font-size: var(--mp-header-icon-size);
	line-height: 1;
}

/* Native cart glyph scales with this. Count badge, totals, title and
   dropdown/drawer behavior stay native (WooCommerce fragments intact). */
#masthead .cart-item .cart-icon {
	position: relative;
	display: inline-block;
	font-size: var(--mp-header-icon-size);
}

/* Mobile menu glyph: size only. */
#masthead .mobile-nav .icon-menu {
	font-size: var(--mp-header-icon-size);
	line-height: 1;
}

/* Keep the search dropdown form itself untouched. */

/* ------------------------------------------------------------------ */
/* 4b. MON PORTÉ custom SVG icons (only rendered when a custom set is  */
/*     selected via the flatsome_icon filter; explicit-size boxes, no  */
/*     pseudo-element masking, colored by inherited currentColor).     */
/* ------------------------------------------------------------------ */

.mp-header-icon-svg {
	width: var(--mp-header-icon-size, 20px);
	height: var(--mp-header-icon-size, 20px);
	display: inline-block;
	vertical-align: middle;
	flex: none;
}

/* ------------------------------------------------------------------ */
/* 5. Bottom navigation — Flatsome owns it fully (Nav Size, Spacing,   */
/*    Height, Uppercase, colors). Only structural hairlines here.      */
/* ------------------------------------------------------------------ */

#wide-nav {
	border-top: 1px solid var(--mp-hp-line);
	border-bottom: 1px solid var(--mp-hp-line);
}

/* ------------------------------------------------------------------ */
/* 8. MON PORTÉ nav styles — static decoration only, top-level links   */
/*    only. Active when the bottom nav UL carries nav-mp-* (Flatsome   */
/*    emits nav-{value} blindly, so no parent changes were needed).    */
/*    Retired animated values (nav-mp-editorial/minimal/marker/quiet)  */
/*    are mapped to the same static visuals so a previously saved      */
/*    value never renders broken. Native Nav Size/Spacing/Height/      */
/*    Uppercase/colors stay authoritative: no font, size, spacing,     */
/*    transform or color declarations below — only currentColor        */
/*    indicators, opacity and em/px geometry. No transforms, no        */
/*    animation, no motion of any kind. Dropdown, mega-menu and        */
/*    mobile menus are never matched (child combinators under          */
/*    #wide-nav only). Anchors are inline-flex + vertically centered,  */
/*    so em offsets from the box center track the text across any      */
/*    Nav Size or Nav Height.                                          */
/* ------------------------------------------------------------------ */

#wide-nav ul.header-bottom-nav.nav-mp-clean > li > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li > a.nav-top-link {
	position: relative;
}

/* Style 1 — Clean Editorial: static 1px underline (~65%, centered,
   close under the text). Appears instantly on hover/focus and stays on
   the current page. Hover color itself remains native Flatsome. */
#wide-nav ul.header-bottom-nav.nav-mp-clean > li > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: 17.5%;
	bottom: calc(50% - 0.7em);
	width: 65%;
	height: 1px;
	background-color: currentColor;
	display: none;
}

#wide-nav ul.header-bottom-nav.nav-mp-clean > li > a.nav-top-link:hover::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li > a.nav-top-link:focus-visible::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li > a.nav-top-link:hover::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li > a.nav-top-link:focus-visible::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li > a.nav-top-link:hover::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li > a.nav-top-link:focus-visible::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li > a.nav-top-link:hover::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li > a.nav-top-link:focus-visible::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li.active > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li.current-menu-item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li.current-menu-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li.current_page_item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-clean > li.current-page-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li.active > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li.current-menu-item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li.current-menu-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li.current_page_item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-editorial > li.current-page-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li.active > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li.current-menu-item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li.current-menu-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li.current_page_item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-minimal > li.current-page-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li.active > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li.current-menu-item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li.current-menu-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li.current_page_item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-marker > li.current-page-ancestor > a.nav-top-link::after {
	display: block;
}

/* Style 2 — Fine Rule: static full-width 1px rule below the text,
   subtle via the pseudo-element's own opacity. Appears instantly on
   hover/focus, stays on the current page. Sits lower than Clean. */
#wide-nav ul.header-bottom-nav.nav-mp-rule > li > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(50% - 1.05em);
	width: 100%;
	height: 1px;
	background-color: currentColor;
	opacity: 0.55;
	display: none;
}

#wide-nav ul.header-bottom-nav.nav-mp-rule > li > a.nav-top-link:hover::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li > a.nav-top-link:focus-visible::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li.active > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li.current-menu-item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li.current-menu-ancestor > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li.current_page_item > a.nav-top-link::after,
#wide-nav ul.header-bottom-nav.nav-mp-rule > li.current-page-ancestor > a.nav-top-link::after {
	display: block;
}

/* Style 3 — Quiet Contrast: muted idle, full on hover/focus/current.
   No shape, no motion, no weight change. */
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li > a.nav-top-link {
	opacity: 0.58;
}

#wide-nav ul.header-bottom-nav.nav-mp-quiet > li > a.nav-top-link:hover,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li > a.nav-top-link:focus-visible,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li.active > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li.current-menu-item > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li.current-menu-ancestor > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li.current_page_item > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-quiet > li.current-page-ancestor > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li > a.nav-top-link:hover,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li > a.nav-top-link:focus-visible,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li.active > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li.current-menu-item > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li.current-menu-ancestor > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li.current_page_item > a.nav-top-link,
#wide-nav ul.header-bottom-nav.nav-mp-contrast > li.current-page-ancestor > a.nav-top-link {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* 6. Mobile (Flatsome medium breakpoint: < 850px)                     */
/* ------------------------------------------------------------------ */

@media (max-width: 849px) {
	#top-bar .nav.nav-small > li > a,
	#top-bar .nav.nav-small > li.html {
		font-size: 10px;
	}

	#masthead > .container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ------------------------------------------------------------------ */
/* 7. Reduced motion                                                   */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#masthead .header-nav-main > li > a.nav-top-link,
	#masthead .mobile-nav > li > a {
		transition: none;
	}
}