/**
 * Account CTA: style the cta-account menu item as a button and its dropdown.
 * Scoped to primary header menu only. Does not affect other menu items.
 * Brand teal matches Search / Open store buttons (#0891b2).
 */

/* ---------- Variables ---------- */
#site-navigation .primary-menu-container .cta-account,
#site-navigation .primary-menu-container li.cta-account {
	--account-cta-bg: #0891b2;
	--account-cta-bg-hover: #0e7490;
	--account-cta-text: #ffffff;
	--account-cta-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
	--account-cta-radius: 9999px;
	--account-dropdown-bg: #ffffff;
	--account-dropdown-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
	--account-dropdown-radius: 12px;
	--account-dropdown-item-padding: 12px 14px;
	--account-dropdown-item-hover: #f1f5f9;
}

/* ---------- Desktop: Account link as CTA button ---------- */
@media screen and (min-width: 1025px) {
	/* Positioning context so dropdown aligns to this item’s right edge */
	/* Push Account to the right (same approach as Sign In / Sign Up) */
	#site-navigation .primary-menu-container > ul > li.cta-account,
	.site-header li.cta-account {
		position: relative;
		margin-left: 250px !important;
	}

	#site-navigation .primary-menu-container > ul > li.cta-account > a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 0.35em;
		padding: 0.5em 1rem !important;
		min-height: 40px;
		background: var(--account-cta-bg) !important;
		color: var(--account-cta-text) !important;
		border: none !important;
		border-radius: var(--account-cta-radius);
		box-shadow: var(--account-cta-shadow);
		font-weight: 600;
		text-decoration: none !important;
		transition: background-color 0.2s ease, box-shadow 0.2s ease;
	}

	#site-navigation .primary-menu-container > ul > li.cta-account > a:hover,
	#site-navigation .primary-menu-container > ul > li.cta-account > a:focus {
		background: var(--account-cta-bg-hover) !important;
		color: var(--account-cta-text) !important;
		box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
	}

	/* Caret icon (::after) */
	#site-navigation .primary-menu-container > ul > li.cta-account > a::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.2em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-1px);
		vertical-align: middle;
	}

	/* If Kadence wraps title in .nav-drop-title-wrap, ensure caret stays in flow */
	#site-navigation .primary-menu-container > ul > li.cta-account > a .nav-drop-title-wrap {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
	}

	/* ---------- Dropdown panel: right-aligned with Account button ---------- */
	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu {
		background: var(--account-dropdown-bg) !important;
		border: none !important;
		border-radius: var(--account-dropdown-radius);
		box-shadow: var(--account-dropdown-shadow);
		padding: 0.5rem 0 !important;
		min-width: 180px;
		width: max-content;
		/* Align dropdown’s right edge with the Account button’s right edge */
		left: auto !important;
		right: 0 !important;
		margin-top: 0.35rem;
		margin-right: 0;
		transform-origin: top right;
	}

	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu li,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu li {
		display: block;
		width: 100%;
		border: none;
		margin: 0;
		padding: 0;
	}

	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu li a,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu li a {
		display: block;
		padding: var(--account-dropdown-item-padding) !important;
		color: #334155 !important;
		text-decoration: none !important;
		background: transparent !important;
		border-radius: 0;
		transition: background-color 0.15s ease;
	}

	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu li a:hover,
	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu li a:focus,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu li a:hover,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu li a:focus {
		background: var(--account-dropdown-item-hover) !important;
		color: #0f172a !important;
	}

	/* Optional separator between items */
	#site-navigation .primary-menu-container > ul > li.cta-account .sub-menu li + li,
	#site-navigation .primary-menu-container > ul > li.cta-account ul.sub-menu li + li {
		border-top: 1px solid #e2e8f0;
	}
}

/* ---------- Mobile: keep Account in menu, styled for touch ---------- */
@media screen and (max-width: 1024px) {
	/* Mobile drawer: Account item as CTA-style link (Kadence uses .mobile-navigation inside #mobile-drawer) */
	#mobile-drawer .main-navigation li.cta-account > a,
	#mobile-drawer .mobile-navigation li.cta-account > a,
	#mobile-drawer .drawer-navigation li.cta-account > a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
		padding: 0.6em 1em !important;
		font-weight: 600;
		background: var(--account-cta-bg, #0891b2) !important;
		color: var(--account-cta-text, #fff) !important;
		border-radius: 8px;
		text-decoration: none !important;
	}

	#mobile-drawer .main-navigation li.cta-account > a:hover,
	#mobile-drawer .main-navigation li.cta-account > a:focus,
	#mobile-drawer .mobile-navigation li.cta-account > a:hover,
	#mobile-drawer .mobile-navigation li.cta-account > a:focus,
	#mobile-drawer .drawer-navigation li.cta-account > a:hover,
	#mobile-drawer .drawer-navigation li.cta-account > a:focus {
		background: var(--account-cta-bg-hover, #0e7490) !important;
		color: #fff !important;
	}

	/* Mobile submenu items: clean list, tappable */
	#mobile-drawer .main-navigation li.cta-account .sub-menu a,
	#mobile-drawer .main-navigation li.cta-account ul.sub-menu a,
	#mobile-drawer .mobile-navigation li.cta-account .sub-menu a,
	#mobile-drawer .mobile-navigation li.cta-account ul.sub-menu a {
		min-height: 44px;
		padding: 0.5em 1em 0.5em 1.5em !important;
		display: flex;
		align-items: center;
	}
}