/**
 * CarmelaShop — storefront primary nav dropdown polish.
 *
 * Makes the Shop dropdown consistent with the header nav (uppercase DM Sans,
 * matching letter-spacing/weight) and replaces the theme's thin transparent
 * border + transparent background with a clean solid borderless panel.
 *
 * Loaded at wp_enqueue_scripts priority 20 (after the theme's default-priority
 * stylesheet) and scoped to .main-navigation so it never leaks into the footer
 * or other nav instances.
 */

.main-navigation ul ul,
.main-navigation ul.sub-menu,
.main-navigation ul.children {
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Remove any item divider lines so the panel reads truly borderless. */
.main-navigation ul ul li,
.main-navigation ul.sub-menu li {
	border: 0;
}

/* Match the header typography (uppercase DM Sans) AND remove the per-item
   divider lines + per-link background so the dropdown reads as one continuous
   panel instead of stacked buttons. The divider was a border-bottom on each
   <a>; the link background is dropped so the panel background shows through. */
.main-navigation ul ul li a,
.main-navigation ul.sub-menu li a,
.main-navigation ul.children li a {
	border: 0;
	background: transparent;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
	color: #1e1e1e;
}

.main-navigation ul ul li a:hover,
.main-navigation ul.sub-menu li a:hover,
.main-navigation ul.children li a:hover {
	color: #000000;
}

/* ==========================================================================
   Sticky header — natural CSS position:sticky instead of the theme's fixed snap.
   The theme JS (custom.js ~211) toggles .is-sticky as soon as scrollY > 0, and
   .sticky-header.is-sticky (theme style.css ~7482) sets position: fixed !important
   — that yanks the inner wrapper out of flow the instant you scroll one pixel,
   so the parent collapses, page content jumps ~62px, and the header snaps to
   full fixed size. That reads as the "enlarge/zoom" artifact. (There is no
   scale/animation code — verified across theme CSS and JS; only the preloader
   #loader uses @keyframes scale, and it is unrelated to the header.)

   Fix: pin #masthead itself via position:sticky (stays in normal flow — no
   collapse, no jump, no enlarge) and neutralize .is-sticky so the JS class
   toggle has zero visual effect. Ancestors verified clean: #page and body have
   no overflow or transform that would break position:sticky.
   ========================================================================== */
#masthead {
	position: sticky;
	top: 0;
	z-index: 1000;
}
body.admin-bar #masthead {
	top: 32px;
}
@media (max-width: 900px) {
	body.admin-bar #masthead {
		top: 46px;
	}
}

/* Neutralize the theme's .is-sticky so toggling it (at scrollY > 0) changes
   nothing — #masthead's position:sticky handles the pinning instead. */
.site-header .sticky-header.is-sticky {
	position: static !important;    /* override theme position: fixed !important */
	left: auto;
	width: auto;
	padding: 0;                     /* match the at-rest wrapper padding (theme adds 10px) */
	background: transparent;        /* header bg comes from .header-main-wrapper (#fff) */
	transition: none;
}