/* ==========================================================================
   NC Mega Menu — theme navigation layer
   ==========================================================================

   Everything else this plugin ships styles ITS OWN markup (.nc-mm, .nc-brands,
   .nc-cards, .nc-hero). This file is the one exception: it styles the theme's
   nav-menu markup, because the generated categories menu is rendered by the
   theme's nav widget, not by ours.

   Why it lives here and not in a child theme
   ------------------------------------------
   It used to live in xstore-child/style.css. That worked while the child theme
   was active and vanished the moment the theme changed — the plugin's own menu
   styling survived, these rules did not. Shipping them with the plugin is what
   makes them outlive a theme switch, a theme update, or a child theme being
   deactivated.

   The honest limit
   ----------------
   The file travels with the plugin, but the SELECTORS are XStore's markup
   (.etheme-elementor-nav-menu, .nav-sublist-dropdown, .elementor-location-header).
   On a theme that is not XStore this file loads and matches nothing — which is
   why the enqueue is gated on the active template. Making the look itself
   theme-independent is a different job: render the categories menu with the
   plugin's own widget instead of the theme's.

   Load order
   ----------
   The plugin's main stylesheet is registered at wp_enqueue_scripts priority 9,
   so it prints BEFORE every XStore sheet (measured: nc-mega-menu.css at link 5,
   xstore.min.css at 7, general-all.min.css at 10). At equal specificity XStore
   would win, which is why these rules are a separate file enqueued at priority
   1100 with the theme's handles as dependencies. The child theme never needed
   !important for the same reason — it loaded last.

   Scoping
   -------
   Every selector carries body.nc-theme-menu. The class is added by the same
   predicate that decides the enqueue, so the file is never on the page without
   it. It buys a specificity step on top of the load order, and it makes "this
   file only acts when the plugin says so" a property the gate can check rather
   than a promise.
   ========================================================================== */

body.nc-theme-menu {
	/* The four numbers that actually get tuned. Values are the ones measured
	   and signed off on the live store — changing a number here is the whole
	   edit, no rule below needs touching. */
	--nc-dd-radius:      10px;   /* dropdown corner radius              */
	--nc-dd-col-height: 200px;   /* column height before the list wraps */
	--nc-dd-max-width: 1160px;   /* hard ceiling on dropdown width      */
	--nc-dd-art-size:    93px;   /* corner artwork width                */

	/* Kept in step with --nc-dd-art-size on purpose: this is the clearance
	   that stops links running underneath the artwork. Enlarge the artwork
	   without enlarging this and the last column sits on top of it. */
	--nc-dd-art-clearance: 100px;
}

/* Restricted to the horizontal top-level nav. The same .nav-sublist-dropdown
   class is reused by the mobile off-canvas menu, and a 200px multi-column box
   destroys it. */
body.nc-theme-menu .etheme-elementor-nav-menu.horizontal > li > .nav-sublist-dropdown {

	/* XStore's own rule reads this variable, so there is no override fight,
	   and it rounds the inner list's first and last rows for free. */
	--et-sublist-border-radius: var(--nc-dd-radius, 10px);

	/* "As wide as the content, plus clearance" without calc-size(), which is
	   Chromium-only — no Safari, no Firefox, roughly 69% of users worldwide.
	   Measured identical to the calc-size() version: 474px vs 473.56px, and
	   better, because the clearance is real padding rather than a computed
	   width nothing else can see. */
	width: max-content;
	max-width: min(calc(100vw - 2rem), var(--nc-dd-max-width, 1160px));
	padding-inline-end: var(--nc-dd-art-clearance, 100px);

	overflow: hidden;

	/* Placement and size only. XStore prints a background-image rule of its own
	   per menu item — `.menu-item-<id> .nav-sublist-dropdown`, 135 of them — so
	   declaring background-image here would flatten every one of them to the
	   same picture. */
	background-repeat: no-repeat;
	background-size: var(--nc-dd-art-size, 93px) auto;
	background-position: bottom right;
}

/* background-position has no logical form, so RTL needs an explicit flip.
   dir="rtl" sits on <html>, not on <body> (measured on /ar/), so the scoping
   class goes AFTER the attribute selector — putting it first would never
   match. */
html[dir="rtl"] body.nc-theme-menu .etheme-elementor-nav-menu.horizontal > li > .nav-sublist-dropdown {
	background-position: bottom left;
}

body.nc-theme-menu .etheme-elementor-nav-menu.horizontal > li > .nav-sublist-dropdown > .container {
	margin-inline: 0;
	max-width: none;
	overflow-x: auto;
}

/* Multi-column list: raise --nc-dd-col-height for fewer, taller columns. */
body.nc-theme-menu .etheme-elementor-nav-menu.horizontal > li > .nav-sublist-dropdown > .container > ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	max-height: var(--nc-dd-col-height, 200px);
}

body.nc-theme-menu .etheme-elementor-nav-menu.horizontal > li > .nav-sublist-dropdown > .container > ul > li {
	width: auto;
}

/* The last items sit near the end of the row, and a wide dropdown anchored to
   their start edge runs off screen. Header only: the footer nav is about 350px
   wide and flipping its dropdowns pushes them off the opposite edge — measured,
   not assumed. */
body.nc-theme-menu .elementor-location-header .etheme-elementor-nav-menu.horizontal > li:nth-last-child(-n+4) > .nav-sublist-dropdown {
	inset-inline-start: auto;
	inset-inline-end: 0;
}